La section "Opportunités" de votre rapport Lighthouse répertorie toutes les URL qui bloquent le premier rendu de votre page. L'objectif est de réduire l'impact de ces URL bloquant l'affichage en intégrant les ressources critiques, en différant les ressources non critiques et en supprimant tout ce qui n'est pas utilisé.
Quelles URL sont signalées comme ressources bloquant l'affichage ?
Lighthouse signale deux types d'URL qui bloquent l'affichage: les scripts et les feuilles de style.
Une balise <script> qui:
- se trouve dans le champ
<head>du document ; - Ne comporte pas d'attribut
defer. - Elle ne comporte pas d'attribut
async.
Une balise <link rel="stylesheet"> qui:
- Ne comporte pas d'attribut
disabled. Lorsque cet attribut est présent, le navigateur ne télécharge pas la feuille de style. - Ne possède pas d'attribut
mediacorrespondant spécifiquement à l'appareil de l'utilisateur.media="all"est considéré comme bloquant l'affichage.
Comment identifier les ressources critiques
Pour réduire l'impact des ressources qui bloquent l'affichage, la première étape consiste à identifier ce qui est essentiel et ce qui ne l'est pas. Utilisez l'onglet Couverture des outils pour les développeurs Chrome afin d'identifier les ressources CSS et JS non critiques. Lorsque vous chargez ou exécutez une page, l'onglet vous indique la quantité de code utilisée par rapport à la quantité de code chargée:
Vous pouvez réduire la taille de vos pages en envoyant uniquement le code et les styles dont vous avez besoin. Cliquez sur une URL pour inspecter ce fichier dans le panneau "Sources". Les styles dans les fichiers CSS et le code dans les fichiers JavaScript sont marqués dans deux couleurs:
- Vert (critique) : styles requis pour le premier rendu (code essentiel au fonctionnement de base de la page).
- Rouge (non critique) : styles qui s'appliquent au contenu qui n'est pas immédiatement visible ; le code n'est pas utilisé dans la fonctionnalité de base de la page.
Éliminer les scripts qui bloquent l'affichage
Une fois que vous avez identifié le code important, déplacez-le de l'URL qui bloque l'affichage vers une balise script intégrée sur votre page HTML.
Lors du chargement de la page, elle dispose de ce dont elle a besoin pour gérer les fonctionnalités de base.
Si une URL bloquant l'affichage comporte du code qui n'est pas critique, vous pouvez le conserver dans l'URL, puis marquer l'URL avec les attributs async ou defer (voir également Ajouter de l'interactivité avec JavaScript).
Tout code qui n'est pas utilisé doit être supprimé (consultez la section Supprimer le code inutilisé).
Comment supprimer les feuilles de style qui bloquent l'affichage
Comme pour l'intégration de code dans un tag <script>, intégrez les styles critiques requis pour la première peinture dans un bloc <style> au niveau de la head de la page HTML.
Chargez ensuite le reste des styles de manière asynchrone à l'aide du lien preload (consultez la section Reporter les CSS inutilisés).
Envisagez d'automatiser le processus d'extraction et d'intégration du CSS "Above the Fold" à l'aide de l'outil critique.
Une autre approche pour éliminer les styles qui bloquent l'affichage consiste à les diviser en différents fichiers, organisés par requête média. Ajoutez ensuite un attribut média à chaque lien de feuille de style. Lors du chargement d'une page, le navigateur ne bloque que le premier coloris pour récupérer les feuilles de style correspondant à l'appareil de l'utilisateur (voir CSS bloquant l'affichage).
Enfin, réduisez la taille de votre code CSS pour supprimer les espaces blancs ou les caractères superflus (voir Réduire la taille des fichiers CSS). Cela garantit que vous envoyez le plus petit bundle possible à vos utilisateurs.
Conseils spécifiques à la pile
AMP
Utilisez des outils tels qu'AMP Optimizer pour afficher les mises en page AMP pour le rendu côté serveur.
Drupal
Envisagez d'utiliser un module pour intégrer le code CSS et JavaScript critique, ou éventuellement charger des éléments de manière asynchrone via JavaScript, comme le module Advanced CSS/JS Aggregation.
Joomla
Il existe un certain nombre de plug-ins Joomla qui peuvent vous aider à intégrer des éléments critiques ou à différer les ressources moins importantes.
WordPress
Il existe un certain nombre de plug-ins WordPress qui peuvent vous aider à intégrer des éléments critiques ou à différer les ressources moins importantes.