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.

Screen-Shot-2018-09-21-at-2.39.40-PM New commonWP Plugin Enables WordPress Sites to Use the Free jsDelivr CDN design tips

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.