Les utilisateurs exigent des interactions en ligne rapides et fluides. Pour garantir un chargement rapide du contenu visuel de votre site, il est crucial d’identifier et de réduire les ressources bloquant le rendu.
Pourquoi la rapidité de rendu est-elle cruciale ?
Malgré les changements significatifs dans le paysage de la recherche organique, la rapidité et l’efficacité des pages web restent primordiales. Les utilisateurs veulent des interactions en ligne rapides et fluides, et 83 % d’entre eux s’attendent à ce que les sites se chargent en trois secondes ou moins. Google place la barre encore plus haut en exigeant un Largest Contentful Paint (LCP) inférieur à 2,5 secondes pour être considéré comme « bon ». Cependant, la réalité actuelle tombe en deçà de ces attentes, avec une moyenne de chargement de page de 8,6 secondes sur les appareils mobiles.
Bien que ce chiffre ait chuté de 7 secondes depuis 2018, il est essentiel de se concentrer non seulement sur le temps total de chargement de la page, mais aussi sur l’efficacité avec laquelle les pages sont rendues.
Qu’est-ce que le chemin de rendu critique ?
Le chemin de rendu critique désigne les étapes qu’un navigateur suit pour rendre une page, en convertissant HTML, CSS et JavaScript en pixels visibles à l’écran. En substance, le navigateur doit demander, recevoir et analyser tous les fichiers HTML et CSS (en plus d’autres tâches) avant de commencer à afficher tout contenu visuel. Tant que ces étapes ne sont pas terminées, les utilisateurs voient une page blanche.
Comment optimiser ce chemin ?
L’objectif principal de l’optimisation du chemin de rendu critique est de prioriser les ressources nécessaires pour afficher le contenu au-dessus du pli de manière significative. Pour ce faire, il faut également identifier et déprioriser les ressources bloquant le rendu – celles qui ne sont pas nécessaires pour charger le contenu au-dessus du pli et qui empêchent la page de se rendre le plus rapidement possible.
Pour améliorer le chemin de rendu critique :
- Réduisez le nombre de ressources critiques en reportant le chargement des ressources bloquantes.
- Raccourcissez le chemin critique en priorisant le contenu au-dessus du pli et en téléchargeant toutes les ressources critiques aussi tôt que possible.
- Réduisez le nombre d’octets critiques en diminuant la taille des fichiers des ressources critiques restantes.
Quelles sont les ressources bloquant le rendu ?
Les ressources bloquant le rendu sont des éléments d’une page web qui doivent être entièrement chargés et traités par le navigateur avant qu’il puisse commencer à rendre le contenu à l’écran. Ces ressources comprennent généralement les fichiers CSS (feuilles de style en cascade) et JavaScript.
CSS bloquant le rendu
Le CSS est intrinsèquement bloquant. Le navigateur ne commencera pas à afficher le contenu de la page tant qu’il n’aura pas demandé, reçu et traité tous les styles CSS. Cela évite une mauvaise expérience utilisateur qui surviendrait si un navigateur tentait de rendre du contenu sans style.
Le temps nécessaire au navigateur pour demander et télécharger toutes les ressources CSS peut varier considérablement, selon le nombre et la taille des ressources CSS.
Recommandation : « Le CSS est une ressource bloquant le rendu. Transmettez-le au client dès que possible pour optimiser le temps nécessaire au premier rendu. »
JavaScript bloquant le rendu
Contrairement au CSS, le navigateur n’a pas besoin de télécharger et analyser tous les fichiers JavaScript pour rendre la page. Cependant, lorsqu’il rencontre du JavaScript avant le rendu initial de la page, le processus de rendu de la page est suspendu jusqu’à ce que le JavaScript soit exécuté. Cela est dû au fait que le JavaScript a le pouvoir de manipuler les éléments de la page (HTML) et leurs styles associés (CSS).
Recommandation : « Le JavaScript peut également bloquer la construction du DOM et retarder le moment auquel la page est rendue. Pour obtenir des performances optimales, éliminez tout JavaScript inutile du chemin de rendu critique. »
Comment les ressources bloquant le rendu affectent-elles les Core Web Vitals ?
Les Core Web Vitals (CWV) sont un ensemble de métriques sur l’expérience de page, créées par Google pour mesurer plus précisément l’expérience réelle d’un utilisateur lors du chargement d’une page, de l’interactivité et de la stabilité visuelle.
Les métriques actuelles utilisées aujourd’hui sont :
- Largest Contentful Paint (LCP) : Évalue les performances de chargement en mesurant le temps nécessaire pour que l’élément de contenu le plus visible (comme une image ou un texte) apparaisse à l’écran.
- Interaction to Next Paint (INP) : Évalue la réactivité en mesurant le temps écoulé entre l’interaction d’un utilisateur avec la page (par exemple, cliquer sur un bouton ou un lien) et le moment où le navigateur peut répondre à cette interaction.
- Cumulative Layout Shift (CLS) : Évalue la stabilité visuelle en mesurant le total des décalages inattendus de la mise en page qui se produisent pendant toute la durée de vie de la page. Un score CLS plus bas indique que la page est stable et offre une meilleure expérience utilisateur.
L’optimisation du chemin de rendu critique aura généralement le plus grand impact sur le Largest Contentful Paint (LCP), car elle se concentre spécifiquement sur le temps nécessaire pour que les pixels apparaissent à l’écran.
Comment identifier les ressources bloquant le rendu
Avant de pouvoir réduire les ressources bloquant le rendu, il faut identifier tous les potentiels suspects. Heureusement, nous disposons de plusieurs outils pour identifier rapidement quelles ressources pénalisent le rendu optimal des pages.
PageSpeed Insights & Lighthouse
PageSpeed Insights et Lighthouse offrent un moyen simple et rapide d’identifier les ressources bloquant le rendu. Il suffit de tester une URL dans l’un des outils, de naviguer vers « Éliminer les ressources bloquant le rendu » sous « Diagnostics » et d’afficher la liste des ressources de première et tierce partie bloquant le premier rendu de votre page.
WebPageTest.org
Si vous souhaitez voir visuellement comment les ressources ont été chargées et lesquelles peuvent bloquer le rendu initial de la page, utilisez WebPageTest.org.
Pour identifier les ressources critiques :
- Effectuez un test en utilisant WebPageTest.org et cliquez sur l’image « Waterfall ».
- Concentrez-vous sur toutes les ressources demandées et téléchargées avant la ligne verte « Start Render ».
- Analysez la vue en cascade ; recherchez les fichiers CSS ou JavaScript demandés avant la ligne verte de début de rendu mais qui ne sont pas cruciaux pour charger le contenu au-dessus du pli.
Comment tester si une ressource est critique pour le contenu au-dessus du pli
Pour tester dans le navigateur comment le report de ces ressources affecterait le contenu au-dessus du pli :
- Ouvrez la page dans une fenêtre Chrome en mode incognito.
- Ouvrez DevTools (Ctrl+Shift+I) et accédez à l’onglet « Request blocking » dans le panneau Réseau.
- Cochez la case à côté de « Enable request blocking » et cliquez sur le signe plus.
- Saisissez un modèle pour bloquer la ou les ressources identifiées, en étant le plus précis possible (en utilisant * comme caractère générique).
- Cliquez sur « Add » et actualisez la page.
S’il n’y a pas de changement dans le contenu au-dessus du pli, la ressource que vous avez testée est probablement un bon candidat pour les techniques décrites ci-dessous pour réduire les ressources bloquant le rendu.
