Google Core web vitals: optimize images in Webflow

In this article, Google explains how to optimise your website's images to avoid poor ranking in search engine results.

Key points to remember

In Webflow, images are so easy to make responsive that we sometimes forget not only to think about how the web works in general, but also and above all to optimise them according to the metrics provided by Google (Concerning the LCP for example).

In this article you will find out, according to Google, how you should optimise the images on your website to avoid a bad ranking in the search engine results.

Image loading : "Auto : defaults to browser" VS "Lazy-Load"

There are two ways to load images in Webflow. To optimise page load times, take the time to understand how each option works.

Auto-default to browser

This method of loading an element indicates that the given element is a priority load for that page on your site. You use it when the image is at the top of your page, being immediately visible to the visitor. So you are saying to the search engine like Google: this image should be loaded first because it should be immediately visible to the users on this page.

Lazy: loads on scroll

Lazy-loading is a fantastic way to make your pages faster. It allows the images on your site to load only when they are in the user's viewport, so they are not randomly loaded by the browser.

Best practices

Use "auto-default to broswer" for images in the "header or hero" section = the first section of your page
Use "lazy-load" for the remaining images on your page to improve lighthouse performance

By setting up your images with these 2 best practices you have already made a big step in optimizing your page load speed, and therefore your seo :)

Optimization of core vitals performance

Give a precise width and height to your images

Are you taking advantage of tools like Lighthouse Core Vitals, Google Pagespeed insights to test your website's performance and have you ever gotten the message: "Image elements do not have explicit width and height"?(Image elements do not have explicit width and height)

Here is a way to correct this error and finally improve your site's performance on the page.

In recent years, the development of CMS such as Webflow, Wordpress and Wix has made it easy for developers to display images in a responsive manner.

What bad habits?

Celle de configurer les images en auto ou 100% largeur et/ou 100% hauteur dans un <div> bloc.

However, this practice is complex to manage for search engines like Google because they have to pre-load locations to place these images. Not having exact data and by anticipation they preload very large and very high locations (negatively impacting the LCP). For example 4000 pixels x 4000 pixels when your image was maybe just a 32x32 icon... needing a very small loading.

The best practice :

Define afixed size (widht) andheight (height ) in REM or pixels for all your images.

Attention to the responsive pages of your site

Now that you have set a precise size for your images, check that the image is also adaptive by adjusting its size for devices with lower resolution (tablets and mobiles).