Les chaînes de demandes critiques sont les requêtes dépendantes et importantes de la page. Elles constituent toutes les ressources critiques chargées en priorité qui bloquent le rendu de la page.
Par exemple pour une simple page :
<html>
<head>
<title>Demandes critiques</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
<h1>Demandes critiques</h1>
</body>
Les chaînes de demandes critiques seront :
Dans cet exemple, 2 chaînes son définies, la longueur de la chaîne la plus longue est de 3 et peut entrainer une latence maximale de 1,73s (chargement et interprétation).
Plus la taille des chaînes et le poids des ressources à transferer sont importants, plus l'impact sur le chargement de la page est important. Il est donc nécessaire de garder les chaînes de demandes critiques aussi minimes que possible afin que la page puisse charger rapidement.
Il est recommandé de ne pas dépasser 8 chaînes, pour diminuer la taille des chaînes de demandes critiques, vous devez :
<link rel="stylesheet" type="text/css" href="css/inutile.css" />
<script type="text/javascript" src="js/jquery.js" defer></script>
<link rel="preload" href="font/roboto.woff2" as="font" crossorigin="anonymous" />