In my last post, I touched on how to lazy load images in order to improve your website speed (as measured by PageSpeed Insights). As I promised in that post, it’s now time to go over some of the other things you can implement on your WordPress site to further improve your site speed score.
Let me start by saying that every website is different. What works for one site, may not work for another depending on what assets are being used, what types of assets those are, etc. However, the things that we will discuss here should be generally applicable. So, here we go!
Build Your Own Theme Where Possible.
I cannot stress this one enough. I understand that we don’t always have control over what theme is being used on a site we are working on. But, if you are able, build your own theme. The reasons for this are many, but let’s talk about a couple of the big ‘uns:
CSS
Chances are if you are building your own theme, you are only going to include the CSS that you actually need to render your website. You have probably worked on bloated websites that were loading tons of unneeded CSS. That can really bog down your website.
Plus, Google is now checking for CSS that is not required to render the page and dinging your website speed if too much unused CSS is being loaded. This is a big problem for websites that use some premium themes. In an effort to give users a bunch of styling options, loads of unneeded CSS are loaded. But, you are a savvy web developer and as long you keep things trim, this shouldn’t be too much of an issue for you.
JavaScript
The points above apply to JavaScript as well, but perhaps even more so. Google is looking at the amount of time is takes to execute all of your scripts, and if there is a ton of stuff being loaded, they’re going to ding you. And more so than for your unused CSS.
Use a Caching Plugin (or Two)
Caching plugins are very handy when it comes to speeding up your site. Basically, a caching plugin will create a static version of your website and serve that to visitors. This greatly cuts down on the amount of time it takes to load a website. There are also caching plugins that will handle things like minifying and compiling CSS and JS, gzipping, and leveraging browser cache.
On my websites, I use two caching plugins:
Autoptimize is great for compiling all of your CSS and JS files into minified files (as long as you have enqueued them properly). You can also have it inline all of your CSS. PageSpeed Insights checks for CSS and JS that is render-blocking, or in other words, files that prevent the website from being rendered until those files are downloaded. Render-blocking elements can slow down your website, and using Autoptimize in the way I described helps to eliminate that issue. Here is the setup I use for Autoptimize is case you are curious (which, I’m certain you are 😉 ):
WP Fastest Cache can also minify CSS and JS for you (but Autoptimize does a better job in my opinion). You can also minify HTML (which it does better than Autoptimize). It will also allow you to gzip and browser cache which is something Google looks for. Here is the setup I use for WP Fastest Cache:
Lazy Load Everything You Can
I touched on lazy loading images in my previous post. There are strong opinions about when it is appropriate to lazy load images, or if it’s appropriate at all. Regardless, Google specifically recommends lazy loading images that are offscreen at page load.
Additionally, by using the same technique, you can also lazy load iframes. This is especially useful if you have embedded YouTube videos on your site. Odd, considering Google owns YouTube, but whatever (they also ding their own scripts such as Tag Manager and Analytics as a side note).
If you want to lazy load your YouTube videos using the scripts from my last post, you can do something like this:
<iframe class="lazy" data-src="https://www.youtube.com/embed/55JrEbenmTo"></iframe>
I’ve seen cases where a webpage’s speed score has jumped by 40 points simply by lazy loading YouTube Videos. So, yeah, it’s a big deal.
If you are building your own theme, this technique should be simple to implement. However, if you are using Autoptimize (for reasons I have already explained), you can enable lazy-loading directly through the plugin. I’ve tested it, and it works great. It does not help with the lazy loading of iframes though, so you’d still need to do that portion manually.
Optimize Images / Display Them at Their Proper Size
Optimizing images is nothing new and you’re probably used to doing this as part of your workflow. However, simply saving them as optimized (or progressive) images out of Photoshop or Sketch or whatever isn’t always enough. There are a bunch of tools out there that will optimize your images in a way that will make Google happy. I happen to be partial to ImageOptim, but here are some tools that will get the job done:
What gets tricky is that sometimes PageSpeed Insights gets cranky when you display an image that’s actual size is larger than how it’s displayed on the website. For example, if you have a large banner image that’s actually 1400×800, but on mobile its displaying at 480×200, Google may not like that.
However, if you use the lazy-loading technique from my previous post, this shouldn’t be problem for you simply because your images are served as needed and not on page load, which is what PageSpeed Insights is testing for anyway. There are, of course, other ways to do this such as serving up different images based on device. That technique would work as well.
Host Everything That You Can
This recommendation might ruffle some feathers. I know, I know, we’ve all been taught that CDNs are the way to go (and I prefer to use them as well), but there are several arguments that can be made (when it comes to PageSpeed Insights anyway) to host as many files as you can:
- You can utilize browser caching and gzipping on files you host yourself. You can’t do this with external files.
- The caching plugins you are using won’t be able to compile or cache external files
- If there is unused CSS in a stylesheet you are referencing (through a CDN), you won’t be able to remove it to satisfy Google. There is also a chance is could be render-blocking.
Of course, there are going to be files that you can’t help but use external sources. Google Analytics and Tag Manager certainly come to mind. And yes, for some reason Google dings its own scripts which is very strange, but it is what it is.
Conclusion: PageSpeed Insights is a Small (But Important) Piece of the Puzzle
Again, having a good website speed score is just one of many things to consider when building a WordPress site. Using the above methods should help you eliminate some of the most common (and weighty) recommendations that Google will give you.