Guide SEO pour améliorer la vitesse et les temps de chargement des pages

La vitesse des pages est depuis longtemps un facteur de classement pour Google. Depuis la première annonce en 2010, suivie d’une autre mise à jour en 2018, et enfin l’introduction des Core Web Vitals en 2020, il est désormais clair que le temps de chargement du site web est une priorité absolue pour les moteurs de recherche. Dans cet article, nous explorerons ce que signifie la vitesse des pages aujourd’hui, comment la mesurer et, surtout, comment améliorer les scores de vitesse des pages pour votre site web.

Comprendre les Core Web Vitals de Google

Pendant longtemps, Google elle-même a eu du mal à mesurer la vitesse des pages. Quelles sont les bonnes métriques ? Données de terrain ou données de laboratoire ? Mesurer la page entière ou seulement la partie supérieure ? Il y a des dizaines de métriques qui entrent en jeu dans la vitesse des pages et il a fallu beaucoup de temps pour comprendre lesquelles d’entre elles sont vraiment importantes pour l’utilisateur.

Finalement, Google s’est concentré sur un ensemble de trois métriques considérées comme les plus importantes pour la vitesse des pages : Largest Contentful Paint (LCP), First Input Delay (FID) et Cumulative Layout Shift (CLS). Conjointement connues sous le nom de Core Web Vitals, ces métriques sont conçues pour mesurer la vitesse perçue plutôt que la vitesse réelle.

Largest Contentful Paint (LCP)

Le Largest Contentful Paint est le temps nécessaire pour que le plus grand élément du viewport soit entièrement chargé. Les seuils pour cette métrique sont les suivants :

• Bon : moins de 2,5 secondes
• Nécessite une amélioration : de 2,5 à 4 secondes
• Médiocre : plus de 4 secondes

Comme il est courant que le plus grand élément soit une image, l’optimisation des images est la principale contribution à cette métrique. En outre, le LCP dépend des temps de réponse du serveur, du code qui bloque le rendu et du rendu côté client.

First Input Delay (FID)

Le First Input Delay est le délai entre le moment où un élément interactif est affiché et le moment où il devient fonctionnel. Par exemple, un bouton est affiché sur la page, on clique dessus, mais il n’est pas encore réactif. Les seuils pour cette métrique sont les suivants :

• Bon : moins de 100 millisecondes
• Nécessite une amélioration : de 100 à 300 millisecondes
• Médiocre : plus de 300 millisecondes

Le FID peut être optimisé par le découpage du code et l’utilisation de moins de JavaScript.

Cumulative Layout Shift (CLS)

Le Cumulative Layout Shift mesure si les éléments de la page se déplacent pendant le chargement. Par exemple, une page semble prête à être utilisée, mais une nouvelle image apparaît en haut et le reste du contenu est décalé vers le bas : c’est un décalage de mise en page. Les seuils pour cette métrique sont les suivants :

• Bon : moins de 0,1
• Nécessite une amélioration : de 0,1 à 0,25
• Médiocre : plus de 0,25

Le CLS dépend de la bonne définition des dimensions des éléments et du chargement des ressources dans une séquence spécifiée, de haut en bas.

Outils pour mesurer la vitesse des pages

De nombreux outils fournis par Google offrent les Core Web Vitals dans le cadre de leur vérification des pages :

• Google PageSpeed Insights
• Google Search Console
• Chrome Lighthouse
• GTmetrix

Cependant, certains de ces outils utilisent des données de laboratoire au lieu de données de terrain, alors que Google classe vos pages exclusivement sur la base des données de terrain. De plus, la plupart des outils ne peuvent évaluer qu’une seule page à la fois, ce qui n’est pas une approche pratique pour optimiser l’ensemble du site web.

Parmi les outils Google, le meilleur à utiliser est probablement Google Search Console. Là, vous pouvez aller dans Expérience > Core Web Vitals et voir le rapport pour toutes vos pages simultanément. Bien que le rapport de haut niveau soit fourni en bloc, identifier quelles pages sont affectées par quels problèmes peut être un processus fastidieux.

Un meilleur moyen de mesurer la vitesse des pages pourrait être d’utiliser WebSite Auditor. Là, vous pouvez aller dans Structure du site > Audit du site et obtenir un rapport sur la vitesse des pages pour l’ensemble du site web, ainsi que voir toutes les pages affectées, le tout à partir d’un seul tableau de bord. Ou vous pouvez aller dans Audit du site > Pages > Vitesse des pages et voir une liste des pages avec les problèmes de vitesse qui les affectent. En cliquant sur n’importe quelle page, vous obtiendrez également une liste des éléments de la page qui peuvent être optimisés pour améliorer ses performances.

Optimiser la vitesse des pages

Maintenant que vous avez une liste des pages affectées, il est temps de travailler à l’amélioration de la vitesse de votre page. Voici quelques-unes des opportunités d’optimisation les plus courantes et quelques conseils sur la façon de les exploiter.

Définir les dimensions des images

Lorsque vous omettez les dimensions des images de votre code, le navigateur peut prendre du temps pour les redimensionner correctement. Cela signifie que le contenu de votre page sautera et affectera négativement votre score CLS.

Pour éviter ce problème, définissez toujours les propriétés width et height pour vos images, comme suit :

<img src="coussin.jpg" width="640" Height="360" alt="coussin violet à motif floral" />

Utiliser des formats d’image modernes

Tous les formats d’image ne sont pas égaux. Nos formats de confiance JPEG et PNG ont maintenant des caractéristiques de compression et de qualité inférieures à AVIF, JPEG 2000, JPEG XR et WebP.

Parmi les formats répertoriés, WebP est probablement celui à considérer en premier. Il prend en charge la compression sans perte et avec perte, ainsi que la transparence et l’animation. De plus, les fichiers WebP sont généralement 25 % à 35 % plus légers que les PNG et JPEG de qualité similaire. Et bien qu’il fut une préoccupation courante par le passé que le format WebP ne soit pas pris en charge par certains navigateurs, Safari a récemment ajouté la prise en charge de WebP dans la version 14, de sorte que la prise en charge totale du format par les navigateurs est maintenant supérieure à 90 %.

Compresser les images

Que vous utilisiez ou non des formats d’image de nouvelle génération, la compression de vos images reste un moyen valable de réduire la taille globale de la page. Encore une fois, si votre site web est construit sur WordPress, vous pouvez compresser vos images en vrac avec des plugins d’optimisation d’image comme WP Smush. Vous pouvez également utiliser des compresseurs en ligne si vous ne voulez pas installer trop de plugins et risquer de ralentir votre site web. En dernier recours, utilisez des éditeurs graphiques pour compresser les images avant de les télécharger sur votre site web.

Implémenter le chargement différé (lazy loading) pour les images

Les images hors écran sont celles qui apparaissent sous la ligne de flottaison, ce qui signifie que l’utilisateur ne les verrait pas tant qu’il n’aurait pas fait défiler l’écran initial. Et ce sera un thème récurrent pour le reste de l’article : le chargement de tout ce qui se trouve sous la ligne de flottaison doit être reporté jusqu’à ce que les éléments au-dessus de la ligne de flottaison soient entièrement chargés. La zone au-dessus de la ligne de flottaison est celle que Google utilise pour mesurer la vitesse de votre page, c’est donc là que la majeure partie des efforts d’optimisation devrait être concentrée.

La technique pour gérer les images hors écran s’appelle le lazy loading. Fondamentalement, les images au-dessus de la ligne de flottaison sont chargées en premier, et les images hors écran ne sont chargées que lorsque l’utilisateur fait défiler la page vers le bas.

Convertir les GIF en vidéos

Cela peut sembler contre-intuitif, mais les GIF auront souvent une taille de fichier plus importante que les vidéos. Je ne sais pas comment cela s’est produit, mais la conversion d’un grand GIF en vidéo entraînera une réduction de taille allant jusqu’à 500 %, voire plus. Donc, si votre rapport de vitesse de page vous dit d’utiliser des formats vidéo pour le contenu animé, vous devez prendre cela au sérieux.

Pour convertir des GIF en vidéos, vous pouvez utiliser n’importe quel convertisseur en ligne ou télécharger un outil comme FFmpeg. Google recommande en fait de créer deux formats vidéo : WebM et mp4. WebM est similaire à WebP en ce sens qu’il est plus léger, mais pas encore pris en charge par tous les navigateurs. Donc, lorsque vous ajoutez votre vidéo à la page, vous devriez d’abord lister la version WebM, puis la version mp4 en tant que sauvegarde.

<vidéo autoplay loop muted playsinline>
<source src="animation.webm" type="video/webm">
<source src="animation.mp4" type="video/mp4">
</vidéo>

Notez que l’élément vidéo a également quatre attributs supplémentaires : autoplay, loop, muted, et playsinline. Ces attributs font en sorte que votre vidéo se comporte comme un GIF : elle commence à jouer automatiquement, elle est lue en boucle, sans son et elle est lue en ligne.

Supprimer le CSS inutilisé

Le CSS inutilisé peut ralentir la construction de l’arbre de rendu par le navigateur. Le fait est qu’un navigateur doit parcourir tout l’arbre DOM et vérifier quelles règles CSS s’appliquent à chaque nœud. Ainsi, plus il y a de CSS inutilisé, plus il faudra de temps à un navigateur pour calculer les styles pour chaque nœud.

L’objectif ici est d’identifier les morceaux de CSS inutilisés ou non critiques et de les supprimer complètement ou de modifier l’ordre dans lequel ils sont chargés. Consultez ce guide sur le report du CSS inutilisé.

Minification du code CSS, JS et HTML

Les fichiers JS et CSS peuvent souvent contenir des commentaires, des espaces, des retours à la ligne et des morceaux de code inutiles. Les supprimer pourrait rendre vos fichiers jusqu’à 50 % plus légers, même si la moyenne de minification est beaucoup plus basse. Cependant, c’est une contribution marginale à la vitesse de votre page et cela vaut la peine d’être essayé.

Si vous avez un petit site web, vous pouvez minifier le code à l’aide de minifieurs en ligne, tels que CSS Minifier, JavaScript Minifier et HTML Compressor. Ou, si votre site web est construit sur une plateforme CMS comme WordPress, il existe certainement des plugins qui peuvent faire le travail pour vous. Pour un site web personnalisé, consultez ce guide sur la minification CSS et celui-ci sur la minification JS.

Extraire le CSS critique

Par défaut, le CSS est une ressource bloquant le rendu. Votre page ne sera pas rendue tant que le navigateur n’aura pas récupéré et analysé les fichiers CSS, ce qui peut prendre beaucoup de temps.

Pour résoudre ce problème, vous pouvez extraire uniquement les styles nécessaires à la partie au-dessus de la ligne de flottaison de votre page et les ajouter à l’élément de votre document HTML. Le reste de vos fichiers CSS peut être chargé de manière asynchrone. Cela améliorera considérablement vos scores LCP et rendra vos pages plus rapides pour les utilisateurs.

Optimiser la réponse du serveur

Le plus désagréable avec les retards de réponse du serveur est qu’il existe une vaste sélection de raisons qui peuvent les provoquer. Par exemple, il peut s’agir d’un routage lent, d’une logique d’application lente, d’un épuisement des ressources CPU, de requêtes de base de données lentes, d’un épuisement de la mémoire, de frameworks lents, etc.

Une solution non technique facile à ces problèmes est de passer à un meilleur hébergement, ce qui signifie dans de nombreux cas passer d’un hébergement partagé à un hébergement géré. L’hébergement géré inclut généralement des réseaux CDN et d’autres astuces de distribution de contenu qui auront un impact positif sur la vitesse des pages. Mais si vous voulez vous salir les mains, voici un guide plus détaillé sur la résolution d’un serveur surchargé.

Pour ceux qui recherchent une amélioration rapide sans plonger dans les détails techniques, le passage à un fournisseur d’hébergement de haute qualité peut faire une différence significative. SiteGround, par exemple, offre un hébergement rapide et sécurisé conçu pour les sites web et les entreprises de petite et moyenne taille. Leurs services incluent un CDN gratuit, un cache avancé et une implémentation optimisée de PHP, tous des éléments qui contribuent à des temps de chargement plus rapides et à un site plus réactif dans l’ensemble.

Gérer efficacement les ressources tierces

Les ressources tierces, comme les boutons de partage social et les intégrations de lecteurs vidéo, ont tendance à consommer beaucoup de ressources. De plus, chaque fois que le navigateur rencontre un morceau de JS, il interrompra l’exécution de l’HTML tant qu’il ne l’aura pas traité. Tout cela a tendance à contribuer à une baisse mesurable de la vitesse des pages.

Si l’une de vos ressources tierces n’est pas essentielle, c’est-à-dire qu’elle ne compte pas pour l’apparence ou la fonction de la partie au-dessus de la ligne de flottaison, vous devriez la retirer du chemin de rendu critique. Pour charger les ressources tierces plus efficacement, vous pouvez utiliser l’attribut async ou defer. L’attribut async est plus souple : il permet de télécharger l’HTML et le JS simultanément, mais il interrompra quand même l’HTML pour exécuter le JS. L’attribut defer est plus strict : il n’interrompra pas l’HTML pour exécuter le JS, qui ne sera exécuté qu’à la fin.

Utiliser la préconnexion pour les connexions

Établir des connexions, surtout sécurisées, prend beaucoup de temps. Le fait est que cela nécessite des recherches DNS, des poignées de main SSL, un échange de clés secrètes et quelques allers-retours vers le serveur final responsable de la requête de l’utilisateur. Ainsi, pour gagner ce temps précieux, vous pouvez préconnecter votre site web aux origines requises à l’avance.

Pour préconnecter votre site web à une source tierce, il vous suffit d’ajouter une balise link à votre page.

<link rel="preconnect" href="https://exemple.com">

Identifier et optimiser les tâches JavaScript de longue durée

Chaque fois qu’un bloc de JavaScript met plus de 50 ms à s’exécuter, votre page peut sembler non réactive pour l’utilisateur. Pour résoudre ce problème, il est conseillé de localiser ces tâches longues, de les diviser en segments plus petits et de les faire charger de manière asynchrone. De cette façon, il y aura de courtes fenêtres de réactivité intégrées au processus de chargement de votre page. Vous pouvez utiliser Chrome DevTools pour identifier les tâches excessivement longues – ce sont celles marquées de drapeaux rouges :

Une fois que vous avez identifié les tâches longues sur vos pages, vous pouvez les diviser en tâches plus petites, retarder leur exécution, ou même les déplacer du thread principal via un web worker.

Précharger les ressources critiques

C’est aux navigateurs de décider quelles ressources charger en premier. C’est pourquoi ils essaient souvent de charger les ressources les plus importantes, comme le CSS, avant les scripts et les images, par exemple. Malheureusement, ce n’est pas toujours la meilleure façon de procéder. En préchargeant les ressources, vous pouvez modifier la priorité de chargement du contenu dans les navigateurs modernes, en les informant des ressources qui seront nécessaires dans le cadre du code responsable du rendu du contenu au-dessus de la ligne de flottaison.

À l’aide de la balise, vous pouvez informer le navigateur qu’une ressource est nécessaire dans le cadre du code responsable du rendu du contenu au-dessus de la ligne de flottaison, et lui faire la récupérer le plus tôt possible. Voici un exemple de la façon dont la balise peut être utilisée.

<link rel="preload" as="script" href="script.js" />
<link rel="preload" as="style" href="style.css" />
<link rel="preload" as="image" href="img.png" />
<link rel="preload" as="video" href="vid.webm" type="video/webm" />
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin />

Notez que la ressource sera chargée avec la même priorité. La différence est que le téléchargement commencera plus tôt car le navigateur est informé du préchargement à l’avance. Pour des instructions plus détaillées, consultez ce guide sur le préchargement des ressources critiques.

Implémenter la mise en cache du navigateur

Sans la mise en cache du navigateur, chaque fois que vous visitez la même page, la page entière est chargée à partir de zéro. Avec la mise en cache du navigateur, certains éléments de la page sont stockés dans la mémoire du navigateur, de sorte que seule une partie de la page doit être chargée à partir du serveur. Naturellement, la page se charge beaucoup plus rapidement lors des visites ultérieures et vos scores de vitesse de page augmentent.

Normalement, l’objectif est de mettre en cache autant de ressources de page que possible pendant le plus longtemps possible et de s’assurer que les ressources mises à jour sont revalidées pour la mise en cache. En réalité, vous pouvez contrôler tous ces paramètres avec des en-têtes HTTP spéciaux qui contiennent des instructions pour le cache. Un bon point de départ pour en savoir plus sur la mise en cache HTTP est ce guide de Google.

Optimiser la structure du DOM

Un arbre DOM trop grand avec des règles de style compliquées peut avoir un impact négatif sur la vitesse, le temps d’exécution et les performances de la mémoire. La bonne pratique est d’avoir un arbre DOM avec moins de 1500 nœuds au total, une profondeur maximale de 32 nœuds et aucun nœud parent avec plus de 60 nœuds enfants.

Une très bonne pratique est de supprimer les nœuds DOM dont vous n’avez plus besoin. À cette fin, envisagez de supprimer les nœuds qui ne sont actuellement pas affichés par le document chargé et essayez de les créer uniquement après qu’un utilisateur aura fait défiler une page ou appuyé sur un bouton.

Éliminer les redirections inutiles

Se débarrasser de toutes les redirections inutiles est l’une des meilleures choses que vous puissiez faire pour la vitesse de votre site. Chaque redirection supplémentaire ralentit le rendu de la page et ajoute une ou plusieurs allers-retours de requêtes-réponses HTTP.

La meilleure pratique est de ne pas utiliser du tout de redirections. Cependant, si vous en avez désespérément besoin, il est crucial de choisir le bon type de redirection. Il est préférable d’utiliser une redirection 301 pour une redirection permanente. Mais si, par exemple, vous souhaitez rediriger les utilisateurs vers des pages promotionnelles à court terme ou des URL spécifiques à un appareil, les redirections temporaires 302 sont la meilleure option.

Ces problèmes énumérés ne sont pas tous les problèmes qui peuvent affecter la vitesse des pages, mais plutôt les plus courants et ceux qui ont le plus grand potentiel d’amélioration. Assurez-vous d’adapter vos stratégies d’optimisation aux problèmes reflétés dans votre rapport de vitesse de page. Gardez à l’esprit que les problèmes rencontrés sur de nombreuses pages de votre site web peuvent souvent être résolus en masse en mettant en œuvre des modifications à l’échelle du site.