La section "Opportunités" de votre rapport Lighthouse liste toutes les URL qui bloquent la première peinture 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 ce qui n'est pas utilisé.
Quelles URL sont signalées comme ressources bloquant l'affichage ?
Lighthouse signale deux types d'URL bloquant l'affichage : 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. - Il 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 l'affichage.
Identifier les ressources critiques
La première étape pour réduire l'impact des ressources bloquant le rendu consiste à identifier ce qui est critique et ce qui ne l'est pas. Utilisez l'onglet "Couverture" dans les outils de développement Chrome pour identifier les CSS et JS non critiques. Lorsque vous chargez ou exécutez une page, l'onglet indique la quantité de code utilisée par rapport à celle chargée :
Vous pouvez réduire la taille de vos pages en n'envoyant que 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 de deux couleurs :
- Vert (critique) : styles requis pour le premier affichage ; code essentiel à la fonctionnalité principale de la page.
- Rouge (non critique) : styles qui s'appliquent au contenu qui n'est pas immédiatement visible ; code qui n'est pas utilisé dans la fonctionnalité principale de la page.
Éliminer les scripts qui bloquent le rendu
Une fois que vous avez identifié le code critique, déplacez-le de l'URL bloquant l'affichage 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 la fonctionnalité principale de la page.
Si une URL bloquant l'affichage contient du code non essentiel, vous pouvez le conserver dans l'URL, puis marquer l'URL avec les attributs async ou defer (voir aussi Ajouter de l'interactivité avec JavaScript).
Le code qui n'est pas utilisé du tout doit être supprimé (voir Supprimer le code inutilisé).
Éliminer les feuilles de style qui bloquent le rendu
Comme pour l'intégration de code dans une balise <script>, intégrez les styles critiques requis pour le premier affichage dans un bloc <style> au niveau de head de la page HTML.
Chargez ensuite le reste des styles de manière asynchrone à l'aide du lien preload (voir Différer le CSS non utilisé).
Envisagez d'automatiser le processus d'extraction et d'intégration du CSS "Above the Fold" à l'aide de l'outil Critical.
Une autre approche pour éliminer les styles bloquant le rendu consiste à les répartir dans 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 bloque uniquement le premier affichage pour récupérer les feuilles de style correspondant à l'appareil de l'utilisateur (voir CSS bloquant le rendu).
Enfin, vous devez minimiser votre CSS pour supprimer les espaces ou caractères supplémentaires (voir Minimiser le CSS). Vous vous assurez ainsi d'envoyer le bundle le plus petit possible à vos utilisateurs.
Conseils spécifiques à la pile
AMP
Utilisez des outils comme AMP Optimizer pour effectuer un rendu côté serveur de la mise en page de pages AMP.
Drupal
Envisagez 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
Divers plug-ins Joomla peuvent vous aider à aligner des é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.