Improve page load times with the Blackbird WordPress Page Speed Plugin
As I discussed in those previous two articles, two ways to increase your page load speed is to reduce the load on your existing web host and serve “static” files instead of “dynamic” files to your users. There are plenty of caching plugins available, but none I’ve found that combine these two functions.
Motivation for developing this plugin
A client recently hired me to conduct a website audit and, based on the results, optimize her site’s code to improve her page load speed. As her site currently gets good traffic, I wanted to follow my own advice and set up a staging site in in order to do the work. I didn’t want to take the chance of any of my improvements breaking her site.
Alas, I was stymied. My client is not a web developer, she’s a writer. Web hosting and speed issues are not within her wheel-house. Although her site gets good traffic, it was hosted on a “bargain” host. No
ssh access, and popular back up plugins such as BackWPup, BackUpWordPress, and even BackpBuddy were hanging when creating a
.zip file on the server.
I wasn’t about to edit her
functions.php file in the WordPress Dashboard, so again, since I couldn’t access my client’s server, I decided to take my own advice and build a custom WordPress plugin to do the work for me.
Secondary motivation: continuing education
Developing with WordPress is an exercise in continuing education. It is so versatile, the only way to truly embrace its functionality is to work with it on a regular basis. Like most coding endeavors, many WordPress coding solutions are situational. A client or other user comes up with an idea or a problem and it’s up to the developer to come up with a solution.
Unique issues require novel solutions. There are any number of ways to solve problems using code. The trick is come up with the most elegant implementation. While I’ve been developing WordPress websites for over 5 years, I learn something new about WordPress with every project.
I am currently focusing on my WordPress plugin development skills. Therefore, this use case gave me the opportunity to improve my abilities in this area.
How the Blackbird WordPress Page Speed Plugin works
Since a picture is worth a thousand words, I’ll show you.
Replace WordPress jQuery with Google Hosted Libraries
View your website in the element inspector of your browser. I use Google Chrome. If you do too, press
F12 (Windows) / Cmd + Opt + I (OS X) / Ctrl + Shift + I (Linux) or open the Chrome menu at the top-right of your browser window, then select Tools > Developer Tools.
Or even easier,
right-click/Cmd-click anywhere in your web page and select Inspect from the drop-down menu. This method also works for Firefox and Safari, as well.
In your element inspector, navigate to the <head> section of your <html>. If WordPress jQuery is loaded, you should see a <script> element showing the directory path from which it is included, like so:
Enabling the Replace WordPress jQuery with Google Hosted Libraries option un-registers WordPress jQuery and re-registers Google Hosted Libraries jQuery. After doing so, if you refresh your website and look at the <head> section of your <html> in the element inspector, you’ll see that the WordPress jQuery <script> is replaced with Google Hosted Libraries, like so:
Once you enable this option, loading jQuery is offloaded from your server to Google’s cloud server, thereby reducing the load your server must shoulder.
Remove Version Query Strings
Once again, look at the <head> section of your <html> in the element inspector. This time, look at how your CSS and jQuery files are included. You’ll see that each url is appended with something like
?ver=1.12.4 like in the following image. These links are dynamic. they cannot be cached and must be generated each time your site is visited.
Enabling the Remove Version Query Strings option replaces the dynamic version links with static links. Once you enable this option, refresh your site and check out the <head> section of your <html> in the element inspector and you should see something like the following image.
Once you enable this option, your CSS and jQuery files will be included with static links, and can now be combined and minified for even better page load speed.
Download and Install Blackbird WordPress Page Speed Plugin
The Blackbird WordPress Page Speed plugin is not available on WordPress.org. However, in the spirit of community collaboration, it is available for download, forking and branching on Github (link below).
Once you download the
.zip file, install it to your WordPress site in the usual manner by navigating to Dashboard>Plugins>Add New and clicking the Upload Plugin button at the top.
Once the Blackbird WordPress Page Speed plugin is installed, activate it, and you’ll see a new admin area in your Dashboard toward the bottom called PageSpeed Plugin Settings
Clicking on this new admin menu and it will present you with the admin settings for the Blackbird WordPress Page Speed plugin. There are two simple options, enabling or disabling the functions.