CDN Domain Static-Dynamic Separation Configuration in Practice – Improve Website Performance and SEO

Overview

Static-dynamic separation means handling dynamic content (PHP, API) and static content (images, CSS, JS) with different domains or paths, and accelerating static resources through cdn. This reduces origin server pressure, improves cache hit rate, and makes SEO more friendly.

This article introduces how to configure static-dynamic separation (using Nginx + Cloudflare as an example).

I. Why Static-Dynamic Separation?

The bottleneck of dynamic websites such as WordPress usually lies in PHP and the Database. If all requests (including images and CSS) are processed by PHP, resources are wasted significantly. After static-dynamic separation: static resources are returned directly by the CDN without going through the backend; dynamic requests are handled by Nginx + PHP-FPM.

Benefits include: improved page loading speed; reduced origin server load; more efficient CDN caching; static resources can be cached long-term without frequent back-to-origin requests.

II. Configuration Steps

1. Plan Your Domains

It is recommended to use two domains: the main domain example.com for dynamic content, and the static domain static.example.com for images, CSS, JS, etc. You can also use a subdirectory (/static/), but an independent domain is more flexible.

2. Modify Website Code to Replace Static Resource URLs with the Static Domain

WordPress can do this through plugins or code. Add the following to your theme's functions.php:

function rewrite_static_urls($content) {
    $url = 'https://static.example.com';
    $content = str_replace('https://example.com/wp-content/uploads/', $url . '/wp-content/uploads/', $content);
    $content = str_replace('https://example.com/wp-includes/', $url . '/wp-includes/', $content);
    return $content;
}
add_filter('the_content', 'rewrite_static_urls');

You can also use plugins like CDN Enabler or WP Offload Media, which are simpler to configure.

3. Configure Nginx Static-Dynamic Separation Rules (Origin Server)

In the Nginx configuration, have static resource requests handled directly by Nginx without going through PHP-FPM:

location ~* \.(jpg|jpeg|png|gif|ico|svg|css|js|woff|woff2|ttf)$ {
    expires 30d;
    add_header Cache-Control "public, immutable";
    log_not_found off;
    access_log off;
}

At the same time, you can configure a server block for the static domain that hosts only static files:

server {
    listen 80;
    server_name static.example.com;
    root /var/www/html;
    location / {
        try_files $uri =404;
        expires 30d;
        add_header Cache-Control "public, immutable";
    }
}

4. Enable CDN for the Static Domain

Connect the static domain to Cloudflare or another CDN, and enable full caching (cache all static files). You can set cache rules:

• Images, CSS, JS: cache for 30 days
• HTML: do not cache (if the static domain has no HTML files, you can ignore this)

5. Testing

Use browser developer tools to check whether resources are loaded from the static domain and whether the response headers contain cf‑cache‑status: HIT. Use PageSpeed Insights to confirm that static resources are not marked as "uncached."

III. Points to Note

• If you use HTTPS, the static domain also needs an SSL certificate (a free Let's Encrypt one works).
• When a WordPress plugin automatically replaces URLs, watch out for HTTPS and HTTP mixing issues.
• When the theme or plugins are updated, you may need to manually refresh the CDN cache.
• If the website has page caching enabled, ensure dynamic content still goes through the main domain.

IV. Frequently Asked Questions

Q: After static-dynamic separation, some images don't display?
Check whether the static domain's root directory points to the correct location and whether the image files exist in the corresponding path. It could also be an error in the URL replacement logic.

Q: Will SEO be affected after the change?
As long as the HTML structure of the main domain remains unchanged, changing the static resource domain will not affect SEO. Search engines mainly focus on HTML content.

Q: Can I use different paths under the same domain?
Yes, but the CDN configuration is slightly more complex. An independent subdomain is recommended.

Static-dynamic separation also brings clear benefits for small and medium-sized websites and is worth implementing.