Locally host third-party CDN resources from plugins in WordPress to speed up page opens

We know that if too many third-party resources are used in the website it will lead to slower loading and rendering of the page. In order to optimize the opening speed of the page, we need to locally host the third-party CDN resources in the theme or plugin.

In this article, we will take you to understand how to host the CDN resources in the plugin on your own server. In order to achieve the purpose of speeding up the page opening speed, we take Font Awesome font icon resources as an example.

The first step is to find out how the plugin loads third-party resources

Searching for the relevant code in the plugin code, we can easily find out how Font Awesome resources are loaded. These resources are generally added via the wp_enqueue_style and wp_enqueue_script functions.

We can also search for the JS or CSS ID in the HTML source code of the page to find the resource, for example, if the CSS resource ID in the page is "font-awesome-css", we remove the "-css", and the rest of the string is the ID of the resource, the same with JS.

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

Download third-party resources and load them via themes or plugins

We can directly download the CSS file above, save it to the theme directory, and then load it in the theme. Generally, in the font file, in addition to the CSS file, we also need to download the font resources contained in the CSS file to Font Awesome, for example:

• CSS file (all.min.css) : may need to change the path of the font file
• Font files (*.woff2, *.ttf, etc.)

Then we use the following function to de-register the CDN resources and then load the downloaded resources in the theme.

function wprs_replace_fontawesome_cdn() {
    // First unload Font Awesome.
    wp_dequeue_style('font-awesome');
    wp_deregister_style('font-awesome');

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

Load local resources via plugin

If it is not convenient to modify the theme, or the theme needs to be upgraded in the future, in order to avoid upgrading our changes are covered, we can also create a small plugin to achieve the same purpose, the following is the sample plugin.

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

function local_fontawesome_init() {
    // Same replacement logic
    
    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);

Matters requiring attention during implementation:

• Ensure that the priority of the replacement function (20) is higher than the priority of the original plug-in loaded
• The version number of the local file should match the CDN version
• Check the file permissions to make sure the web server can access it
• Consider using browser caching to improve performance

If your website uses more third-party CDN resources, after hosting them locally, I'm sure you will find that the page opens faster.