How to fix critical chaining request of webfonts |  fix Ensure text remains visible webfont | how to fix webfont rendering issue

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.

What is chaining critical requests?

Chaining critical requests is a sequence of requests depending on each other that are crucial for rendering content on your web page. The order in which critical requests are processed is determined by the critical rendering path.

The critical rendering path is the order of steps the browser will take to convert HTML files, CSS, and JavaScript files into pixels of content on the site visitor’s screen.

How does chaining critical requests affect page speed?

The impact of chaining critical requests on your site will depend on the length of the chains and the size of each critical resource being rendered.

In simpler words, longer chains and larger resource sizes may mean slower page performance. This is because it will take a longer time for the browser to process and prepare each chain for displaying pixels on the page. As a result, it will take more time to first render content on your web page.

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

You can reduce the impact of critical requests in three ways:

1. Reduce the number of critical resources . Convert critical resources to non-critical resources by removing or defering them.
2. Reduce the number of critical bytes . It may be obvious, but reducing the number of bytes of the critical path resources makes the critical resources download faster. For example through gzip compression, javascript tree shaking, image optimization or font subsetting.
3. Improve the download order of the critical path . Use resource hints such as preloading to skip resource discovery and to ensure that the critical resources are downloaded as quickly as possible.

Watch

That’s it.

If you found any problem regarding this , don’t hesitate to tell me by comment box. I will try my best to resolve the issue.