How to Fix webfont woff2 "Avoid Chaining Critical Requests" in Google PageSpeed Insight

 Google PageSpeed Insights is a great way to get a quick overview of the optimization potential of your site. 

Google PageSpeed Insights is without a doubt a useful tool for webmasters, developers, and site owners of all types. However, we’ve noticed that a lot of people spend hours obsessing over optimizing their sites, in order to try and score 100/100 on this test.

Avoid Chaining Critical Requests

Critical requests are network requests that are fetched by the browser with a high priority.

When a page or a script causes multiple resources to be downloaded with high priority, we speak of a chain of critical requests.

A browser will not (fully) start rendering and painting the page until all of these critical resources have been downloaded. Any critical resource can therefore block the first rendering of a page. The larger or heavier the Critical Request Chain becomes, the more influence the Critical Request Chain has on the loading time of the page according to lighthouse.

How the download priority is determined

Critical requests are the resources that are downloaded with high priority during initial page load. How is this priority determined?

The download priority is determined by the browser itself. The browser follows a set of rules to determine the priority of each asset. Which elements ultimately receive the highest priority depends on the structure of the page. The elements that your browser thinks are necessary for the first rendering of the page are given the highest priority.

How does the critical Request Chain affect the page load time?

When loading a page, a browser starts in 'display blocking' mode. In this mode, the most important sources are downloaded with high priority. Those are the critical resources.

A browser will not (fully) start rendering the page until all critical resources have been downloaded. So any critical resource can block the first rendering of a page.

How to fix "Avoid Chaining Critical Requests" in lighthouse?

WebFonts

Web fonts are usually loaded last files in the critical request chain. This is because web fonts rely on discovery. They are only loaded when a browser finds out that they are needed. For this, a browser must first analyze the HTML and look up in the style sheet which font is used.

Add this below preload in your Site tag

<link as='font' crossorigin='' href='https://fonts.gstatic.com/s/googlesans/v5/4UaGrENHsxJlGDuGo1OIlL3Owp4.woff2' rel='preload' type='font/woff2'/> 

 Replace with your web font url 

Preloading : When you are sure that you are going to rely on a font, it is usually faster to preload this font. The font is then downloaded as early as possible, this minumizes the influence on the critical request chain. Preload a font by adding this code as early as possible in the head of the page