Why does Google recommend exchanging the link to the stylesheet in noscript?

Question

Just noticed this strange tip in the Google PageSpeed ​​docs:

https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery

They recommend converting short external style sheets to inline <style> elements to avoid blocking. I understand why you can do this.

But in their code example, they retain a link to an external stylesheet, but they just move it to the bottom and wrap it in a <noscript> element. They did not make clear what they were hoping to achieve.

What is their reasoning?

Answer 1

<style> contains a subset of all CSS rules to get some initial style (in the example, only the .blue rule is .blue ). You still need the full css file, but it only loads after the page loads. And if JS is disabled, it will always boot. If JS is enabled, it is delayed until the page is fully loaded (otherwise the link tag will block rendering.)

The source small.css file is loaded after the page loads. The order of application of CSS rules is supported by entering all elements and elements into a document through javascript.