HomeMethod

Knowledge

Web VitalsTechniquesSnippetsAnswersImpactsBottlenecks

Content Delivery Network

Serve static assets from servers geographically close to each visitor.

Overview

A CDN is a globally distributed network of servers (called edge nodes or Points of Presence) that cache copies of your static assets — images, CSS, JavaScript, fonts. When a visitor requests a resource, the CDN routes them to the nearest edge node instead of your origin server, slashing the round-trip time to milliseconds.

Impact grade, A+ to D: how much of the Lighthouse score this technique can move. Unaffected: CLS.

The Problem

Without a CDN, every asset request travels from the visitor’s browser to your single origin server. A visitor in Tokyo hitting a server in Amsterdam adds ~200ms of network latency before a single byte downloads. During traffic spikes the origin handles every request itself, creating a performance cliff when load increases.

Performance Impact

LCP

Significant

hero images and critical assets load from nearby edge

TBT

lower latency shrinks the window during which render-blocking scripts occupy the main thread

FCP

Significant

CSS and fonts cached at edge reach the browser faster

SI

all static assets delivered from nearby edge nodes; visual population completes significantly faster

TTFB

50–80%

edge node responds from cache without touching the origin

Risk: Medium

cache invalidation must be configured; adds a third-party dependency

How it works

  1. 01

    First request: CDN fetches from origin and caches

    When a resource is requested for the first time, the CDN edge server nearest to the user has no cached copy. It forwards the request to the origin, fetches the asset, stores a copy at the edge, and delivers it to the user.

  2. 02

    Subsequent requests: edge serves directly

    All future requests for the same asset from users near that edge node are served directly from the CDN cache. The origin server is never contacted. Response times drop from hundreds of milliseconds to tens of milliseconds.

  3. 03

    URL rewriting points assets to the CDN domain

    Asset URLs are rewritten from your origin domain (yoursite.com/wp-content/…) to the CDN hostname (cdn.yoursite.com/…). WordPress CDN plugins handle this automatically, rewriting URLs in the rendered HTML at the filter level.

  4. 04

    Cache invalidation clears stale copies

    When assets change, the CDN cache must be purged so edge nodes stop serving the old version. Most WordPress CDN integrations hook into post-publish and theme-update events to trigger automatic cache purges.

URL rewriting for CDN — WordPress filter

Code
<?php
function rewrite_asset_urls_to_cdn( $url ) {
    // Only rewrite wp-content assets, not admin or dynamic URLs
    if ( strpos( $url, '/wp-content/' ) === false ) {
        return $url;
    }
    return str_replace(
        home_url(),
        'https://cdn.yourwebsite.com',
        $url
    );
}
add_filter( 'wp_get_attachment_url', 'rewrite_asset_urls_to_cdn' );
add_filter( 'style_loader_src',      'rewrite_asset_urls_to_cdn' );
add_filter( 'script_loader_src',     'rewrite_asset_urls_to_cdn' );

Most sites are better served by a dedicated CDN plugin (Cloudflare, BunnyCDN, etc.) that handles URL rewriting, cache purging, and header configuration automatically.

Limitations

  • Free CDN tiers cover most small-to-medium sites, but high bandwidth or advanced features (full-page caching, advanced security rules) add cost. These costs are typically offset by reduced origin server requirements.
  • CDNs cache static, identical-for-all-users content. Pages with user-specific data (logged-in views, shopping carts) must be excluded from CDN caching or handled via edge-side includes to avoid serving one user’s data to another.
  • Asset delivery depends on the CDN provider’s availability. A CDN outage can prevent images, CSS, and scripts from loading. Choose providers with strong SLAs and consider fallback strategies for critical assets.

Common Mistakes

Only putting images on the CDN, leaving CSS and JS on origin

All static assets benefit from CDN delivery. CSS and JS are often more impactful than images because they are render-blocking — getting them from a nearby edge directly improves FCP and LCP.

Choosing a CDN with no edge presence near your users

A CDN with 10 PoPs concentrated in North America provides little benefit for a site with primarily European or Asian visitors. Verify edge locations against your traffic geography before committing.

Not testing CDN performance after setup

Always verify with WebPageTest (using test locations near your real visitors) that assets are being served from CDN edge nodes and that response times have improved. Some CDN integrations require correct Cache-Control headers on the origin to activate edge caching.

Test this techniqueNetwork AuditRun the tool

Need help applying this to your site?

Targeted fixes, not guesswork. We identify which techniques move the needle for your specific WordPress stack.

Start an Engagement
Support our family now