Style sheets are loaded after JavaScript resources in the <head>
URLs that contain stylesheet <link> elements in the <head>, which are loaded after a <script> element.
Why is this important?
Before the browser can render a page it has to build the DOM tree by parsing the HTML markup. During this process, whenever the parser encounters a script it has to stop and execute it before it can continue parsing the HTML.
You want to specify all CSS resources as early as possible within the HTML document so that the browser can discover the <link> tags and dispatch the request for the CSS as soon as possible.
If scripts are found before the stylesheet links, this adds a delay to this timeline, and causes the page to render more slowly.
What does the Hint check?
This Hint will trigger for any internal URL which contains <script> elements in the <head> that are above style sheet <link> elements.
Examples that trigger this Hint:
The Hint would trigger for any URL that has scripts before style sheets links in the <head>:
How do you resolve this issue?
CSS is a render blocking resource, so you need to get it to the browser as soon and as quickly as possible to optimize the time to first render.
To ensure that rendering is not delayed, you want to specify all CSS resources as early as possible within the HTML document, so you need to move style sheets above any scripts in the <head>.
