6 recommendations from Google to boost the loading of images on a site

Google makes recommendations to Internet users through a video to speed up the loading of image files from websites.

Credit 123RF

1-Pay attention to the Cumulative Layout Shift of your website

The Cumulative Layout Shift is layout change cumulative known by the acronym CLS. It is a unit of measurement which makes it possible to determine the visual stability on a website. These are, for example, removable elements on a web page impacting the reading of web content. This metric is one of Google’s programs (Core Web Vitals) capable of making a website fluid like LCP and FID. Even if the images do not directly influence the CLS, they can in turn take part in it. According to Alan Kent, Developer Advocate at Google, this is the case when a web crawler struggles to identify the measurements of a photo when it loads.

For Google, it will be necessary to examine the loading of the website and modify the parameters to make it better. On this subject, there is a panel of web performance tools capable of helping you determine the optimal possibility of your website.

AppYuser

The tool appYuser allows you to measure the strengths of your website. It also recognizes the development paths for your business and assesses the business impact. This tool is in freemium mode.

Fasterize

Fasterize optimizes your website. You can take advantage of a multitude of webperf features to boost your web pages. It is, however, a paid tool.

PageSpeed ​​Insights

Google recommends this tool to allow you to analyze precisely the technical points to be rectified to boost your website.

light house

It is the SEO tool for your website. This tool SEO It allows you to to audit the web page you want to use. The Lighthouse tool is almost free.

2-Respect the dimensions of your image

To quickly and efficiently transfer an image to your site, pay attention to its dimensions (width and height). Alan Kent explains that large files are slow to download. This slowness is often noticeable on smartphones due to poor connection quality and less efficient processors. With PageSpeed ​​Insights, in the section report Opportunities, you can identify images with an inappropriate size. Google offers you to choose responsive images in order to quickly access the site. There is also an HTML attribute that helps you classify various image formats and dimensions to allow the browser to make a quick choice.

3-Make use of an image in the best format

Consider which format to use for your image between formats JPEG, PNG and WebP. For Alan Kent, the file format impacts its size. The Google expert suggests that measures should be taken since JPEG and WebP formats can compress files using reduction algorithm. The consequence is the loss of image quality in order to obtain the image size. However, this low quality image is not noticed by the Internet user who visits your site, but the loading speed is important. Google offers to check in the section Opportunities from PageSpeed ​​Insights if your website can use another format. Enter Stream images in next-gen formats to do this check.

4-Compress the images

You can use a better quality factor for your images to encode them well. This trick maintains the desired image quality. After, check the achievable performances in the part Efficiently encode images in the section Opportunities of a PageSpeed ​​Insights report. Google recommends using an image conversion tool you like and testing different values ​​on multiple images. Compare the before and after image. Google offers you to consult the Squoosh.app site as an easy way to parallelize your images with compression or not.

5-Notify the browser of caching tips

You can tell a browser how long to cache an image if you want to load images quickly on your site. When uploading an image, please insert an HTTP header followed by caching recommendations such as time. To help you verify the correct definition of headers on your site, Google offers to consult the section Opportunities. Section Use effective cache rules allows you to see if your images are eligible for this feature. Google adds checking for platform or server settings that can be improved to adjust the time. However, choose the long-lasting option if you don’t change your photos frequently.

6- Focus on creating download sequences

Google offers at this level to properly organize the resources or even the downloaded images. This action optimizes your web page. You can thus follow the following download order:

  • Hero Header;
  • The front waterline images;
  • Images that are located just below the fold line.

At the section level Defer loading off-screen images in the section Opportunities, you will know which image to download first.

.

Leave a Comment