Corriger l'avertissement Lighthouse 'Éliminer les ressources bloquant le rendu'
Débarrassez-vous des ressources bloquant le rendu et améliorez les Core Web Vitals
'Éliminer les ressources bloquant le rendu' en bref
Lors du chargement d'une page avec des ressources bloquant le rendu, un navigateur ne peut pas démarrer le processus de rendu tant que tous les éléments qui causent cela ne sont pas téléchargés et évalués.
Cela brise la règle d'or de PageSpeed : 'toujours commencer le rendu le plus tôt possible'. Tout retard dans le rendu de la page ralentit le chargement de la page plus que nécessaire.
Corrigez cet avertissement Lighthouse en supprimant ou en différant ces ressources bloquant le rendu.
Qu'est-ce que l'avertissement Lighthouse 'Éliminer les ressources bloquant le rendu' ?
Qu'est-ce qui cause l'avertissement Éliminer les ressources bloquant le rendu dans Lighthouse ? Lighthouse signale les pages qui ont soit :
- Une balise script qui est dans le head et n'est pas différée.
Les scripts dans le head de la page bloquent le rendu par défaut s'ils n'ont pas l'attribut defer ou async. - Une feuille de style liée qui correspond au média de l'appareil.
Un <link rel="stylesheet"> bloquera le rendu de la page s'il n'est pas désactivé et correspond au média du navigateur. Par exemple <link rel="stylesheet" media="print"> ne bloquera pas le rendu sur les appareils de bureau.
L'avertissement 'Éliminer les ressources bloquant le rendu' impacte directement certaines métriques Lighthouse. En théorie, les pages avec des ressources bloquant le rendu pourraient quand même charger assez vite. En pratique, ce n'est souvent pas le cas. Trop de ressources bloquant le rendu affecteront très probablement directement des métriques Lighthouse importantes comme le First Contentful Paint (FCP) et le Largest Contentful Paint (LCP).
Petit rappel - Qu'est-ce que le rendu ?
Le rendu est un processus utilisé dans le développement web qui transforme le code du site web en pages interactives que les utilisateurs voient lorsqu'ils visitent un site web. Le terme fait généralement référence à l'utilisation de codes HTML, CSS et JavaScript. Le processus est complété par un moteur de rendu, le logiciel utilisé par un navigateur web pour rendre une page web.
Qu'est-ce qui cause les 'ressources bloquant le rendu' ?
Les ressources bloquant le rendu sont toujours des feuilles de style (StyleSheets) et des JavaScripts dans le head de la page. Cela signifie qu'ils ne peuvent être ajoutés que par votre CMS, manuellement par votre développeur web ou par un plugin. Lorsque vous essayez de trouver l'origine d'une ressource bloquant le rendu, essayez de regarder à ces endroits :
- Le modèle (template) Les fichiers de modèle de votre site web sont le premier endroit à regarder. Trouvez l'endroit où le code <head> est situé et cherchez des styles et scripts codés en dur.
- Le CMS parfois le CMS lui-même nécessite certains scripts (par exemple jQuery) pour fonctionner correctement.
- Les plugins. Les plugins sont connus pour injecter des styles et des scripts dans la page.
Comment les 'ressources bloquant le rendu' affectent-elles la vitesse de la page (pagespeed)
Les ressources bloquant le rendu empêchent la génération de l'arbre de rendu (render tree). Lorsque l'arbre de rendu n'a pas été construit, le navigateur ne commencera pas le rendu. Cela signifie que la page restera complètement blanche jusqu'à ce que toutes les ressources bloquant le rendu aient été téléchargées et évaluées. Cela impactera des métriques comme le First Contentful Paint et le Largest Contentful Paint.
Comment corriger 'Éliminer les ressources bloquant le rendu'
Pour corriger les 'ressources bloquant le rendu', vous devrez vous assurer que ces ressources ne bloquent plus le rendu. La manière la plus simple est de simplement supprimer ces ressources. Parfois, de vieilles ressources inutilisées bloquent encore le rendu de la page. Si vous ne pouvez pas les supprimer, vous devriez les différer.
Différer le JavaScript
Le JavaScript peut être différé en ajoutant l'attribut defer ou async à la balise script.
//javascript différé <script defer src="script.js"></script> //javascript asynchrone <script async src="script.js"></script>
Différer les feuilles de style (StyleSheets)
Différer les feuilles de style peut être un peu plus délicat. Lorsqu'une feuille de style est différée, la page sera rendue sans les styles d'abord. Ensuite, lorsque les styles sont chargés, le navigateur appliquera le style causant toutes sortes de clignotements et de décalages de mise en page (layout shifts). C'est pourquoi vous aurez besoin de CSS critique en ligne (inline). Le CSS critique est une collection des styles nécessaires pour rendre la partie visible de la page.
<style>//CSS critique ici</style>
<link rel="preload"
href="css.css"
type="text/css"
as="style"
onload="this.onload=null;this.rel='stylesheet';"/>
Solution de contournement pour 'éliminer les ressources bloquant le rendu'
Parfois, il n'est pas possible d'éliminer ces ressources bloquant le rendu. Vous pourriez ne pas avoir accès au modèle ou votre CMS pourrait nécessiter certains scripts. Il existe quelques solutions de contournement pour atténuer l'impact de ces ressources bloquant le rendu.
- Minifiez et compressez vos styles et scripts.
Minimisez et compressez vos styles et scripts actuels. Les ressources plus petites ont moins d'impact sur la performance de chargement que les ressources plus grandes. - Divisez les grands fichiers en plusieurs fichiers.
Diviser les grands fichiers en plusieurs fichiers pourrait réduire le temps de chargement des ressources. - Déchargez les ressources par page.
Lorsqu'une ressource ne peut pas être supprimée d'une page, cela ne signifie pas qu'elle est requise sur toutes les pages. Les plugins Wordpress par exemple ont tendance à ajouter des scripts et des styles à toutes les pages, même si le plugin pourrait ne pas être actif sur cette page.
Your dev team is busy.
Delegate the performance architecture to a specialist. I handle the optimization track while your team ships the product.
- Parallel Workflows
- Specialized Expertise
- Faster Delivery
