This will be the first in a series of posts where we’ll take a fairly comprehensive look at various options for Page Speed Optimization in WordPress. This time out, we’ll cover some of the more general ‘fixes’ and ‘tweaks’ that can be implemented from within the WordPress environment that will hopefully allow your site to load faster for your users.
Initially, this began as an entry for our ‘Easy WordPress Tweaks’ series. As things progressed, however, it became apparent that it would be difficult to a adequately cover an in-depth topic such as this in a single post, so we figured that it’d probably be better to split the thing up into smaller bits.
Anyways, let’s get to it… If you want to measure how your site is currently doing in terms of load-times & performance etc., check out Google’s PageSpeed Insights page.
As well, Google Analytics users can measure their site’s performance by going to Behavior > Site Speed > Speed Suggestions.
Chrome users have the option of auditing their page speed performance with Lighthouse — that’s primarily what we’ll be using here.
Be forewarned: if you haven’t made any efforts to optimize your WordPress site yet, chances are your audit scores ain’t going to be pretty (when we first started looking into optimizing this site, we were shocked and dismayed when the Lighthouse performance results for our home page came back with a horribly pathetic 39 out of 100!)
Don’t be discouraged, though. It is, in fact, possible to bump your score up to an acceptable level — all it takes is some time & effort and a little bit of trial & error. You’ll get it done!
So, let’s take a look at a few ways we can optimize from within WordPress (we’ll cover some of the more advanced options for manual fixes and tweaks etc. in future posts).
1. Make Sure Your Theme is Up to Snuff
As you’re no doubt aware, there are untold numbers of great WordPress themes available out there — the trick is to find the one that best suits your needs, has the ‘look and feel’ you’re after and has been built/coded in an efficient and standards-compliant manner.
If the theme has a live demo online, you might want to run it through the validator before downloading or purchasing anything. If checking the demo page results in a ton of errors & warning notifications, you might want to think twice before committing.
Of course, the vast majority of theme developers out there know their stuff and do great work — at the end of the day, however, it’s up to you to make sure the theme you decide to go with is solid. Buyer/downloader beware!
2. Don’t Over-do it with the Plugins
Ah, yes. Plugins. They are both a blessing and a curse to the WordPress user. The temptation is always there to load up with as many bells and whistles as is humanly possible. At a certain point, however, the old saying "Too Much of a Good Thing" kicks in and your site’s page speed will begin to suffer.
Whenever you do decide that you need to add a new plugin, try running a Lighthouse audit both before and after installation — if you notice a significant drop in your performance score you might want to consider looking for something that does the job more efficiently.
3. Use Next-Gen Image Formats
This is one of the performance optimization ‘Opportunities’ that Lighthouse will present you with if (like us) you’re still using good old-fashioned JPEGs and/or PNGs on your site. A ‘Next-Gen’ format such as WebP can be anywhere from 25-34% smaller than comparable JPEG images, and will, as a result, allow your pages to load faster.
The downside, however, is that support for the format is not universal, so to ensure cross-browser and backward compatibility, the HTML5 <picture> element should be used with a JPEG fallback:
<picture> <source type="image/webp" srcset="images/myImage.webp"> <img src="images/myImage.jpg" alt="My Image"> </picture>
So how do we get this to work in WordPress? One plugin that we’ve been testing recently is WebP Express, which allows you to autogenerate WebP images from the existing JPEGs/PNGs in your media library.
The thing you should be aware of, however, is that in order for the plugin’s image conversion functions to work, your server needs to have the required libraries (GD, imageMagick) installed with webP support.
In our case, we’re currently unable to use WebP Express on our live site due to server limitations (yeah, we’re workin’ on it). In our staging environment, however, the plugin works like a charm.
4. Lazy-Load Off-Screen Content
Another Lighthouse optimization tip that we’ve implemented here. The (minor) challenge was finding a Lazy-Load plugin that did’t wreak havoc on our theme.
If you’re not familiar with the term ‘Lazy Load’, it’s basically where the loading of off-screen images is deferred until such time as they are needed. Only the images that are required for the initial ‘paint’ of the page are loaded, and as the user scrolls down the page, the off-screen images appear dynamically. If you have a page containing a large number of graphics & images, this can speed up your initial load-time substantially.
Now, in our case, we previously had the ‘Lazy Load’ option the JetPack plugin doing this for us. This worked fine until our latest theme-change when some nasty compatibility issues surfaced.
The solution was relatively painless: we simply shut off the JetPack Lazy Load option, hunted around a bit and found the WP Rocket Lazy Load plugin, and problem solved (so far so good anyways).
In any event, be aware that you may have to try a couple of different plugins before you find one that plays nice with your current theme.
5. The Ultimate Performance Plugin?
While working on this Page Speed Optimization project, we discovered something called W3 Total Cache, which claims to be "The fastest and most complete WordPress performance optimization plugin".
At first, we were like, "Yeah, right — heard that one before". After installing & activating the plugin, however, it soon became apparent that this might, in fact, be the real deal.
There are so many different options offered by W3 Total Cache that there’s a bit of a learning curve involved here, but once you’ve taken some time to familiarize yourself with it’s page cache and browser cache configurations, you’ll begin to see significant improvements in your site’s performance.
We’ve only had a short time to experiment with this one, and have only just begun to scratch the surface in terms of it’s capabilities.
Next time, we’ll delve a little deeper into this topic, and look at few of the more advanced WordPress page speed optimizations you can do to get your site running quick like a bunny!
If you have any questions or if you need assistance getting any of this to work for you, feel free to leave a comment below or give us a shout via our contact page — we’d be happy to help!