CSS Optymalizacja i PageSpeed ​​Insights

Question

biegałam Google PageSpeed ​​Insights na mojej stronie internetowej - www.gpsheatmap.com i Sugeruje się zmianę obciążenia moich arkuszy stylów (https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery#example) od -

<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> 

Próbowałem tego dla moich arkuszy stylów i wyraźnie zmieniło ładowanie, abyś zobaczył widok pre-css, a po chwili zobaczysz arkusz stylów. To było w firefoxie

Czy mogę zignorować to podejście, czy może to naprawić?

Answer 1

Należy rozważyć ścieżki krytycznej, a także umieścić wszystkie niezbędne styl w sekcji head tak aby uniknąć FOUC (tylko styl dla zawartości powyżej fałdu). Można to zrobić albo ekstrakcję stylu ręcznie lub — dla większych witryn — z automatycznym zadania jak critical-path-css-demo dla haustem

W każdym razie, jeśli zdecydujesz się załadować wszystkie arkusze stylów z javascript rozważyć jeszcze uwzględnić je wewnątrz <noscript> bloku, więc mogą być ładowane również wtedy, gdy JS jest niedostępny.

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

---

Jako dalsza optymalizacja for near-future browser (w tej chwili działa tylko w Chrome Kanaryjskich) będzie możliwe do early preload stylesheets użyciu

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

i stworzyć ładowarka asynchronicznej w prostszy sposób

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

---

Innym interesującym i niedawnym podejściem jest described by Jake Archibald i nazywa się "Wielostopniowe ładowanie CSS": wymaga załadowania małego kawałka CSS tuż przed znacznikiem, który musi być stylizowany, a tym samym uniknięcia krytycznego CSS, np.

<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> 

Plan jest dla każdego blokować renderowanie późniejszej zawartości natomiast ładunku stylesheet, ale pozwalają renderowania zawartości przed nim. Arkusze stylów ładują się równolegle, ale mają zastosowanie szeregowo. To sprawia, że ​​zachowują się podobnie do <script src="…"></script>.