La section "Opportunités" de votre rapport Lighthouse liste toutes les URL qui bloquent la première visualisation (first paint) de votre page. L'objectif est de réduire l'impact de ces URL bloquant le rendu en insérant les ressources critiques, en différant les ressources non critiques et en supprimant tout élément inutilisé.
Quelles URL sont signalées comme ressources bloquant l'affichage ?
Lighthouse signale deux types d'URL bloquant le rendu: les scripts et les feuilles de style.
Une balise <script> qui:
- se trouve dans le
<head>du document. - Il ne comporte pas d'attribut
defer. - Ne comporte pas d'attribut
async.
Une balise <link rel="stylesheet"> qui:
- Il 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 le rendu.
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 Coverage (Couverture) de Chrome DevTools pour identifier les CSS et les JS non essentiels. Lorsque vous chargez ou exécutez une page, l'onglet indique la quantité de code utilisée par rapport à la quantité chargée:
Pour réduire la taille de vos pages, n'envoyez que le code et les styles dont vous avez besoin. Cliquez sur une URL pour inspecter le fichier correspondant dans le panneau "Sources". Les styles dans les fichiers CSS et le code dans les fichiers JavaScript sont marqués en deux couleurs:
- Vert (critique) : styles requis pour la première peinture ; code essentiel à la fonctionnalité de base de la page.
- Rouge (non critique) : styles qui s'appliquent au contenu qui n'est pas immédiatement visible ; code non utilisé dans la fonctionnalité de base de la page.
Éliminer les scripts bloquant le rendu
Une fois que vous avez identifié le code critique, déplacez-le de l'URL bloquant le rendu vers une balise script intégrée dans votre page HTML.
Lorsque la page se charge, elle dispose de tout ce dont elle a besoin pour gérer sa fonctionnalité de base.
Si une URL bloquant l'affichage contient du code non critique, vous pouvez le conserver dans l'URL, puis la marquer avec les attributs async ou defer (voir également Ajouter de l'interactivité avec JavaScript).
Le code qui n'est pas utilisé du tout doit être supprimé (voir Supprimer le code inutilisé).
Comment éliminer les feuilles de style qui bloquent l'affichage
Comme pour l'intégration du code dans une balise <script>, les styles critiques intégrés requis pour la première peinture dans un bloc <style> au niveau du head de la page HTML.
Chargez ensuite le reste des styles de manière asynchrone à l'aide du lien preload (consultez la section Différer les styles CSS inutilisés).
Envisagez d'automatiser le processus d'extraction et d'intégration du CSS "Au-dessus de la ligne de flottaison" à l'aide de l'outil Critical.
Une autre approche pour éliminer les styles bloquant le rendu consiste à les diviser en différents fichiers, organisés par requêtes multimédias. Ajoutez ensuite un attribut média au lien de chaque feuille de style. Lors du chargement d'une page, le navigateur ne bloque que le premier élément Paint pour récupérer les feuilles de style qui correspondent à l'appareil de l'utilisateur (voir CSS bloquant l'affichage).
Enfin, vous devez minifier votre CSS pour supprimer les espaces ou caractères supplémentaires (voir Minifier le CSS). Vous envoyez ainsi le bundle le plus petit possible à vos utilisateurs.
Conseils spécifiques à la pile
AMP
Utilisez des outils tels que AMP Optimizer pour effectuer un rendu côté serveur de la mise en page de pages AMP.
Drupal
Vous pouvez envisager d'utiliser un module pour intégrer le code CSS et JavaScript critique, et utilisez l'attribut "defer" pour le code CSS ou JavaScript non critique.
Joomla
Il existe un certain nombre de plug-ins Joomla qui peuvent vous aider à intégrer les éléments critiques ou à différer le chargement des ressources moins importantes.
WordPress
Divers plug-ins WordPress peuvent vous aider à aligner des éléments critiques ou à différer le chargement des ressources moins importantes.