How to Host Plugin CDN Resources Locally in WordPress

We all know that using too many third-party resources can slow down a website’s loading and rendering speed.
To optimize page performance, it’s often a good idea to host third-party resources locally on your own server.

In this article, we’ll walk through how to host plugin CDN resources locally, using Font Awesome as an example, to help improve your site’s loading times.

First, we need to locate how the plugin enqueues external resources.
Most of the time, you’ll find them added via the wp_enqueue_style or wp_enqueue_script functions.

For example, searching the plugin’s code or inspecting your site’s HTML source might reveal something like this:

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

You can also use the resource’s handle (ID) to find it in the source code.
For example, if the CSS file’s ID in the HTML is font-awesome-css, removing the -css suffix gives you the original handle (font-awesome).

Step 2: Download the Third-Party Resources

Once you find the resource, download the necessary files:

• The CSS file (all.min.css)
• Any font files referenced in the CSS (*.woff2, *.ttf, etc.)

Save these files in your theme directory, for example under /assets/fontawesome/.

Make sure to adjust any relative paths inside the CSS if needed, so that font files are correctly loaded.

Step 3: Replace the CDN Resource with Your Local Copy

Now, unregister the original CDN-loaded stylesheet and enqueue your local copy.

Here’s how you can do it in your theme’s functions.php file:

function wprs_replace_fontawesome_cdn() {
    // Dequeue and deregister the original Font Awesome
    wp_dequeue_style('font-awesome');
    wp_deregister_style('font-awesome');

    // Enqueue 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);

Step 4: Alternatively, Load Local Resources via a Custom Plugin

If you want to avoid modifying your theme (especially if it may be updated later), you can create a simple custom plugin to load the local resources.

Here’s a sample plugin:

<?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);

Just place this code in a .php file inside the /wp-content/plugins/ directory, activate it, and you’re done!

Important Considerations

• Action Priority: Make sure your replacement function’s priority (set to 20 here) is high enough to run after the original resource is enqueued.
• Version Consistency: Ensure the version number matches the original CDN version to avoid any inconsistencies.
• File Permissions: Verify that your server can properly access the downloaded files.
• Browser Caching: Enable browser caching to maximize the performance benefits of local hosting.