Critical request chains are the dependent and important requests of the page. They are all the critical resources loaded in priority that block the rendering of the page.
For example, for a single page :
<html>
<head>
<title>Critical request</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
<h1>Critical request</h1>
</body>
The critical request chains will be :
In this example, 2 chains are defined, the length of the longest chain is 3 and can result in a maximum latency of 1.73s (loading and playing).
The larger the size of the strings and the weight of the resources to be transferred, the greater the impact on page loading. It is therefore necessary to keep the critical request chains as small as possible so that the page can load quickly.
It is recommended not to exceed 8 chains, to reduce the size of the critical request chains, you should :
<link rel="stylesheet" type="text/css" href="css/unused.css" />
<script type="text/javascript" src="js/jquery.js" defer></script>
<link rel="preload" href="font/roboto.woff2" as="font" crossorigin="anonymous" />