Insight

High
This Hint is very important, and definitely warrants attention.
Issue
This Hint represents an error or problem that needs to be fixed.

Critical (Above-the-fold) CSS was not found

This means that the URL in question does not include critical CSS content in the <head>.

Why is this important?

A request for a CSS file can significantly increase the time it takes a web page to render. The reason is that by default the browser will delay page rendering until it has finished loading, parsing and executing all the CSS files referenced in the <head> of your page (it does this because it needs to calculate the layout of the page).

Unfortunately, this means that if you have a really large CSS file that takes a while to download, your users will end up waiting until the whole file has been downloaded before the browser can begin rendering the page.

By optimizing the critical rendering path - by inlining critical CSS in the <head> - you enable above-the-fold content to render in the browser without waiting for the rest of the CSS to load.

What does the Hint check?

This Hint will trigger for any internal URL which does not contain critical CSS in the <head>, where critical CSS is considered to be the minimum set of blocking CSS required to render the first screen's worth of content to the user.

How do you resolve this issue?

Determining the critical CSS for a page is rather complex and requires you to walk through the web page's DOM, and then determine the list of styles that currently apply to each element in view. This allows you to characterize your critical path: number of resources, bytes, length.

Once you have done this analysis, you can attempt to reduce the number of critical resources: eliminate them, defer their download, mark them as async, and so on. Then it is a case of optimizing the order in which the remaining critical resources are loaded: download all critical assets as early as possible to shorten the critical path length.