Arborescence des dépendances réseau dans Lighthouse : la lire et la corriger

Qu'est-ce que l'arborescence des dépendances réseau dans PageSpeed Insights ?

L'arborescence des dépendances réseau de Lighthouse (« Évitez d'enchaîner les requêtes critiques » avant Lighthouse 13) indique les fichiers dont la page a besoin en priorité et quel fichier chacun a attendu : chaque fichier découvert dans un autre ajoute un temps d'attente. Hébergez vos polices sur votre propre domaine, liez les feuilles de style dans le HTML plutôt qu'avec @import, et préconnectez uniquement lorsqu'un fichier critique provient d'un domaine incontournable.

Vous cherchez la solution rapide ? Passez directement aux polices web, à @import dans WordPress, à Shopify ou aux fichiers ajoutés par un script.

Comment lire l'arborescence des dépendances réseau ?

Lighthouse 13 et PageSpeed Insights décrivent cet avertissement ainsi : « Évitez d'enchaîner les requêtes critiques en réduisant la longueur des chaînes, en diminuant la taille de téléchargement des ressources ou en différant le téléchargement des ressources inutiles pour améliorer le chargement de la page ». Il remplace « Évitez d'enchaîner les requêtes critiques » (auparavant « Réduire la profondeur des requêtes critiques ») et « Préconnectez-vous aux origines requises », ce qui explique la présence des deux tableaux de préconnexion sous l'arborescence.

Le rapport ci-dessous provient de la page d'accueil d'un cabinet dentaire que j'ai conçue comme un site WordPress : la feuille de style du thème enfant importe celle du parent, qui importe Google Fonts, et les icônes proviennent de Font Awesome sur un CDN.

Lighthouse 13.6 sur mobile, bridage DevTools (Slow 4G, processeur ralenti 4x).

• Une ligne en retrait correspond à un fichier découvert par le navigateur uniquement dans le fichier du niveau supérieur : il a donc dû attendre ce dernier. Les lignes situées au même niveau sont téléchargées en parallèle, comme les trois fichiers de polices sous la feuille de style css2 de Google.
• Le temps et les Kio sur une ligne : le moment où le fichier est arrivé, compté depuis le début du chargement de la page, ainsi que sa taille.
• Latence maximale du chemin critique : c'est la durée de la chaîne la plus lente, affichée en orange. Sur la page du cabinet dentaire, il s'agit de la police d'icônes de 155 Kio située à deux niveaux de profondeur : elle arrive après les polices Google situées quatre niveaux plus bas.
• LCP et Non noté : cet avertissement n'a aucun poids dans le score de performance, mais ses feuilles de style bloquent le premier rendu, et le LCP ne peut jamais intervenir avant lui.

PageSpeed Insights enregistre le chargement sans bridage : son arborescence affiche des temps bien plus courts que cette capture d'écran.

Pourquoi une chaîne de fichiers retarde-t-elle la page ?

Sur la page du cabinet dentaire, le visiteur voit d'abord un écran blanc, puis un texte dans une police de fallback qui change dès que les polices web arrivent, avec des cercles vides à l'emplacement des icônes.

Le navigateur lit le HTML en avance (via le preload scanner) et demande immédiatement tous les fichiers qu'il y découvre. En revanche, il ne découvre un fichier référencé dans un autre fichier qu'une fois ce dernier reçu : une police dans une feuille de style, une feuille de style derrière un @import, un script injecté par un autre script. Chaque niveau ajoute un aller-retour avec le serveur avant que la requête suivante ne puisse démarrer.

Un fichier situé sur un autre domaine attend plus longtemps : le navigateur doit d'abord établir une connexion (DNS, TCP et TLS), ce qui prend plusieurs fois plus de temps sur un réseau mobile qu'une requête sur une connexion déjà ouverte. Sur la page du cabinet dentaire, les polices Google se trouvent quatre niveaux sous le HTML, derrière deux @import, les deux derniers sur de nouveaux domaines (fonts.googleapis.com, fonts.gstatic.com). Render-blocking requests explique pourquoi une feuille de style bloque le premier rendu.

Quel gain de vitesse avec une arborescence plate ?

Après correction, la page du cabinet dentaire s'affiche une seconde plus tôt et fait apparaître ses propres polices presque deux secondes plus tôt. J'ai mesuré trois versions. Avant comporte les deux @import. Liens utilise les mêmes fichiers liés dans le HTML, comme WordPress les génère avec wp_enqueue_style. Après réunit les feuilles de style parent et enfant dans un seul fichier, héberge les polices sur le domaine du site (toutes les trois préchargées) et intègre les icônes en SVG inline.

Temps en secondes, sur un mobile bridé (Slow 4G, processeur 4x plus lent). Niveaux et chaîne la plus lente (latence maximale du chemin critique dans le rapport) issus de Lighthouse 13.6 avec le même bridage.

Deux secondes après le début du chargement sur le même mobile bridé.

Liens apporte déjà l'essentiel du gain sur le premier rendu, car les deux niveaux de @import ont disparu, même si les polices et les icônes attendent encore leurs propres domaines. Le LCP, correspondant à la photo principale, intervient 0,4 s plus tôt après correction. Liens obtient le LCP le plus précoce car la photo dispose de la quasi-totalité de la bande passante ; dans Après, les trois polices préchargées la partagent, raison pour laquelle le correctif n'en précharge qu'une ou deux.

Pour savoir si les visiteurs réels subissent cette chaîne, décomposez le LCP sur mobile dans CoreDash : les feuilles de style et les polices tardives se traduisent par un render delay élevé, c'est-à-dire l'attente qui suit l'arrivée de l'image LCP ou, dans le cas d'un texte, l'arrivée du premier octet.

CoreDash sur mobile, p75, élément LCP de type texte : comparez le Render Delay au Time To First Byte.

Que signifient Origines préconnectées et Origines candidates à la préconnexion ?

Une préconnexion (<link rel="preconnect">) ouvre la connexion à un domaine avant que le navigateur n'ait besoin d'un fichier qui s'y trouve. « Origines préconnectées » liste les domaines auxquels la page se préconnecte ; « Origines candidates à la préconnexion » liste les domaines dont le fichier a tout de même dû établir une connexion, avec le temps qu'une préconnexion permettrait de gagner (gain estimé sur le LCP).

La même page de cabinet dentaire avec une grande photo principale en lazy loading, Lighthouse 13.6 avec bridage DevTools.

• « Préconnexion non utilisée. N'utilisez la préconnexion que pour les origines que la page est susceptible de demander. » La page n'a rien chargé depuis ce domaine, ici maps.googleapis.com et www.youtube.com. Supprimez-le après avoir vérifié qu'aucun autre modèle de page, comme le tunnel de commande, ne l'utilise.
• « Préconnexion non utilisée. Vérifiez que l'attribut crossorigin est utilisé correctement. » Une police nécessite une connexion ouverte avec crossorigin, tandis qu'une feuille de style ou un script nécessite une connexion sans cet attribut. cdnjs.cloudflare.com fournit à la page du cabinet dentaire la feuille de style de Font Awesome et sa police : la feuille de style a utilisé la préconnexion, et la police a ouvert une seconde connexion. Hébergez la police vous-même ; si c'est impossible, ajoutez une seconde préconnexion à ce domaine avec crossorigin.
• « Plus de 4 connexions de préconnexion ont été trouvées. » Chaque préconnexion établit une connexion en parallèle des fichiers prioritaires pour la page. Hébergez ce que vous pouvez sur votre propre domaine, et ne conservez une préconnexion que pour un fichier critique issu d'un domaine incontournable.
• Un domaine sous Origines candidates à la préconnexion. Déplacez ce fichier sur votre propre domaine ; si c'est impossible et que le fichier est critique, préconnectez-vous à ce domaine.

Si vous ne pouvez pas encore héberger Google Fonts vous-même, liez sa feuille de style dans le HTML et préconnectez-vous à fonts.gstatic.com avec crossorigin ; le navigateur se connecte à fonts.googleapis.com dès qu'il lit le lien. Cela laisse tout de même une chaîne.

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Les réglages de préconnexion des extensions ne gèrent pas toujours crossorigin correctement : l'option DNS Preconnect de LiteSpeed Cache ne l'ajoute sur aucun domaine, et Perfmatters uniquement là où vous cochez la case. Vérifiez le code source de la page : seuls les domaines de polices en ont besoin.

Comment corriger l'arborescence des dépendances réseau ?

Commencez par la chaîne la plus lente, celle que Lighthouse surligne en orange, à son niveau le plus profond. Pour chaque fichier qu'elle contient, posez-vous la question : ce fichier peut-il être référencé dans le HTML, ou provenir de mon propre domaine ?

Google Fonts et les autres polices web

Sans toucher au code, activez l'option qui héberge Google Fonts sur votre domaine : Self-host Google Fonts dans WP Rocket ou FlyingPress, Local Google Fonts dans Perfmatters, Load Google Fonts Locally dans Elementor (Réglages, Performances), ou l'extension OMGF. L'option de WP Rocket oublie les @import de Google Fonts présents dans la feuille de style du thème : si fonts.googleapis.com figure toujours dans l'arborescence après coup, supprimez l'@import (section suivante). Les options qui chargent Google Fonts de manière « asynchrone » avec un script de chargement de polices, comme dans LiteSpeed Cache et Autoptimize, ajoutent un niveau à la chaîne : hébergez plutôt les polices vous-même.

Manuellement, placez les règles @font-face dans votre propre feuille de style, avec les fichiers woff2 dans un dossier fonts à côté :

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/poppins-v24-latin-700.woff2") format("woff2");
}

Une police ne pouvant être déclarée qu'à l'intérieur d'une feuille de style, seul un preload raccourcit cette chaîne. Utilisez moins de fichiers de polices, puis préchargez-en un ou deux — en priorité la police du texte le plus visible au-dessus de la ligne de flottaison — et contrôlez le LCP ensuite :

<link rel="preload" href="/wp-content/themes/acme-smile/fonts/poppins-v24-latin-700.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/wp-content/themes/acme-smile/fonts/open-sans-v44-latin.woff2" as="font" type="font/woff2" crossorigin>
<link rel="stylesheet" href="/wp-content/themes/acme-smile/style.css?ver=2.5.0">

Le preload nécessite crossorigin, y compris sur votre propre domaine, sinon la police sera téléchargée deux fois. Font display détaille le preload des polices.

Sous Next.js, next/font héberge et précharge déjà les polices : remplacez tout @import url(https://fonts.googleapis.com/...) écrit à la main dans un fichier CSS par next/font.

Thèmes WordPress avec @import

Tout @import Google Fonts supprimé du thème parent réapparaîtra lors de sa prochaine mise à jour : cherchez un réglage de polices dans le thème, ou demandez à son développeur d'enqueuer les polices.

Un @import de la feuille de style parente dans le style.css d'un thème enfant ajoute un niveau. Demandez au créateur du thème un thème enfant qui s'en passe, ou transmettez à un développeur l'arborescence du rapport et ce code pour le functions.php du thème enfant, qui remplace l'@import :

add_action( 'wp_enqueue_scripts', function () {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
} );

Vérifiez ensuite le code source de la page : la feuille de style parente ne doit se charger qu'une seule fois.

Polices d'icônes

Font Awesome et les icônes d'Elementor chargent une feuille de style, laquelle charge une police contenant l'ensemble des icônes. Dans Elementor, activez Inline Font Icons : cette option remplace la feuille de style et la police par du SVG inline. Ailleurs, remplacez les icônes utilisées sur la page par du SVG inline, ou hébergez Font Awesome sur votre propre domaine.

Shopify

Sélectionnez vos polices dans l'éditeur de thème (Paramètres du thème, Typographie) plutôt que de coller du code Google Fonts dans theme.liquid : le thème les servira depuis le domaine de votre boutique, et Dawn ainsi que les thèmes dérivés les préchargent. Les intégrations d'applications (app embeds) qui injectent une feuille de style apparaissent dans l'arborescence : désactivez-les une par une et relancez Lighthouse. Shopify envoie ses propres préconnexions dans les en-têtes de la page, vers son CDN et vers les trois premiers autres domaines fournissant vos fichiers bloquants, et Lighthouse les comptabilise dans sa limite de quatre. Supprimez toute ancienne préconnexion à cdn.shopify.com de theme.liquid et n'ajoutez les vôtres que pour un domaine dont l'arborescence a encore besoin ; chaque intégration d'application désactivée peut en libérer une du côté de Shopify. Si l'avertissement « Plus de 4 connexions de préconnexion ont été trouvées » persiste alors qu'il ne reste que celles de Shopify, laissez-le.

Fichiers ajoutés par un script et services impossibles à modifier

Une feuille de style ajoutée par un script doit attendre ce script : si le premier écran en a besoin, insérez son lien directement dans le HTML ; sinon, différez le script (defer). Un outil de gestion du consentement qui doit s'exécuter en premier restera bloquant ; lorsqu'il charge des fichiers depuis un second domaine incontournable, préconnectez-vous à ce domaine. Si le serveur met du temps à générer le HTML, 103 Early Hints envoie la préconnexion et le préchargement des polices avant le HTML lui-même.

Pourquoi l'arborescence reste-t-elle rouge après correction ?

Lighthouse affiche l'avertissement en rouge dès que le HTML charge une feuille de style ; une page sans aucune chaîne reste donc rouge. C'est un rouge que vous pouvez conserver : le HTML et les fichiers qu'il référence directement. Chaque ligne en retrait sous un autre fichier représente en revanche une chaîne à corriger :

• Polices sous votre propre feuille de style. Réduisez le nombre de fichiers et préchargez-en un ou deux. Une police qui n'apparaît pas sur le premier écran constitue la seule chaîne acceptable.
• Fichiers ajoutés par un service tiers. La protection des adresses e-mail de Cloudflare (email-decode.min.js) et sa balise Web Analytics, ou guest.vary.php issu du Guest Mode de LiteSpeed Cache. Désactivez la fonctionnalité.

Un bug connu de PageSpeed Insights fait parfois apparaître des requêtes d'autres sites dans l'arborescence : relancez simplement le test.

La page du cabinet dentaire débarrassée de toute chaîne, Lighthouse 13.6 avec bridage DevTools.

Comment vérifier que l'arborescence s'est raccourcie ?

Relancez Lighthouse et comparez d'abord les niveaux et la chaîne la plus lente, car la latence maximale du chemin critique varie légèrement d'un test à l'autre. La colonne Initiator dans le panneau Network de Chrome DevTools indique quel fichier est à l'origine de chaque requête. Pour les visiteurs réels, suivez le FCP et le LCP sur mobile dans CoreDash dès les visites suivantes ; la Search Console demande jusqu'à 28 jours.

Votre chaîne la plus longue provient d'un thème ou d'un page builder impossible à modifier, ou d'une application qui charge ses propres polices ? Lors d'une Core Web Vitals power hour, nous passons votre arborescence en revue ensemble, fichier par fichier, pour décider quels fichiers migrer sur votre domaine, lesquels intégrer au HTML et quel domaine nécessite encore une préconnexion.