Éliminer les ressources qui bloquent l'affichage

La section "Opportunités" de votre rapport Lighthouse liste toutes les URL qui bloquent la première visualisation 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é.

Capture d'écran de l'audit Lighthouse "Éliminez les ressources qui bloquent le rendu"

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 media correspondant 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 l'affichage 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 le code 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 :

Outils pour les développeurs Chrome : onglet "Couverture".

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 le fichier correspondant 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 non immédiatement visible, code non 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 à votre page HTML. Lorsque la page se charge, elle dispose de tout ce dont elle a besoin pour gérer sa fonctionnalité principale.

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 également 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 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 inutilisé).

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 qui correspondent à l'appareil de l'utilisateur (voir CSS bloquant le rendu).

Enfin, vous devez minimiser votre code CSS pour supprimer les espaces ou caractères supplémentaires (voir Minimiser le code 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.