CSS optimization and page statistics

Question

I used Google PageSpeed ​​Insights on my website - www.gpsheatmap.com , and he suggested changing the loading of my stylesheets ( https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery#example ) from -

<link href="/static/css/landing-page.css" rel="stylesheet"> 

To -

 <script> var cb = function() { var l = document.createElement('link'); l.rel = 'stylesheet'; l.href = '/static/css/landing-page.css'; var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h); }; var raf = requestAnimationFrame || mozRequestAnimationFrame || webkitRequestAnimationFrame || msRequestAnimationFrame; if (raf) raf(cb); else window.addEventListener('load', cb); </script> 

I tried this for my style sheets, and it noticeably changed the load, so you will see the pre-css view, and then after a second you will see that the stylesheet is applied. It was in firefox

Should I ignore this approach or can it be fixed?

Answer 1

You should consider the critical path and also put all the necessary style in your head section to avoid FOUC (only the style for the content above the fold). This can be done either by manually extracting the style, or through - for larger sites; with an automatic task like critical-path-css-demo for gulp

In any case, if you decide to load all stylesheets using javascript, consider that they are still included in the <noscript> block, so they can be loaded as well when JS is not available.

 <noscript> <link rel="stylesheet" ...> </noscript> 

---

As an additional optimization for the browser of the future future (at the moment it works only on Chrome Canary), it will be possible to have early tables of preload jobs using

 <link rel="preload" href="..." as="style"> 

and create an asynchronous loader in a simpler way

 <link rel="preload" href="..." as="style" onload="this.rel='stylesheet'"> 

---

Another interesting and recent approach is that described by Jake Archibald , and it’s called “Multi-step CSS loading”: it needs to load a small piece of CSS just before the markup, which should be styled and thus avoid the need for critical CSS, for example

 <link rel="stylesheet" href="/site-header.css"> <header>…</header> <link rel="stylesheet" href="/article.css"> <main>…</main> <link rel="stylesheet" href="/comment.css"> <section class="comments">…</section> 

The plan is for each one to block the rendering of subsequent content while the stylesheet is loading, but allows the rendering of content in front of it. Style sheets are loaded in parallel, but they are applied sequentially. This behaves similarly to <script src="…"></script> .