Setup a Free CDN for CSS and JavaScript on WordPress Blog

Learn how to setup a Free CDN (Content Delivery Network) for CSS Stylesheet as well as JS Scripts with a WordPress Plugin. This will help in reducing the bandwidth consumption and server load.

The Cascade Style Sheet (CSS) and JavaScript (JS) are two important assets that every website is built with. These files are also part of WordPress core and Plugin frameworks which are loaded at every instance. Hence, having a free CDN for CSS and JS files will significantly save the bandwidth as well as improve the site load speed.

In this article, we are going to learn how to install the WordPress plugin called NGT jsDelivr CDN to enable Free CDN for CSS and JS files. And also test on the live site for CDN URL changes.

If you’re following us, this is the eight article and video tutorial in the #WordPressBlog series. Earlier we posted about setting up Free image CDN on WordPress using Photon CDN.

Without further ado, let’s get started with setting up free CDN on WordPress blog —

What is jsDelivr CDN?

jsDelivr is free, fast, and reliable Open Source CDN for npm and GitHub with the largest network and best performance among all CDNs. jsDelivr serves more than 20 billion requests in a month.

It also supports WordPress CDN to load any plugin or theme from the SVN repository.

It is sponsored by Cloudflare, StackPath, Fastly, and few other major players on the internet world.

Installing the WP Plugin – NGT jsDelivr CDN

I found one smart WordPress plugin called NGT jsDelivr CDN by Nicolas Jonas. At the time of writing this article, the plugin is not updated to the latest WordPress version. However, I personally use and it works flawlessly on my restoreBin blog.

All you need is to install and active the plugin. The rest will be taken care of. The plugin will automatically search and replace CSS and JS files links from the WordPress Core as well as Plugin SVN repo to serve via jsDelivr Free CDN.

If files URLs are not available in SVN repo, the JS/CSS will be served from our web server. The Plugin does not have any cumbersome setup or setting pages to configure.

Follow the below steps to install NGT jsDelivr CDN for free:

  1. Login to your WordPress Dashboard
  2. Navigate to Add New under Plugins menu
  3. Search and install the NGT jsDelivr CDN by Nicolas
  4. Activate the plugin
  5. That’s it

NGT jsDelivr CDN Plugin for WordPress

As I mentioned, there is no control panel for plugin. Once activated the plugin will take care of all the core and repo files on itself.

Testing Free CDN for CSS and JS

Now that we have installed the plugin, let’s test on the live site. Right-click and hit on the View page source command. Locate the plugins and WordPress core JS and CSS URLs to verify if they are being severed from off-site URL — cdn.jsdelivr.net

[Noteif you’re using the FastCGI Nginx Cache, then do not forget to clear the cache to make this CDN URL changes live.]

Before Plugin installation: 

The files are served from our local cloud hosting server and domain name.

WordPress Core and Plugin files served from our hosting server

After Plugin installation: 
The Core and Plugins files are served from the jdDelivr Free CDN.
Free CDN JsDelivr for WordPress Core

That’s it. Your WordPress is enabled with Free CDN for CSS and JS script. This set up will help in saving tonnes of bandwidth if combined with the free image CDN for WordPress that I published earlier.

Video of Free CDN Setup in WordPress

A really simple WordPress video demo of installing the NGT jsDelivr CDN plugin for Free CDN support. Also testing if the Free CDN is working and support the plugins as well as themes styles and scripts.

I hope you liked the video, please subscribe to our channel for more videos.

What’s next in #WordPressBlog Series

Now that we have set up a free CDN for JavaScript and CSS Stylesheets. Next, we are going to install the Google Analytics tracker to understand the Users’ or readers’ behavior on our WordPress blog site.

If you've any thoughts on Setup a Free CDN for CSS and JavaScript on WordPress Blog, then feel free to drop in below comment box. Cheers!

Share
Kushal Azza
Kushal Azza
Fond of latest technologies and gadgets. I'm a digital dev and analytics consultant. Also, the geek behind this blog!

Leave a Reply

Your email address will not be published. Required fields are marked *