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 des éléments les plus importants. De manière générale, la priorité de téléchargement fonctionne ainsi : le HTML a toujours la priorité la plus élevée, puis les feuilles de style, le JavaScript synchrone, les polices, les requêtes Ajax, les images en haut de 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, 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 démarre en mode « blocage de l'affichage ». 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 (entièrement) 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 pour afficher le premier contenu à l'écran, et moins il y a de concurrence pour le processeur 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 accélère leur téléchargement. Par exemple, grâce à la compression gzip, au tree shaking JavaScript, à l'optimisation des images ou au subsetting des polices.
3. Améliorer l'ordre de téléchargement du chemin critique . Utilisez des indications de ressources telles que le préchargement pour éviter la découverte de ressources et garantir que les ressources critiques sont téléchargées le plus rapidement 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 des 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. Feuilles de style

Les feuilles de style dans le 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 grâce à une astuce simple où la feuille de style est préchargée via des indications de ressources et ajoutée comme feuille de style une fois le préchargement terminé.
Ajoutez le code suivant sur la page : Votre navigateur téléchargera maintenant la feuille de style avec une priorité plus basse 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 comment quelque chose d'étrange se passe maintenant sur la page. D'abord, la page s'affiche et ce n'est qu'après le chargement du CSS que le style est appliqué. Tout le contenu passera d'un contenu non stylisé à un contenu stylisé. Nous pouvons corriger cela avec du CSS critique.
Le CSS critique est une collection de toutes les règles CSS nécessaires 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 le head de la page et chargez le reste du CSS avec une priorité plus basse.

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

Utilisez l'attribut media. L'attribut media garantit qu'un style n'est téléchargé que si le media de la page ne correspond pas au media 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 offrent également la possibilité de minifier votre CSS en supprimant tous les espaces et retours à la 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 le head 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. 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é plus basse. Les JavaScript différés sont également chargés en parallèle et l'exécution du fichier JavaScript est retardée, de sorte que l'exécution du JavaScript ne bloque pas non plus le chargement initial de la page.

// bloque le chargement et l'exécution
<script src="normalscript.js">
// async ne bloque pas pendant le chargement, mais bloque pendant l'exécution
<script async src="asyncscript.js">
// defer ne bloque ni pendant le chargement ni pendant l'exécution
<script defer src="deferscript.js">

Fractionnement du code et préchargement : Si la page ne permet pas de charger JavaScript de manière asynchrone, il peut être judicieux de diviser 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 de manière différée ou asynchrone.

Minification : Réduisez le nombre d'octets de deux manières grâce à un outil d'Uglification 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. Polices web

Les polices web sont généralement les derniers fichiers chargés dans la chaîne de requêtes critiques. En effet, les polices web dépendent de 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.

Préchargement : 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 le head 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 faire charger les polices plus rapidement.

• Utilisez toujours des polices web locales et jamais des polices hébergées à distance comme les polices Google.
• Redimensionnez la police avec le subsetting de polices
• 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 grâce à la synthèse de polices

Images

Les images qui apparaissent dans la zone visible 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 cette image également.

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

Pour toutes les images qui ne sont pas immédiatement visibles, privilégiez la prudence et chargez ces images en lazy loading. Utilisez loading = "lazy" pour retarder le chargement de l'image jusqu'à ce qu'elle soit sur le point de devenir visible.

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

5. Requêtes 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 terminé 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)=>{
  console.log('this is a good time for an AJAX request');
});

6. iframes

Les iframes sont généralement téléchargés avec une priorité élevée. Étant donné qu'un iframe est en fait une page dans une page, un iframe peut provoquer un retard très significatif 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 significativement votre score Lighthouse.

Vous pouvez retarder le chargement d'un 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 cet iframe dans la page via JavaScript. Cela vous permet un meilleur contrôle du timing pour être sûr qu'il ne se retrouve pas dans la chaîne de requêtes critiques.