Dans Webflow, les images sont si simples à rendre responsive qu'on oublie parfois non seulement de penser au fonctionnement du web de façon générale, mais aussi et surtout de les optimiser selon les métriques fournies par Google (Concernant les LCP par exemple).

Dans cet article vous retrouverez, selon Google,  comment vous devriez optimiser les images sur votre site web afin d'éviter un mauvais classement dans les résultats des moteurs de recherche.

Chargement image : "Auto : defaults to browser" VS "Lazy-Load"

Il existe deux façons de charger les images dans Webflow. Pour optimiser les temps de chargement des pages, prenez le temps de comprendre le fonctionnement de chaque option.

Auto-default to browser

Cette méthode de chargement d'un élément indique que l'élément donné est un chargement prioritaire pour sur cette page de votre site. Vous l'utilisez lorsque l'image se trouve en haut de votre page, étant ainsi visible immédiatement par le visiteur. Vous dites donc au moteur de recherche comme Google : cette image doit être chargée en premier car elle doit être visible immédiatement par les internautes sur cette page.

Lazy : loads on scroll

Le lazy-load ou chargement paresseux en français est un moyen fantastique de rendre vos pages plus rapides. Il permet aux images de votre site de n'être chargées que lorsqu'elles se trouvent dans la fenêtre d'affichage de l'utilisateur, de sorte qu'elles ne sont pas chargées au hasard par le navigateur.

Meilleures pratiques

• Utiliser "auto-default to broswer" pour les images dans la section "header ou hero" = la premiere section de votre page
• Utiliser "lazy-load" pour le restes des images de votre page pour améliorer la performance lighthouse

En paramètrant vos images avec ces 2 meilleures pratiques vous avez déjà fait un grands pas dans l'optimisation de la vitesse de chargement on page, et donc de votre seo :)

Optimisation des performances core vitals

Donnez une largeur et hauteur précise à vos images

Vous profitez d'outils commeLighthouse Core Vitals, Google Pagespeed insights pour tester les performances de votre site web et vous avez déjà eu ce message : "Les éléments d'image n'ont pas de largeur et de hauteur explicites" ? (Image elements do not have explicit width and height)

Voici un moyen de corriger cette erreur pour enfin améliorer les performances de votre site sur la page.

Ces dernières années le développement des CMS comme Webflow, Wordpress et Wix rendant l'affichage adaptatif dit responsive des images facile, les développeurs ont pris de mauvaises habitudes.

Quelles mauvaise habitudes ?

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

Or, cette pratique est complexe à gérer pour les moteurs de recherche comme Google car ils doivent précharger des emplacements pour placer ces images. N'ayant pas de données exactes et par anticipation ils pré-chargent donc des emplacements très larges et très hauts (impactant négativement le LCP) Par exemple 4000 pixels x 4000 pixels alors que votre image n'était peut-être simplement q'une icône 32x32... ayant besoin d'un tout petit chargement.

La meilleure pratiques :

‍Définir une taille (widht) et une une hauteur (height) fixe en REM ou en pixels à toutes vos images.

Attention au responsive des pages de votre site

Maintenant que vous avez définit une taille précise à vos images, vérifiez que l'image est également adaptatives en ajustant sa taille pour les appareils ayant une résolution inférieure (tablettes et mobiles).

Pour conclure

• Définissez le temps de chargement idéal lazy ou auto default
• Définissez une taille précise et mesurable à toutes vos images

Hope it helps.