Load time is the metric that describes how long a specific web page takes to load as a whole. This process includes HTML but also all the CSS code, scripts, images, and third party resources that can be found on a website. In this article, we’ll explore how to use the page speed test results to optimize your WordPress website.
We can define load time as the time frame between the moment a user starts navigating to the page until all of its page content has loaded. It’s a fact that, ideally, a performant page should load in less than two seconds. This is especially true for mobile pages, which suffer the most from long load times.
Page Speed Test
Running a page speed test is as easy as visiting a website and entering your website’s URL into a box. The speed test then analyzes your website and comes up with recommendations. There are many different speed test tools, but here are a couple worth looking at.
Pingdom has a tool for speed testing, and it lets you test from different locations around the world, or from a server that is relatively close to you. If you’re targeting a local audience, for example, this is a good way to see how fast your website is for them.
Google Lighthouse is a performance tool that lives in the Chrome browser’s Web Developer Tools. To access it, right click on a page, choose Inspect and check the Audits tab in the new window that opens in your browser. Here, you can test speed for mobile device or desktop, and on different bandwidths and connection speeds.
Before Lighthouse came along, Google PageSpeed Insights was a great way to look for speed improvements – and it still is. It even lets you download optimized images, CSS and JS files for your site. But if you’re working with WordPress, you may find it difficult to directly replace your files with these optimized files. Luckily, WordPress has plugins that will generate them for you.
Page speed x WordPress plugins
Once you’ve run a page speed test, you’ll probably feel like you should spend some time optimizing your website for speed. You will have quite a few recommendations, ranging from things you can do yourself and some things that you may need technical help with.
Images usually play a large part in speed optimization, especially if you use large header images. Or if your site is image-heavy overall. It’s always a good idea to optimize these images. And it can be done with little quality loss these days. One of the things to look for is, like in the page speed test example above, images that are in fact larger than they are shown on your screen. If you have an image that covers your entire screen and squeezes that into a 300 x 200 pixels spot on your website, you might be using an image of several MBs. Instead, you could also change the dimensions of your image before uploading. And serve the image in the right dimensions and at a file size in KBs instead. By reducing the file size, you speed up your website.
Cache On Browser
Another issue that comes up a lot in page speed tests is browser cache optimization. Browser cache is about storing website files, like JS and CSS, in your local temporary internet files folder, so that they can be retrieved quickly on your next visit. Or, as Mozilla puts it: The Firefox cache temporarily stores images, scripts, and other parts of websites you visit in order to speed up your browsing experience.
Optimize Images in WordPress
There are also a number of image optimization plugins (both paid-for and free) available for WordPress, such as Kraken.io, Smush or Imagify. Plugins usually remove Exif data from the image, which is a good idea because Exif data includes information about camera settings used to take the photo – really interesting for a photographer, perhaps, but not something you need for the image in your blog post. You can also have these plugins to replace your image with an image that is slightly lower in quality.
Some of these plugins can also help you resize your images. Take these plugins for a test drive and see which works best for you and minifies your image files best. To find out more about image optimization, be sure to check this post about image SEO.
WP Super Cache
Most speed optimization plugins help you to optimize your site using caching. Sometimes it’s as simple as this: Advanced tab of WP Super Cache here has a lot of more in-depth configuration for that, but starting out with the set defaults of a plugin is usually a good start. After that, start tweaking these advanced settings and see what they do.
Note that WP Super Cache has an option to disable cache for what they call “known users”. These are logged in users (and commenters), which allows for development (or commenting) without caching. That means for every refresh of the website in the browser window, you will get the latest state of that website instead of a cached version. That last one might be older because of that expiration time. If you set that expiration time to say 3600 seconds, a browser will only check for changes of the cached website after an hour. You see how that can be annoying if you want to see, for instance, design changes right away while developing.
WordPress comes with a handy default feature, where every image you upload is stored in several sizes. So if you want all the images in your posts to be the same width, pick one of the predefined ones or set your custom dimensions here. Images that you upload scale according to these dimensions and the image in the original dimensions will also be available to use.
This means that if, for example, you load the medium size image instead of the much larger original, this will serve an image in a smaller file size, which will load much faster.
Other WordPress caching plugins
I’m talking about WP Super Cache here because it’s free and easy to use for most people at least. But there are alternatives. WP Fastest Cache is popular as well, with over 600K+ active installs. It has similar features to optimize caching.
A paid-for plugin I also like is WP Rocket. It’s so easy to configure, you’ll wonder whether you have missed something. But your page speed test will tell you that it works straight out-of-the-box. There are more advanced settings where you can fine-tune your site. But before we look at that, we need to talk about compression.
Your page speed test tool will probably tell you to Try to minify your CSS files. Minify the JS files of your site. Minify your HTML files or enable (GZIP) compression
Again, many of the right settings are on by default, similar to Yoast SEO, but even more, can be configured to your needs. Your web server’s settings may also affect how well compression works.
If you use one of these plugins but your compression optimization still isn’t working properly, contact your hosting company and see whether they can help you. A decent host should be able to help you out, especially if it’s one of these WordPress hosting companies.
CSS & JS
The combine option for these files is, as you can see in the WP Rocket screenshot above, not recommended for websites that use the HTTP/2 protocol, which allows multiple script files to be loaded at the same time. But combining these files is still good for non-HTTP/2 sites because it reduces the number of server requests, which again makes your site faster.
Speed Test and CDN
Conclusions of Speed Test
Page speed tests will give you even more recommendations that we’ve covered here. Again, you might not be able to do all of these yourself. If that’s the case, get help from your web developer or agency, or your hosting company. But in the end, if you want a fast website, WordPress is a great choice because there are many great plugins that can help you optimize the speed of your website after a page speed test!