Optimising Images for Page Speed and Google
It is important to rank well in Google search results. Page speed is one of the important KPIs in all of the algorithms. Optimising your images is a good way to improve the speed of your website.
According to Google, optimising images is important for rankings and offering a good user experience. Large images can slow down your website this may upset the visitors who want to access information as quickly as possible.
Images have page weight and they also make up the largest number of HTTP requests per page. When someone visits your website the browser has to request and download the files to render the required content. An HTTP request has to be made to the server for every single file. The heavier the image you have the more requests your browser will have to make.
When you optimise your images and make them smaller the size of the HTTP request also reduces thus resulting in faster load times.
To make your visitors happy you need a fast-loading website otherwise your visitors will leave even before browsing. Therefore optimising your images is important for your business and revenue. Images play an important role in the performance of your website.
Impact of images on Google
Images affect two of the page speed metrics: Largest Contentful Paint (LCP) and First Contentful Paint (FCP).
Largest Contentful Paint: It marks the point when the main content has been loaded.
First Contentful Paint: It is related to the first text or image elements that are rendered on the screen.
You can use the PageSpeed Insights tool which is powered by Lighthouse to analyse your images. This tool can give diagnoses and recommendations to optimise the images and improve page speed.
The following are the recommendations:
- Google has recommended converting the images to the WebP or AVIF formats as they offer better compression than the JPEG and PNG formats. When you compress images it leads to less data consumption, faster downloads and a faster website.
- You can use efficient encoding images as this reduces the file size and also maintains its quality. If the savings are 4KB or greater then Google will flag the images as optimisable.
- One of the additional ways to optimise images is to use the feature ‘Defer offscreen images’ in PageSpeed Insights and use a lazy loading technique for scripts below the fold. The main aim is to prioritise the important resources and load the hidden ‘images’ later.
- Google recommends that you should size your images properly especially when serving them on mobile. Therefore you should resize and optimise your images for mobile.
- You can serve the static assets with an efficient cache policy. HTTP caching can speed up page load times on repeat visits to your website. Google flags all the static resources which are not cached.
Optimising images for Google page speed and performance
The following are the performance techniques you can implement to optimise your images and improve your page speed:
- One of the ways to optimise the images for Google is to convert them into the WebP format. You can do this by using a WordPress plugin like Imagify or other plugins like WebP Converter for media or WebP Express. These plugins create the WebP version of the images which results in better compression and optimisation.
- You can also use online tools instead of plugins like Convertio or Ezgif. When you use tools you will have to upload the images, download them in WebP format and put them into your library.
- Compression is reducing the size of the images significantly and thus decreases the cost of storage. This can give your website a performance boost. The most popular WordPress plugins for compression are Imagify, Optimole, Compress JPEG & PNG (Tiny PNG), EWWW and ShortPixel.
You can also use designer tools like Photoshop or Lightroom to compress your images but the quality of the images may get affected.
- Google recommends resizing the images properly for mobile. For this, you can use software like Sketch, Preview or GIMP to modify the size of your image and reduce its weight. You can also use ‘Imagify’ to resize your images and it also offers an option to automatically optimise large images.
- PageSpeed suggests that you should explicitly set the width and the height of image elements. The aim here is to reduce the layout shifts and improve the Cumulative Layout Shift (CLS) metric. CLS metric is used to measure the visual stability of content.
You can set the image dimensions in the HTML tags. A manual way to find out if the dimensions are set is to use a developer tool on Chrome and inspect the images.
- One of the most efficient ways to optimise your images for Google and performance is to use lazy loading. In this, you tell the browser only to download the images the visitor is viewing. To apply lazy loading you can use WordPress plugins like Lazy Load by WP Rocket or Autoptimise.
Lazy loading can also be implemented by using the tags for images as follows:
img src="image.png" loading="lazy" alt="..." width="250" height="250"
- Another recommendation by Google for page speed is caching. Caching allows images to be served faster to the user. Browser caching can help to reduce the server load by reducing the number of HTTP requests per page.
You can implement caching by using a WordPress plugin like WP Rocket. This plugin applied 80% of the web performance best practices, has a simple interface and can be set up quickly.
- Using an image CDN can help to reduce traffic costs and improve your grade on Google PageSpeed Insights. It can optimise the way images are delivered to users anywhere in the world. This technique is the best way when you have a worldwide audience.
In this optimisation technique, the amount of transferred data is reduced. It is difficult to implement this right from scratch therefore you can use tools like RocketCDN.
- You should try to use SVG (Scalable Vector Graphics) whenever possible. One of the advantages of this is that it allows you to scale your images without losing quality. It is based on XML. This format is about equations and mathematics which makes it easier to scale without having to compromise on pixels.