Skip to content

Setup a Free CDN for CSS and JavaScript on WordPress Blog

JavaScript and CSS is the core requirement of any web development. Both these elements are required to style and function the website’s front-end. These static files are heavy on web servers; hence serving from a CDN is recommended. We can use the free WordPress plugin to rewrite the core JS and CSS to load from third-party CDN for free.

The Cascade Style Sheet (CSS) and JavaScript (JS) are two essential assets for building every website. 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 bandwidth and improve the site load speed.

In this article, we will learn how to install the WordPress plugin 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 the WordPress blog —

What is jsDelivr CDN?

jsDelivr is a free, fast, and reliable Open Source CDN for npm and GitHub with the most extensive 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.

Cloudflare, StackPath, Fastly sponsor it, and a few other significant players in the internet world.

Installing the WP Plugin – NGT jsDelivr CDN

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

All you need is to install and activate the plugin. It will take care of the rest. The plugin will automatically search and replace CSS and JS file links from the WordPress Core and Plugin SVN repo to serve via jsDelivr Free CDN.

If file URLs are unavailable in the 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 the 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 the plugin. Once activated, the plugin will take care of all the core and repo files.

Testing Free CDN for CSS and JS

Now that we have installed the plugin, let’s test it 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 the off-site URL —

[Noteif you’re using the FastCGI Nginx Cache, 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 setup 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 simple WordPress video demo of installing the NGT jsDelivr CDN plugin for Free CDN support and testing if the Free CDN is working and support the plugins and themes styles and scripts.

Setup a Free CDN for CSS and JavaScript files on WordPress

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

What’s next in the #WordPressBlog Series

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

Kushal Azza

Kushal Azza

Kushal Azza is a Google Certified IT Professional, Digital Content Creator, and Go-To Digital Marketer. He has over a decade of experience solving tech problems, troubleshooting, and creating digital solutions. Follow him on Twitter and LinkedIn.

11 thoughts on “Setup a Free CDN for CSS and JavaScript on WordPress Blog”

  1. Why are you yourself not using it then on, showing plain WP-Content URLs for js and css and some URLs.

    I was about to implement it on my website but now I need to know why you haven’t done it here. Did you find any drawbacks of it later, after putting up this post?

    1. There wasn’t any drawback running on the jsdelivr and for assets. However, I just keep on trying and testing on this blog. Hence, disabled it and switched to I am now using the Cloudflare CDN to load the static assets. Even the Cloudflare is offering similar performance, hence I have chosen to keep it this way.

      If you’re starting new, then you can use the Cloudflare CDN. However, there is no issue using the older method mentioned in this post.

      By the way, Cloudflare is one of the partners that jsdelivr use for serving the assets using their CDN.

      1. Cloudflare CDN is the free one right?
        Also, what cdn are you using for
        Also NGT JSDelivr WP plugin isn’t working. Its not rewriting js urls. Maybe, because it was updated almost a year ago.

        Please suggest.

        1. You can use either the Cloudflare CDN or NGT JSdelivr plugin. And, yes Cloudflare has a free tier which is quite helpful for beginners.

    2. Hi, can I use Cloudflare to store my static HTML files (no CDN) and use JSDelivr to put my CSS and JS files on their CDNs?

      1. You can store JS and CSS files in a sub-directory, say /assets/, and add the CF page rules to “Cache Everything” that matches “*”. This setup will eliminate the usage of JSDelivr and only use CF as CDN.

    Leave a Reply

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