Category: Web Design and Development

  • How To Set Up an NGINX Reverse Proxy for Node.js, Python & Go Apps

    How To Set Up an NGINX Reverse Proxy for Node.js, Python & Go Apps

    There is a significant difference between an application that runs on localhost:3000 and one that is ready for public traffic. 

    When it is time to go live, you need SSL, a custom domain, and a secure way to route traffic to your backend. If you are like most developers, you probably grab the top NGINX reverse proxy snippet from Stack Overflow, paste it into your server, and call it a day.

    Then the weird bugs start.

    Your real-time WebSockets silently disconnect every 60 seconds. You check your application logs, only to realize every single visitor’s IP address is logged as a Cloudflare server or your own local proxy’s IP. Then a user tries to upload a basic 2MB image and gets slammed with a frustrating 413 Request Entity Too Large error.

    We have all been there.

    Instead of relying on incomplete configuration snippets, we will show you a more complete NGINX reverse proxy setup that you can adapt to your application and server environment. This will help you prevent common WebSocket timeout problems, preserve the correct client connection information, and terminate SSL cleanly before forwarding requests to your application. 

    What an NGINX Reverse Proxy Actually Does (And Why You Need One)

    If you are using NGINX for the first time, you can read our NGINX configuration basics guide first. But in short, a reverse proxy sits in front of your application server (like Node, Python, or Go) and intercepts all incoming internet traffic.

    This proxy handles several important tasks, such as:

    SSL termination, port consolidation, and HTTP/2 to the client

    When people visit a website, they expect secure https:// traffic on port 443 served via modern HTTP/2 protocols. Your application is probably served via plain HTTP/1.1 on port 3000. 

    In this setup, NGINX “terminates” the SSL connection, meaning it handles the heavy lifting of decryption and HTTP/2 multiplexing, and passes plain, unencrypted traffic to your app locally. This will allow you to centralize your certificate management.

    Why Put NGINX in Front of Your Application? 

    You can technically configure a Node.js or Go application to listen directly on port 443 and manage its own TLS certificates. In many production environments, it is simpler to place NGINX in front of the application instead.

    NGINX can handle TLS termination, connection management, request limits, compression, logging, and other web-server responsibilities while your application remains focused on handling application requests.

    Reverse proxy vs forward proxy vs load balancer

    When you are deciding between web servers and reverse proxies, you need to understand the terminology. A forward proxy sits between clients and external services and sends requests on the clients’ behalf. A reverse proxy sits in front of one or more backend servers and receives requests on their behalf. NGINX can also act as a load balancer by distributing requests across multiple backend instances. 

    Before You Configure the Reverse Proxy

    Before setting up NGINX, make sure:

    • Your application is already running.
    • You know the local port or Unix socket used by the application.
    • The application is not unnecessarily exposed on a public interface.
    • Your domain points to the server.
    • Ports 80 and 443 are reachable if you are serving the application publicly.
    • Your SSL certificate is already available if you use the HTTPS configuration shown below.

    You can test a TCP-based application locally before configuring NGINX. For example:

    curl http://127.0.0.1:3000

    If the application does not respond locally or if you see an error message saying “Failed to connect”, then you must fix the application or service first. NGINX cannot proxy successfully to an upstream service that is not running.

    Check application accessible via CURL

    Example NGINX Reverse Proxy Configuration 

    Most tutorials give you only the basic proxy configuration and leave you to handle features such as WebSockets, client IP forwarding, upload limits, and timeouts separately. The following example provides a more complete starting point that you can adapt to your application and server environment. 

    Example HTTPS Reverse Proxy Configuration 

    The map directive must be defined in the NGINX http context, outside the server block. The server block can then use the resulting $connection_upgrade variable when forwarding WebSocket requests. 

    map $http_upgrade $connection_upgrade { 
        default upgrade; 
        '' close; 
    } 
    server {
        listen 443 ssl;
        http2 on;
        server_name myapp.com;
        # SSL Configuration
        ssl_certificate /etc/letsencrypt/live/myapp.com/fullchain.pem;
        ssl_certificate_key /etc/letsencrypt/live/myapp.com/privkey.pem;
        # Example upload limit
        client_max_body_size 50M; 
        location / {
            # Proxy pass to your application
            proxy_pass http://127.0.0.1:3000;
    
    
            # Support HTTP/1.1 and WebSocket upgrades 
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection $connection_upgrade;
    
    
            # Forward the original host and client connection details
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;
    
    
            # Connection timeouts
            proxy_read_timeout 300;
            proxy_send_timeout 300; 
        }
    }

    If NGINX receives traffic directly from the client, $remote_addr contains the client’s IP address. If your site sits behind another proxy or CDN such as Cloudflare, you must also configure NGINX to trust that proxy and restore the original client IP. Otherwise, $remote_addr will contain the proxy’s IP address instead.

    If you use RunCloud, you can create and manage reverse proxy configurations from the RunCloud dashboard rather than manually editing generated NGINX configuration files.

    Configure Multiple Upstream Application Instances 

    If you run multiple instances of your application, you can define an upstream block outside the server block. NGINX can then distribute requests across those application instances.

    upstream my_nodejs_app {
        server 127.0.0.1:3000;
        server 127.0.0.1:3001;
    }

    You would then change your location block to use proxy_pass http://my_nodejs_app.

    Reverse Proxy a Node.js App (with PM2)

    When you deploy a long-running Node.js application on a VPS, you will usually run it under a process manager or service manager so that it can restart after a crash or server reboot. PM2 is a common option. 

    Run the Node.js App with PM2 on Port 3000 

    For an application that accepts a -p port argument, you could start it with PM2 on port 3000:

    pm2 start server.js --name "my-app" -- -p 3000

    The exact command depends on how your application accepts its host and port settings.

    The proxy_pass + headers config for Node

    Many Node.js frameworks use the Host and X-Forwarded-Proto headers when determining the original hostname and protocol. Forwarding these headers allows the application to identify that the original client connection used HTTPS even though NGINX communicates with the application over local HTTP.

    Depending on your framework, you may also need to configure the application to trust the reverse proxy before it uses forwarded headers.

    If you manage the application with RunCloud, you can create the reverse proxy from the RunCloud dashboard. Set the web application’s stack to Native NGINX + Custom Config, then use the predefined Proxy configuration under NGINX Config and set it to the port used by your application. 

    Zero-downtime reload pattern

    After changing a standard NGINX configuration, test the configuration before reloading the service:

    nginx -t && systemctl reload nginx

    A graceful reload applies valid configuration changes without unnecessarily interrupting active connections.

    Check NGINX config syntax

    If your server is managed by RunCloud, use the NGINX Config tools in the RunCloud dashboard to configure web applications. RunCloud uses its own NGINX package and configuration structure, so generic nginx service commands and paths may not match a RunCloud-managed server. 

    Reverse Proxy a Python App 

    Python applications handle concurrency differently than Node.js, usually relying on WSGI (Gunicorn) or ASGI (Uvicorn) servers.

    Gunicorn on a Unix socket vs TCP port

    Gunicorn can listen either on a local TCP port, such as 127.0.0.1:8000, or on a Unix socket. Unix sockets can be useful when NGINX and Gunicorn run on the same server because access can be controlled through filesystem permissions.

    For example:

    gunicorn --bind unix:/tmp/myapp.sock wsgi:app

    The NGINX upstream config for Unix sockets

    To point NGINX to a Unix socket instead of a TCP port, specify the socket path using NGINX’s Unix-domain socket syntax:

    proxy_pass http://unix:/tmp/myapp.sock:;

    Disable Proxy Buffering for Streaming Responses 

    NGINX buffers proxied responses by default. For applications that depend on incremental delivery, such as Server-Sent Events or streamed application responses, buffering can delay data reaching the client.

    You can disable proxy response buffering for the relevant location:

    proxy_buffering off;

    Reverse Proxy a Go App

    Go’s net/http package can serve HTTP traffic directly without requiring a separate web server. Placing NGINX in front of a Go application can simplify TLS termination, compression, rate limiting, logging, and other HTTP-level configuration. NGINX includes gzip support, while Brotli requires Brotli module support in the NGINX build. 

    The minimal proxy_pass for a Go binary

    If your Go application is listening on 127.0.0.1:8080, set proxy_pass to that address:

    proxy_pass http://127.0.0.1:8080;

    You can then add the required forwarding headers, timeout settings, and WebSocket configuration for your application.

    Configure WebSocket Proxying in NGINX 

    If you are running real-time applications like chat servers or automating workflows by hosting n8n behind Docker and NGINX, you need WebSockets. But WebSockets break easily behind NGINX if you miss three critical details.

    Older NGINX versions default to HTTP/1.0 when proxying HTTP requests to upstream servers. NGINX 1.29.7 and later default to HTTP/1.1.

    Explicitly setting the proxy version remains useful when you need compatibility with older NGINX installations and makes the WebSocket requirement clear:

    proxy_http_version 1.1;

    A WebSocket connection begins as an HTTP request containing an Upgrade header. NGINX needs to pass the relevant upgrade information to the upstream application.

    A reusable configuration can define the appropriate Connection value with a map:

    map $http_upgrade $connection_upgrade {

        default upgrade;

        ''      close;

    }


    Then use:

    proxy_set_header Upgrade $http_upgrade;

    proxy_set_header Connection $connection_upgrade;

    This sends Connection: upgrade only when an upgrade has been requested.

    Increase the WebSocket Read Timeout 

    The default proxy_read_timeout is 60 seconds. If the upstream server sends no data during that period, NGINX can close the connection.

    For long-lived WebSocket connections, you can increase the timeout:

    proxy_read_timeout 86400;

    This example allows up to 24 hours between successive read operations. Applications can also use WebSocket ping/pong messages or other heartbeat traffic to prevent idle connections from reaching the timeout.

    How to Set Up an NGINX Reverse Proxy in RunCloud

    If your server is managed by RunCloud, you can configure the reverse proxy from the dashboard without manually editing the generated NGINX configuration files.

    1. Log in to the RunCloud dashboard and select your server.
    2. Open Web Applications and select the application you want to configure.
    3. Open Settings and change the Web Application Stack to Native NGINX + Custom Config.
    4. Open NGINX Config and select Add a New Config.
    5. Choose Predefined Config and select the Proxy configuration.
    6. Set the proxy destination to the port used by your Node.js, Python, or Go application.
    7. Configure options such as proxy buffering or WebSocket support if your application requires them.
    8. Select Run and Debug to validate the NGINX configuration.
    9. Once the configuration passes validation, select Create Config.
    10. Test the application through its public URL or with curl.

    RunCloud recommends creating and editing custom NGINX configuration through the dashboard. Generated application configuration files should not be edited manually because RunCloud manages those files.

    Troubleshooting Common NGINX Reverse Proxy Problems

    502 Bad Gateway

    A 502 error usually means NGINX cannot connect to the upstream application.

    Check that the application is running and listening on the address or socket configured in proxy_pass.

    For a TCP-based application, test the upstream directly:

    curl http://127.0.0.1:3000

    Also, confirm that the port in proxy_pass matches the port used by the application.

    413 Request Entity Too Large

    If uploads fail with a 413 response, increase client_max_body_size to a value appropriate for your application:

    client_max_body_size 50M;

    Avoid setting a much larger limit than your application actually needs.

    WebSockets Disconnect or Fail to Connect

    Check that WebSocket upgrade headers are passed to the application and that the proxy uses HTTP/1.1 where required for compatibility.

    If connections close after periods of inactivity, review proxy_read_timeout and your application’s WebSocket heartbeat behavior.

    Redirect Loops

    If NGINX terminates HTTPS but the application believes the request arrived over HTTP, the application may repeatedly redirect the request to HTTPS.

    Make sure NGINX forwards:

    proxy_set_header X-Forwarded-Proto $scheme;

    You may also need to configure your framework to trust the reverse proxy.

    Incorrect Client IP Addresses

    If NGINX sits directly behind the client, $remote_addr represents the client address. If another proxy, such as Cloudflare, sits in front of NGINX, configure trusted proxy ranges and the appropriate real-IP header before relying on $remote_addr.

    Manage Reusable NGINX Configurations with RunCloud Templates 

    Note: Use the web application’s NGINX Config tools when configuring a reverse proxy for an individual application. NGINX Templates are useful when you want to reuse and centrally manage the same configuration across multiple applications. 

    If you manage the same NGINX rules across several web applications, repeatedly copying configuration files makes those configurations harder to maintain consistently.

    RunCloud NGINX Templates let you create reusable configuration files in your workspace and link them to multiple web applications. You can manage these templates centrally from Settings > NGINX Templates rather than manually editing each application’s configuration over SSH.

    RunCloud provides two template areas:

    • My Templates contains templates created or duplicated into your workspace.
    • Public Templates contains read-only templates provided by RunCloud and approved community members. You can duplicate a Public Template into your workspace before editing or installing it.

    This provides several benefits for server management: 

    • Centralized configuration: Link a template to multiple web applications and manage the configuration from one place.
    • Reusable templates: Create your own templates or duplicate a Public Template into your workspace as a starting point.
    • Configuration testing: Test a template against an existing web application before installing it.
    • Controlled propagation: When you update a linked template, RunCloud lets you propagate the new configuration to the selected web applications.
    • Safer deployment: RunCloud checks the NGINX configuration before applying it. If validation fails, the invalid configuration is not activated.
    RunCloud NGINX template dashboard for creating reverse proxy

    This makes NGINX Templates useful when the same configuration needs to be maintained across several applications without manually updating each one. 

    Wrapping Up

    An NGINX reverse proxy gives you a central place to handle HTTPS, route requests to your application, forward request information, and configure features such as WebSocket support and upload limits.

    The exact configuration depends on your application, whether another proxy or CDN sits in front of NGINX, and which NGINX version you are running. Testing each configuration change before applying it is therefore essential.

    RunCloud provides dashboard tools for managing NGINX configuration without manually editing generated application configuration files. You can create reverse proxy configurations, validate them before applying them, and manage reusable configurations through NGINX Templates.

    This gives you a safer way to manage reverse proxy configuration across your applications while retaining control over application-specific settings such as ports, WebSockets, buffering, and forwarded headers.

    If you want to manage your NGINX reverse proxy and web applications from a central dashboard, sign up for RunCloud and deploy your next application. 

    FAQs

    What is the difference between NGINX and Apache as a reverse proxy?

    Both NGINX and Apache can act as reverse proxies. NGINX uses an event-driven architecture and is commonly used as a dedicated reverse proxy in front of application servers. Apache supports reverse proxying through modules such as mod_proxy and offers several Multi-Processing Modules with different connection-handling models.
    The better choice depends on your existing server stack, configuration requirements, and operational preferences.

    Should I use Caddy or Traefik instead of NGINX?

    Caddy and Traefik are alternatives worth considering depending on your environment. Caddy focuses heavily on simple configuration and automatic HTTPS, while Traefik is commonly used with container and service-discovery workflows.
    NGINX remains a good choice when you need detailed control over proxying, routing, headers, caching, or load balancing.

    Why does my WebSocket disconnect every 60 seconds behind NGINX?

    NGINX uses a default proxy_read_timeout of 60 seconds. If the upstream sends no data during that period, NGINX can close the connection.
    You can increase proxy_read_timeout for long-lived WebSocket connections or use application-level ping/pong messages or other heartbeat traffic to keep the connection active.

    How do I pass the real client IP through NGINX and Cloudflare?

    If Cloudflare sits in front of NGINX, configure NGINX’s real-IP module to trust only Cloudflare’s published proxy IP ranges and use the appropriate client-IP header. This allows NGINX to replace the Cloudflare proxy address with the original visitor address before forwarding it to your application.
    Do not trust forwarded client-IP headers from arbitrary sources, because clients can otherwise supply forged values.

    Can NGINX do load balancing between multiple Node.js processes?

    Yes. NGINX can distribute traffic across multiple Node.js instances using an upstream block. The available load-balancing methods include the default round-robin behavior as well as methods such as least_conn and ip_hash.
    Choose the method according to how your application handles sessions, connection duration, and backend capacity.

    Does NGINX HTTP/2 work with the upstream backend?

    The protocol used between the client and NGINX is separate from the protocol NGINX uses to communicate with an upstream application. For normal HTTP reverse proxying, NGINX can proxy requests to HTTP upstream servers independently of whether the client connected using HTTP/2 or HTTP/3.
    If your application uses a protocol such as gRPC, use the corresponding NGINX proxy module and configuration rather than the standard HTTP proxy_pass configuration.

    What is the cleanest way to add SSL to a Node.js app?

    A common production approach is to terminate TLS at NGINX and proxy requests to the Node.js application over a local connection. This centralizes certificate management and allows the application to run without managing its own public TLS listener.
    You can obtain and renew certificates with a tool such as Certbot or use your server-management platform’s SSL tools.

  • The 11 Best Website Uptime Monitoring Tools Compared (2026)

    The 11 Best Website Uptime Monitoring Tools Compared (2026)

    Downtime costs money and credibility. For SaaS companies and online businesses, a few minutes offline can mean lost customers, broken trust, and missed revenue. That’s why choosing the right website uptime monitoring tools is more than a technical decision – it’s a business priority.

    But with dozens of options on the market, how do you know which tool gives you the reliability, features, and pricing your team needs?

    We’ve tested and compared the best website uptime monitoring tools in 2026, breaking down their core features, pricing, and use cases so you can make a confident, informed choice.

    You’ll leave with a short list that fits your budget and growth plan – and keeps your site online.

    What is Website Uptime Monitoring?

    Website uptime monitoring means checking (from multiple locations) that your site loads and works, and alerting you the moment it doesn’t.

    A monitoring service is an automated system that continuously checks your website from multiple global locations. If this service detects that your site is down, slow, or displaying an error, it quickly alerts you via email, SMS, Slack, or similar channels.

    Why Uptime Monitoring is Essential for Websites

    Launching a website isn’t enough – what matters is keeping it online, fast, and reliable every hour of the day. For SaaS businesses, uptime isn’t just about user experience – it directly affects customer retention, revenue, and SLA commitments. Here’s why uptime monitoring matters:

    Improved Website Reliability and User Trust

    When users try to visit your site and find it unavailable, their trust in your brand diminishes. A website that is frequently down appears unprofessional and unreliable. Consistent uptime builds confidence and shows users that you are a dependable business, which is important for retaining visitors and customers.

    Faster Incident Response and Reduced Downtime

    Without monitoring, the first sign of downtime often comes from frustrated customers or public complaints. By that point, you’ve already lost revenue and credibility. Uptime data helps you prove SLA compliance, report to stakeholders, and keep customer trust.

    Better SLA Compliance and Performance Tracking

    Most SaaS businesses commit to strict uptime SLAs – often 99.9% or higher. Uptime monitoring provides the data to demonstrate compliance, generate reports for stakeholders, and build trust with customers and investors. It also provides long-term performance history, helping you spot recurring issues before they escalate.

    Data-Driven Insights for Optimization

    Modern tools track more than availability – latency, page speed, and regional performance are included. For instance, if you consistently see high latency in Asia, you can add a CDN to reduce slow-region drop-offs.

    Suggested Read: Uptime Monitoring Tools: Why You Need Them, and What to Look for

    Key Metrics Tracked by Uptime Monitoring Tools

    Uptime monitoring isn’t just a simple “yes” or “no” check. These tools track several key metrics to give you a complete picture of your website’s health.

    • Uptime Percentage: This is the percentage of time your website was online and available over a specific period (e.g., 99.95% in the last 30 days). This is the headline reliability number you’ll report to leadership and clients.
    • Response Time (Latency): This measures how quickly your server responds to a request. A sudden spike in response time can be an early warning that your server is overloaded, even before it goes down. Consistently slow response times in a specific geographic area can indicate that you need to optimize your infrastructure for that region.
    • Page Load Time is the total time it takes for a webpage to fully load in a user’s browser. This metric is one of the most important factors for user experience, as slow-loading pages lead to high bounce rates. Tracking this helps you identify if a recent code change or a large image negatively impacts performance.
    • HTTP Status Code Errors (e.g., 404, 500): This tracks the error codes your server sends back. A surge in “404 Not Found” errors could indicate broken links on your site after a redesign. A “500 Internal Server Error” means your application has a serious problem that needs immediate attention.
    • SSL Certificate Status: This check ensures your website’s SSL certificate is valid and not expired. This prevents the ‘Your connection is not private’ browser warning. However, if you are using RunCloud, then RunCloud renews SSL certificates one month before expiry.

    Suggested Read: Using Dynatrace to Monitor RunCloud Servers

    Top 11 Website Uptime Monitoring Tools Compared

    ToolFree PlanCheck FrequencyKey FeaturesBest ForStarting Price (USD)
    Better StackYes – 10 monitors, 3-min checks30 sec (paid), 3 min (free)Monitoring + incident management, status pages, integrationsTeams needing integrated monitoring + incident response$24/
    UptimeRobotYes – 50 monitors, 5-min checks5 min (free), 1 min (paid)Simple setup, generous free plan, status pagesStartups, small businesses, personal projects$7–8/mo
    PingdomNo (Paid from $10/mo)1 min+Synthetic checks, RUM, transaction monitoring, diagnosticsGrowing SaaS teams needing end-to-end visibility$10/mo
    Site24x730-day trial only1 min+All-in-one: uptime, RUM, server, API monitoringTeams needing one platform for uptime, RUM, servers, and APIs$35/mo
    Oh DearNo (10-day free trial only, no credit card required)Every 1 minuteBroken link crawler, scheduled task/cron monitoring, application status pagesWeb agencies, PHP/Laravel developers, sysadmins, and SaaS founders€15/month (up to 2 sites)
    StatusCakeYes – 10 monitors, 5-min checks30 sec–5 minUptime, page speed, domain & SSL checks, status pagesAgencies or small teams needing broad coverage$15/mo
    DatadogNo (Paid per test)1 min+Synthetic monitoring, APM/logs integration, self-healing testsMedium/large SaaS with complex systems$5 per 10k API tests
    New RelicYes – 100 checks/moVaries by usageSynthetic checks linked with APM, full-stack correlationTeams already using New Relic APMConsumption-based – free tier available
    UptrendsNo (Pay-as-you-go credits)30 sec–5 minConcurrent global monitoring, transaction flows, error snapshotsTeams needing accuracy & minimal false positives$5/mo (credits)
    SematextPay-as-you-go available1 min+Uptime + API monitoring, Core Web Vitals, public/private locationsTeams needing both public & internal monitoring$29/mo
    PulseticYes – Basic uptime + status page1–5 minUptime + branded status pages, simple incident commsTeams that prioritize clear incident comms with branded status pages, startups, and agenciesFrom $9/month (Solo)

    Better Stack

    Better Stack is more than an uptime checker – it’s a full incident management and monitoring platform. For teams running SaaS products or high-traffic websites, it helps ensure issues are caught quickly, alerts reach the right person, and communication with users stays clear. With checks running as often as every 30 seconds from multiple global locations, you avoid false positives and get accurate visibility. Its incident timelines, screenshots, and integrations with tools such as Slack, Datadog, and AWS make it suitable for teams that route alerts into Slack/PagerDuty and need on-call scheduling.

    Key Features

    • 30-second multi-location checks with screenshots and detailed logs
    • Incident management tools with on-call scheduling and smart alert merging
    • Integrations with major platforms (Datadog, Prometheus, Grafana, AWS, GCP, etc.)
    • Customizable public status pages for transparent communication
    Better Stack homepage promoting its monitoring and incident response platform.

    Pricing

    • Free plan includes basic checks, alerts, and status page functionality.
    • Paid tiers (from $29/month) add faster monitoring, richer alerting, and team workflows.

    When to Choose This Tool

    Better Stack is ideal if you need more than just basic monitoring. It’s a strong fit for SaaS companies, agencies managing multiple clients, and larger projects with dedicated support teams. Its greatest strength is combining monitoring with incident response, saving time and reducing missed alerts. If you’re solo or on a tiny project, it’s more than you need.

    Suggested Read: How UptimeRobot Can Save Your Website from Downtime Disasters

    UptimeRobot

    UptimeRobot is one of the most popular website uptime monitoring tools thanks to its simplicity and generous free plan. Setup takes minutes – add a URL, and you’re done. It covers the essentials without adding complexity, and supports HTTP(s), ping, port, keyword, SSL, and heartbeat monitoring. For small businesses, personal projects, or startups, it’s a cost-effective way to stay ahead of downtime before customers notice.

    Key Features

    • Free plan with up to 50 monitors checked every 5 minutes
    • Paid plans (from $7/month) offer 60-second checks, SSL/domain expiry alerts, and longer log retention
    • Status pages (public or private) for sharing uptime performance with customers or teams
    • Alerts delivered via email, SMS, Slack, MS Teams, Telegram, and more

    Pricing

    • Free: 50 monitors, 5-minute intervals
    • Pro plans: from $7/month for 60-second checks and advanced features
    • Higher tiers include more monitors, faster checks, and enterprise-ready features
    UptimeRobot homepage showing its uptime monitoring dashboard and website performance statistics.

    When to Choose This Tool

    UptimeRobot is best suited to small businesses, personal sites, and early-stage startups that need dependable monitoring without high costs. The free plan is among the most generous available, making it a great entry point. Free checks run every 5 minutes – fine for basics, but not for mission-critical apps, so larger SaaS companies will likely need to upgrade to faster paid plans or consider a more advanced solution.

    Suggested Read: How to Reduce Cache Misses & Avoid Them: Proven Tips [FIXED]

    Pingdom

    Pingdom is a robust website and digital experience monitoring platform. It covers uptime checks, synthetic user flows, real-user monitoring (RUM), and page speed analysis – all from one dashboard. Plans start at $10/month and scale to high-volume enterprise use with thousands of checks, making it a strong fit for growing digital businesses.

    Key Features

    • Synthetic monitoring from 100+ global locations; instantly detect outages.
    • Transaction and page speed monitoring; includes root-cause tools like traceroutes and server response insights.
    • Real User Monitoring provides insights into how users experience performance, segmented by browser, geography, and device.
    • Public status pages and rich alerting (SMS, email, Slack, PagerDuty, etc.).
    Pingdom website monitoring page showing uptime and performance data in a monitoring dashboard.

    Pricing

    • Synthetic Monitoring plans begin at $10/month for 10 uptime monitors, one advanced check, and 50 SMS alerts. Scale up to tens of thousands of monitors at higher tiers.
    • RUM plans also start at $10/month for 100,000 pageviews and scale up to 1 billion pageviews.

    When to Choose This Tool

    Choose Pingdom if you need deep, multi-layered insight into your website’s performance and availability. It fits well with growing SaaS companies, high-traffic sites, or agencies managing complex user journeys. You’ll get the most value when you monitor checkout, signup, and other revenue paths end-to-end, but the interface has a learning curve, and pricing can escalate quickly as you scale.

    Site24x7

    Site24x7 is an all-in-one monitoring service from Zoho that goes beyond simple uptime checks. In addition to website availability monitoring, it offers server health tracking, API monitoring, and Real User Monitoring (RUM). With over 120 global test locations, it provides a single convenient dashboard for UX metrics and backend health.

    Key Features

    • Synthetic transaction monitoring simulates user flows such as login, checkout, or search to ensure business-critical processes function correctly.
    • Real User Monitoring (RUM) captures actual visitor performance by device, browser, and region.
    • Server and application monitoring covers CPU, memory, disk, and API endpoints.
    • Global network of 120+ monitoring locations provides detailed regional insights.
    Site24x7 synthetic monitoring page showing transaction performance charts and availability data.

    Pricing

    • Pro Plan: starts around $35/month (billed annually) with website and server monitoring.
    • Classic Plan: $89/month, offering expanded resources and checks.
    • Enterprise Plan: from $225/month, supporting large-scale monitoring needs.
    • All plans include a 30-day free trial.

    When to Choose This Tool

    Site24x7 is a strong choice for mid-sized to large teams who want a unified monitoring solution covering websites, servers, APIs, and user experience. It’s particularly useful for SaaS businesses with complex infrastructure or global audiences, since synthetic and RUM monitoring together provide a full performance picture. Pricing at higher tiers can stretch small budgets – its more advanced tiers can be costly for smaller projects compared to lighter tools like UptimeRobot.

    Suggested Read: How do you check Linux CPU usage or utilization? (5 Ways)

    Oh Dear

    Oh Dear takes a broad approach to website monitoring, combining uptime, SSL certificate, broken link, performance, cron job, and other checks into a single service. All features, including team features such as SSO, are available across its plans, with pricing based primarily on the number of sites you monitor. 

    In addition to basic uptime monitoring, Oh Dear provides a comprehensive health check for your entire website ecosystem.

    It can also monitor application health, API endpoints, scheduled tasks, and other processes that basic uptime checks may miss, alerting you to issues such as SSL certificate problems, broken links, failed cron jobs, and application health failures before they affect users.

    Oh Dear website uptime monitoring page showing response time and monitoring details.

    Key Features

    • Holistic Health Monitoring: Tracks uptime, SSL certificates, broken links, mixed content, DNS records, and domain expiration dates in one place.
    • Deep Application Insights: Monitors scheduled tasks (cron jobs), API endpoints, and application health (queues, storage, cache) to ensure your backend processes are functioning correctly.
    • Performance & SEO: Tracks Lighthouse scores and monitors sitemaps to identify performance and SEO-related issues.
    • Client Reporting: Generates monthly reports and supports customizable status pages for sharing monitoring information with clients.
    • Instant Multi-Channel Alerts: Sends notifications via Slack, email, SMS, PagerDuty, and webhooks the moment an incident is detected.

    Pricing

    Oh Dear offers a transparent pricing structure where every plan includes full access to all features, so you never have to worry about missing out on essential monitoring tools. Pricing is based simply on how many sites you need to monitor:

    • Solo: €15/month for up to 2 sites.
    • Freelance: €49/month for up to 10 sites.
    • Studio: €99/month for up to 25 sites.
    • Larger plans are available for agencies and businesses monitoring more sites.

    When to Choose This Tool 

    Oh Dear is a good fit for web agencies, developers, and SaaS teams that want more than basic uptime monitoring without having to manage several separate services. Its combination of uptime, SSL, broken link, performance, DNS, cron job, API, and application health monitoring is particularly useful when you manage multiple websites or applications.

    It may also suit teams that want predictable access to features, since all plans include the same monitoring and team features. The main pricing variable is the number of sites you need to monitor.

    StatusCake

    StatusCake delivers reliable uptime monitoring, page speed, domain, server, and SSL checks. With 43 testing locations, flexible alerting, and a free tier, it covers uptime, page speed, domain/SSL, and server checks in a simple UI.

    Key Features

    • Flexible uptime checks at intervals as low as 30 seconds (depending on plan).
    • Page speed monitoring, domain expiration notifications, server resource checks, and SSL auditing.
    • Alerting via email, SMS, Slack, Discord, Telegram, and more.
    • Public status pages, sub-account management, tagging, and audit logs for team visibility and client reporting.
    StatusCake homepage showing website monitoring dashboards across desktop, tablet, and mobile devices.

    Pricing

    • Basic (Free): 10 uptime monitors at 5-minute intervals.
    • Superior: $15/month for 100 monitors, 1-minute tests, page speed, domain, server, and SSL monitoring.
    • Business: $50/month for 300 monitors, 30-second checks, team account access, and detailed logging.

    When to Choose This Tool

    StatusCake works when you need a wide feature set out of the box – especially helpful if you must track performance, domains, security, and server health together. It’s well-suited for agencies, small businesses, or teams managing multiple client sites. Benefits include deep visibility and strong alerting flexibility, but there are no RUM or scripted transactions, and some alerts/support options are available only on higher plans.

    Suggested Read: How To Install New Relic Monitoring on RunCloud

    Datadog

    Datadog is an observability platform that monitors more than just uptime. Its Synthetic Monitoring feature allows you to simulate user journeys and API calls from multiple global locations and correlate failures with backend traces, logs, and infrastructure metrics. This makes it especially valuable for teams running complex SaaS applications, where identifying the root cause of downtime is just as important as detecting it.

    Key Features

    • Codeless browser tests that simulate multi-step user interactions such as signup or checkout.
    • API monitoring with chained requests to validate data flows across services.
    • AI-powered “self-healing” tests that adapt automatically to minor UI changes.
    • Deep integration with Datadog’s wider observability suite: logs, metrics, APM, security monitoring, and incident management.
    Datadog Synthetic Monitoring results showing passed and failed CI test batches.

    Pricing

    • Synthetic API tests: start at $5 per 10,000 monthly test runs.
    • Browser tests: $12 per 1,000 test runs per month.
    • Additional pricing applies for Datadog’s broader observability products (infrastructure monitoring, APM, logs)

    When to Choose This Tool

    Datadog is best suited for medium to large SaaS companies or enterprises that already use – or want to consolidate monitoring within – a full observability platform. Its strength lies in combining uptime checks with deep diagnostics; use it when you need to quickly jump from alert to trace/logs. The main drawback is cost: Datadog can become expensive at scale, and smaller teams that only need uptime monitoring may find it more than they need.

    New Relic

    New Relic is a comprehensive observability platform with built-in synthetic monitoring. Its Synthetics feature allows you to simulate traffic and scripted user journeys from global locations, ensuring that critical workflows such as login, search, and checkout function correctly. Because it integrates tightly with New Relic’s Application Performance Monitoring (APM), logs, and infrastructure tools, it connects synthetic failures to APM traces, errors, and infrastructure data.

    Key Features

    • Browser-based monitoring to simulate multi-step user flows.
    • API monitoring to test endpoints, validate responses, and track performance.
    • Global testing from a distributed fleet of locations.
    • Full-stack correlation: connect synthetic failures directly to APM traces, error logs, and infrastructure data.
    New Relic Synthetic Monitoring page promoting simulated user journey monitoring for web applications.

    Pricing

    • Consumption-based model: you pay for the number of synthetic checks run.
    • Generous free tier includes 100 free synthetic checks per month.
    • Additional usage is billed per check; pricing scales with volume and is bundled into New Relic’s overall observability platform.

    When to Choose This Tool

    New Relic suits SaaS teams and enterprises that want monitoring embedded in a full observability ecosystem. If your developers already use New Relic APM, adding synthetic checks is a seamless way to connect uptime events to performance diagnostics. It’s especially valuable for teams managing complex applications where pinpointing the “why” behind downtime is critical. If you only need basic uptime, it’s heavy, and pricing can be harder to forecast.

    Suggested Read: How To Monitor Your Web App’s RAM & CPU Usage with Netdata

    Uptrends

    Uptrends is a dedicated website and infrastructure monitoring platform with a strong emphasis on accuracy and global coverage. With over 230 checkpoints worldwide, it verifies uptime and performance from multiple locations simultaneously, helping to eliminate false positives. Alongside uptime checks, it offers real browser, API, and transaction monitoring. Use it to script real flows – login, search, checkout – in real browsers.

    Key Features

    • Concurrent monitoring from multiple checkpoints to confirm true outages.
    • Real browser monitoring that measures full page load performance with waterfall reports.
    • Multi-step transaction monitoring for workflows such as logins, searches, and checkout processes.
    • Detailed error snapshots and traces for faster debugging.
    • Support for APIs, servers, and infrastructure components.
    Uptrends synthetic monitoring page for monitoring websites, APIs, and web applications.

    Pricing

    • Flexible, credit-based pricing model: credits are purchased and applied to different monitors (uptime, transaction, browser, API).
    • Entry-level uptime checks start from around $5 per month; more advanced monitors consume more credits.
    • The plan’s scale depends on usage, making it modular but potentially complex to budget.

    When to Choose This Tool

    Uptrends is well-suited for teams that need highly accurate monitoring with minimal false alarms, especially for global audiences. Its transaction and browser monitoring are useful for SaaS companies where user workflows must always function correctly. Agencies may also find credit-based pricing flexible when managing different types of clients. Credit pricing is flexible, but it’s easy to overspend if your checks grow.

    Suggested Read: How to Check Running Processes in Linux Using ps, top, htop, and atop Commands

    Sematext

    Sematext Synthetics is a flexible monitoring platform that combines uptime, API, and performance monitoring. It offers public test locations and private agents, so you can monitor both internal services behind your firewall and public-facing websites. Alongside uptime, it’s good for teams tracking reliability and Core Web Vitals in one place.

    Key Features

    • Uptime monitoring for websites, APIs, SSL certificates, and multi-step calls.
    • Core Web Vitals tracking, including Largest Contentful Paint (LCP) and Cumulative Layout Shift (CLS).
    • Flexible deployment: run checks from Sematext’s global network or from private locations.
    • Public and private status pages for transparent communication.
    • Detailed performance reports with waterfall charts.
    Sematext uptime monitoring page showing global monitoring locations and website availability data.

    Pricing

    • Pay-as-you-go: charges per monitor, with granular usage control.
    • Standard plan: from $29/month for a bundle of HTTP and Browser monitors.
    • Pro plan: from $99/month, with higher limits and advanced features.

    When to Choose This Tool

    Sematext is best for teams that want flexibility, especially those needing to monitor both public and private applications. It’s useful for SaaS products where internal APIs or dashboards need to be as reliable as external websites. Core Web Vitals monitoring adds value for businesses focused on UX and SEO. It is less integrated than full observability suites, and costs rise with more monitors.

    Pulsetic

    Pulsetic is a modern uptime monitoring service that emphasizes status pages and incident communication. In addition to standard uptime and API checks, it allows teams to create visually appealing, branded status pages that keep customers informed during outages or maintenance. Alerts can be delivered via Slack, Telegram, email, or webhooks, making it a simple option for clean status pages and clear incident updates.

    Key Features

    • Uptime monitoring from multiple global regions with instant alerts.
    • Beautiful, customizable status pages hosted on your own domain.
    • Built-in incident management for posting updates and scheduling maintenance.
    • Flexible alerting via Slack, Telegram, email, and webhooks.
    Pulsetic website uptime monitoring page showing an online monitor and response time graph.

    Pricing

    • Free plan for basic uptime monitoring and simple status pages.
    • Paid tiers:
    • Solo: $9/month for individuals and freelancers.
    • Team: $19/month for collaborative use.
    • Organization: $49/month for larger businesses with more complex needs.

    When to Choose This Tool

    Pulsetic is best for teams that want uptime monitoring and professional, customer-facing status pages. It’s particularly useful for SaaS startups and agencies that need to communicate incidents clearly and maintain trust during downtime. The main limitation is that it lacks some advanced features (such as synthetic transactions or deep analytics) offered by larger platforms, so it is not designed for enterprise-scale synthetic or analytics needs.

    Final Thoughts

    Choosing the right uptime monitoring tool gives you visibility into outages, faster response times, and the data you need to keep customers confident in your service. But monitoring is only half the equation. If your hosting environment and server management aren’t reliable, even the best monitoring tool will spend more time alerting you to problems than helping you prevent them.

    That’s where RunCloud comes in.

    By pairing a powerful monitoring tool with RunCloud’s server management platform, you create a foundation that minimizes downtime from the start. With automated SSL renewals, server-level caching, and auto-healing services, RunCloud helps ensure your applications run smoothly – even during traffic spikes or unexpected errors.

    If uptime is critical to your business (and it should be), combine proactive monitoring with a hosting setup designed for resilience.

    Start building on RunCloud today and give your monitoring tools less to worry about.

    FAQs on Website Uptime Monitoring Tools

    What is the best free uptime tool?

    Many services offer excellent free plans for basic checks. UptimeRobot is a popular choice for getting started, as it provides reliable monitoring at no cost. You might consider paid services for more frequent checks and advanced features as your needs grow.

    How does uptime monitoring work?

    It works by using a global network of servers to act like virtual visitors to your website. These servers “ping” or try to load your site every few minutes, and if they receive an error or no response, the system triggers an immediate alert to notify you.

    Which tool sends instant alerts?

    Virtually all modern uptime monitoring tools, such as Better Stack and Pingdom, are built to send instant alerts. They can notify you through various channels such as email, SMS, and push notifications, ensuring you know about a problem the moment it happens.

    What is the easiest uptime checker?

    Tools like UptimeRobot are often considered the easiest for beginners because their setup is straightforward. You just enter your website’s URL and tell it where to send alerts. Services with clean user interfaces and clear instructions simplify the process.

    How often should uptime be checked?

    For most websites, checking every one to five minutes is the industry standard. This frequency provides a good balance between detecting issues quickly and avoiding unnecessary load on your server.

    Which tool is best for small sites?

    A tool with a generous free plan, like UptimeRobot or Better Stack, is often the best choice for small websites. These services provide the essential monitoring features you need without extra costs, which is perfect when you’re just starting out.

    What uptime tool works with Slack?

    Modern monitoring services, such as Better Stack, Pingdom, and StatusCake, offer excellent Slack integrations. This allows you to receive downtime alerts directly in your team’s channels.

    Is there an open-source uptime tool?

    Several excellent open-source options exist, with Uptime Kuma being one of the most popular. These tools give you full control and have no subscription fees, but they do require you to host and maintain the monitoring software on your own server.

    Which service tracks global uptime?

    Nearly all major uptime monitoring services, including Pingdom and Uptime.com, track global uptime by default. They use a network of “check locations” or “probes” spread across different continents to ensure your website is accessible to your entire audience, not just users near your server.

    What tool offers the most accurate reports?

    Accuracy comes from using multiple global check locations to confirm an outage before sending an alert, a feature found in most reputable tools like Pingdom or Better Stack. For the most complete picture, you can combine these external reports with internal server health data to quickly diagnose if the issue is with the network or the server itself.

  • Best Free and Paid Plesk Alternatives for Web Hosting in 2026

    Best Free and Paid Plesk Alternatives for Web Hosting in 2026

    Plesk remains a capable server management platform, but its pricing, architecture, and feature set will not suit every developer or agency. Some users may prefer a lower-cost panel, a lighter server footprint, stronger multi-server management, or a platform designed more directly for cloud infrastructure. 

    The available alternatives range from traditional hosting panels to managed cloud platforms, developer provisioning tools, and decoupled server management services.

    In this article, we compare the strengths, limitations, pricing models, and intended users of several Plesk alternatives. This will help you identify whether a traditional control panel, managed service, developer tool, or cloud server management platform best fits your needs. 

    Best Plesk Alternatives in 2026

    The following options cover several product categories, including traditional hosting panels, managed cloud hosting, developer provisioning platforms, and cloud server management tools. 

    cPanel

    cPanel is a widely used web hosting control panel and, like Plesk, is owned by WebPros. It is designed primarily for shared hosting, reseller hosting, and account-based server management, although its structure may be less suitable for development teams seeking a unified cloud management workflow. 

    cPanel provides a graphical platform for managing websites, hosting accounts, databases, email, domains, and common server administration tasks.

    cPanel is widely known for its extensive ecosystem of third-party plugins and integrations. Its interface will be familiar to many hosting customers, which can reduce the learning curve for users moving between providers. It also includes tools for managing databases through phpMyAdmin, installing applications, creating email accounts, and administering common hosting services.

    WebHost Manager (WHM) allows administrators to create and manage multiple hosting accounts, customize branding, assign packages, and control account-level resources. Depending on the license, configuration, and installed extensions, cPanel can support automated backups, SSL management, malware protection, and WordPress administration through WP Toolkit. 

    cPanel website homepage

    One limitation for hosting providers is cPanel’s account-based licensing model. Costs increase as more hosting accounts are added, which can make pricing less predictable for providers managing a growing number of customer accounts. 

    cPanel also lacks Plesk’s multi-OS flexibility, as it runs exclusively on Linux distributions. This limitation makes it unusable for teams requiring native ASP.NET or MSSQL support. cPanel separates customer-level hosting management from server administration through WebHost Manager. This supports distinct administrator, reseller, and customer roles, but teams accustomed to a single multi-server dashboard may find the workflow less unified than newer cloud management platforms. 

    Cloudways

    Cloudways is a managed cloud hosting platform that sits between users and infrastructure providers such as DigitalOcean, AWS, and Google Cloud. It combines the underlying server with platform management, support, monitoring, backups, security maintenance, and deployment tools. As a result, its plans cost more than purchasing the same infrastructure directly from the provider. 

    Key Features

    Cloudways is strongest in the following areas:

    • Managed performance stack: Cloudways provides caching and performance tools such as Varnish, Redis, and Memcached, depending on the selected server and application configuration. 
    • Choice of cloud providers: Users can deploy servers through supported providers such as DigitalOcean, AWS, and Google Cloud without managing each provider’s infrastructure directly.
    • Managed security features: Cloudways provides tools such as SSL certificate installation, IP allowlisting, platform-level security updates, and account security controls.
    Cloudways website homepage

    For agencies managing many servers, the difference between Cloudways’ pricing and the costs of the underlying infrastructure can be substantial. Teams should compare the added management and support services with the cost and responsibility of managing servers directly. 

    Cloudways does not provide root access to the underlying server. This reduces the amount of system administration required from the user, but it also prevents low-level operating system changes, custom system packages, and unsupported server stacks. It is therefore better suited to teams that value managed infrastructure than to administrators who need unrestricted server control.

    CyberPanel

    CyberPanel is an open-source, local-first web hosting control panel that integrates with the LiteSpeed web server engine. The biggest feature of CyberPanel is its native integration with LSCache (LiteSpeed Cache) at the server level. This integration provides WordPress and other supported applications with access to server-level caching, which can improve page load times and Time to First Byte when configured correctly. 

    CyberPanel also includes a WordPress staging environment, which allows developers to test changes separately before pushing them to a live site. The panel also provides tools for managing DNS, email services, databases, and FTP accounts. 

    CyberPanel offers a free core version that includes many of the features needed to host and manage websites. It may suit individual developers, small hosting providers, and users who specifically want an OpenLiteSpeed-based stack. This gives users a way to try an OpenLiteSpeed-based hosting stack without paying a panel license fee. 

    Enterprise users can also upgrade to LiteSpeed Enterprise directly through the panel. Users can begin with OpenLiteSpeed and upgrade to LiteSpeed Enterprise when they require its commercial features or support model.

    CyberPanel website homepage

    CyberPanel users should assess the quality of its documentation, update process, and available support before using it for production workloads. As with any self-hosted panel, administrators remain responsible for testing updates, maintaining backups, and resolving compatibility issues. 

    OpenLiteSpeed and LiteSpeed Enterprise use different licensing and worker-process models, so teams expecting high concurrency should compare the available editions carefully. CyberPanel is most closely associated with PHP and WordPress hosting, and users running other application stacks should confirm that its deployment model meets their requirements. 

    DirectAdmin

    DirectAdmin is an efficient web hosting control panel designed to streamline server and website management. It offers a clean interface for Administrators, Resellers, and Users, making it easy to manage accounts, DNS records, and email services.

    It includes an integrated ticketing system to support customers directly, fully customizable dashboard themes, anti-spam tools, and usage statistics. Its automatic crash recovery feature can detect certain failed services and attempt to restart them, helping reduce downtime when supported services stop unexpectedly. DirectAdmin supports FreeBSD and several Linux distributions, giving administrators a choice of supported operating systems. 

    These features make DirectAdmin suitable for hosting providers that want the account, reseller, email, DNS, and support functions of a traditional control panel while keeping panel overhead relatively low.

    DirectAdmin offers several license tiers based on account and domain limits, including plans for small servers and larger hosting environments. Its pricing and relatively modest server requirements can make it a practical option for providers that do not need the broader ecosystem associated with cPanel or Plesk. 

    DirectAdmin website homepage

    DirectAdmin is a strong option for hosting providers that want a traditional multi-user control panel with lower licensing and server requirements than some larger commercial platforms. DirectAdmin does not provide the same first-party WordPress management experience as panels with an integrated WordPress toolkit. Administrators may need third-party software for installation, staging, cloning, and update management, depending on their chosen configuration. 

    DirectAdmin is primarily installed and managed on individual servers. Providers operating a large server fleet may therefore need separate management processes or third-party tooling, rather than a single native dashboard that covers every server. 

    Laravel Forge

    Laravel Forge is a server provisioning and deployment platform designed primarily for Laravel and PHP developers. It simplifies tasks such as server provisioning, Git-based deployments, SSL setup, queue worker management, scheduled jobs, and application deployment.

    Forge’s lower-cost plans are aimed mainly at individual developers, while team access and wider collaboration features require a higher-tier plan. Agencies should compare the available user permissions and server limits with the number of developers who need access. 

    Laravel Forge website homepage

    Forge assumes that users are comfortable working with SSH, Git, and external database tools. It does not attempt to reproduce the file, email, and database management interfaces found in traditional hosting panels, so it is less suitable for non-technical users.

    Forge does not include traditional email hosting and is most useful within PHP-focused development workflows. Agencies managing a broad mix of CMS platforms, application runtimes, and customer hosting accounts may prefer a more general server management platform.

    Forge is best suited to Laravel developers who want fast server provisioning and deployment tools without the broader hosting features of Plesk. It is less suitable for teams that need email hosting, reseller accounts, visual file management, or support for non-technical customers. 

    CloudPanel

    CloudPanel is a free server control panel designed for cloud-hosted Debian and Ubuntu servers. It uses an NGINX-based stack and supports PHP, Node.js, Python, and static websites. 

    Its graphical interface provides access to server metrics such as CPU and memory usage, helping administrators monitor resource consumption and investigate performance issues. CloudPanel includes Cloudflare-related controls, IP and bot blocking, two-factor authentication, Let’s Encrypt certificate management, and a graphical virtual host editor for modifying NGINX configuration. 

    CloudPanel does not charge a panel license fee, although users must still pay for the server, backups, monitoring, email services, support, and any third-party security tools they require. It may be a cost-effective choice for technical users managing a small number of servers.

    CloudPanel website homepage

    CloudPanel is optimized for high-performance NGINX setups on Debian or Ubuntu systems, but its simplified structure introduces several operational limitations. CloudPanel operates as an isolated, single-server panel with no native support for multi-server management or centralized cluster coordination. Teams that require malware scanning, managed security monitoring, or preconfigured Web Application Firewall rules may need additional software or services. 

    Additionally, the panel does not support running Apache alongside NGINX in a hybrid configuration, which limits compatibility with legacy client sites that rely on custom .htaccess directives and requires manual translation of rewrite rules.

    CloudStick

    CloudStick is a SaaS server control panel aimed at web agencies, hosting resellers, and developers managing multiple client websites and servers. While many modern panels strip away traditional hosting features in favor of pure app deployment, CloudStick provides a comprehensive suite. It combines developer-focused deployment tools with features commonly found in traditional hosting panels, using an NGINX and PHP-FPM stack.

    It offers built-in email hosting, a visual database manager, and firewall rule controls within the panel. Its WordPress management features include plugin controls, automated updates, debug settings, Magic Link login, and reusable templates for deploying sites. CloudStick supports automated off-server backups to compatible object storage with configurable retention settings. Users should still test restoration procedures and maintain a backup policy suited to their risk requirements. 

    CloudStick website homepage

    CloudStick uses a pricing model that may appeal to agencies managing multiple servers. While the Basic plan starts at $9 per month for a single server, the Pro plan costs $19 per month and supports unlimited servers and websites, as well as team collaboration seats. 

    CloudStick is a hosted management service rather than a self-contained local panel, so users depend on the continued availability and support of the SaaS platform. Teams should also confirm that CloudStick’s supported operating systems, application stacks, backup options, and plan limits match their requirements before migrating a large server fleet. 

    ispmanager

    ispmanager is a commercial hosting control panel that combines website, database, DNS, email, file, and server management tools within a graphical interface. It sits between large hosting suites and narrower developer provisioning tools.

    Its graphical interface is intended to make common server and hosting tasks accessible without requiring every action to be completed through the command line. It supports Docker, Node.js, Python, and several database engines, including MySQL, MariaDB, Percona, and PostgreSQL. 

    The panel simplifies security and maintenance through built-in integrations with Cloudflare, DDoS Guard, and Fail2ban, as well as automated Let’s Encrypt certificate renewals. It also provides a file editor with syntax highlighting and supports backups to compatible external storage, giving users access to common maintenance tools from within the panel.

    ispmanager website homepage

    ispmanager offers tiered plans based on site limits and included features. Its entry-level pricing may make it a lower-cost commercial alternative to Plesk for users who still want vendor updates and support. Current prices, site limits, addons, and support terms should be checked before choosing a plan.

    Prospective users should confirm operating system support, language and regional support, multi-server management requirements, and any separately priced extensions. Teams already familiar with cPanel or Plesk may also need time to adapt their workflows and customer documentation. 

    HestiaCP

    Hestia Control Panel, commonly known as HestiaCP, is a free and open-source hosting control panel that began as a fork of VestaCP. It provides a graphical interface for users who want to manage websites, DNS, databases, email, users, and backups on a self-hosted server. 

    HestiaCP offers a comprehensive stack that supports multiple web servers, giving users the choice between NGINX and Apache architectures. HestiaCP includes email hosting alongside its web, DNS, database, and backup tools. This may suit users who want these services on the same server, although running email introduces added security, deliverability, and maintenance responsibilities. It also features a mobile-friendly interface, built-in backup tools, and controls intended to support server security and maintenance. It supports basic administrator and reseller roles and provides essential multi-tenant capabilities.

    Hestia Control Panel server management dashboard

    HestiaCP has no panel license fee. Users remain responsible for infrastructure costs, backups, monitoring, updates, security maintenance, and technical support. Because it is self-hosted, users must maintain both the panel and the underlying server. Community development provides transparency, but production users should assess release history, documentation, support, and update procedures for themselves. 

    HestiaCP may suit technical users who want a self-hosted panel with traditional web and email hosting features, but without a recurring license fee. It is less suitable for teams that require vendor-backed support, native fleet management, or a fully managed service. 

    Webuzo

    Webuzo is a hosting control panel focused on website and application deployment. Its available editions and plans support different account and hosting requirements, so readers should confirm whether they need its single-user or multi-user offering. Its different editions can support users who host their own applications as well as providers who manage multiple hosting accounts. It can be installed on supported virtual private servers and dedicated servers across a range of hosting providers. 

    One of Webuzo’s main features is its application installer, which supports a large catalog of scripts and content management systems, including WordPress, Joomla, and Magento. This can reduce the manual effort required to deploy supported applications. Webuzo is designed to run with relatively modest server requirements, which may make it suitable for smaller VPS instances. It supports both Apache and NGINX web servers. 

    Webuzo website homepage

    Webuzo offers lower-cost plans for users who want application installation and server management tools on a VPS. Pricing and included account limits vary by license, so readers should compare the current plans with their hosting requirements.

    Webuzo may suit personal site owners, small businesses, and developers who value rapid application installation. Users should choose the appropriate edition based on whether they need a single-user environment, multiple hosting accounts, reseller functions, or broader team access. 

    Enhance

    Enhance is a hosting control panel designed for multi-server and clustered environments. It uses container-based isolation and allows services to be distributed across multiple servers. Its central interface allows hosting providers to manage websites and services across a cluster, which may suit growing hosting businesses and agencies operating several servers. 

    It allows roles such as web, database, and email services to be distributed across different physical or virtual servers. This architecture can support redundancy and horizontal scaling when configured appropriately. This architecture allows businesses to add servers and distribute service roles as their requirements grow. 

    Enhance website homepage

    Enhance uses a usage-based pricing model calculated from the number of billable websites hosted on the cluster. It charges users at the end of each month based on the number of billable websites hosted on the cluster. Pricing is tiered, meaning websites are billed based on the tier they fall into. For example, under the pricing tiers described at the time of writing, a provider hosting 25,000 billable websites would pay the applicable rate for each pricing band.

    At the time of writing, Enhance does not count servers, staging sites, or soft-deleted websites as billable websites. Additionally, there are no charges for addon domains (additional domains mapped to a website), subdomains, aliases, or service websites, which include the control panel, webmail, and phpMyAdmin.

    Enhance is primarily aimed at hosting providers and teams building multi-server environments. Its cluster model and usage-based pricing may be more complex than necessary for users managing one or two servers, and monthly costs can vary as the number of billable websites changes. 

    RunCloud 

    RunCloud is a server management platform that uses a decoupled SaaS architecture rather than hosting its full management interface on each managed server. An agent installed on the virtual machine connects it to RunCloud’s browser-based console.

    Most of the management interface remains outside the server, while the agent handles communication and server operations. This can reduce the local resources required by the panel itself. RunCloud uses plan-based SaaS pricing rather than an account-based hosting panel license. This may provide more predictable costs for developers and agencies, depending on the number of servers, team members, and paid features they require. 

    RunCloud server deployment dashboard

    One of the primary barriers to using unmanaged cloud servers is the technical expertise required to configure and secure them. RunCloud reduces the amount of command-line work required for many routine tasks by providing a browser-based interface. Users still benefit from an understanding of Linux servers, DNS, networking, security, and application deployment. 

    This visual approach makes many administrative tasks available through browser-based controls. The interface lets users start, stop, and restart system services, manage multiple PHP versions on one server, map domains, and configure databases.

    RunCloud services dashboard as plesk alternative

    Security management is also simplified. RunCloud provides controls that assist with several common server-hardening tasks. Depending on the server configuration and plan, users can manage SSH settings, root login access, SSH key authentication, UFW firewall rules, and ModSecurity controls from the dashboard. These tools simplify configuration, but users remain responsible for maintaining the security of their servers and applications. 

    RunCloud integrates with Git hosting providers, including GitHub, GitLab, and Bitbucket. Users can connect to supported Git repositories, configure branch-based deployments, and run custom deployment scripts to perform tasks such as installing dependencies or clearing caches. 

    Deploying application via RunCloud Dashboard

    RunCloud is designed primarily for Linux cloud servers and developer-led hosting workflows. It does not replace every feature of a traditional panel, such as Plesk, particularly for users who need Windows hosting, built-in mail hosting, reseller account structures, or a fully managed hosting service. Users also remain responsible for choosing, paying for, and maintaining the underlying server infrastructure. 

    Plesk Alternatives at a Glance 

    PlatformProduct typeStarting price at time of writingBest suited toMain limitation
    cPanelTraditional hosting control panel$29.99/monthShared hosting and reseller environmentsAccount-based pricing and no Windows support
    CloudwaysManaged cloud hosting$11/monthTeams wanting managed infrastructure and supportHigher cost than buying infrastructure directly, and no root access
    CyberPanelSelf-hosted hosting panelFree core versionOpenLiteSpeed and WordPress hostingUsers must manage the server, updates, and much of the troubleshooting
    DirectAdminTraditional hosting control panel$5/monthHosting providers seeking a lower-cost traditional panelNo native unified multi-server dashboard
    Laravel ForgeDeveloper provisioning platform$12/monthLaravel and PHP development teamsNot a complete hosting panel and less accessible to non-technical users
    CloudPanelSelf-hosted cloud control panelFreeTechnical users managing individual cloud serversNo native fleet management or built-in email hosting
    CloudStickSaaS server control panel$9/monthAgencies managing PHP and WordPress serversSome multi-server benefits require the higher-tier plan
    ispmanagerCommercial hosting control panel€6.49/monthUsers wanting a lower-cost traditional hosting panelPlan limits and available features vary by tier
    HestiaCPSelf-hosted open-source panelFreeTechnical users wanting web and email hosting without license feesNo vendor-managed service or native server fleet dashboard
    WebuzoHosting and application control panel$2.50/monthSmall hosting environments and rapid application deploymentFeatures and account limits vary between editions
    EnhanceCluster hosting control panelFrom $0.15 per billable websiteHosting providers building multi-server clustersUsage-based costs vary with the number of hosted websites
    RunCloudSaaS cloud server management platform$9/monthDevelopers and agencies managing Linux cloud serversDoes not replace every traditional hosting panel or managed hosting feature

    Conclusion

    The right Plesk alternative depends on the type of hosting environment you manage. Traditional panels such as cPanel and DirectAdmin provide familiar account, reseller, email, and DNS tools, while platforms such as Cloudways, Forge, Enhance, and RunCloud address different managed hosting, deployment, and multi-server requirements. 

    When comparing these platforms, consider the operating systems you need to support, the number of servers and websites you manage, your team’s technical experience, and whether you require email hosting, reseller accounts, managed support, or root access. RunCloud is a strong choice for developers and agencies that want to manage Linux cloud servers through a central browser-based platform while retaining control over their chosen infrastructure. 

    Start managing your first server with RunCloud.

  • Perfmatters Review and Setup Guide: Features, Pricing, Pros and Cons

    Perfmatters Review and Setup Guide: Features, Pricing, Pros and Cons

    If your WordPress site is struggling to pass Core Web Vitals, despite using a premium caching plugin, you aren’t alone. WordPress themes and page builders are getting more complex, and standard caching isn’t always enough to eliminate main-thread blocking JavaScript or prevent Cumulative Layout Shift (CLS).

    That is where Perfmatters steps in.

    Perfmatters isn’t a replacement for your caching plugin – it’s the final tuning layer, focusing on bloat removal and script management. 

    In this article, we’ll review the Perfmatters plugin, explain its features, pricing, and exactly how to use it effectively.

    By the end of this article, you’ll be able to make your WordPress site faster, more responsive, and more user-friendly with the Perfmatters plugin.

    The TL;DR Verdict: Is Perfmatters Worth It?

    Yes. If your site has sluggish Interaction to Next Paint (INP) scores or frustratingly slow Largest Contentful Paint (LCP) times, then using Perfmatters is one of the most effective ways to speed up your website.

    Who it’s for:

    • Site owners who are trying to meet Core Web Vitals requirements.
    • Users with “heavy” page builders (Elementor, Divi) who need to trim unused scripts.
    • WooCommerce store owners who need granular control over where checkout scripts load.
    • Power users looking to pair a script manager with their existing caching stack (such as WP Rocket or RunCloud’s server-level caching).

    Who should skip it:

    • Complete beginners looking for a hands-off, “set-it-and-forget-it” optimization plugin.
    • Users who only want image compression (Perfmatters does not compress images or convert to WebP).

    What is Perfmatters?

    Perfmatters is a lightweight, premium WordPress performance plugin. Unlike traditional all-in-one performance plugins that focus heavily on page caching and CDN integration, Perfmatters specializes in asset management and bloat removal.

    Its philosophy is simple: WordPress and its plugins load a massive amount of code on every single page, even when that code isn’t being used. Perfmatters allows you to selectively disable CSS and JavaScript where they aren’t needed, reducing the overall page size, lowering HTTP requests, and giving the browser less work to do.

    Because it doesn’t handle page caching, it’s designed to work alongside plugins such as WP Rocket or server-side solutions like RunCache.

    How Perfmatters Improves Core Web Vitals

    Let’s take a quick look at some of the core features of Perfmatters and how it improves Core Web Vitals. 

    1. The Script Manager

    The Script Manager is the primary reason most developers buy Perfmatters. It allows you to view every CSS and JavaScript file loading on a specific page and toggle them off with a single click.

    By disabling an unused slider script on your homepage or stopping WooCommerce cart scripts from loading on your blog posts, you significantly reduce JavaScript execution time. This is the single most effective way to improve your Interaction to Next Paint (INP) score.

    2. General Bloat Removal 

    Out of the box, WordPress includes code for emojis, dashicons, the REST API, and XML-RPC. If you aren’t using these, they’re just dead weight.

    Perfmatters offers a dashboard with simple toggle switches to disable these unnecessary WordPress core features. This reduces overall HTTP requests and slims down the page weight.

    3. Advanced Lazy Loading

    Most modern browsers have native lazy loading, but Perfmatters takes it further by letting you lazy-load images, iframes, and videos. Most impressively, it can replace YouTube iframes with a static preview image, only loading the heavy video player when the user clicks play.

    Deferring off-screen images ensures the browser focuses its resources on the content the user sees first, drastically improving Largest Contentful Paint (LCP). This feature can be quite powerful, providing a massive performance boost for media-heavy sites.

    4. Adding Missing Image Dimensions

    If you upload an image without specifying its width and height, the browser doesn’t know how much space to reserve for it. When the image finally loads, the content below it jumps down the page.

    Perfmatters automatically adds missing width and height attributes to images. This directly prevents Cumulative Layout Shift (CLS), making your pages feel stable as they load.

    5. Local Analytics and Fonts

    Loading third-party resources (like Google Analytics or Google Fonts) requires the browser to perform DNS lookups and establish new connections, which takes time.

    Perfmatters can download Google Fonts and your Google Analytics script and host them locally on your server. This reduces DNS lookups and gives you control over browser caching for these files.

    How Much Does Perfmatters Cost?

    Perfmatters has three pricing plans based on the number of sites you want to use it on. The plans are:

    • Personal: $29.95 per year for 1 site.
    • Business: $59.95 per year for 3 sites.
    • Unlimited: $124.95 per year for unlimited sites and multisite networks.

    All plans come with 1 year of updates and support, a 30-day money-back guarantee, and a 10% renewal discount.

    Pros and Cons of Perfmatters

    ProsCons
    Lightweight Footprint: Minimal code with surgical, granular script control.No Free Version: No free tier or trial available to test before buying.
    Best-in-Class Script Manager: Unmatched control over per-page/post asset management.Not All-in-One: Requires pairing with a separate page caching solution.
    Core Web Vitals Booster: Drastic improvements to INP, LCP, and CLS when properly configured.No Image Optimization: Lacks built-in image compression or WebP conversion features.
    Highly Compatible: Works flawlessly alongside caching plugins (WP Rocket, FlyingPress, RunCloud Hub).Learning Curve: Requires technical knowledge to identify which scripts to disable safely.
    Privacy & Speed: Local hosting for Google Analytics and Google Fonts built right in.Manual Configuration: Not a “set-and-forget” plugin; requires active tweaking for top results.
    Automated Maintenance: Scheduled database cleanup keeps your site lean.

    How To Install Perfmatters Plugin

    After visiting https://perfmatters.io to purchase and download the plugin, installing it is very easy and straightforward. Here are the steps to follow:

    1. To install the Perfmatters plugin, open your WordPress dashboard and navigate to the “Plugins” tab. Click on the “Upload Plugin” button and select the ZIP archive you received after completing your purchase.
    How to install perfmatters
    1. After the Installation is complete, click on “Activate Plugin” to start using it on your site.
    1. Once you have enabled the plugin, go to plugin settings and switch to the “License” tab. Enter your License key to activate all the features of the plugin.
    Perfmatters admin dashboard
    1. Once you have entered the key, you will see a message that says “License is activated” – along with the validity of your license.

    That’s it! You have successfully installed the Perfmatters plugin on your site.

    Perfmatters Basic Configuration

    Perfmatters offers many features to help you optimize your site’s performance. However, it doesn’t enable any optimization features by default. You will have to manually toggle the switch for each feature and test your site for any issues. If you notice any problem, you can simply turn off the feature and try another one.

    If you encounter a problem immediately after enabling a feature, it means your site is using that feature, so leave it alone. Here is a list of some of the important settings that you should definitely check out:

    • Script Manager: This feature lets you control which scripts load on each page or post on your site. You can turn scripts off or on that are either not needed or cause conflicts. You can also change how the scripts load, such as in the header or footer, asynchronously or deferentially, to improve your site’s speed and compatibility.
    • Lazy Loading: This feature delays the loading of images, videos, iframes, and other elements until they are visible on the screen. This reduces the initial page load time and saves bandwidth. You can also enable DOM monitoring, which detects new elements added to the page and automatically applies lazy loading to them.
    • DNS Prefetch: This feature resolves the domain names of external resources, such as images, fonts, scripts, etc., before they are requested by the browser. This reduces latency and improves your site’s loading speed. You can also manually add custom domains to prefetch.
    • Preconnect: This is an extension of the DNS Prefetch feature. In addition to resolving domain names, it establishes early connections to external domains before the browser requests them. This reduces the round-trip time and improves your site’s loading speed. You can also manually add custom domains to preconnect.
    • Heartbeat Control: This feature controls the frequency of the WordPress heartbeat API, which sends requests to the server every few seconds. These requests can consume server resources and slow down your site. You can reduce or disable the heartbeat to save resources and improve your site’s speed. You can also choose which areas of your site to apply heartbeat control to, such as the dashboard, front end, and post editor.
    • jQuery Migrate: This feature disables jQuery Migrate, which is a script that helps older plugins and themes work with newer versions of jQuery. However, this script can slow down your site and cause errors. You can disable it if you’re sure that your site doesn’t need it.
    • Disable Emojis: This feature disables emojis, which are small icons that express emotions. However, these icons can add extra requests and slow down your site. You can disable them if you don’t use them on your site.
    • Remove the wlwmanifest Link: This feature removes the wlwmanifest link, which Windows Live Writer uses to work with WordPress. However, this link can expose your site’s information and slow it down. You can remove it if you don’t use Windows Live Writer on your site.
    • Disable Comments: This feature disables comments on your site, which can reduce spam and improve your site’s performance. You can disable comments globally or on specific post types. You can also remove comment-related scripts and styles from your site.
    • Local Google Fonts: This feature hosts Google Fonts locally on your server instead of loading them from Google’s servers. This reduces external requests and improves your site’s speed and compatibility. You can also choose how to display the fonts (swap or block) and disable Google Fonts completely if you don’t use them on your site.
    • Local Analytics: This feature hosts Google Analytics locally on your server instead of loading it from Google’s servers. This reduces external requests and improves your site’s speed and privacy. You can also choose how often to update the analytics script and exclude certain roles from tracking.

    Perfmatters vs. Alternatives: Choosing the Right Performance Stack

    Deciding between Perfmatters, WP Rocket, or FlyingPress? While all three provide WordPress performance optimization, they function differently. The following comparison shows their strengths to help you pick the right tool for your specific setup.

    Feature / CategoryPerfmattersFlyingPressWP Rocket
    Primary FocusAsset optimization and granular script management.All-in-one caching with aggressive asset optimization.Page caching with reliable, automated optimization.
    Page CachingNo (Relies on your server or another caching plugin).Yes (Generates static HTML pages).Yes (Industry standard for static HTML caching).
    Manual Script ManagerBest-in-class (Unmatched control to disable scripts per page/post).No (Automates optimization but lacks manual asset toggles).No (Relies on broad automation across the whole site).
    Unused CSS HandlingYes (Loads optimized CSS efficiently in a separate external file).Yes (Highly aggressive and effective at removing unused CSS).Yes (Automated, but loads the CSS inline, which can increase HTML size).
    JavaScript OptimizationYes (Highly customizable manual control over delaying/deferring).Yes (Aggressive automated delay based on user interaction).Yes (Basic, reliable automated delay and deferral).
    Image OptimizationBasic (Handles lazy loading and preloading, but no compression).Comprehensive (Lazy loading, plus AVIF/WebP generation via add-on).Basic (Handles lazy loading, but requires a separate plugin for compression).
    Ease of UseSteep Learning Curve (Requires technical tweaking and testing to avoid breaking the site).Moderate (Requires some careful configuration for its most aggressive settings).Very Easy (“Set-and-forget” with safe, automated defaults).
    The Best Use CaseThe ultimate “scalpel” to pair with a dedicated caching plugin or server cache.A powerful standalone solution for users who want maximum automated speed.A rock-solid standalone solution for users who prioritize stability and ease of use.
    Ideal SynergyPairs perfectly with WP Rocket or RunCloud server caching.Use alone, or pair with Perfmatters to manually kill stubborn scripts.Use for caching, and pair with Perfmatters for advanced script control.

    Final Thoughts

    Perfmatters is a powerful and versatile plugin that helps you optimize your WordPress site’s performance and speed. It has many features that let you disable unnecessary features and scripts, tweak settings and options, clean up your database, use a CDN, host analytics locally, and more.

    If you’re looking for a plugin that can make your site faster, more responsive, and more user-friendly, then Perfmatters is a great choice for you.

    If you’re tired of managing your own servers, you might want to check out RunCloud (yep, that’s us!).

    RunCloud is built for developers who want to focus on shipping great work, not on managing their infrastructure. Experience painless server configuration, with no need to spend hours figuring it out.

    Get started with RunCloud today & get up and running in minutes. 

    Frequently Asked Questions

    Is Perfmatters a caching plugin?

    No, Perfmatters is not a caching plugin. It’s a performance optimization and script management plugin. It is designed to work alongside your existing caching solution (like WP Rocket or server-level caching) to remove bloat and reduce page weight.

    Perfmatters vs WP Rocket: which is better?

    They serve different purposes. WP Rocket is an all-in-one caching plugin, while Perfmatters specializes in asset management and removing unused code. For the best results, they should be used together.

    Does Perfmatters work with WooCommerce?

    Yes, Perfmatters is highly recommended for WooCommerce. WooCommerce loads cart and checkout scripts on every page by default. Perfmatters allows you to disable these scripts on your blog posts and homepage, significantly speeding up your site.

    Is Perfmatters worth it?

    Yes. If you’re struggling with Core Web Vitals, specifically INP or LCP, Perfmatters offers the granular control needed to fix those issues. For $29.95/year, it provides incredible value.

    What is the Perfmatters Script Manager?

    The Script Manager is a tool within Perfmatters that shows you every CSS and JavaScript file loading on a specific page. It allows you to toggle those files off individually, preventing unused code from slowing down your site.

    Does Perfmatters have a free version?

    No, Perfmatters does not have a free version or a trial. It is a premium-only plugin, but it does offer a 30-day money-back guarantee.

  • The Best Ghost CMS Hosting 2026: Managed vs Self-Hosted Compared

    The Best Ghost CMS Hosting 2026: Managed vs Self-Hosted Compared

    Ghost is a sleek, lightning-fast, and modern alternative to WordPress that strips away the bulky plugins and focuses entirely on what matters most: creating incredible content, delivering high-performance SEO, and building a paid subscriber audience.

    But while the software itself is beautifully streamlined, figuring out your ghost website hosting can be surprisingly confusing.

    Because Ghost is built on a Node.js stack rather than traditional PHP, it requires a different server environment. This leaves many users torn between two frustrating extremes:

    1. Pay a massive monthly premium for a fully managed service.
    2. Work on the complex Linux command line to host it yourself.

    You shouldn’t have to choose between emptying your wallet and becoming a system administrator.

    In this guide, we will compare the true costs and technical requirements of managed plans versus unmanaged servers, and show you how to build the best ghost hosting setup.

    Understanding Your Ghost CMS Hosting Options

    If you’re coming from the WordPress ecosystem, your first instinct might be to look for a standard, cheap, shared hosting plan. However, Ghost hosting runs on a completely different server stack.

    Unlike traditional platforms that rely on PHP and run easily on standard cPanel setups, Ghost is built on a modern, lightning-fast Node.js stack. Because of this, you simply cannot drop a Ghost installation into a standard $3/month shared hosting bucket. It requires a server environment capable of running Node.js applications, managing background processes, and handling modern database systems such as MySQL or SQLite3.

    Because of these technical requirements, finding the right ghost blog hosting generally forces users down one of three distinct paths:

    1. Fully Managed Ghost Hosting: You pay a premium price for a company to handle all the servers, updates, and security on your behalf.
    2. DIY Self-Hosted (Unmanaged VPS): You rent a bare-metal server or VPS and use the command line (SSH) to build and maintain the environment yourself.
    3. Managed Cloud Servers: You rent an affordable VPS from any cloud provider, but use a graphical dashboard to easily manage the server and deploy your apps without needing to be a Linux expert.

    Let’s break down the pros, cons, and actual costs of these options.

    1. Managed Ghost Hosting 

    If you don’t want any technical responsibility, you should choose managed ghost hosting, as it is the simplest option. With a managed host, you are essentially renting software-as-a-service. The hosting company provides the infrastructure, handles all core Ghost software updates, manages database backups, and configures your SSL certificates.

    Ghost(Pro)

    Ghost(Pro) is the most popular managed option, as it is the official hosting service from Ghost’s creators. Choosing Ghost (Pro) is a great way to support the open-source project, as revenue goes directly toward funding Ghost’s development.

    Ghost(Pro) is incredibly easy to use, and its pricing is structured around audience size and features:

    • Starter: Suitable for solo blogs & newsletters ($15 USD/mo, billed annually). With this, you get your own website, a free custom domain, an email newsletter, Simple design settings, and 1,000 members.
    • Publisher: Recommended for custom publications ($29 USD/mo, billed annually). It provides 3 staff users, Custom themes, 8,000+ integrations, paid subscriptions, Advanced analytics, and 1,000 members.
    • Business: This plan is for teams scaling up ($199 USD/mo, billed yearly). It provides access to 15 staff users, Priority support, Higher usage limits, Early access to features, and 10,000 members.
    • Custom: This is a customizable plan for more complex needs. It provides unlimited staff users, Advanced configurations, a dedicated IP address, 99.9% uptime SLA, and unlimited members.

    Third-Party Managed Options

    Since Ghost is open-source, several third-party companies have stepped in to offer niche managed Ghost hosting alternatives at slightly lower price points. Providers like Midnight (starting around $12/month) and Magic Pages (starting around $15/month) offer fully managed setups that bypass some of Ghost(Pro)’s strict feature limits, catering to users who want managed convenience on a budget.

    Magic pages ghost hosting.

    The Drawbacks of Managed Hosting

    While managed hosting is highly convenient, it comes with two major compromises for developers, agencies, and growing creators:

    • The “Success Tax” (Cost Scaling): With managed hosting, your monthly bill scales aggressively as your email list grows, regardless of how much actual server traffic you receive. You are paying for audience size, not server compute power.
    • Strict Limitations: When you buy a managed Ghost plan, you only get Ghost. You’re paying for a single instance of the software. If you want to host a custom Laravel application, spin up a secondary WordPress site for a different project, or even launch a second Ghost blog, you can’t put them on the same plan. You have to purchase a completely separate hosting subscription, leaving you with multiple bills and fractured infrastructure.

    2. Ghost VPS Hosting & DIY Self-Hosting 

    This is the recommended approach for tech-savvy users who want total control over their data and infrastructure. VPS hosting means renting a blank Linux server from cloud providers such as DigitalOcean, Hetzner, AWS, Vultr, or Linode and building the environment from scratch.

    Unmanaged cloud servers start at $5 to $7 per month for a machine with 1GB to 2GB of RAM, offering incredible cost savings. However, the true cost is paid in your time and technical expertise.

    Many users are lured into DIY hosting by offerings like the DigitalOcean Marketplace “1-Click Ghost Install.” While it sounds incredibly convenient, it is largely a myth for non-developers.

    Yes, the initial installation is a one-click process. But from day two onward, you are acting as your own system administrator.

    When you use an unmanaged VPS, the cloud provider gives you the hardware and steps away. 100% of the server management is your responsibility. This means you must manually handle:

    • Ubuntu OS security patches via the command line (apt-get update).
    • Renewing Let’s Encrypt SSL certificates manually before they expire.
    • Configuring and monitoring server firewalls (UFW).
    • Updating Ghost itself via the command line interface (ghost-cli) often requires careful database backups beforehand.

    The Drawbacks of DIY Self-Hosting

    The glaring drawback to self-hosting Ghost with Docker or using the CLI is the steep learning curve. If you don’t have advanced Linux expertise, DIY hosting is highly risky. A single botched command during a routine update, or an overlooked security patch, can take your website offline for hours, or result in permanent data loss if you haven’t manually configured remote backups.

    3. The Best Ghost Hosting Solution: RunCloud

    If Managed Hosting is too restrictive and expensive, and DIY VPS Hosting is too complicated and risky, where does that leave you?

    The answer is RunCloud.

    RunCloud sits directly in the “sweet spot” between these two extremes, providing the absolute best ghost hosting experience by combining the cost savings of a VPS with the automated ease of a managed platform.

    Here is why developers, agencies, and publishers use RunCloud for their ghost website hosting:

    Choose Your Own Cloud Infrastructure

    With RunCloud, you aren’t locked into proprietary servers. You simply rent a bare-metal server from your favorite cloud provider, whether that’s a highly affordable $5/month Hetzner server, a DigitalOcean Droplet, or a robust AWS EC2 instance. You pay wholesale prices directly to the cloud provider, and RunCloud connects to it via our platform to handle the management.

    Host More Than Just Ghost (Maximize Your Server)

    This is RunCloud’s biggest advantage over official managed platforms. When you use RunCloud, the server is entirely yours. You’re not artificially limited to a single application.

    Let’s say you rent a $12/month server with 4GB of RAM. With RunCloud, you can seamlessly host Ghost and WordPress on the same server. An agency could host a client’s primary WordPress e-commerce site, a custom Laravel backend API, and a sleek new Ghost blog all on the same VPS. By stacking multiple web applications on a single server, your actual hosting cost per website drops to pennies.

    RunCloud monitoring Dashboard

    Zero Linux Expertise Required

    RunCloud replaces the black SSH terminal screen with a beautiful, intuitive graphical dashboard. You get full server control without memorizing Linux commands. With a few clicks in the RunCloud dashboard, you can:

    For a complete technical walkthrough, follow our comprehensive guide on How to Deploy Ghost via Docker on RunCloud.

    Frequently Asked Questions (FAQs)

    What is the cheapest Ghost hosting?

    You can get the cheapest ghost hosting by renting a budget-friendly VPS from providers like Hetzner or DigitalOcean for around $4-$6 per month. By connecting that unmanaged server to RunCloud, you can get premium, managed-like dashboard features without paying the high monthly subscription fees of dedicated hosting companies.

    Can I use shared hosting for Ghost CMS?

    You cannot use shared hosting for Ghost because it runs on a modern Node.js stack rather than traditional PHP. Most cheap shared hosting environments (like standard cPanel setups) do not support the persistent background processes required to run Node.js applications, which is why a dedicated VPS or cloud server is necessary.

    What are the best Ghost hosting alternatives to Ghost Pro?

    The most cost-effective alternative to Ghost Pro is self-hosting on your own cloud infrastructure using a server management panel like RunCloud. This gives you lightning-fast performance and security for a fraction of the cost, preventing your hosting bill from skyrocketing as your email subscriber list grows.

    How much RAM do I need for a Ghost server?

    To install and run a Ghost blog smoothly, you need a server with at least 1GB of RAM. However, upgrading to a server with 2GB or more is highly recommended to ensure stability during traffic spikes or if you plan to host additional web applications alongside your blog on the same server.

    Wrapping Up

    When you’re launching your website, choosing the right infrastructure shouldn’t be a trade-off. Fully managed plans are often too expensive and restrictive for growing creators, while DIY self-hosting on a blank VPS requires advanced Linux skills that are too risky and time-consuming for non-developers.

    RunCloud is the perfect middle ground for Ghost hosting.

    By bringing your own cloud server to RunCloud, you can get the best of both worlds: wholesale server pricing, the freedom to host multiple web applications on a single machine, and an intuitive dashboard that handles all the complex server management for you.

    Sign up for a RunCloud account today and connect your first server.

  • How to Use Edge Caching to Speed Up WordPress Worldwide

    How to Use Edge Caching to Speed Up WordPress Worldwide

    Is your WordPress website loading quickly for local users, but frustratingly slow for visitors on the other side of the world?

    In modern SEO, website speed is a key ranking factor. If your site takes too long to load, frustrated visitors will simply leave, costing you both traffic and sales. 

    In this beginner-friendly guide, we will break down exactly what edge caching means and why it drastically lowers your Time to First Byte (and what that is!).

    You’ll learn how modern Content Delivery Networks cache full HTML pages and how to do it safely without breaking dynamic pages like WooCommerce.

    Why Edge Caching Speeds Up WordPress 

    If your main WordPress hosting server is located in New York, a visitor from London will naturally experience a slower loading time than a visitor from Brooklyn. This happens because data has to physically travel across the ocean.

    Edge caching solves this distance problem by ensuring your website loads instantly for everyone, no matter where they live.

    What Edge Caching Means for WordPress

    To understand edge caching, think of a massive central warehouse (your web host) and dozens of small, local retail stores (the “edge” servers).

    Normally, whenever a user visits your website, their browser must request the website files directly from your main web host. Edge caching changes this by saving a copy of your WordPress site on a global network of servers (a Content Delivery Network, or CDN). 

    When someone visits your website, the server closest to them (the “edge”) serves it. Because the data travels a much shorter distance, your website appears on their screen in the blink of an eye.

    Suggested read: NGINX Caching for WordPress – Complete Guide & Tutorial

    How Caching HTML at the Edge Cuts TTFB for Global Visitors

    TTFB stands for Time to First Byte. It’s a metric that measures exactly how long it takes a user’s browser to receive the very first data from your website. A lower TTFB means a faster website.

    In the past, CDNs only saved “static” files like images or fonts. Your main server still had to do the heavy lifting of building the actual web page (the HTML) for every single visitor. Today, modern edge caching stores the entire, fully built HTML page directly on edge servers.

    Here is why caching HTML is a game-changer for your SEO and speed:

    • Zero Database Queries: WordPress doesn’t have to waste time searching its database to build the page.
    • No PHP Processing: The server doesn’t have to run complex code. It just hands the pre-built page to the visitor.
    • Instant Delivery: Because the fully built page is waiting right next door to the user, your TTFB drops from over a second to just milliseconds.

    Suggested read: How To Use Redis Object Cache To Speed Up A Dynamic WordPress Site

    When Edge Caching Will Not Help

    While edge caching is incredibly powerful, it’s not a magic fix for everything. Because edge caching is designed to serve static copies of pages to the public, it automatically turns off in a few specific situations.

    Edge caching will not speed up your site in these scenarios:

    • Logged-In Traffic: If a user is logged in to your site (e.g., a member or WordPress administrator), they need to see personalized, live content. The edge cache is bypassed, so they don’t see an old, cached version of the dashboard.
    • Uncached Dynamic Pages: E-commerce pages, such as WooCommerce Shopping Cart or Checkout pages, cannot be cached. If they were, shoppers might see other people’s items! 
    • A Slow Backend Server: Edge caching hides a slow server from your public readers. However, anytime a visitor needs to do something dynamic (like submit a contact form, use a search bar, or process a payment), the request must go back to your original WordPress host. If your hosting provider is slow or your database is bloated, these actions will still feel slow.

    Suggested read: How To Use Redis Full-Page Caching To Speed Up WordPress

    How to Implement Edge Caching for WordPress

    Configuring edge caching for WordPress might sound highly technical, but the steps are quite simple. Here is the exact step-by-step process for implementing edge caching in WordPress.

    Step 1: Pick your edge caching approach 

    Before changing any settings, you must decide how you want your CDN to interact with your WordPress host. There are two primary approaches:

    • Origin Page Cache + CDN (Traditional Method): Your WordPress server (the origin) generates and caches the HTML page locally. The CDN is used only to deliver static assets such as images, CSS, and JavaScript. While this is easy to set up, global visitors still have to wait for the HTML document to travel from your main server, keeping your Time to First Byte (TTFB) higher than ideal.
    • CDN HTML Cache (Full Page Edge Caching): The CDN stores a complete copy of the HTML document on its global edge servers. This is the preferred method for maximum speed worldwide. When a user requests a page, the edge server delivers the HTML instantly without ever contacting your WordPress host.
    • RunCache (All-in-one): For most users, Cloudflare Automatic Platform Optimization is the gold standard for CDN HTML caching. Cloudflare’s data shows that APO can improve TTFB by up to 72% globally. To get the absolute best results, we highly recommend using the RunCache Cloudflare Integration.

    This integration seamlessly bridges your local WordPress cache with Cloudflare’s global edge network. It also ensures that whenever you update a post or change a product, the edge cache is purged and rebuilt instantly, giving you blazing-fast global speeds without the headache of showing outdated content.

    Step 2: Enable Edge Caching on WordPress

    For this tutorial, we will be using RunCache with Cloudflare’s global CDN to serve your entire website from edge locations closer to your visitors. Follow these steps to generate a secure API token and connect your site.

    Step 2.1: Generate a Custom Cloudflare API Token

    To maintain high security, we recommend creating a “Custom Token” with limited permissions rather than using your Global API Key.

    1. Log in to your Cloudflare Dashboard.
    2. In the left menu, click on Manage Account and select Account API tokens.
    1. Click Create Token, then locate Create Custom Token at the bottom and click Get Started.
    2. Token Name: Enter a name like RunCache – [Your Site Name].
    3. Permissions: Add the following three permissions:
      • Zone: Cache Rules: Edit
      • Zone: Cache Purge: Purge
      • Zone: Zone: Read
    1. Zone Resources: Under “Include,” select Specific zone and choose the domain you are currently configuring.
    2. Click Continue to Summary, then Create Token.
    3. After creating the token, copy it immediately and store it in a safe place – Cloudflare will not show it to you again.

    Step 2.2: Ensure Your Domain is Proxied

    Cloudflare caching only works if your traffic is flowing through their network.

    1. In your Cloudflare Dashboard, go to the DNS tab for your domain.
    2. Locate your A or CNAME records (usually for your root domain and the www subdomain).
    3. Ensure the Proxy status toggle is set to Proxied (the cloud icon should be Orange). If it is “DNS Only” (Grey), Cloudflare’s cache will not be active.

    Step 2.3: Enable Cloudflare in the RunCache Plugin

    Now that you have your token and your DNS is ready, connect the plugin to Cloudflare.

    1. Log in to your WordPress Admin Dashboard.
    2. Navigate to RunCache in the sidebar and click on the Full Page Cache tab.
    3. Enable Cloudflare from the list of cache providers.
    4. Paste your newly created token into the API Token field.
    5. Click Save Settings.
    enable cloudflare edge caching wordpress

    Once connected, RunCache will automatically communicate with Cloudflare to manage your cache, purge outdated content when you update posts, and ensure your visitors receive the fastest possible delivery via the Cloudflare edge network.

    Suggested read: Scaling RAM & CPU Cores – How They Affect WordPress Performance

    Step 2: Set the right cache headers for HTML and assets 

    Note: if you are using RunCache, all HTTP headers are handled intelligently by RunCache, and you don’t need to configure them manually.

    CDNs don’t just guess what to cache – they follow strict instructions sent by your server, called HTTP Headers. To make edge caching work perfectly, you need to configure the following directives in Cache-Control headers correctly:

    • max-age: This tells the visitor’s local web browser how long to store the file. For edge-cached HTML, you usually want this set to a low value (e.g., max-age=3600) so browsers always request the latest version from the CDN.
    • s-maxage (Shared Max-Age): The “s” stands for shared cache (your CDN). This tells the edge server how long to hold onto the HTML file. A good rule for WordPress posts is s-maxage=604800 (7 days).
    • stale-while-revalidate: If an edge-cached page expires after 7 days, this directive tells the CDN to immediately serve the “stale” (expired) page to subsequent visitors so they don’t have to wait. In the background, the CDN quietly fetches the latest version from your WordPress server for future visitors. Setting stale-while-revalidate=86400 (24 hours) keeps your site feeling instantly fast 100% of the time.

    Suggested read: How to Easily Optimize Your WordPress Website With RunCloud Hub

    Step 3: Add bypass rules for logged-in users, WooCommerce, and dynamic cookies

    Note: if you are using RunCache, this step is handled automatically.

    The biggest risk of edge caching is caching private or dynamic information by accident. If an edge server caches a page while you are logged in, it might show your WordPress admin bar to regular visitors. To prevent this, you must set up Bypass Rules (also known as Cache Exclusions) in your CDN dashboard or via your caching plugin.

    If you’re using RunCache, you can manage these settings under the Rules tab.

    Important Bypass Rules for WordPress:

    1. Logged-in Users: Tell the CDN to completely bypass the cache if the browser contains the wordpress_logged_in_* cookie.
    2. WooCommerce Cookies: Exclude caching for any user carrying the woocommerce_items_in_cart or wp_woocommerce_session_* cookies. 
    3. Dynamic URLs: Force the CDN to bypass the cache for specific URL paths, including:
      • /wp-admin/*
      • /cart/
      • /checkout/
      • /my-account/

    By setting these rules, your public blog posts and landing pages will load from the edge instantly, while your secure, dynamic pages will safely load directly from your origin server.

    Suggested read: Understanding RunCache Purging Options in RunCloud Hub

    Step 4: Verify edge caching is working using response headers and DevTools

    Once you’ve configured your setup, you should test it to ensure the HTML is actually being served from the edge. You don’t need any fancy software to do this – just your web browser.

    1. Open your website in an Incognito/Private window (to ensure you aren’t logged in).
    2. Right-click on the page and select “Inspect” to open Developer Tools.
    3. Click the “Network” tab, then refresh the page (press F5).
    4. Then click the network request that you want to inspect.
    5. Look at the “Response Headers” section on the right side.
    6. In the response section, you need to look for the following response headers x-cache: HIT or x-runcache-status: HIT. If it says “MISS”, refresh the page one more time to prime the cache. Once it says “HIT”, your HTML is successfully loading from the edge.

    Suggested read: How To Host Multiple Websites On One Server | Ultimate Guide

    Wrapping Up 

    Edge caching is the best strategy for delivering a lightning-fast WordPress experience to visitors worldwide. However, maximizing these speed benefits requires careful management to avoid common pitfalls.

    Edge caching significantly reduces the daily workload on your origin server, but you still need a clean, conflict-free setup to keep your backend fast under heavy load. Running multiple overlapping caching layers often leads to messy system conflicts, which is why RunCloud built Runcache.

    Runcache is a modern WordPress caching plugin that consolidates all caches (local page cache, Redis object cache, and edge network) into one streamlined layer.

    And the best part is that RunCache works with any WordPress site on any host, not just those hosted on RunCloud.

    Start using RunCache to deliver faster global WordPress performance.

    FAQs

    What is edge caching in WordPress?

    Edge caching in WordPress stores a copy of your website on servers located very close to your visitors. These servers are part of a global Content Delivery Network (CDN) with hundreds of worldwide locations. When a user visits your site, the closest edge server delivers the content instead of your primary web host.

    Does edge caching cache HTML or only static files?

    Traditional CDNs only cache static files, such as images, CSS, and JavaScript. However, modern edge caching also caches your fully generated WordPress HTML pages. This advanced process is known as full-page edge caching.
    By caching HTML at the edge, your site can handle thousands of concurrent visitors without crashing. Only dynamic requests, such as form submissions, bypass the cache and reach your origin server.

    What WooCommerce pages should never be cached?

    You must never cache dynamic WooCommerce pages that contain personal user data. The three main pages to absolutely exclude from caching are the Cart, Checkout, and My Account pages. If you cache these pages, a customer might accidentally see another shopper’s private billing information. 

    Why do I still see old content after a purge?

    You usually see old content because of local browser caching. You can easily fix this by performing a hard refresh using Ctrl+F5 on Windows or Cmd+Shift+R on a Mac. Another common reason is multiple active caching layers. You might have cleared your CDN edge cache, but your WordPress caching plugin or server object cache still holds the old data. 

    Should I use edge caching with a WordPress caching plugin?

    Yes, you should absolutely use edge caching alongside a high-quality WordPress caching plugin. Edge caching excels at delivering your website files globally at lightning speeds. Meanwhile, a local caching plugin handles critical on-site performance optimizations.

  • How to Set Up a Headless WordPress Blog with Astro and Git

    How to Set Up a Headless WordPress Blog with Astro and Git

    If you want to build a completely custom frontend UI without giving up the powerful, built-in WordPress ecosystem, a headless setup is exactly what you need.

    A headless WordPress architecture lets you use the WordPress CMS for content management while using the framework of your choice for the frontend. In this tutorial, we will use Astro, a modern framework built for speed that lets you fetch data from WordPress and render it as static HTML.

    This combination provides the ultimate developer experience: you keep the familiar WordPress dashboard and plugin ecosystem while building a completely custom, high-performance frontend free from the limitations of legacy themes.

    Benefits of Headless WordPress 

    Decoupling content creation and frontend development is a major benefit. Content teams use the familiar WordPress dashboard for posts and SEO without touching the Astro codebase, speeding up the content pipeline. Simultaneously, frontend developers focus purely on UX, features, and design optimization without interrupting content work. 

    Here are the primary advantages you can expect from this headless architecture:

    • Performance: Because Astro builds statically by default, it fetches your data from the WordPress REST API at build time and generates static HTML files, making your site incredibly fast.
    • Security: Your WordPress backend is not directly exposed through the frontend, reducing your attack surface while still allowing you to apply standard security controls where needed.
    • Flexibility: You have full developer control over the frontend code while still using WordPress as a robust CMS.
    • SEO: Static pages are easily crawled and indexed by search engines.

    By the end of this tutorial, you will know exactly how to connect these two powerful tools. We will focus on producing static pages that are generated entirely at build time.

    Once you are comfortable with this workflow, you can later customize how Astro behaves. For example, you can eventually change your category pages to dynamically fetch all pages via the API on the client side, rather than generating them during the build process.

    Prerequisites

    Before starting, you need a live WordPress site with the REST API accessible (at /wp-json/wp/v2/).

    In this guide, we will not teach you how to install WordPress, as we have already covered this topic extensively in our previous blog posts. If you need help setting up your initial WordPress site, please refer to one of these guides:

    Phase 1: Prepare WordPress for Headless

    Once your WordPress site is live on the internet, the built-in WordPress REST API will already be active. We just need to make sure it is properly formatted and accessible to Astro.

    1. Set your Permalinks: The WordPress REST API relies on clean URLs to work properly.
      • Log in to your WordPress admin dashboard.
      • Navigate to Settings > Permalinks.
      • Select “Post name” (or any other clean URL structure).
      • Click Save Changes.
    2. Verify the REST API is working
      • Open a new browser tab.
      • Visit your WordPress site’s API endpoint at https://[YOUR-WP-DOMAIN]/wp-json/wp/v2/ (replace the bracketed text with your actual domain name).
      • Check the screen for a JSON response containing the site data containing your posts. If you see this data, your headless backend is ready.
    1. Set up Custom Post Types (Optional)

    If you use Custom Post Types such as “Portfolios” or “Testimonials”, they are hidden from the REST API by default (unless a plugin actively enables show_in_rest). To use a CPT in your headless setup alongside standard posts and pages, you must configure them in your WordPress dashboard to allow REST API support.

    Note: The upcoming examples will fetch data from a WordPress site whose content types have already been configured and exposed to the REST API.

    1. Configure Authentication and Fetching Strategy (optional)

    By default, the REST API is open to the public for reading content. If you are building a private application, you can configure your WordPress site to require authentication by following the official REST API Handbook.

    Phase 2: Create WordPress Frontend with Astro 

    With your WordPress backend configured and its REST API ready to serve content, the next step is to build a fast frontend to display your posts. We’ll use Astro to fetch content from the API at build time, generating static HTML pages for maximum performance and security.

    Step 1: Create a New Astro Project

    With your WordPress site ready, create a new Astro project using the official starter template:

    npm create astro@latest my-astro-wp

    Select the following options when prompted:

    • Use A basic, helpful starter project: Yes
    • Install dependencies: Yes
    • Initialize git: Yes 

    Navigate to your project folder:

    cd my-astro-wp

    Step 2: Configure Environment Variables

    Create a .env file in the project root to store your WordPress URL:

    PUBLIC_WP_URL=https://runcloud.example.com/wp-json/wp/v2/

    Replace the URL with your actual WordPress site URL.

    Step 3: Create the Homepage That Fetches WordPress Data

    Create your homepage at src/pages/index.astro to fetch and display WordPress posts:

    ---
    import Layout from '../layouts/Layout.astro';
    interface WP_Post {
      title: { rendered: string };
      content: { rendered: string };
      excerpt: { rendered: string };
      slug: string;
      _embedded?: {
        'wp:featuredmedia'?: Array<{
          media_details: {
            sizes: {
              medium?: { source_url: string };
            };
          };
        }>;
      };
    }
    const wpUrl = import.meta.env.PUBLIC_WP_URL;
    const res = await fetch(`${wpUrl}/posts?_embed&per_page=20`);
    const posts: WP_Post[] = await res.json();
    ---
    <Layout title="Astro + WordPress Blog">
      <main>
        <h1>Latest Posts</h1>
        <ul class="post-list">
          {posts.map((post) => (
            <li class="post-item">
              {post._embedded?.['wp:featuredmedia']?.[0]?.media_details?.sizes?.medium?.source_url && (
                <img
                  src={post._embedded['wp:featuredmedia'][0].media_details.sizes.medium.source_url}
                  alt={post.title.rendered}
                  class="post-thumbnail"
                />
              )}
              <h2>
                <a href={`/posts/${post.slug}/`} set:html={post.title.rendered} />
              </h2>
              <p class="post-excerpt" set:html={post.excerpt.rendered} />
            </li>
          ))}
        </ul>
      </main>
    </Layout>
    <style>
      main {
        max-width: 800px;
        margin: 0 auto;
        padding: 2rem;
      }
      h1 {
        font-size: 2.5rem;
        margin-bottom: 2rem;
        text-align: center;
      }
      .post-list {
        list-style: none;
        padding: 0;
      }
      .post-item {
        margin-bottom: 2rem;
        padding: 1.5rem;
        border: 1px solid #eee;
        border-radius: 8px;
        text-align: center;
      }
      .post-thumbnail {
        width: 100%;
        max-width: 400px;
        height: auto;
        border-radius: 4px;
        margin-bottom: 1rem;
        display: block;
        margin-left: auto;
        margin-right: auto;
      }
      .post-item h2 {
        margin: 0.5rem 0;
      }
      .post-item h2 a {
        color: #333;
        text-decoration: none;
      }
      .post-item h2 a:hover {
        color: #0066cc;
      }
      .post-excerpt {
        color: #666;
      }
    </style>

    A note on pagination: The WordPress REST API limits the number of posts that can be returned in a single request. While per_page=20 works for small sites, larger sites will need pagination to fetch all posts.

    The maximum value for per_page is typically 100. If you exceed this, the API will silently limit the results.

    For production use, you should either:

    • Fetch multiple pages using the page parameter
    • Implement a loop to retrieve all posts during the build process

    Step 4: Create Dynamic Post Pages

    Create src/pages/posts/[slug].astro to handle individual post pages:

    ---
    import Layout from '../../layouts/Layout.astro';
    interface WP_Post {
      title: { rendered: string };
      content: { rendered: string };
      slug: string;
    }
    export async function getStaticPaths() {
      const wpUrl = import.meta.env.PUBLIC_WP_URL;
      const res = await fetch(`${wpUrl}/posts?_fields=slug,title,content`);
      const posts: WP_Post[] = await res.json();
      return posts.map((post) => ({
        params: { slug: post.slug },
        props: { post },
      }));
    }
    const { post } = Astro.props;
    ---
    <Layout title={post.title.rendered}>
      <main>
        <article>
          <h1 set:html={post.title.rendered} />
          <div class="content" set:html={post.content.rendered} />
          <a href="/" class="back-link">← Back to all posts</a>
        </article>
      </main>
    </Layout>
    <style>
      main {
        max-width: 800px;
        margin: 0 auto;
        padding: 2rem;
      }
      article {
        background: white;
        padding: 2rem;
        border-radius: 8px;
      }
      h1 {
        font-size: 2.5rem;
        margin-bottom: 2rem;
        color: #333;
      }
      .content {
        line-height: 1.8;
        color: #444;
      }
      .content :global(img) {
        max-width: 100%;
        height: auto;
        border-radius: 4px;
      }
      .content :global(p) {
        margin-bottom: 1.5rem;
      }
      .back-link {
        display: inline-block;
        margin-top: 2rem;
        color: #0066cc;
        text-decoration: none;
      }
      .back-link:hover {
        text-decoration: underline;
      }
    </style>

    Step 5: Run the Development Server

    Start the development server:

    npm run dev

    Visit http://localhost:4321 to see your headless WordPress blog in action. You should see all your WordPress posts displayed on the homepage, and clicking on any post will take you to its full article page.

    Step 6: Build for Production

    When ready to deploy, build your static site:

    npm run build

    The output will be in the dist/ folder, ready to deploy to any hosting provider, such as Netlify, GitHub Pages, or RunCloud.

    Step 7: Keep Your Content in Sync with Rebuilds

    The Astro project in the above example generates static pages at build time by default; any new or updated content published in WordPress will not appear on your live site immediately. To display the latest content, you must trigger a new build so Astro can fetch the fresh data from your REST API.

    Depending on your publishing schedule and team size, you have a few ways to manage these rebuilds.

    Option A: Manual Rebuilds (Simple)

    If you only publish content occasionally, the simplest approach is to manually trigger a deployment from your RunCloud dashboard whenever you publish a new post.

    1. Log in to your RunCloud dashboard.
    2. Navigate to Atomic Deployment > your Astro project.
    3. Click Force Deploy to force a manual rebuild.

    RunCloud will run your deployment script, fetch the newest WordPress data, and update your live site using atomic deployment.

    Option B: Automated API Triggers (Advanced)

    By default, RunCloud automatically builds your site whenever new code changes are pushed to GitHub. However, publishing a post in WordPress does not push code to GitHub. To automate deployments based on content updates, you can use the RunCloud API to trigger a build programmatically.

    You might be tempted to add a custom PHP function to your WordPress site that pings the RunCloud API every time a post is saved. However, if you have a team of writers constantly saving drafts and making simultaneous revisions, this can result in dozens of unnecessary deployments running back-to-back, which can consume server resources and cause conflicts.

    Scheduled Deployments (Cron Jobs)

    To avoid overwhelming your deployment pipeline, the best practice is to set up a cron job. Instead of deploying on every single save, you can configure a server cron job to ping the RunCloud deployment API on a predictable schedule.

    1. Decide on a publishing schedule (for example, once every 12 hours or once a day at midnight).
    2. Create a server-level cron job that sends a POST request to your RunCloud Webhook URL at that specific interval.
    3. Instruct your content team that new posts will go live at those designated times.

    Read the RunCloud documentation to learn more about enabling API access and setting up cron jobs on RunCloud.

    Note: The need to constantly rebuild your application depends entirely on your Astro project architecture. The steps above apply to Static Site Generation (SSG), Astro’s default behavior that offers the best performance. However, if you configure Astro to use Server-Side Rendering (SSR), your application will dynamically fetch data from the WordPress API at runtime. In an SSR setup, any content changes saved in WordPress will appear on your frontend instantly, completely eliminating the need to rebuild your site after each post.

    Phase 3: Deploy Astro Project to RunCloud

    Now that your local Astro project is successfully fetching data from your headless WordPress setup, it is time to share it with the world.

    In this phase, we will push your code to GitHub and set up a deployment pipeline on RunCloud.

    We are going to configure an “atomic deployment.” The major benefit of this setup is that after you commit and push your code, it becomes available to users worldwide in often less than a minute. Furthermore, if a build fails for any reason, your old code will continue running smoothly with zero downtime.

    Here is how to set up your professional deployment workflow.

    Step 1: Push your Astro project to GitHub

    First, we need to host your code in a repository so RunCloud can access it.

    1. Open your web browser and log in to your GitHub account (or any supported Git provider).
    2. Navigate to your dashboard, then click the New button to create a repository.
    3. Give your repository a name.
    4. Leave the option to add a README file unchecked. It is very important that the repository is completely empty.
    5. Click Create repository.
    6. GitHub will now show you a page with instructions for pushing an existing repository from the command line. Open your computer’s terminal, make sure you are in your Astro project folder, and copy and paste those specific commands to commit your code and push it to GitHub.

    Step 2: Create a new RunCloud Web Application

    Now, let’s tell RunCloud where to find your code.

    1. Log in to your RunCloud dashboard.
    2. Navigate to your server, then click Deploy New Web App.
    3. Choose the option to install from a Git repository and select your Git provider.
    4. Enter a suitable name for your application.
    5. Locate the “Web Application Owner” section and uncheck the “Use existing system user” checkbox.
    6. Enter a new name, such as astrowp.
    1. Configure the domain name for your website. (You can use a test domain name for now and update it later manually or by using the RunCloud DNS manager.)
    2. Enter the details for your new project into the “Repository name” and “Branch name” fields. 
    3. Copy the deployment key generated by RunCloud. 
    4. Open your GitHub repository and navigate to Settings > Deploy keys.
    5. Click Add deploy key, paste the key provided by RunCloud, and save your changes.
    6. Return to RunCloud and leave all other settings at their defaults.
    7. Click Add Web Application.

    Note: Steps for adding deployment keys can vary by provider. For exact steps, screenshots, and a detailed guide, check out your supported provider in the RunCloud documentation.

    Step 3: Convert to Atomic Deployment and set Webhooks

    Atomic deployments keep your site up while Astro builds your new pages.

    1. Inside your RunCloud dashboard, click on Atomic Deployment in the left menu.
    2. Click the “Add New Project” button to convert your application to atomic deployments.
    1. Follow the on-screen instructions to copy the provided webhook URL.
    2. Go back to your GitHub repository, navigate to Settings > Webhooks, and click Add webhook.
    3. Paste the RunCloud URL into the “Payload URL” field and save. This ensures that GitHub tells RunCloud to update your site whenever you push new code.

    Step 4: Add your Environment Variables

    Because your code is now on a live server, it needs your “.env” file to know where your WordPress API lives. RunCloud’s atomic deployment uses a shared folder so your environment variables persist across deployments.

    1. In your RunCloud Web Application dashboard, navigate to Atomic Deployment > Your Project > Symlink.
    2. Click Add New Symlink.
    3. Set the “Symlink Type” to “Config”.
    4. Enter “.env” in both the “Link From” and “Link To” fields.
    5. Add your PUBLIC_WP_URL variable exactly as you did on your local machine.
    6. Set a password for encryption. Remember this password if you want to edit this file again.
    7. Click Save.

    Step 5: Install NVM via SSH

    RunCloud servers ship with a default version of Node.js, but Astro often requires a specific, modern LTS (Long-Term Support) version. We will install Node Version Manager to handle this safely.

    1. Open your terminal and log in to your server via SSH using your new system user account (for example, “astrowp”). For step-by-step instructions and a detailed guide on connecting to your server via SSH, refer to the RunCloud documentation on How to Connect to Your Server via SSH.
    2. Run the following command to download and install NVM:
    curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash
    1. Close your terminal completely and open a new SSH session so the system recognizes the new software.
    2. Run nvm install –lts to install the latest long-term support version of Node.js.

    Note: This is the only time you need to log in via SSH; all other processes will be handled automatically by the Git deployment pipeline.

    Step 6: Create the Deployment Script

    Now we will write the instructions that RunCloud follows every time it receives new code from GitHub.

    1. In your RunCloud dashboard, navigate to Atomic Deployment > Your Project > Deployment Script.
    2. Scroll down to the Activate Latest Release section and click “Add Script”.
    3. Give this script a suitable name, and under the “When to Run This Script”, select “Before Activate latest release” from the dropdown menu.
    4. Delete the default text and paste the following script:
    # 1. Navigate to the current release directory
    cd {RELEASEPATH}
    
    
    # 2. Load NVM into the script environment 
    export NVM_DIR="/home/$USER/.nvm"[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
    
    
    # 3. Tell the system to use the LTS version of Node.js
    nvm use --lts
    
    
    # 4. Install your Astro project dependencies
    npm install
    
    
    # 5. Build the static files using an absolute path to avoid version conflicts
    npm run build

    Note: By using the NVM in step 3, you ensure the system will not accidentally revert to RunCloud’s built-in Node version, preventing unexpected version conflicts. 

    1. Make sure to check the box next to “Run on Web Application” and then click Save to apply your new script.
    2. After that, open the Settings tab for this atomic deployment project to configure the deployment configuration options.
      • Auto deploy on git push: Triggers a deployment every time you push code to the configured branch. 
      • Install Composer dependencies: Ensure this is UNCHECKED. For this Astro project, we use npm install in the custom script, not Composer.
      • Install Dev Dependencies: Installs development-related PHP dependencies. (Not applicable to this Node.js/Astro project).
    3. You can optionally configure notification channels such as Slack, Discord, Telegram, or Webhooks for both successful and failed deployments in the Notifications section of your RunCloud Web Application.

    Step 7: Run your First Deployment

    You are fully configured and ready to go.

    1. Still inside the Atomic Deployment menu on RunCloud, locate the option to manually run a deployment on the top right.
    2. Click Force Deploy.
    3. Watch the deployment log. You will see RunCloud fetch your code, install dependencies, and build your Astro HTML files using your WordPress data.

    Once the build passes, your headless website is officially live. Now, if you visit the URL configured in Step 2 for your frontend web application on RunCloud, you will be able to view your newly deployed, fast, headless WordPress site powered by Astro.

    deploy astro headless wordpress site

    Phase 4: Advanced Steps (optional)

    Now that your headless WordPress and Astro website is live, you can explore a few optional advanced steps to optimize your workflow, improve performance, and expand your site features.

    Create a Staging Environment

    To take complete advantage of the RunCloud environment, it is highly recommended to build a staging environment.

    A staging environment is a private replica of your website where you can test WordPress plugins, Astro code updates, or new designs without breaking your live production site.

    Because your backend (WordPress) and frontend (Astro) are separated, you will manage their staging environments separately. You can deploy two different branches of your Astro Git repository for this purpose.

    Test your staging site locally:

    1. Clone your production WordPress site to a new staging domain on RunCloud using RunCloud’s built-in one-click WordPress staging functionality.
    2. Open your local Astro project on your computer.
    3. Open your “.env” file.
    4. Update the PUBLIC_WP_URL variable to match your new staging WordPress domain name.
    5. Run your local development server to safely test your new WordPress plugins against your Astro frontend.

    Create a cloud staging environment for your team:

    Optionally, you can create a second project on the cloud so your entire team can test changes under load or for longer durations.

    1. Open your GitHub repository and create a new branch named “staging”.
    2. Log in to your RunCloud dashboard and navigate to Web Application.
    3. Click Create Web App.
    4. Follow the standard deployment steps, but enter “staging” into the “Branch name” field.
    5. Assign a test domain name to this new web application and click Add Web Application.

    Install RunCache

    To make your headless website build even faster, you should pair it with an object caching plugin. Object caching saves the results of complex database queries and returns data instantly. This significantly speeds up your WordPress REST API responses.

    RunCache is a free tool built for this exact purpose. While it is highly optimized for RunCloud servers, it can be used on any WordPress backend site.

    Make More Pages and Endpoints

    Your website is currently fetching blog posts, but you are only limited by your imagination. You can create custom views, pages, and features using the pre-built WordPress REST APIs. Astro can generate pages for any data that WordPress outputs.

    Here are a few examples of what you can build next:

    • Author Pages: Fetch data from the /wp-json/wp/v2/users endpoint to create a directory of your blog authors and their biographies.
    • Category Pages: Fetch data from the /wp-json/wp/v2/categories endpoint to generate dynamic landing pages that group your posts by specific topics.
    • Custom Post Types: If you use a plugin to create a “Portfolio” or “Testimonials” post type, you can fetch them just like regular posts and design unique Astro layouts for them.

    If you know a little PHP, you can even write your own WordPress plugins to create completely custom REST API endpoints tailored to your exact business needs.

    To discover everything you can fetch and build, review the official WordPress API documentation:

    Final Thoughts

    Building a headless architecture with WordPress and Astro offers the best of both worlds: you get the unmatched content management experience of WordPress alongside Astro’s high-performance, developer-first environment. 

    While you are now free from the constraints of pre-built themes, a custom stack demands a fast server environment to handle deployments, security, and consistent uptime.

    RunCloud bridges this gap by turning complex server administration into a streamlined, automated workflow. Once your site is deployed, RunCloud handles the “heavy lifting” (including server-level security, SSH access, system backups, and automated continuous deployments) so you can focus entirely on your work rather than managing your OS.

    If you are looking for a professional-grade way to host and manage your headless infrastructure, RunCloud provides the stability and ease of use your project deserves.

    Sign up for your RunCloud account and experience painless server management today. 

  • How to Preload Fonts in WordPress to Reduce CLS and Improve LCP

    How to Preload Fonts in WordPress to Reduce CLS and Improve LCP

    Is your WordPress site failing Core Web Vitals checks despite having optimized images and minified code?

    In some cases, slow typography loading can delay Largest Contentful Paint and cause visual instability known as Cumulative Layout Shift – but only when fonts are part of the critical rendering path.

    In this guide, you will learn exactly how to preload fonts in WordPress to remove render-blocking delays and make your text appear instantly.

    We will walk you through identifying the correct font files, adding the precise code snippets to your theme, and avoiding common mistakes that can actually slow your site down.

    When This Guide Will Not Help

    This guide will not improve your Core Web Vitals if your Largest Contentful Paint element is an image, background video, or slider. In those cases, font loading is not the bottleneck, and preloading fonts will have little or no measurable impact.

    Before continuing, confirm that text (such as an H1 or hero heading) is identified as the LCP element in PageSpeed Insights or Lighthouse.

    If fonts are not flagged under “Preload key requests”, this guide is not the correct fix.

    Why Font Loading Causes CLS and LCP Issues in WordPress

    Fonts are often the “heaviest” assets on a page after images, but browsers handle them differently than other files. In WordPress, themes frequently enqueue fonts via external requests (such as Google Fonts) or bury them deep within CSS files. This creates a “chain of delays” where the browser downloads the HTML, then the CSS, and only then realizes it needs to download a font file.

    This delay exposes your site to slow server responses. If your hosting environment has a high Time to First Byte (TTFB), the browser waits even longer before starting the font download. 

    How Late Font Loading Triggers Layout Shift 

    Cumulative Layout Shift (CLS) occurs when elements on a page unexpectedly move. It happens in three parts:

    • When a browser loads a page, it may initially display a “system font” (like Arial) while the custom font is downloading. System fonts and custom fonts rarely have identical character widths.
    • Once the custom font finishes downloading, the browser swaps it in. If the new font is wider or taller, the text block expands, pushing buttons, images, and other content down the page. This movement penalizes your CLS score.
    • If your server is slow to deliver the font file due to poor caching or lack of compression, the user sees the system font for longer, making the eventual shift more noticeable and jarring.

    Suggested read: How to Make Fewer HTTP Requests on WordPress & Speed Up Your Site

    How Font Discovery Delays Render and Impacts LCP

    Largest Contentful Paint (LCP) measures how long it takes for the main content to become visible. Font preloading only helps when that element is text, such as an H1 or hero heading. If the LCP element is an image or background asset, preloading fonts will not improve this metric.

    This happens in the following manner:

    • Browsers are lazy by design; they won’t download a font until they build the “Render Tree” and confirm the font is actually used on the page. This means the browser parses HTML, downloads CSS, parses CSS, and then requests the font.
    • Many modern browsers will hide text completely until the font file is ready. If your H1 headline is waiting on a font, the screen stays blank. Since the H1 is often the LCP element, your LCP time increases by the exact amount of time it takes the font to download.

    Suggested read: How to Easily Fix Leverage Browser Caching Warning in WordPress

    When Preloading Fonts Helps vs. When It Makes Things Worse

    Preloading is a manual override that forces the browser to download the font immediately, skipping the “discovery chain.” However, it is a double-edged sword.

    • When it Helps: Preloading is excellent for the single primary font used in your LCP element (e.g., the H1 font). It ensures the text appears instantly, stabilizing LCP.
    • When it Hurts: If you preload too many files (e.g., body text, bold versions, icon fonts), you create network congestion. The browser has limited bandwidth; if it is busy downloading 5 font files, it cannot download your hero image or critical CSS. This actually worsens your page speed.

    Suggested read: How To Use NGINX FastCGI Cache (RunCache) To Speed Up Your WordPress Performance

    How to Preload Fonts in WordPress (Step-by-Step)

    Preloading fonts is a powerful way to tell browsers to prioritize typography assets and improve Core Web Vitals. However, frontend optimizations like this work best when backed by a high-performance server environment.

    Before you begin, remember that modifying site headers requires precise caching management. RunCloud’s server-level caching keeps your site fast, but you must clear the cache after applying these changes so visitors see the improvements immediately.

    Step 1: Confirm Fonts Are The Problem in PageSpeed Insights and Lighthouse

    Before adding code, verify that fonts are actually delaying your render time. Run a test on PageSpeed Insights or Google Lighthouse and look at the “Opportunities” section. If you see a warning labeled “Preload key requests,” expanding it will usually list specific font files that are delaying rendering.

    If your fonts are not listed under “Preload key requests”, stop here. Font preloading will not improve your results; focus on server response time, image optimization, or render-blocking scripts instead.

    At that point, ensure you are utilizing RunCloud’s optimized NGINX/Apache configurations.

    RunCloud helps reduce Time to First Byte (TTFB) so that when the browser finally requests the font, the server delivers it instantly without lag.

    preload font warning

    Preloading changes the order in which files load, but it does not make the files smaller or the server faster.

    Step 2: Identify the Exact Font File Used Above the Fold in DevTools

    You should never preload every font on your site, only the ones used immediately on the screen (above the fold). To find these, open your website in Chrome, right-click, and select Inspect to open DevTools. Navigate to the Network tab, reload the page, and click the Font filter. Look for the font files that load first and are critical for your main headings or navigation.

    Hover over the file name to see the full URL. You are specifically looking for .woff2 files, as these are the modern standard for compression and performance. Copy the URL of the font file you want to preload. 

    Step 3: Add The Preload Tag 

    Once you have the URL, you need to construct the HTML tag. The syntax for this HTML tag must be correct, or the browser will ignore it. The tag should look like this:

    <link rel="preload" href="/fonts/your-font-file.woff2" as="font" type="font/woff2" crossorigin>

    In the above tag, replace /fonts/your-font-file.woff2 with the path of the font that you noted down earlier. In addition to the path, make sure you include the crossorigin attribute. Even if the font is hosted on your own domain, the browser fetches it in anonymous mode. If you omit crossorigin, the browser may treat it as a different file request. 

    Suggested read: NGINX Caching for WordPress – Complete Guide & Tutorial

    Step 4: Implement it in WordPress (theme header or wp_head hook)

    There are two ways to add this tag to your WordPress site. The first method requires editing your header.php file in a child theme and pasting the line between the <head> tags. 

    The second approach is safer and more manageable. It requires adding a code snippet to your functions.php file, using the wp_head hook, to dynamically inject the link.

    Here is the code snippet to add a tag to your site header using the functions.php file and the wp_head hook. You should add this code to your child theme’s functions.php file or use a code snippet plugin.

    function add_custom_code_to_head() {
        ?>
    <link rel="preload" href="/fonts/your-font-file.woff2" as="font" type="font/woff2" crossorigin>
        <?php
    }
    add_action( 'wp_head', 'add_custom_code_to_head' );

    If you prefer not to use a plugin, you must access the functions.php file through your hosting provider, as the WordPress dashboard for Block Themes often does not allow this.

    1. Log in to your RunCloud dashboard and open the File Manager.
    2. Navigate to the folder wp-content/themes/your-active-theme-name/.
    3. Locate the functions.php file, then click it to edit it.
    4. Paste the code at the bottom of the file and save.

    After saving the file, it will automatically be included in the HTML head of your WordPress site. You can verify it by opening the devtools and searching for the tag that you noted in the previous step.

    Warning: After adding this code, you might notice that the changes appear when you are logged in but not when you inspect the site as a visitor. This happens because the server page cache is serving old HTML. Instead of hoping a browser cache clear fixes it, go to your RunCloud dashboard and purge the RunCloud server cache. This ensures the new preloading headers are served to all users immediately.

    Step 5: If using Google Fonts, add Required Preconnect Hints

    If you are not self-hosting fonts and rely on Google Fonts, true font preloading is not possible because the file URLs change dynamically.

    In this case, preconnect is only a partial mitigation, not an equivalent replacement for preloading. It helps reduce connection setup time, but it does not remove third-party latency entirely.

    Add these lines to your header:

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

    While this helps, reliance on external servers introduces latency you cannot control. A better long-term strategy for performance is using RunCloud’s Redis full-page caching. By efficiently caching the rest of your database content on your own server, you give the browser more time to handle external third-party connections without affecting the user’s perceived load speed.

    Suggested read: How to Create Custom NGINX Configuration Easily Using RunCloud

    Step 6: Fix Common Mistakes 

    After implementing the above steps, watch out for “double downloads” in your Waterfall chart, where the font loads once as a preload and again via CSS. This is almost always a cross-origin mismatch.

    Another common issue is CORS errors, where the font refuses to load entirely. This is frequently a server configuration issue regarding Access-Control-Allow-Origin headers.

    If you see “Cache TTL” warnings, you can fix them by using the RunCache plugin for WordPress. It uses intelligent caching rules to speed up a WordPress website without requiring code changes. If purging cache to fix these errors causes load spikes, use RunCloud’s monitoring to correlate the purges with CPU pressure and adjust your settings accordingly.

    Step 7: Re-test and Verify Improvements 

    Finally, return to PageSpeed Insights and WebPageTest. Look for the specific metrics: Largest Contentful Paint (LCP) should be faster, and Cumulative Layout Shift (CLS) should decrease because the text renders immediately rather than swapping fonts later.

    If you still see inconsistent results where some visitors get fast speeds and others don’t, your edge caching or object caching might be fragmented.

    This is where RunCache shines.

    RunCache combines page, object, and edge caching into one dashboard with auto-purging logic. If you are tired of manually debugging caching layers, create a test site to experience RunCache and see how a unified caching strategy stabilizes your font loading and overall performance.

    Suggested read: How To Use Redis Full-Page Caching To Speed Up WordPress

    Troubleshooting: What if Preloading Doesn’t Improve CLS or LCP?

    If you have implemented preloading tags but your Largest Contentful Paint and Cumulative Layout Shift scores haven’t changed, the issue is likely related to the total weight of your page or server response times.

    Minimize Font Variants to Reduce File Size and Load Time

    One of the most common reasons for slow LCP is loading too many font weights and styles (e.g., loading Light, Regular, Semi-Bold, Bold, and Extra Bold in both italics and normal). Each variation is a separate file that the browser must download, and preloading five or six files will clog your network bandwidth, blocking other critical assets like your logo or hero image.

    • Audit your typography: Check your CSS to see which weights are actually being used on the site.
    • Remove unused variants: If your specific theme only uses “Regular (400)” and “Bold (700),” remove all other weights from your request.
    • Update the preload tags: Ensure you preload only the single most important variant (usually the body text or main heading weight), not the entire family.

    Implement ‘font-display’ Strategies to Prevent Layout Shifts

    If your LCP is good but your CLS is poor, it is likely because the text is “swapping” and changing size after the font loads. You can control this behavior using the font-display property in your CSS @font-face declaration.

    • Use font-display: swap: This tells the browser to display a fallback system font immediately (improving LCP) and swap to your custom font once it downloads. This prevents the “invisible text” phenomenon.
    • Use font-display: optional: For maximum speed, this setting tells the browser to use the custom font only if it is already cached or loads instantly. If it takes too long, the browser sticks with the system font for that page view, resulting in zero layout shift.

    Suggested read: Cloudflare DNS for RunCloud (Security & Performance)

    Self-Host Fonts to Eliminate Third-Party Latency

    Relying on Google Fonts or Adobe Fonts introduces external variables you cannot control, such as DNS lookups and connection latency to their servers. If their server is slow, your site is slow. Self-hosting the font files (uploading them to your own /wp-content/uploads/ folder) places the control back in your hands.

    When you self-host, you benefit directly from RunCloud’s high-performance NGINX/Apache configurations. RunCloud ensures that static assets hosted on your server are served with optimized compression standards. By removing the external “round trip” to Google’s servers, you stabilize your LCP scores and ensure consistent site performance regardless of external network conditions.

    Wrapping Up

    While preloading fonts can improve perceived load speed when fonts are the bottleneck, it is only one part of a broader performance strategy.

    If fonts are not delaying your render path, preloading will not change your Core Web Vitals scores.

    RunCloud helps you manage server-level caching, including Redis and optimized NGINX configurations, ensuring your site loads instantly even if a user has a stale browser cache.

    RunCache is a completely free, vendor-independent caching solution that works on any hosting provider. It lets you unify page, object, and edge caching without migrating your site or changing hosts.

    If font preloading alone does not stabilize your Core Web Vitals, RunCache gives you a practical next step without committing to new infrastructure.

    Create a test site to experience RunCache.

    FAQs on Preloading Fonts in WordPress

    Should I preload fonts on every page or only key templates?

    You should preload only the fonts used immediately “above the fold” across your entire site, such as your main navigation and heading fonts. 

    How many font files should I preload?

    You should limit preloading to only one or two critical font files (typically in WOFF2 format) to avoid blocking the main thread and slowing down your Largest Contentful Paint. If you preload too many files, you risk congesting the network, which negates the benefits of preloading.

    Why are fonts downloading twice after I add preload?

    This usually occurs if the crossorigin attribute is missing from your preload code, causing the browser to treat the request as two separate assets. 

    Does preconnect help with Google Fonts?

    Yes, using preconnect establishes an early network handshake with Google’s servers, significantly reducing the delay before the font file starts downloading. This works best when paired with RunCache Redis object caching, ensuring that while the external connection is being built, your database content is served without delay.

    Should I self-host Google Fonts to improve Core Web Vitals?

    Self-hosting is generally better for Core Web Vitals because it eliminates external DNS lookups and prevents layout shifts caused by slow third-party connections. 

  • How to Clear Browser Cache & Cookies (Chrome, Firefox, Edge, Safari)

    How to Clear Browser Cache & Cookies (Chrome, Firefox, Edge, Safari)

    “Browser cache” and “cookies” can be confusing terms. If you have ever built a website, updated a page, and still seen the old data, you know the frustration. 

    If you search the internet, you will hear about hard refreshes, incognito mode, and temporary files. But all of this is overwhelming, especially when you just want to run your business and ensure your customers see your latest content, not a broken layout.

    In this post, we will help you identify why changes are not showing and fix the right problem.

    In some cases, clearing browser data is enough. In others, it will never work. Before jumping into step-by-step fixes, you need to know which situation you are dealing with.

    Bonus: If you are a site owner, sticking with manual fixes isn’t efficient. At the end of this post, we will share the best solution for speeding up WordPress sites without any additional hassle, including a one-click purge feature that ensures your visitors always see the freshest version of your site.

    Let’s get started!

    What are Browser Cache & Cookies?

    If you spend any time on the internet, you’ve likely heard the advice to “clear your cache and cookies” whenever something goes wrong. But what exactly are these things, and why is your browser storing them in the first place?

    To understand them, think of your web browser (like Chrome, Safari, or Edge) as a very organized backpack that helps make your trip across the internet easier.

    This guide covers two very different situations.

    • You are a visitor, and the website looks broken or outdated
    • You own or manage a website, and changes are not showing for users

    If you are fixing a one-off display issue, clearing browser data can help.

    If this keeps happening on your site, the problem is not the browser. It is server-side caching.

    This guide explains both situations and how to identify the real cause.

    Before you clear anything, answer these questions:

    1. Does the issue affect only you, or multiple users?
    2. Does the issue disappear in Incognito or Private mode?
    3. Did you recently update content, CSS, or a plugin?

    If the problem affects only you, browser cache is likely the cause. If multiple users see old content, browser cache is not the issue, and clearing it will not fix the problem.

    What is Browser Cache?

    Cache is your browser’s short-term memory. When you visit a website, your computer has to download many assets to display it properly. For example, a modern website usually needs logos, background images, fonts, and large code files.

    If you had to re-download every single logo and image every time you clicked a new page on the same site, browsing would be painfully slow. Instead, your browser saves (caches) these files on your hard drive. The next time you visit that site, the browser says, “I already have these images!” and loads them instantly from your computer rather than downloading them again. This significantly reduces load times and saves data.

    Suggested read: How to Easily Fix Leverage Browser Caching Warning in WordPress 

    What are Browser Cookies?

    Cookies are small text files that websites save to your browser to remember you. Without cookies, the internet would have no memory. If you logged into Facebook and then refreshed the page, you’d be logged out immediately because the site wouldn’t recognize you. While cache only saves the data to speed up the site, cookies provide several useful functionalities, such as:

    • Authentication: Keeping you logged in as you move from page to page.
    • Preferences: Remembering that you prefer “Dark Mode” or English language settings.
    • Shopping Carts: Remembering what you put in your basket while you continue shopping.

    Suggested read: Server Cache vs. Browser Cache vs. Site Cache: What’s the Difference? 

    Why Clearing Cache & Cookies Is Useful

    Since cache speeds things up and cookies make things more convenient, it might seem counterintuitive to delete them. Over time, these files can become outdated or corrupted, or simply accumulate, until they interfere with your browsing experience.

    Here are some of the common problems an individual user can fix by clearing browser cache and cookies:

    1. Fix “Glitchy” Websites

    Developers are constantly updating websites. If a website owner changes a photo or a piece of code, but your browser loads an outdated local copy, the site might look broken for you even though it is correct for everyone else. Buttons might be missing, or formatting might look weird. Clearing the cache forces your browser to download the newest, correct version of the site.

    1. Protect Your Privacy

    Cookies are often used for tracking. Have you ever looked at a pair of shoes online, and then seen ads for those exact shoes on every other website you visit for a week? That is the work of third-party tracking cookies. Clearing your cookies removes these trackers, preventing advertisers from tracking your digital footprint across the web.

    1. It Resolves Login Conflicts

    If you recently changed your password but your browser is still holding an old cookie with your old credentials, you might get stuck in a “login loop” where the site refuses to let you in. Clearing cookies removes that outdated “ID badge,” forcing the site to issue you a new, working session.

    1. It Speeds Up Your Computer

    While cache is designed to speed up browsing, having gigabytes of old files stored on your hard drive can eventually slow down your browser itself. It’s like a filing cabinet that is too full; it takes longer to find what you need. 

    Suggested read: How To Use Redis Full-Page Caching To Speed Up WordPress 

    How to Clear Cache & Cookies in Major Browsers

    Clearing your browser data is one of the most effective ways to troubleshoot website errors, but the process varies slightly depending on the browser and device you use. Here are the steps for the three most popular web browsers.

    How to Clear Cache & Cookies in Google Chrome (Desktop + Mobile)

    On Desktop (Windows/Mac):

    1. Open the Menu: Click the three vertical dots in the top-right corner of the browser window and select Delete browsing data. You can also press Ctrl + Shift + Delete (Windows) or Cmd + Shift + Delete (Mac) on your keyboard.

    Suggested read: How to Reduce Cache Misses & Avoid Them: Proven Tips [FIXED] 

    1. Choose Your Settings: A pop-up window will appear.
      • Time range: Select “All time” to ensure a complete cleanup.
      • Checkboxes: Ensure “Cookies and other site data” and “Cached images and files” are selected.
    1. Finish: Click Delete from this device.

    On Mobile (Android/iOS):

    1. Open the Chrome app and tap the Menu (three dots).
    2. Tap History, then select Delete browsing data.
    3. Choose your time range (usually “All time”) and make sure “Cookies” and “Cached images” are checked.
    4. Tap Delete data.

    Suggested read: The Best WordPress Caching Plugins To Speed Up Your Site 

    How to Clear Cache & Cookies in Mozilla Firefox (Desktop + Mobile)

    On Desktop:

    1. Open Settings: Click the hamburger menu (three horizontal lines) in the top-right corner, then select Settings.
    1. Privacy & Security: On the left sidebar, click Privacy & Security. Find the section labeled Cookies and Site Data and click the Clear Browsing Data button.
    1. Select & Clear: Check both boxes (“Cookies and Site Data” and “Temporary cached files and pages”) and click Clear.

    On Mobile:

    1. Tap the Menu button (three lines or dots, depending on your device placement).
    2. Tap Settings and scroll down to Privacy.
    3. Tap Delete browsing data (on Android) or Data Management (on iOS).
    4. Toggle the switches for Cache and Cookies, then tap the delete button.

    How to Clear Cache & Cookies in Safari (Mac + iOS)

    On Mac:

    1. Top Menu: In the menu bar at the very top of your screen, click the word Safari.
    2. Clear History: Select Clear History… from the dropdown menu.
    3. Confirm: A pop-up will ask for a timeframe. Select “all history” and click Clear History.
    clear browser cache and cookies

    On iOS (iPhone/iPad):
    Note: You do not do this inside the Safari app itself.

    1. Open your device’s main Settings app (the gear icon).
    2. Scroll down and tap on Safari.
    3. Scroll down again and tap the blue text that says Clear History and Website Data.
    4. Confirm your choice. This will refresh Safari and log you out of websites.

    Suggested read: How to Flush DNS Cache on Windows, Mac, and Linux 

    Hard Refresh vs Full Cache Clear – What’s the Difference?

    When a support agent or a developer asks you to “refresh” a page, it can be confusing to know exactly what they mean. There is a big difference between a standard reload, a hard refresh, and a full cache clear.

    FeatureHard Refresh Full Cache Clear 
    What it isIt is a command that tells the browser to ignore the cache for the current page only.It is a browser setting that permanently wipes temporary files and data from all websites.
    ScopeAffects only the single URL you are currently viewing.Affects your entire browsing history and every site you have visited.
    Impact on LoginSafe: You stay logged in. It does not delete cookies.Destructive: You will be signed out of most accounts (Gmail, Facebook, etc.) if you clear your cookies.
    When to useWhen a page looks “broken,” formatting is weird, or new content isn’t showing up.When a hard refresh fails, you have privacy concerns (tracking), or multiple sites are acting up.
    How to do it (Win)Ctrl + F5Ctrl + Shift + Delete (opens settings)
    How to do it (Mac)Cmd + Shift + RCmd + Shift + Delete (opens settings)

    Why CDN Cache Often Causes Confusion

    At this point, many people assume the browser is still responsible. In reality, the browser is often the last place the problem exists.

    Content Delivery Networks sit between your server and the browser. They cache full pages and assets at edge locations around the world.

    This means:

    • Clearing the browser cache may do nothing
    • Hard refresh may still show old content
    • Only purging the CDN cache fixes the issue

    If your site uses a CDN, outdated content is rarely a browser problem. It is almost always a cache purge issue upstream.

    💡 Pro Tip for Site Owners:
    Do your visitors constantly have to perform a Hard Refresh to see your latest content? That is a sign of server-side cache configuration issues, not user error.

    RunCloud solves this by managing server-side caching (like NGINX and Redis) for you. With RunCache, you can ensure updates appear instantly for everyone, saving your users the hassle of troubleshooting your site.

    Suggested read: Everything You Need To Know About WordPress Object Caching 

    The Correct Cache Clearing Order

    When changes are not showing, clear the cache in this order:

    1. Server cache
    2. CDN or edge cache
    3. Application or plugin cache
    4. Browser cache

    Clearing the browser cache first treats the symptom, not the cause. If the issue is server-side, it will persist no matter how many times users refresh.

    Wrapping Up

    Understanding the mechanics of browser cache and cookies is important for anyone using the web. For the average internet user, these troubleshooting steps are helpful tricks to keep in their back pocket. But if you are a website owner or developer, relying on your visitors to clear their cache is a bad strategy.

    If your users regularly need hard refreshes or cache clears, something is wrong. Well-configured server caching removes that burden entirely.

    Visitors should never need to troubleshoot your site for you.

    Instead of expecting visitors to troubleshoot your site, you can eliminate the problem at the source with RunCache by RunCloud.

    RunCache eliminates the need for disjointed plugins and manual configuration by offering a unified approach to Page, Object, and Edge caching. It ensures that when you update your content, your server intelligently purges the old versions instantly.

    Create a test site with RunCache in less than 3 seconds (no credit card required).

    FAQs on Cache & Cookies

    Does clearing the cache delete passwords or saved logins?

    No, clearing your browser cache removes temporary files like images and scripts, but it does not delete saved passwords or login credentials unless you specifically select the “Passwords” checkbox. 

    Will I lose browsing history if I clear the cache?

    You will not lose your list of visited websites when you clear the cache, as browsing history is stored separately from temporary cached files. 

    How often should I clear cache & cookies?

    It is generally recommended to clear cache and cookies only when you encounter page formatting errors or login issues, rather than as part of a set routine. 

    Does clearing cookies affect site preferences or saved settings?

    Yes, clearing cookies will sign you out of most websites and reset user-specific preferences, such as language settings or shopping cart items. 

    Is there a shortcut to clear the cache?

    Most major browsers let you quickly access the Clear Data menu by pressing Ctrl + Shift + Delete (Windows) or Cmd + Shift + Delete (Mac). Just as these shortcuts save users time for local troubleshooting, RunCloud offers the RunCloud Hub to clear server-side cache instantly with a single click from the WordPress dashboard.

    What’s the difference between cache and cookies?

    Cache consists of temporary files (such as images and HTML) stored to speed up page loading, whereas cookies are small text files that store user data, such as login status and tracking preferences. 

    Does using private/incognito mode avoid caching issues?

    Yes, using Incognito or Private mode prevents the browser from saving local cache or cookies, allowing you to view a website as if you were a new visitor. This is a great way to debug issues, but for a permanent fix, RunCloud allows you to manage and purge server-level cache to ensure all users see the correct version of your site without needing private windows.

  • WordPress Changes Not Showing? Here’s How to Fix the Problem

    WordPress Changes Not Showing? Here’s How to Fix the Problem

    You publish an update, refresh the page, and nothing changes for your visitors.

    If your WordPress changes are not showing after an update, then you are in the right place. In this cache troubleshooting guide, we will move past the basic advice of “have you tried turning it off and on again?” We will dive deep into why your logged-out view differs from what you see as an admin, and how to verify whether you are hitting the page cache or the Redis object cache.

    This guide explains why those failures happen and shows you how to fix them in the correct order, without guessing.

    How to Identify Which Cache Is Causing the Problem

    Before clearing anything, use the quick checks below to identify which cache layer is actually blocking your update.

    • Changes are visible when logged in, but not logged out
      • Server-level page cache or CDN cache is serving stale HTML
      • Skip to Step 3 and Step 5
    • Content updates show, but CSS or layout does not
      • Browser, CDN, or server is caching static assets
      • Skip to “How to Handle Real-Time Updates with Stale Cached Assets”
    • Dynamic elements are wrong – cart counts, menus, widgets
      • Object cache or transients are stale
      • Skip to Step 4
    • Code changes to the theme or plugin are not reflected
      • PHP opcode cache or object cache issue
      • See “Clear PHP OPcache” and “Clear Object Cache”
    • Nothing updates anywhere
      • Multiple cache layers active
      • Follow all steps in order

    Why WordPress Changes Are Not Showing After an Update

    If your WordPress website is not showing changes after an update, caching is the most common cause.

    Caching is the process of storing commonly accessed information on the server. To make your site load faster, browsers, plugins, servers, and CDNs show visitors a “snapshot” instead of rebuilding the page from scratch every time. This works well in most scenarios, but the problem arises when you update the site, and the cache keeps showing the old snapshot.

    Most WordPress setups rely on disjointed tools, one plugin for page cache, another for object cache, and a separate dashboard for your CDN. This makes it hard to know which layer is holding onto the old data. With RunCache, server-level NGINX configuration and full-page caching are managed from a single dashboard, which reduces overlap between cache layers.

    How to Fix WordPress Changes That Are Not Showing 

    When troubleshooting a website, we should start with the easiest fix (your browser) and work our way back to the server. 

    Step 1: Hard Refresh the Page and Verify 

    Before changing any settings, force your browser to reload the page. On Windows, press Ctrl + F5, or Cmd + Shift + R on Mac. Alternatively, you can open the URL in an Incognito/Private window.

    If the Incognito window still shows the old version, the issue is not your browser and must be upstream.

    Suggested read: How To Use NGINX FastCGI Cache (RunCache) To Speed Up Your WordPress Performance

    Step 2: Purge the WordPress Cache Plugin

    If you are using a third-party caching plugin, clear its cache once before moving on. If this does not resolve the issue, do not keep purging here.

    Cache troubleshooting guide

    If you find yourself constantly modifying plugin settings, consider RunCache. It combines page, object, and edge caching into a single dashboard, which eliminates the need for complex plugins that don’t effectively communicate with your server.

    Suggested read: How To Use Redis Full-Page Caching To Speed Up WordPress

    Clear Theme and Page Builder Caches

    This step is often skipped, which is why many cache purges appear to do nothing.

    Many modern WordPress themes and page builders generate compiled CSS and layout files that sit outside standard page caching.

    Common examples include Elementor, Divi, Oxygen, and block-based themes using theme.json.

    If you are using a page builder or a performance-focused theme, you must clear its internal cache before touching the server.

    Typical actions include:

    • Elementor – Tools → Regenerate Files and Data
    • Divi – Theme Options → Builder → Advanced → Clear Cache
    • Oxygen – Settings → Library → Clear Cache
    • Block themes – re-save global styles or theme settings

    If these files are stale, server purging will have no effect because WordPress is still outputting old asset references.

    Only proceed to server-level cache clearing after completing this step.

    Step 3: Purge Server Page Cache (FastCGI / NGINX cache)

    Even if you disable the caching plugin on your WordPress website, your server (NGINX/FastCGI) might still be holding a cached version of your HTML to speed up load times.

    If you need to clear the NGINX FastCGI cache manually, delete the temporary files NGINX has created, then reload the service. Here is how to do it safely.

    1. Locate the Cache Path

    First, you need to find out where NGINX stores the cache. This is defined in your NGINX.conf or sites-available files under the directive fastcgi_cache_path.

    Run this command to find the path:

    sudo grep -r "fastcgi_cache_path" /etc/nginx/
    • Standard Install: Usually /var/cache/nginx or /var/run/nginx-cache.
    • RunCloud Server: located at /var/cache/nginx-rc/ 

    In the above example, the cache is stored in a folder located at /var/cache/nginx-rc

    Suggested read: How To Use Redis Object Cache To Speed Up Dynamic WordPress Site

    2. Delete the Cache Files

    Once you have the path, you can remove the cache files. Be extremely careful with the rm -rf command. A single mistake can delete critical system files.

    Option A: Clear Everything (Root/Sudo)

    Run the following command to clear all the cache created by NGINX:

    sudo rm -rf /var/run/nginx-cache/*

    Option B: Clear for a Specific Site (If separated by folder)

    If your configuration separates caches by folder, then you can delete only a part of the cache without changing anything else. To do this, first run the following command to see a list of all the available folders in the Nginx cache:

    sudo ls -lah /path/to/cache

    In the above example, remember to replace /path/to/cache with the path identified in the previous step.

    In the above example, we can see there are two different folders present on the server. You can delete the folder you want to clear the cache from. For example, if you want to clear the cache for runcloud-hub-fastcgi-app-auer, run the following command:

    sudo rm -rf /var/cache/nginx-rc/runcloud-hub-fastcgi-app-auer/*

    3. Reload NGINX

    After deleting the files, you must reload the NGINX configuration to ensure it stops serving any lingering pointers to deleted files.

    sudo systemctl reload nginx
    # OR
    sudo service nginx reload

    Note: If you are using RunCloud, then you don’t need to touch the command line for this. Simply log in to your RunCloud Dashboard and navigate to the RunCloud Hub settings page for your web application. On this page, click the Purge button. This clears the cached HTML immediately, even without SSH access.

    Suggested read: How to Easily Fix Leverage Browser Caching Warning in WordPress

    Step 4: Clear Object Cache 

    When parts of your site that update automatically (like a “Recent Posts” widget, shopping cart count, or user login status) remain stuck, the issue is likely within your Object Cache (typically Redis).

    This caching layer stores the results of database queries in memory to speed up PHP execution, but it can sometimes hold onto stale data even after the content has changed. If you only clear your page cache (HTML), these database-driven elements will persist because the server continues to retrieve the old query results from memory instead of the database.

    To resolve this via the command line, you will need to SSH into your server and interact with the Redis instance directly. You can run redis-cli flushall to remove all keys from the Redis database, forcing all applications using that instance to rebuild their cache from scratch.

    However, if you only want to flush the cache for a particular WordPress site, navigate to your WordPress root directory and run the wp cache flush command. This will clear the object cache for that site specifically, without risking data loss for other applications sharing the same Redis instance.

    RunCloud offers a much simpler solution that eliminates the need for SSH access or complex commands. You can manage Redis directly from the WordPress Dashboard by navigating to your RunCache settings and clicking the Clear Redis Object Cache button.

    Suggested read: How to Create Custom NGINX Configuration Easily Using RunCloud

    Object cache issues can also originate from WordPress transients stored in the database. Themes and plugins commonly use these for time-based data such as menus, pricing, or scheduled updates.

    If clearing Redis does not resolve the issue, temporarily disable the object cache and reload the page to confirm whether a transient is responsible.

    If the issue disappears, the problem is application logic, not caching.

    Clear PHP OPcache After Code Changes

    If theme or plugin code changes do not appear, PHP’s opcode cache may still be serving an older compiled version.

    This is common after:

    • Theme file edits
    • Plugin updates
    • Custom PHP changes

    On most servers, OPcache persists until PHP-FPM is reloaded.

    On RunCloud servers, PHP-FPM reloads are handled automatically through the dashboard and do not require manual intervention.

    If you are not using RunCloud, reload PHP-FPM to force OPcache to rebuild.

    This step is not required for content edits but is critical for code-level changes.

    Step 5: Purge CDN Cache 

    Since every Content Delivery Network (CDN) operates differently, the exact steps here will vary depending on whether you use Cloudflare, BunnyCDN, or Fastly.

    However, the process is generally the same: log in to your CDN provider’s dashboard, navigate to the Cache or Purge section, and look for the option to clear the cache. You should always select Purge by URL (or “Custom Purge”) and enter the specific link that is stuck, rather than clearing the entire cache.

    Warning: Avoid the “Purge Everything” or “Purge All” button if you can. This forces the origin server to rebuild the entire cache at once, which can cause CPU spikes and slow site-wide performance.

    RunCache supports smart purging. It handles edge caching logic for you, ensuring that when you update content, the specific URL is automatically cleared from the CDN. This keeps your site fast and your server happy, without you ever needing to log in to a separate CDN dashboard.

    Suggested read: Server Cache vs. Browser Cache vs. Site Cache: What’s the Difference?

    How to Confirm Which Cache Layer Is Responding

    Guessing wastes time. Confirm the cache status before making any changes.

    Open your browser’s developer tools and reload the page with the Network tab visible. Click the main HTML request and inspect the response headers. Look for indicators such as:

    • X-Cache or X-RunCache – server page cache
    • cf-cache-status – Cloudflare edge cache
    • Status 304 – browser or intermediary cache revalidation

    A cached response confirms that the issue is not WordPress itself but an upstream cache layer.

    If the response is a fresh 200 but the content is still wrong, the issue lies inside WordPress logic or asset generation.

    How to Handle Real-Time Updates with Stale Cached Assets

    Sometimes, even after clearing every cache, the old design still appears. This usually happens not because the server is broken, but because the browser thinks it already has the correct file and refuses to ask for a new one. This is common with CSS (styles) and JS (functionality) files. 

    Step 1: Fix CSS/JS Cache Busting With File Versioning

    The most reliable mechanism to force a browser to discard stale data and retrieve a fresh asset is not by manually renaming the file on the server, but by implementing versioning query strings (such as requesting style.css?ver=2.1), which instantly tells the browser that the underlying content has been modified. By appending this unique identifier to the resource URL, you can bypass local browser caches and CDN edges.

    RunCloud allows you to control exactly how the server handles these dynamic parameters through its advanced NGINX caching rules:

    • Include cache based on matching query string: This setting lets you specify parameters that trigger the creation of a unique cache file, ensuring that visitors viewing ?currency=USD see a different cached version than those viewing ?currency=EUR without slowing the page.
    • Exclude cache based on matching query string: Conversely, this option lets you define specific query strings that will force the server to bypass the page cache entirely whenever they are present, ensuring that dynamic or sensitive URLs are always served live from the backend.

    Step 2: Confirm the Browser is Requesting the New CSS/JS URL (Not a Cached URL)

    Before you assume the server is broken, you need to determine if WordPress is actually telling the browser to fetch the new file. This diagnostic step determines whether the failure occurs within the WordPress application logic or at the server/network level.

    Here is how you can do this:

    • Open a Fresh Session: Open your website in an Incognito (Chrome) or Private (Firefox/Safari) window to ensure your local browser history isn’t interfering with the test.
    • Access the Source Code: Right-click anywhere on the page background and select “View Page Source” (or press Ctrl + U on Windows / Cmd + Option + U on Mac). Do not use “Inspect Element” for this, as the DOM can sometimes differ from the raw source delivered by the server.
    • Locate the Specific File: Press Ctrl + F (or Cmd + F) to open the search bar. Type in the name of the file you modified, such as style.css, main.js, or the specific plugin stylesheet handle.
    • Analyze the Query String: Focus on the filename’s ending. You are looking for a version parameter, which typically looks like ?ver=1.2.3 or ?ver=time_stamp. Compare this number to the version you expect (e.g., if you just updated a plugin from version 2.0 to 2.1, the tag should read plugin.css?ver=2.1).

    How to interpret the results and fix the issue:

    • Scenario A: The Version Number Has Not Changed

    If the source code still shows the old version, the issue is not the server cache. The issue lies within WordPress itself. Your caching plugin might be serving a stale HTML page that contains the old link tags, or your theme might be “hardcoding” the version number instead of using the dynamic wp_enqueue_style function.

    To fix this, you need to clear the cache of your WordPress page cache plugin first. If that fails, check your functions.php file to ensure you are updating the version number on your enqueued scripts.

    • Scenario B: The URL Has Changed, But the Style is Old

    If the source code shows the new version, but the site still looks wrong, you are facing a “Hard Cache” issue on the server or CDN. The browser is requesting the new file, but an intermediate layer (such as NGINX or Cloudflare) has aggressively cached that path and is ignoring the query string. To fix this, you need to update the caching rules of your server and CDN.

    Step 3: Stop Caching HTML Too Long (Cache-Control Header)

    Incorrectly configuring the Cache-Control headers can create persistent caching issues. This HTTP header instructs the user’s browser: “Save this file locally and do not check the server for updates for X days.”

    It is recommended to set a 1-year expiration for static assets (such as images and fonts) for optimal performance.

    However, applying those same rules to your dynamic HTML pages is disastrous. If you accidentally instruct browsers to cache your homepage HTML for 30 days, no amount of server-side purging will resolve the issue. The visitor’s browser will simply stop requesting the page from your server entirely, relying on its local copy until the timer expires.

    RunCloud’s NGINX templates come preconfigured with safe, industry-standard Cache-Control policies. Our stack is tuned to aggressively cache static assets for maximum speed while ensuring dynamic HTML remains fresh and revalidates frequently. This built-in logic prevents “configuration drift” and safeguards you from accidentally locking your users onto an obsolete version of your site.

    Special Considerations for WordPress Multisite

    WordPress Multisite environments often share Redis instances, PHP workers, and cache directories across multiple sites. Flushing object cache or Redis globally may affect other sites on the network.

    If you are running Multisite, prefer site-specific cache purging through WordPress or RunCloud tools rather than command-line flushes.

    Always confirm whether Redis databases or FastCGI cache folders are isolated per site before manually clearing them.

    Wrapping Up

    Debugging a WordPress site that refuses to update is one of the most tedious parts of development, but it doesn’t have to be a mystery. As we’ve discussed, the “invisible wall” preventing your changes from showing up is usually a result of multiple caching layers (browser, server, object, and CDN) working a little too well.

    By following the workflow we outlined, you can stop guessing and start resolving issues systematically. 

    However, the best way to handle caching is to use a platform that simplifies it.

    Managing NGINX rules, Redis instances, and CDN purges separately is a recipe for frustration. RunCloud RunCache solves this by integrating server-side page caching, object caching, and edge caching into a single, intuitive dashboard. You get the raw speed of a custom-tuned server with the ease of use of a simple plugin.

    If you want consistent performance and a “Clear Cache” button that actually works,create a new test site today to experience RunCache. 

    FAQs on WordPress Changes Not Showing After Update

    Why do changes show when I’m logged in but not when I’m logged out?

    This occurs because WordPress typically bypasses caching for logged-in users, while logged-out visitors are served a static HTML copy stored in the server’s page cache. To resolve this, you need to purge the server-level cache (FastCGI/RunCache) via the RunCloud dashboard, which clears the stale HTML without affecting your browser settings.

    What cache should I clear first: browser, plugin, server, or CDN?

    Always start by clearing the server-level cache, as this is the most common source of “stuck” content for dynamic sites. RunCloud lets you safely clear server and Redis object caches from a single dashboard, ensuring fresh content is served before you need to troubleshoot downstream layers like the CDN or the local browser cache.

    Why is CSS not updating even after clearing the cache?

    If CSS remains stale, the asset URL likely hasn’t changed, so browsers and CDNs continue serving the file based on previous expiration headers. While you should implement versioning for your assets, you can also check your RunCloud NGINX configuration to ensure headers are set correctly and purge the specific file path from the server.

    Should I purge Cloudflare by URL or purge everything?

    You should purge by URL whenever possible to avoid “cache rebuild” storms that can overwhelm your PHP/MySQL resources with sudden traffic spikes. RunCache simplifies this process by unifying edge and server caching, offering auto-purging capabilities that target specific content changes so you don’t have to wipe the entire cache.

    How do I confirm a page is cached (HIT vs MISS)?

    Inspect the HTTP response headers in your browser’s developer tools (Network tab) and look for headers such as X-Cache, X-RunCache, or cf-cache-status that indicate a HIT. 

    Can Cache-Control cause WordPress pages to stay stuck on an old version?

    Yes, if Cache-Control headers set a long Time-To-Live (TTL) without validation, browsers will refuse to request new versions until the timer expires. RunCloud lets you standardize these rules at the NGINX layer, preventing config drift and ensuring users across all devices receive the latest updates.