How to Host Third-Party CDN Resources Locally in WordPress for Faster Loading

We know that using too many third-party resources on a website can lead to slower page loading and rendering speeds. To optimize page performance, we sometimes need to host third-party CDN resources locally within our WordPress themes or plugins.

In this article, I’ll walk you through how to host CDN resources from plugins on your own server. To demonstrate the process of speeding up page loading, we’ll use Font Awesome icon resources as an example.

1. Identify How the Plugin Loads Third-Party Resources

By searching the plugin code, we can easily find how Font Awesome resources are loaded. These resources are typically added using the wp_enqueue_style and wp_enqueue_script functions.

Alternatively, you can inspect the page’s HTML source code for JS or CSS IDs. For example, if a CSS resource has the ID font-awesome-css, removing the -css suffix gives you the resource’s handle (font-awesome). The same logic applies to JS files.

wp_enqueue_style('font-awesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css');

2. Download Resources and Load them via Theme or Plugin

You can directly download the CSS file mentioned above and save it to your theme directory. However, remember that CSS files often reference font files. For Font Awesome, you’ll need to download:

• The CSS file (e.g., all.min.css) – you might need to adjust the font paths within this file.
• Font files (e.g., *.woff2, *.ttf, etc.).

Next, use the following function to deregister the CDN version and enqueue your locally downloaded version.

function wprs_replace_fontawesome_cdn() {
    // First, dequeue the original Font Awesome load
    wp_dequeue_style('font-awesome');
    wp_deregister_style('font-awesome');
    
    // Then register the local version
    wp_enqueue_style(
        'font-awesome-local',
        get_template_directory_uri() . '/assets/fontawesome/css/all.min.css',
        array(),
        '6.0.0'
    );
}
add_action('wp_enqueue_scripts', 'wprs_replace_fontawesome_cdn', 20);

3. Loading Local Resources via a Custom Plugin

If you don’t want to modify your theme (or if your theme is subject to updates that might overwrite changes), you can create a small “helper” plugin to achieve the same result. Here is an example plugin structure:

<?php
/*
Plugin Name: Local Font Awesome
Description: Load Font Awesome locally instead of from CDN
Version: 1.0
*/

function local_fontawesome_init() {
    // Same replacement logic
    wp_dequeue_style('font-awesome');
    wp_deregister_style('font-awesome');
    
    wp_enqueue_style(
        'font-awesome-local',
        plugins_url('assets/fontawesome/css/all.min.css', __FILE__),
        array(),
        '6.0.0'
    );
}
add_action('wp_enqueue_scripts', 'local_fontawesome_init', 20);

Important Considerations during implementation:

• Ensure your hook priority (20) is higher than the original plugin’s loading priority.
• Match the local file version number with the CDN version.
• Check file permissions to ensure the web server can access the local files.
• Consider using browser caching to further enhance performance.

If your site relies heavily on third-party CDN resources, hosting them locally will significantly improve your page loading speeds and overall user experience.