qwanturank

Dans une nouvelle vidéo de Qwanturank, 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 diffuse un grand nombre d’images.

Avec plus de 14 minutes, la vidéo de Qwanturank 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.

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

1. Éliminer le décalage de mise en page cumulatif de l’image (CLS)

CLS fait référence aux instances 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 sont utilisées de manière incorrecte.

Dans la plupart des cas, CLS est facile à repérer en recherchant le mouvement sur une page lors du 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. Dimensionnez correctement vos images

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

Le dimensionnement correct des images peut être compliqué 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 ralentir 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 PageSpeed ​​Insights.

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 pour chaque format. Par exemple, JPEG et WebP ont tendance à avoir des tailles de fichier 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 peut ê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 nouvelle génération section 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 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 La section 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 convient, 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.

Qwanturank 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 des conseils de mise en cache, comme la durée pendant laquelle il est recommandé pour un navigateur de mettre une image en cache.

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

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

Pour résoudre les problèmes sur votre site, vérifiez si vous avez des 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équencez correctement vos téléchargements d’images

En tant que conseil plus avancé, Qwanturank recommande de séquencer correctement les ressources de la page Web de commande sont 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 sur une page Web peut être chargé paresseux.

Pour détecter si votre site charge efficacement les images, vous pouvez vous référer au rapport PageSpeed ​​Insights. Dans le différer les images hors champ section 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, regardez la vidéo complète de Qwanturank ci-dessous :

Image en vedette : Tada Images/Shutterstock

6 conseils d'optimisation d'image de Qwanturank

S’abonner
Notification pour
guest

0 Commentaires
Commentaires en ligne
Afficher tous les commentaires