Critical (Above-the-fold) CSS was found in the <head> but not loaded early enough
This means that the URL in question does include critical CSS content in the <head> (as recommended), but does not load it early enough.
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.
However, if the critical CSS content is loaded after the stylesheet links were found, the browser will try downloading and parsing them before it gets to the inline style content, which means you are not properly optimizing the critical path.
What does the Hint check?
This Hint will trigger for any internal URL which contains critical CSS in the <head>, but where the inline styles are beneath stylesheet links.
Examples that trigger this Hint:
The Hint would trigger for any URL with style sheets links before critical, inline CSS:
How do you resolve this issue?
To ensure that the browser can render above-the-fold content without needing to wait for non-critical resources to download, ensure that critical CSS is moved higher up the <head>, so that it sites before any JavaScript or style sheet links - ideally immediately after critical meta data.
