Home SEO 6 conseils d’optimisation d’image Google

6 conseils d’optimisation d’image Google

by Matt G. Southern
6 conseils d'optimisation d'image Google


Dans une nouvelle vidéo de Google, le Developer Advocate Alan Kent partage six conseils pour optimiser les images des sites Web de commerce électronique.

Bien que la vidéo soit spécifiquement destinée aux sites de commerce électronique, les conseils s’appliquent à tout site Web qui propose un grand nombre d’images.

À plus de 14 minutes, Google Video est beaucoup à digérer si vous êtes occupé à travailler sur des sites Web.

Voici un résumé plus savoureux que vous pouvez consommer en moins de cinq minutes.

Voici les conseils de Google pour que les images se chargent plus rapidement et plus efficacement.

1. Supprimer le changement de mise en page cumulatif de l’image (CLS)

CLS fait référence aux cas où le contenu de la page est visuellement déplacé ou modifié d’un endroit à un autre lors du chargement.

Bien que ce problème ne soit pas causé exclusivement par les images, elles peuvent contribuer au problème si elles sont utilisées de manière incorrecte.

Dans la plupart des cas, le CLS est facile à détecter en recherchant le mouvement sur une page pendant le chargement, mais il existe plusieurs outils pour le mesurer.

Pour en savoir plus sur le CLS, comment le mesurer et comment le réparer, consultez notre guide complet :

2. Taille correcte de vos images

Choisissez la largeur et la hauteur correctes pour vos images, car les fichiers plus volumineux prennent plus de temps à télécharger.

Le redimensionnement correct des images peut être délicat en raison des gammes de tailles d’écran et de résolutions qui visitent votre site.

Si le navigateur recadre l’image tout seul, la taille du téléchargement finit par être plus longue que nécessaire, ce qui ne fait que réduire les choses.

Un moyen simple de détecter des images de taille incorrecte consiste à utiliser le images correctement dimensionnées sous Opportunités dans le Rapport statistique de PageSpeed.

Une fois que vous avez identifié les images qui sont plus grandes que nécessaire, vous pouvez résoudre le problème avec des solutions telles que les images réactives.

3. Utilisez le meilleur format de fichier image

Pensez au format de fichier de vos images, par exemple si vous souhaitez utiliser des fichiers PNG, JPEG ou webP.

Le format de fichier affecte la taille du fichier, donc choisir le bon nécessite une attention particulière.

Il y a des avantages et des inconvénients à peser chaque format. Par exemple, JPEG et WebP ont tendance à avoir des tailles de fichier inférieures, bien que la taille plus petite se fasse au détriment de la qualité de l’image.

Cependant, les acheteurs peuvent ne pas remarquer la dégradation de la qualité de l’image, et le gain de vitesse peut être substantiel.

Pour voir si votre site peut bénéficier de l’utilisation d’un format d’image différent, consultez le servir des images dans des formats de nouvelle génération du rapport PageSpeed ​​​​Insights. Ce rapport répertorie les images pouvant être converties dans un format de fichier plus efficace.

4. Compressez les images de manière appropriée

Utilisez le facteur de qualité correct pour vos images afin de les encoder efficacement tout en conservant la qualité d’image souhaitée.

Le Encoder efficacement les images La section PageSpeed ​​​​Insights du rapport peut être utilisée pour identifier les images qui sont de bons candidats pour l’optimisation de la compression. Le rapport montre également les économies potentielles de taille de fichier.

Pour trouver un facteur de qualité qui vous convient, utilisez l’outil de conversion d’image de votre choix sur plusieurs images avec des valeurs de qualité différentes et comparez l’avant et l’après.

Google recommande le site Squoosh.app comme moyen simple de comparer des images avec et sans compression.

5. Images en cache dans le navigateur

Indiquez au navigateur combien de temps il peut mettre en cache les images en toute sécurité.

Lorsque vous renvoyez une image, vous pouvez renvoyer un en-tête de réponse HTTP avec un ciblage de mise en cache, comme la durée pendant laquelle un navigateur est recommandé de mettre une image en cache.

Encore une fois, vous pouvez utiliser le rapport PageSpeed ​​​​Insights pour détecter si les en-têtes du cache de réponse HTTP ont été correctement définis sur votre site.

Le servir des actifs statiques avec une politique de cache efficace La section identifie les images qui peuvent bénéficier d’améliorations de la mise en cache.

Pour dépanner votre site, voyez si vous avez des paramètres de serveur Web ou de plate-forme que vous pouvez modifier pour ajuster la durée de vie du cache des images sur votre site.

Si vous ne modifiez pas souvent les images, vous pouvez définir une longue durée de vie du cache.

6. Séquencez correctement les téléchargements d’images

Comme conseil plus avancé, Google recommande de séquencer correctement l’ordre dans lequel les ressources de la page Web sont téléchargées.

L’ordre de téléchargement suivant est recommandé :

  • Images en vedette en haut de la page
  • Autres images au-dessus du pli
  • Images juste en dessous du pli

Le reste des images sur une page Web peut être chargé paresseusement.

Pour détecter si votre site charge efficacement les images, vous pouvez consulter le rapport PageSpeed ​​​​Insights. Dans le Images de différents hors écran du rapport, vous verrez une liste d’images qui pourraient être chargées après d’autres images.

Pour plus de détails sur l’un des conseils ci-dessus, consultez la vidéo complète de Google ci-dessous :


Image en vedette : Tada Images/Shutterstock





Cet article a été traduit par searchenginejournal

Related Posts

Leave a Comment