Corriger « Avoid Chaining Critical Requests » dans Lighthouse.

Comment la priorité de téléchargement est déterminée

Les requêtes critiques sont les ressources téléchargées avec une priorité élevée lors du chargement initial de la page. Comment cette priorité est-elle déterminée ?

La priorité de téléchargement est déterminée par le navigateur lui-même. Le navigateur suit un ensemble de règles pour déterminer la priorité de chaque ressource. Les éléments qui reçoivent finalement la priorité la plus élevée dépendent de la structure de la page. Les éléments que votre navigateur juge nécessaires pour le premier rendu de la page reçoivent la priorité la plus élevée.

Votre navigateur fait initialement une estimation éclairée des éléments les plus importants. En général, la priorité de téléchargement fonctionne ainsi : le HTML a toujours la priorité la plus élevée, puis les feuilles de style (CSS), le JavaScript synchrone, les polices, les requêtes Ajax, les images en haut de la page, les images plus bas sur la page, et enfin les JavaScripts asynchrones.

Vous pouvez voir par vous-même quelles sources reçoivent une priorité élevée sur votre page. Ouvrez la console de développement avec Ctrl + Shift + J. Naviguez vers l'onglet réseau (Network), faites un clic droit sur les noms de colonnes et sélectionnez 'Priority'

Comment la chaîne de requêtes critiques affecte-t-elle le temps de chargement de la page ?

Lors du chargement d'une page, un navigateur commence en mode 'display blocking'. Dans ce mode, les sources les plus importantes sont téléchargées avec une priorité élevée. Ce sont les ressources critiques.

Un navigateur ne commencera pas (complètement) le rendu de la page tant que toutes les ressources critiques n'auront pas été téléchargées. Ainsi, toute ressource critique peut bloquer le premier rendu d'une page.

Moins une page a de ressources critiques, moins le navigateur a de travail à faire pour afficher le premier contenu à l'écran, et moins il y a de concurrence pour le CPU et les autres ressources.

Comment corriger « Avoid Chaining Critical Requests » dans Lighthouse ?

Vous pouvez réduire l'impact des requêtes critiques de trois manières :

1. Réduire le nombre de ressources critiques . Convertissez les ressources critiques en ressources non critiques en les supprimant ou en les différant.
2. Réduire le nombre d'octets critiques . Cela peut sembler évident, mais réduire le nombre d'octets des ressources du chemin critique permet de télécharger les ressources critiques plus rapidement. Par exemple via la compression Gzip, le tree shaking JavaScript, l'optimisation des images ou le sous-ensemble de polices (font subsetting).
3. Améliorer l'ordre de téléchargement du chemin critique . Utilisez des resource hints tels que le preloading pour ignorer la découverte des ressources et vous assurer que les ressources critiques sont téléchargées aussi rapidement que possible.

Il existe de nombreuses options. La meilleure option dépend du type de fichier de la ressource :

1. HTML

Le HTML, qui est en fait la page que vous visitez, est toujours téléchargé avec la priorité la plus élevée. La page elle-même fait toujours partie de la chaîne de requêtes critiques. C'est pourquoi la page elle-même est la première chose à considérer lors de l'optimisation de la chaîne de requêtes critiques.

Chargement différé du contenu : De nombreux grands sites, comme Google lui-même, utilisent cette technique pour réduire la chaîne de requêtes critiques. Sur la page de résultats de recherche, par exemple, des parties du contenu qui ne sont pas immédiatement nécessaires ne sont chargées que plus tard via une requête AJAX.

Minification : Plus petit est toujours plus rapide, utilisez la minification HTML pour supprimer les commentaires, les espaces et les lignes vides de la page.

Compression : Enfin, il est important de compresser correctement les feuilles de style avec la compression Brotli ou GZIP.

2. Stylesheets (Feuilles de style)

Les feuilles de style dans l'en-tête (head) de la page sont toujours critiques. Sans styles, un navigateur ne sait pas à quoi ressemblera la page. Les feuilles de style font donc partie intégrante de la chaîne de requêtes critiques dans Lighthouse.

CSS Critique : Les feuilles de style peuvent être rendues non critiques avec une astuce simple où la feuille de style est préchargée via des resource hints et ajoutée en tant que feuille de style une fois le préchargement terminé.
Ajoutez le code suivant sur la page : Votre navigateur téléchargera désormais la feuille de style avec une priorité inférieure et traitera le CSS comme non bloquant pour le rendu. Il commencera le rendu sans attendre le CSS.

<link rel="preload"
      href="css.css"
      type="text/css"
      as="style"
      onload="this.onload=null;this.rel='stylesheet';"/>

Observez quelque chose d'étrange se produire sur la page. D'abord, la page est affichée et ce n'est qu'après le chargement du CSS que le style est appliqué. Tout le contenu passera désormais d'un contenu sans style à un contenu stylisé (FOUC). Nous pouvons corriger cela avec le CSS critique.
Le CSS critique est une collection de toutes les règles CSS dont vous avez besoin pour la partie visible de la page. Vous pouvez générer du CSS critique vous-même via NodeJS ou via un certain nombre d'outils en ligne. Placez ce CSS critique dans l'en-tête de la page et chargez le reste du CSS avec une priorité inférieure.

Media queries : Chargez uniquement les styles pour votre appareil. Votre page est souvent visitée sur mobile. Vous n'avez donc pas vraiment besoin de télécharger les styles pour Desktop et Print (impression). Cela permet de gagner du temps et donc de raccourcir la chaîne de requêtes critiques dans Lighthouse.

Utilisez l'attribut media. L'attribut media garantit qu'une feuille de style n'est téléchargée que si le média correspond à celui que vous utilisez actuellement.

<link href="all.css" rel="stylesheet" media="all">
<link href="print.css" rel="stylesheet" media="print">
<link href="desktop.css" rel="stylesheet" media="screen and (min-device-width: 1024px)">

Minification : Supprimez le CSS inutilisé. De nombreux sites utilisent des bibliothèques CSS telles que Bootstrap. Ces bibliothèques sont souvent trop complètes et toutes les déclarations de style ne sont pas utilisées.
Il est facile de modifier ces bibliothèques via un préprocesseur CSS (tel que SASS). Supprimez simplement les groupes de styles inutilisés en modifiant ce qui doit être inclus pour les rendre beaucoup plus petits. Ces préprocesseurs vous donnent également la possibilité de minifier votre CSS en supprimant tous les espaces et les sauts de ligne.">

Compression : Enfin, il est important de compresser correctement les feuilles de style avec la compression Brotli ou GZIP.

3. Javascript

Les fichiers Javascript dans l'en-tête de la page sont téléchargés avec une priorité élevée par défaut et bloquent le rendu de la page pendant leur téléchargement et leur exécution. Le Javascript fait donc partie intégrante de la chaîne de requêtes critiques.

Defer et Async : Ajustez la priorité des fichiers Javascript en les chargeant de manière asynchrone via l'attribut async ou defer. Les fichiers de script asynchrones sont téléchargés en parallèle avec une priorité inférieure. Le JavaScript différé (deferred) est également chargé en parallèle et l'exécution du fichier Javascript est retardée afin que l'exécution du Javascript ne bloque pas non plus le chargement initial de la page.

// blocks loading and execution
<script src="normalscript.js">
// async does not block during load, but it does block during execution
<script  src="asyncscript.js">
// defer does not block both during load nor execution
<script  src="deferscript.js">

Code splitting et preloading : Si la page ne permet pas au JavaScript de se charger de manière asynchrone, il peut être judicieux de diviser le JavaScript en plusieurs fichiers. Placez la partie du JavaScript qui est critique lors du chargement de la page dans un petit fichier et préchargez ce fichier. Placez le javascript non critique dans un autre fichier et laissez-le se charger et s'exécuter en différé (defer) ou en asynchrone (async).

Minification : Réduisez le nombre d'octets de deux manières grâce à un outil d'obfuscation/minification Javascript. C'est un outil intelligent qui analyse le Javascript et le rend aussi petit que possible. ">

Compression : De plus, réduisez le nombre d'octets en compressant le Javascript via Gzip ou Brotli.

4. WebFonts

Les polices Web (Web fonts) sont généralement les derniers fichiers chargés dans la chaîne de requêtes critiques. En effet, les polices Web reposent sur la découverte. Elles ne sont chargées que lorsqu'un navigateur découvre qu'elles sont nécessaires. Pour cela, un navigateur doit d'abord analyser le HTML et rechercher dans la feuille de style quelle police est utilisée.

Preloading : Lorsque vous êtes sûr que vous allez utiliser une police, il est généralement plus rapide de précharger cette police. La police est alors téléchargée le plus tôt possible, ce qui minimise l'influence sur la chaîne de requêtes critiques. Préchargez une police en ajoutant ce code le plus tôt possible dans l'en-tête de la page.

<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

Stratégie de polices : De plus, il existe de nombreuses autres façons de charger les polices plus rapidement.

• Comptez toujours sur des polices Web locales et jamais sur des polices hébergées à distance comme Google Fonts.
• Redimensionnez la police avec le sous-ensemble de polices (font subsetting)
• Chargez les polices non critiques via l'interface Javascript <a href="https://developer.mozilla.org/en-US/docs/Web/API/FontFace">fontface</a>
• Utilisez display = swap pour éviter que la police ne bloque le rendu initial
• Laissez les navigateurs générer leurs propres variantes de polices via la synthèse de polices (font synthesis)

Images

Les images qui apparaissent dans la fenêtre visible (viewport) lors du chargement de la page peuvent également recevoir une priorité élevée et interférer avec le chemin critique. Lorsque vous êtes sûr qu'une image apparaîtra toujours dans la partie visible du site Web, il peut être utile de précharger également cette image.

<link rel="preload" as="image" href="important-image.webp">

Pour toutes les images qui ne sont pas immédiatement visibles, soyez prudent et chargez ces images en différé (lazy load). Utilisez loading = "lazy" pour retarder le chargement de l'image juste avant qu'elle ne devienne visible.

<img loading="lazy" src="lazy-image.webp" width="20" height="20" alt="...">

5. Requête AJAX

Les requêtes Ajax se voient toujours attribuer une priorité élevée. Par conséquent, reportez de préférence les requêtes Ajax jusqu'à ce que la page ait fini son rendu. Attendez que la page ait envoyé l'événement « load ».

S'il n'est pas possible de reporter la requête AJAX, vous pouvez vous assurer que la requête Ajax est disponible pour le navigateur en la préchargeant.

window.addEventListener('load', (event)=>{\r\n  console.log('this is a good time for an AJAX request');\r\n});

6. iframes

Les iframes sont généralement téléchargées avec une priorité élevée. Comme une iframe est en fait une page dans une page, une iframe peut entraîner un retard très important dans les temps de chargement de la page. Les ressources requises par l'iframe peuvent également être téléchargées avec une priorité élevée et former leur propre chaîne de requêtes critiques. L'utilisation d'iframes peut donc affecter de manière significative votre score Lighthouse.

Vous pouvez retarder le chargement d'une iframe via l'attribut loading = "lazy". Cela fait souvent une différence lorsque l'iframe n'est pas immédiatement visible lors du chargement. Il est souvent plus rapide d'injecter cette iframe dans la page via JavaScript. Cela vous permet de mieux contrôler le timing pour être sûr qu'elle ne se retrouve pas dans la chaîne de requêtes critiques.