Why does Google recommend wrapping a stylesheet link in a noscript?

Question

Just noticed this odd piece of advice on Google's PageSpeed docs:

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

They recommend converting short external stylesheets to inline <style> elements, to avoid blocking. I understand why you might want to do that.

But in their example code, they retain the link to the external stylesheet, but they just move it to the bottom and wrap it in a <noscript> element. They haven't made it clear what they're hoping to achieve with this.

What is their reasoning?

Answer 1

The <style> only contains a subset of all CSS rules to get some initial styling (in the example case only the .blue rule). You still need the full css file, but it's only loaded after page load. And in case JS is disabled, it's ensured to always load. If JS is enabled, it's deferred until the page is fully loaded (otherwise the link tag would block rendering.)

The original small.css is loaded after onload of the page. The application order of CSS rules is maintained by injecting all the and elements into the document through javascript.