Optimize script loading on WordPress

When we talk about web performance , the loading speed of the scripts is always analyzed, mainly with the aim of loading them through a CDN.

But how could we make any script from a WordPress site load with a CDN? Well, there is a solution.

There are many loading systems for some well-known scripts , such as jQuery, and there are many plugins that allow you to change their load to that of another CDN such as Google or similar. And it is that Google has its list of JavaScript hosted, also has CNDJS with a long list, but this time I want to talk about jsDelivr.

And it is that jsDelivr not only has dozens of libraries hosted, but also allows, automatically, the loading of any plugin, theme or Core of WordPress.

How? Well, it’s quite simple, really. The base addresses are as follows:

https://cdn.jsdelivr.net/wp/plugins/project/tags/version/file
https://cdn.jsdelivr.net/wp/themes/project/version/file

I’m going to give a couple of examples to make it much simpler. If you have the Classic Editor plugin, and we analyze the trunk a little, we can see that there is a “js” folder. This would allow you to see that when the plugin is loaded, a file of the style a will surely be called:

/wp-content/classic-editor/trunk/js/block-editor-plugin.js

This would be served directly from our hostname, which may not make it optimal… but we could call it from here:

https://plugins.trac.wordpress.org/browser/classic-editor/trunk/js/block-editor-plugin.js
https://cdn.jsdelivr.net/wp/plugins/classic-editor/trunk/js/block-editor-plugin.js

You just have to replace the URL of the trac, with the URL that they provide us. With this, we have that the JavaScript is loaded from the CDN.

This would also work when making specific calls to specific versions of the plugin:

https://plugins.trac.wordpress.org/browser/classic-editor/tags/1.3/js/block-editor-plugin.js
https://cdn.jsdelivr.net/wp/plugins/classic-editor/tags/1.3/js/block-editor-plugin.js

In the same way, we can do with the files of the templates. In this case, I will take the example of Twenty Nineteen.

https://themes.trac.wordpress.org/browser/twentynineteen/1.1/js/touch-keyboard-navigation.js
https://cdn.jsdelivr.net/wp/themes/twentynineteen/1.1/js/touch-keyboard-navigation.js

Okay, yes, all this is very good but … How to put it into practice? Well, there are several ways… one of them is directly through the developers of the plugins that could give you the option. By working as standard with any plugin, the plugin developer (or theme) could give you the option to upload from locally or through this CDN. You decide.

The other option, after a search through the repository, is to use this plugin called NGT jsDelivr CDN that does the work for you. Although perhaps one of the things that you may like the most is that this plugin not only replaces the code of plugins and themes, but also the core.

https://core.trac.wordpress.org/browser/tags/5.0.2/src/wp-includes/js/admin-bar.js
https://cdn.jsdelivr.net/gh/WordPress/WordPress@5.0.2/wp-includes/js/admin-bar.js

As you can see, you could launch an optimized version of all your sites with WordPress improving performance by making calls to this CDN.

By the way, I just tried and it also works with CSS.

https://core.trac.wordpress.org/browser/tags/5.0.2/src/wp-includes/css/admin-bar.css
https://cdn.jsdelivr.net/gh/WordPress/WordPress@5.0.2/wp-includes/css/admin-bar.css

You know… do you want to optimize your WordPress? Now you can do it.


About this document

This document is regulated by the EUPL v1.2 license, published in WP SysAdmin and created by Javier Casares. Please, if you use this content in your website, your presentation or any material you distribute, remember to mention this site or its author, and having to put the material you create under EUPL license.