Critical request

What are critical request chains ?

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 :

    <title>Critical request</title>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <script type="text/javascript" src="js/jquery.js"></script>
    <h1>Critical request</h1>

The critical request chains will be :

      • (515ms, 14,85ko)
    • (602ms, 32,56ko)

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).

Why is this important ?

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.

How can they be optimized ?

It is recommended not to exceed 8 chains, to reduce the size of the critical request chains,  you should :

  • minimize the number of critical resources : remove unused resources
<link rel="stylesheet" type="text/css" href="css/unused.css" />
  • postpone the loading of non-critical resources thanks to the "defer" or "async" attribute
<script type="text/javascript" src="js/jquery.js" defer></script>
  • preload resources dependent on other resources
<link rel="preload" href="font/roboto.woff2" as="font" crossorigin="anonymous" />
  • optimize the order in which the remaining critical resources are loaded : define the most critical resources as early as possible
  • reduce the weight of resources