Trouver un article
Thèmes populaires
Dans une vidéo, Google dévoile des conseils pour optimiser le chargement des images sur un site web.
Le Cumulative Layout Shift (CLS) est la métrique qui permet de mesurer l’instabilité du contenu au sein d’un site web. C’est-à-dire les éléments qui peuvent bouger dans une page web, affectant la lecture d’un article par exemple. Cet indicateur fait partie des Core Web Vitals déterminés par Google, ayant une véritable incidence sur l’expérience utilisateur. Si les images ne sont pas le principal facteur qui affecte cette métrique, elles peuvent y contribuer. C’est notamment le cas lorsqu’un navigateur web ne connaît pas les dimensions de l’image avant de charger le contenu d’une page web et qu’il ne laisse pas assez d’espace pour cette image, comme l’explique Alan Kent, Developer Advocate chez Google.
Le conseil : il est capital d’évaluer le chargement d’un site web et d’opérer des changements pour l’améliorer. À noter qu’il existe également de nombreux outils qui permettent de mesurer la performance de votre site web.
Pour un chargement plus rapide et efficace des images, il est indispensable de choisir la bonne largeur et la bonne hauteur de celles-ci. « Les fichiers plus volumineux mettent plus de temps à se télécharger, en particulier sur les smartphones pour lesquels la connexion réseau peut être plus lente, mais également en raison de leurs processeurs moins puissants », précise Alan Kent. Si le navigateur web recadre lui-même l’image, le temps de téléchargement finit par être plus long que nécessaire. Il est ainsi possible de détecter des images dont la taille est incorrecte dans la section Opportunités, au sein du rapport fourni par PageSpeed Insights.
Le conseil : miser sur des images réactives qui s’adapteront au support utilisé pour accéder au site web. Il existe ainsi un attribut HTML permettant de répertorier différents formats et dimensions d’images afin que le navigateur web puisse choisir ce qui est le plus adapté.
Il convient de réfléchir au meilleur format à utiliser pour vos images, notamment entre les formats PNG, JPEG ou WebP. « Le format du fichier affecte la taille de celui-ci. Des précautions doivent être cependant prises car des formats tels que JPEG et WebP peuvent réduire les fichiers à l’aide d’algorithmes de compression avec perte, soit une réduction de la qualité de l’image en échange de la réduction de la taille du fichier », explique Alan Kent. L’expert Google souligne cependant que la dégradation de la qualité de l’image n’est pas forcément perceptible par les visiteurs d’un site, et que le gain de vitesse de chargement peut être substantiel.
Le conseil : vérifier si votre site web peut bénéficier de l’utilisation d’un format d’image différent dans la section Opportunités > Diffuser des images aux formats nouvelle génération d’un rapport rendu sur PageSpeed Insights.
Une autre astuce consiste à utiliser le bon facteur de qualité pour les images afin de les encoder efficacement, tout en conservant la qualité d’image souhaitée. Il est possible d’identifier si des optimisations sont réalisables dans la section Opportunités > Encoder les images de manière efficace d’un rapport PageSpeed Insights.
Le conseil : afin de trouver le facteur de qualité qui vous convient, il est recommandé d’utiliser l’outil de conversion d’image de votre choix et d’utiliser différentes valeurs de qualité sur plusieurs images, puis de comparer l’avant et l’après. Google recommande également le site Squoosh.app comme moyen simple de comparer des images avec et sans compression.
Pour assurer un chargement plus rapide des images sur un site web, il est possible de spécifier à un navigateur web combien de temps il peut mettre en cache les images en toute sécurité. Lorsqu’une image est envoyée à partir d’un site web, il est possible d’inclure un en-tête HTTP avec des conseils de mise en cache telle que la durée recommandée pour un navigateur web pour mettre une image en cache. Pour savoir si les en-têtes de réponse ont été correctement définis sur un site web, Google recommande d’observer la section Opportunités > Utiliser des règles de cache efficaces sur les éléments statiques dans un rapport PageSpeed Insights. Celle-ci indique si des images sont susceptibles de bénéficier d’améliorations de la mise en cache.
Le conseil : vérifiez que vous possédez des paramètres de plateforme ou de serveur web que vous pouvez modifier pour ajuster la durée de vie du cache. Si vous ne modifiez pas fréquemment les images, vous pouvez définir une longue durée de vie du cache.
Google recommande également de séquencer correctement l’ordre dans lequel les ressources, y compris les images, sont téléchargées. Cela peut améliorer les performances d’une page web. Il est ainsi conseillé d’opter pour l’ordre de téléchargement suivant :
Dans la section Opportunités > Différer le chargement des images hors écran d’un rapport PageSpeed Insights, vous avez la possibilité d’identifier les images qui pourraient être chargées après d’autres images.
Pour plus de détails sur les conseils de Google, découvrez la vidéo complète :
Votre adresse email ne sera pas publiée.
Vous êtes CM ou social media manager ? Comme chaque année, nous avons besoin de vous !
En cliquant sur “S’inscrire”, vous acceptez les CGU ainsi que notre politique de confidentialité décrivant la finalité des traitements de vos données personnelles.
Une formation aux logiciels bureautiques qui s’adapte à vos contraintes.
Un cours en ligne complet avec un accompagnement personnalisé
Une formation en visio et un accès e-learning pour maîtriser les bases de la bureautique
En cliquant sur “S’inscrire”, vous acceptez les CGU ainsi que notre politique de confidentialité décrivant la finalité des traitements de vos données personnelles.