New commonWP Plugin Enables WordPress Sites to Use the Free jsDelivr CDN

Milan Dinić, a WordPress developer based in Serbia, has released his commonWP plugin that enables WordPress sites to use the free, public jsDelivr CDN. Last year jsDelivr was revamped to allow any file from GitHub and npm to be served by the CDN. WordPress’ mirror on GitHub made it possible for Dinić to create a plugin that works with the CDN.

commonWP aims to speed up performance by offloading JavaScript and CSS files to jsDelivr, including the following:

  • All files from WordPress core (unless development version of WordPress is in use)
  • All files from plugins hosted by WordPress.org Plugins Repository (unless author of specific plugin doesn’t use SVN tags for releasing)
  • All files from themes hosted by WordPress.org Themes Repository
  • All files from plugins and themes hosted on GitHub that support GitHub Updater
  • All files marked as available on npm in any type of theme, plugin, or MU plugin

Dinić said he designed commonWP with a emphasis on keeping it lightweight, easy-to-use, and secure. He claims the approach he used in the plugin is safer than any other plugin that employs a CDN for WordPress files:

First, commonWP will only rewrite file to point to one on jsDelivr if that remote file is identical to local one. Second, during comparison, it generates subresource identity hash of remote jsDelivr file and includes that hash in page’s source code so browser won’t load remote file if it doesn’t have exactly the same hash.

Dinić recommends the plugin for users who are not already using a CDN, have limited budgets, or live in less developed countries.

“Using a CDN is generally recommended, and with this one they might get even more speed because some files might be already cached by their visitors,” he said. “Imagine if jquery.js, jquery-migrate.min.js (most common files) are always served from one place. You wouldn’t need to get them from each WordPress site you visit. You would get them once and they would be in your browser’s cache, and initial page load would be faster.”

Dinić referenced a Trac ticket where using a CDN is proposed for serving assets like jQuery, but no action has been taken on the proposal yet. One benefit he cites for WordPress’ global user base is that a CDN like jsDelivr allows visitors to get files from their own content, country, or even the same city. jsDelivr has a large multi-CDN network with infrastructure built on top of other networks, including StackPath, Cloudflare, Fastly, and Quantil. It also has custom servers in locations like China where other public CDNs have little or no presence.

commonWP doesn’t have any settings for users to configure. The plugin fills up its cache in the background after it is activated. Developers can fine tune it for their needs and Dinić has published some code examples to GitHub.

In his release post, Dinić referenced a Serbian site getting a 1-second loading improvement and has done other tests but said he’s still looking for a good way to present the data. The plugin’s FAQ outlines which factors influence whether or not commonWP can bring performance improvements:

  • How many of your files are available on jsDelivr and can be rewritten – the more files on jsDelivr, the more speed; the more files used by the page are rewritten to jsDelivr, the more speed.
  • The further your site’s visitors are from the server your site is hosted on, the more speed you can get.
  • The slower your server is, the more speed it can get.
  • If your visitors already visited WordPress site(s) with commonWP activated, there is more chance that some of the files you use on your site are already cached by them so they can get more speed.

Not every site will see drastic improvements for site owners testing performance, but visitors from other parts of the world may be able to load certain files faster. Dinić recommends users test their sites using webpagetest.org and select a higher number of tests to get an average. He also recommends testing with different locations and different connection speeds. Test with the plugin activated and deactivated and when the site has a full cache. In general, the further the location is from the server and the larger number of files sent to jsDelivr, the bigger the performance improvement will be.

8

8 responses to “New commonWP Plugin Enables WordPress Sites to Use the Free jsDelivr CDN”

  1. If you don’t know how to use a CDN don’t use it. things can get worst with a not fully tested CDN than without.
    Normally plug and play plug in or hosting options for CDN work bad 90% of time and don’t really improve performance for Average users .
    If you build a website with international target for large audience you should take a good CDN (paying) service.

    But the idea is nice and is well developed.

    • I agree that in general you should be careful when using CDN, even for this plugin I recommended testing and wrote FAQ entry “Will my site be faster when I start using commonWP?”.

      However, note that there is one difference between this and other CDN solutions. When using commercial CDN, each file is used only by your own site, not by others. That means that your visitor almost certainly won’t have it cached in their browser, and that unless you have large traffic from all over the world, it won’t be cached even in some POPs of CDN.

      With this solution, you are offloading only files that are used by open source plugins, themes, or WordPress core itself, and that are used by many other sites (in WordPress core case, we are talking about over 30% of sites). Some files are used on almost all WordPress sites (jquery.js, jquery-migrate.min.js, wp-embed.min.js, wp-emoji-release.min.js). Even now, with just around hundred of sites that are using commonWP, those files are mostly cached by CDN’s POPs around the world, I have tested that (and anyone can too with switching locations in VPN/TOR and watching response headers). With more sites using it, we are increasing chance that this is true for files from popular plugins as well (Jetpack, WooCommerce, Gutenberg…), and chances are increasing that some files might already be cached by visitor’s browser. More sites = better results. I wrote this in FAQ entry “Are there any benefits other than speed?“.

      Also note that you can tell commonWP to offload only some files to CDN, for example only those popular files. There is a code example under “Deciding should path be rewritten“.

    • This CDN is only for open source assets. Images from media library are not open source, while most/all JavaScript and CSS and assets referenced from them (images, fonts…) are.

      Note that you can use other CDN as you would normally do in combination with commonWP for images or other assets. For free solution for images in media library, there is CDN by Jetpack Photon but it has condition that you must use Jetpack and connect site to their service.

      Using CDN for images in media library requires more caution (see comment by Diogene). For new visitors, CSS/JavaScript files are more important because it’s the first thing browser requests when loading page and they affect page’s rendering time. Images are referenced later in HTML, are usually below the fold, maybe even lazy loading is used, so priority and effect of performance is lower. For high trafficked sites that rely on media content, CDN for media library images is important too.

Newsletter

Subscribe Via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.