Dans une nouvelle vidéo de Google, le défenseur des développeurs Alan Kent partage six conseils pour optimiser les images pour les sites de commerce électronique.
Bien que la vidéo soit spécifiquement destinée aux sites de commerce électronique, les conseils sont applicables à tout site Web qui sert un grand nombre d’images.
D’une durée de plus de 14 minutes, la vidéo de Google est beaucoup à digérer si vous êtes occupé à travailler sur des sites Web.
Voici un récapitulatif plus agréable au goût que vous pouvez consommer en moins de cinq minutes.
Ce sont les conseils de Google pour que les images se chargent plus rapidement et plus efficacement.
1. Éliminez le décalage cumulatif de la mise en page de l’image (CLS)
CLS fait référence aux cas où le contenu de la page se déplace visuellement, ou se déplace, d’un endroit à un autre pendant son chargement.
Bien que ce problème ne soit pas exclusivement causé par les images, elles peuvent contribuer au problème si elles ne sont pas utilisées correctement.
Dans la plupart des cas, CLS est facile à repérer en recherchant le mouvement sur une page pendant le chargement, mais il existe plusieurs outils pour le mesurer.
Pour en savoir plus sur CLS, comment le mesurer et comment le réparer, consultez notre guide complet :
2. Dimensionnez correctement vos images
Choisissez la bonne largeur et hauteur pour vos images, car les fichiers plus volumineux prennent plus de temps à télécharger.
Dimensionner correctement les images peut être compliqué en raison des plages de tailles et de résolutions d’écran qui visitent votre site.
Si le navigateur recadre l’image de lui-même, la taille du téléchargement finit par être plus longue que nécessaire, ce qui ne fait que faire glisser les choses vers le bas.
Un moyen facile de détecter les images de taille incorrecte consiste à utiliser le images correctement dimensionnées sous la section Possibilités dans le Rapport PageSpeed Insights.
Une fois que vous avez identifié les images 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 pour chaque format. Par exemple, JPEG et webP ont tendance à avoir des tailles de fichiers inférieures, bien que la taille plus petite soit obtenue au détriment de la qualité de l’image.
Cependant, une dégradation de la qualité de l’image peut ne pas être perceptible par les acheteurs, et l’avantage de vitesse pourrait être substantiel.
Pour détecter si votre site peut bénéficier de l’utilisation d’un format d’image différent, regardez dans le diffuser des images dans des formats de nouvelle génération du rapport PageSpeed Insights. Ce rapport répertorie les images qui peuvent être converties dans un format de fichier plus efficace.
4. Compresser les images de manière appropriée
Utilisez le bon facteur de qualité pour vos images afin de les encoder efficacement tout en conservant la qualité d’image souhaitée.
Le Encoder efficacement les images du rapport PageSpeed Insights 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 satisfait, utilisez l’outil de conversion d’image de votre choix sur plusieurs images en utilisant différentes valeurs de qualité et comparez l’avant et l’après.
Google recommande le site Squoosh.app comme un moyen facile de comparer des images avec et sans compression.
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 des instructions de mise en cache, telles que la durée recommandée pour un navigateur de mettre en cache une image.
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 ressources statiques avec une stratégie de cache efficace identifie les images qui peuvent bénéficier d’améliorations de la mise en cache.
Pour résoudre les problèmes sur votre site, vérifiez si vous disposez de paramètres de plate-forme ou de serveur Web que vous pouvez modifier pour ajuster la durée de vie du cache des images sur votre site.
Si vous ne modifiez pas fréquemment les images, vous pouvez définir une longue durée de vie du cache.
6. Séquencer correctement vos téléchargements d’images
En tant que conseil plus avancé, Google recommande de séquencer correctement les ressources de la page Web de commande téléchargées.
L’ordre de téléchargement suivant est conseillé :
- Images de héros en haut de la page
- Autres images au-dessus du pli
- Images juste en dessous du pli
Le reste des images d’une page Web peut être chargé paresseusement.
Pour détecter si votre site charge efficacement des images, vous pouvez vous référer à PageSpeed Insights report. Dans l’ différer les images 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
!function(f,b,e,v,n,t,s) {if(f.fbq)return;n=f.fbq=function(){n.callMethod? n.callMethod.apply(n,arguments):n.queue.push(arguments)}; if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0'; n.queue=[];t=b.createElement(e);t.async=!0; t.src=v;s=b.getElementsByTagName(e)[0]; s.parentNode.insertBefore(t,s)}(window,document,'script', 'https://connect.facebook.net/en_US/fbevents.js');
if( typeof sopp !== "undefined" && sopp === 'yes' ){ fbq('dataProcessingOptions', ['LDU'], 1, 1000); }else{ fbq('dataProcessingOptions', []); }
fbq('init', '1321385257908563');
fbq('track', 'PageView');
fbq('trackSingle', '1321385257908563', 'ViewContent', { content_name: 'google-image-optimization', content_category: 'news seo ' });
