Improving PageSpeed by optimising images (how-to)

Written by: Endouble Endouble
Blog

The website politie.nl was down for several hours on Sunday. The culprit turned out not to be a DDoS attack, but an image that was too large. What has the long arm of the law painfully illustrated for us here in terms of website loading time, server load and PageSpeed?

The ever-growing share of mobile traffic has made the speed (PageSpeed) of your website increasingly important - a Google ranking factor in fact. That’s because PageSpeed is linked directly to the quantity of data, which is why it is important to limit the size of your pages as much as possible. This means optimising/compressing any images and videos, just as you should with CSS and JS files (for style and functionality).

By limiting the size and use of images, you prevent an unnecessarily high amount of data traffic. First of all, this is more user-friendly for your mobile visitors, who might otherwise get through their data bundle very quickly. But it also prevents a huge load on the server, which is what happened with politie.nl, causing the server to shut down within an hour. Finally, it makes your site faster, contributing to a good user experience and giving you an advantage in Google search results (SEO).

Adding images in WordPress

WordPress - the CMS used by our talent acquisition platforms - makes it easy to place your own images. But there is a downside to this: we often encounter large image files that are simply shown in a reduced size on the website. This is a waste of loading time and data bundles, and puts an unnecessary load on the server. The chart below shows the loaded elements of a website. The long bars represent a long loading time, usually the result of images that are too large.

Netwerven-PageSpeed-en-laadtijd-van-afbeeldingen-optimaliseren

Optimising images (how-to)

The most common types of images (JPG, PNG) are easy to optimise. A free tool like TinyPNG.com does this very effectively and without any loss of quality. On the average website, you can save as much as 30% of file size* within minutes.

Have you optimised your files? Then you can add them using WordPress. Note: rather than inserting them at full scale and then resizing them by dragging, it is better to select a standard or custom size before inserting the image. WordPress will then use a reduced file size instead of the large original. Also make sure you do not have unnecessary links to the media file. After all, most of your users would prefer not to be shown a full-screen image, especially not on a mobile device.

Optimising loading time in six steps

Of course, it is best to make sure the format and file are no larger than necessary before uploading your image. The following steps will help you improve your PageSpeed through image optimisation.

  • Download your current image or use a local original
  • Reduce the format of your image using Photoshop or another program
  • Optimise the file size with TinyPNG
  • Upload the file to the WordPress Media Library
  • When inserting your media file, set the link to ‘None’ (Figure 1) ...
  • ... and select a standard or custom size (Figure 2)
Endouble - Set media linkFigure 1: Setting the link
Endouble - size settings for imageFigure 2: Setting the size

Test your own website PageSpeed?

PageSpeed Insights by Google Developers lets you easily test whether there are gains to be made in your talent acquisition platform by optimising images, CSS and JavaScript. Test this too before optimising your images. That gives you a baseline measurement that can be compared with the post-optimisation result.

Do you have any questions about PageSpeed and image optimisation or would you like advice on reducing CSS and JS size? Contact me

* The images in this article were reduced by 20% through file size optimisation alone.