Website performance – getting to grips with images

In my last post about increasing your Google PageSpeed Insight score, I covered a variety of items you might encounter in the report, and how to address them. One of the items I didn’t address – and one of the biggest website performance gains you can make – is to review the images on your website.

In this post I will go over all the various considerations and changes you can make to improve your site loading speed from the perspective of images.

Uploading

It’s best to start on the right foot, which means addressing image performance right from day one, as you upload them. If you’re able to, we always recommend optimising your images before you upload them to your web hosting account. You can make real speed improvements here, not least save storage on your account.

I love the ImageOptim tool for this. This is a desktop tool that lets you drag and drop your images into one by one, or in big batches. You set the level of optimisation/compression you’re comfortable with and it does the rest.

There are also tools you can install on the server side of things, if you’d rather things happen auto-magically with minimal effort; Imsanity is one such plugin that works really well, I wrote about that in a previous article here.

CDNs, compression and caching

The three Cs! Let’s take a look at each one in turn.

CDN

Using the services of a Content Delivery Network (CDN) on your website can make material improvements in your site loading speed.

First up, what exactly is a CDN? Well, it’s usually a global network of servers that work with your hosting server to fan your content out across the world. When you publish new images, they’re fed into the CDN and pushed to various points around the world. When a user in Australia accesses your site, the images will load from the local CDN server, not your hosting server – the result of which is usually a faster experience.

Many hosts offer a CDN as standard, we do not, by design. There are many options out there from free (like WordPress’ own Photon network, or the very popular CloudFlare) to paid, each offering slightly different solutions for users. We think it’s better to leave our WordPress platform open ended in this respect and let you choose what CDN you want to use, if of course it makes sense for your website.

If you do need pointing in the right direction, we recommend using the KeyCDN service, which is reasonably priced and simple to get going on your WordPress Hosting account with us. Here’s a brief tutorial that shows how to get KeyCDN working on your WordPress hosting:

PageSpeed Insight image opportunities

Back to my last post, you’ve probably got some questions about several image-related warnings and recommendations. Here are the most common, what they mean, and what you can do.

Properly size images

This can be a tricky one to address. The error essentially means your website is sending images to the client that are incorrectly sized. For example, they’re sending a huge image when the client is using a mobile device.

Typically your designer or developer can fix this for you. If you’re using WordPress a new theme might be in order (remember to regenerate your images once you change themes).

Advanced tip: this one isn’t for the feint of heart, but one additional WordPress fix is to inspect the source code of your rendered site and see what image sizes are being sent to the browser. From there you can then change the media thumbnail sizes in the WordPress settings to match, regenerating your images based off of that. This should mean that your site serves properly sized images.

Efficiently encode images

When scanning your page, Google collects all the JPEG or BMP images on the page, sets each image’s compression level to 85, and then compares the original version with the compressed version.

If the potential savings are 4KiB or greater, Google flags the image as optimizable; if you’re seeing this you need to re-save your JPEGs with a compression level of 85 or better.

Serve static assets with an efficient cache policy

On this one, we slightly disagree with Google’s policy, and you might too. As standard we use a 30 day cache TTL for the WordPress platform. This means that when your hosting account sends data such as images to a web browser, it also says it’s ok to cache and keep using those for 30 days.

This particular error though will appear for anything less than a cache policy of 365 days. We think that’s a tad extreme. This means if your website sends an image file to the user, it wouldn’t matter what you update on your site, they might load the locally cached version for a full year!

Defer offscreen images

This warning means you aren’t correctly using the ‘lazy load’ facility on your site. ‘Lazy loading’ is the act of holding off on sending images to a users browser if the image is not currently on the screen. Images are sent out to the browser as the user scrolls down the page, rather than all at once.

These days ‘lazy loading’ is a standard part of WordPress so modern sites should already be utilizing this feature. That said, if you do see this error, it is possible that you have an older site and your images have not been updated retroactively.

Drop us an email so we can look at this for you; images with certain pre-existing attributes might not have auto updated to lazy loading, or your theme might be over writing this entirely.

Serve images in next-gen formats

It’s likely you use JPG or PNG (or even GIF!) image files on your website. If you’re seeing this particular warning, one file format you’re not using is WebP. This format was developed in-house at Google.

We love WebP, it’s a huge step forward in reducing image size. There is of course one huge drawback: WebP is not supported by older versions of the Safari web browser in particular. That means users of older Apple devices might not see an image served in this format.

But wait, all is not lost! Many websites use some nifty code to serve images in a variety of formats, sending WebP images to capable devices where possible. If you use WordPress on your website there are plugins that you can drop in that take care of this automatically with no further effort on your part.

If you use our WordPress Hosting plan, things are a little more complex. most plugins that offer WebP support rely on the Apache webserver, where we instead use Nginx for the very best performance. We’ve developed our own internal tooling to take care of this for you. If you’re looking to squeeze every last ounce of performance out of your website, drop us an email, we can enable the auto serving of WebP images on demand for your site.

Next up, themes. In the next post in this series, we will dig into how themes can make a huge impact on your site performance and we will also run down the top 250 free WordPress themes and rate them on performance!