Google fait des recommandations aux internautes à travers une vidéo pour accélérer le chargement des fichiers image des sites internet.
1-Faire attention au Cumulative Layout Shift de votre site internet
Le Cumulative Layout Shift est le changement de mise en page cumulé connu sous le sigle CLS. C’est une unité de mesure qui permet de déterminer la stabilité visuelle sur un site internet. Il s’agit par exemple des éléments amovibles sur une page internet impactant la lecture d’un contenu web. Cette métrique est l’un des programmes de Google (Core Web Vitals) capables de rendre fluide un site web comme LCP et FID. Même si les images n’influent pas directement le CLS, elles peuvent par ricochet y prendre part. Selon Alan Kent, Developper Advocate chez Google, c’est le cas quand un robot web peine à identifier les mesures d’une photo lors de son chargement.
Pour Google, il faudra examiner le chargement du site web et modifier les paramètres pour la rendre meilleur. A ce sujet, il existe un panel d’outils de performance web capables de vous aider à déterminer la possibilité optimale de votre site internet.
AppYuser
L’outil appYuser vous permet de mesurer les forces de votre site web. Il reconnait également les pistes d’évolution de votre affaire et évalue l’impact business. Cet outil est en mode freemium.
Fasterize
Fasterize optimise votre site web. Vous pourrez profiter d’une multitude de fonctionnalités webperf pour booster vos pages web. Il s’agit cependant d’un outil payant.
PageSpeed Insights
Google vous recommande cet outil afin de vous permettre d’analyser de façon précise des points techniques à rectifier pour booster votre site web.
Lighthouse
C’est l’outil de référencement de votre site web. Cet outil SEO vous permet d’auditer la page web que vous souhaitez utiliser. L’outil Lighthouse est quasi gratuit.
2-Respecter les dimensions de votre image
Pour transférer rapidement et efficacement une image sur votre site, faites attention à ses dimensions (largeur et hauteur). Alan Kent explique que les fichiers volumineux sont lents à être téléchargés. Cette lenteur est souvent perceptible sur les smartphones en raison de la qualité faible de la connexion et des processeurs moins performants. Avec PageSpeed Insights, dans le rapport de la section Opportunités, vous pouvez identifier des images ayant une taille inappropriée. Google vous propose de choisir les images réactives afin de vite accéder au site. Il y a ainsi un attribut HTML qui vous aide à classer divers formats et dimensions d’images pour permettre au navigateur d’en faire un choix rapide.
3-Faire l’usage d’une image au meilleur format
Pensez à quel format utiliser pour votre image entre les formats JPEG, PNG et WebP. Pour Alan Kent, le format du fichier impacte sur sa taille. L’expert de Google suggère que des mesures doivent être prises puisque les formats JPEG et WebP peuvent compresser les fichiers à l’aide d’algorithme de réduction. La conséquence est la perte de la qualité d’image afin d’obtenir la taille de l’image. Cependant, cette image de qualité faible n’est pas constatée par l’internaute qui visite votre site mais la vitesse de chargement est importante. Google propose de vérifier dans la section Opportunités de PageSpeed Insights si votre site web peut utiliser un autre format. Entrez dans Diffuser des images aux formats nouvelle génération pour faire cette vérification.
4-Procéder à la compression des images
Vous pouvez utiliser un meilleur facteur de qualité pour vos images afin de bien les encoder. Cette astuce conserve la qualité de l’image voulue. Après, vérifiez les performances réalisables dans la partie Encoder les images de manière efficace dans la section Opportunités d’un rapport PageSpeed Insights. Google recommande l’utilisation d’un outil de conversion d’image qui vous plait et de tester différentes valeurs sur plusieurs images. Comparez l’image d’avant et de celle d’après. Google vous propose de consulter le site Squoosh.app comme voie simple pour mettre en parallèle vos images avec compression ou non.
5-Signaler au navigateur des astuces de mises en cache
Vous pouvez préciser à un navigateur le temps requis pour mettre en cache une image si vous voulez charger des images rapidement sur votre site. Quand vous téléchargez une image, veuillez insérer un en-tête HTTP suivi de recommandations de mise en cache comme le temps. Pour vous aider à vérifier la définition correcte des en-têtes sur votre site, Google propose de consulter la section Opportunités. La rubrique Utiliser des règles de cache efficaces vous permet de voir si vos images sont susceptibles de jouir de cette fonctionnalité. Google ajoute la vérification des paramètres de plateforme ou de serveur capables d’être améliorés pour régler le temps. Toutefois, choisissez l’option longue durée si vous ne changez pas fréquemment vos photos.
6- Miser sur la création de séquences de téléchargement
Google propose à ce niveau de bien organiser les ressources voire les images téléchargées. Cette action optimise votre page web. Vous pouvez ainsi suivre l’ordre de téléchargement suivant :
- Hero Header;
- Les images d’avant ligne de flottaison;
- Les images qui sont situées juste en dessous de la ligne de flottaison.
Au niveau de la rubrique Différer le chargement des images hors écran dans la section Opportunités, vous saurez quelle image télécharger premièrement.