Zoptymalizuj przesyłanie CSS

Ta reguła jest uruchamiana, gdy PageSpeed Insights wykryje, że strona zawiera blokujące renderowanie zewnętrzne arkusze stylów, co opóźni czas pierwszego renderowania.

Opis

Zanim przeglądarka będzie mogła wyrenderować treść, musi przetworzyć wszystkie informacje o stylu i układzie bieżącej strony. W rezultacie przeglądarka będzie blokować renderowanie do czasu pobrania i przetworzenia zewnętrznych arkuszy stylów, co może wymagać kilku transferów w obie strony i opóźnić czas pierwszego renderowania. Przeczytaj artykuł o konstrukcji drzewa renderowania, układzie i renderowaniu, aby dowiedzieć się więcej o krytycznej ścieżce renderowania, a także o blokowaniu renderowania w CSS, gdzie znajdziesz wskazówki dotyczące odblokowywania renderowania i ulepszania wyświetlania CSS.

Rekomendacje

Jeżeli zewnętrzne zasoby CSS mają niewielki rozmiar, możesz je wstawić – czyli wbudować – bezpośrednio w dokument HTML. Wbudowanie krótkiego kodu CSS pozwoli przeglądarce kontynuować renderowanie strony. Pamiętaj, że jeśli plik CSS jest duży, jego całkowite wbudowanie może spowodować, że PageSpeed Insights wyświetli ostrzeżenie, że część strony widoczna na ekranie jest za duża. W tym celu użyj opcji Nadaj priorytet widocznej treści. W przypadku dużych plików CSS konieczne będzie wyodrębnienie i wbudowanie zasobów CSS niezbędnych do wyrenderowania części strony widocznej na ekranie i odłożenie pozostałych stylów do wczytania w drugiej kolejności.

Przykład wbudowania niewielkiego pliku CSS

Jeśli dokument HTML wygląda tak: 
<html>
  <head>
    <link rel="stylesheet" href="small.css">
  </head>
  <body>
    <div class="blue">
      Hello, world!
    </div>
  </body>
</html>
Zasób small.css wygląda tak: 
  .yellow {background-color: yellow;}
  .blue {color: blue;}
  .big { font-size: 8em; }
  .bold { font-weight: bold; }
Następnie możesz wbudować newralgiczny kod CSS w następujący sposób: 
<html>
  <head>
    <style>
      .blue{color:blue;}
    </style>
    </head>
  <body>
    <div class="blue">
      Hello, world!
    </div>
    <noscript id="deferred-styles">
      <link rel="stylesheet" type="text/css" href="small.css"/>
    </noscript>
    <script>
      var loadDeferredStyles = function() {
        var addStylesNode = document.getElementById("deferred-styles");
        var replacement = document.createElement("div");
        replacement.innerHTML = addStylesNode.textContent;
        document.body.appendChild(replacement)
        addStylesNode.parentElement.removeChild(addStylesNode);
      };
      var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
          window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
      if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0); });
      else window.addEventListener('load', loadDeferredStyles);
    </script>
  </body>
</html>

To przekształcenie, w tym określenie krytycznego lub niekrytycznego kodu CSS, wbudowanie krytycznego kodu CSS i odroczone wczytywanie niekrytycznego kodu CSS, może zostać wykonane automatycznie przez moduły optymalizacji PageSpeed dla nginx, Apache, IIS, ATS i Open Lightspeed, po włączeniu filtra prioritize_critical_css.

Zapoznaj się też z funkcją loadCSS, która ułatwia asynchroniczne ładowanie kodu CSS. Działa ona z narzędziem critic, które umożliwia wyodrębnianie krytycznego kodu CSS ze strony internetowej.

Style krytyczne, które są potrzebne do określenia stylu treści w części strony widocznej na ekranie, są wbudowane i od razu stosowane w dokumencie. Pełny plik small.css zostanie wczytany po pierwszym wyrenderowaniu strony. Style są stosowane do strony po zakończeniu ładowania, bez blokowania wstępnego renderowania kluczowych treści.

Pamiętaj, że platforma internetowa wkrótce będzie obsługiwać ładowanie arkuszy stylów w sposób nieblokujący renderowania, bez konieczności stosowania JavaScriptu (Importy HTML).

Nie wbudowuj identyfikatorów URI dużych zasobów danych

Zachowaj ostrożność przy wbudowywaniu identyfikatorów URI danych w plikach CSS. Chociaż stosowanie małych identyfikatorów URI danych w kodzie CSS może być dobrym rozwiązaniem, wbudowanie dużych identyfikatorów URI danych może spowodować nadmierne zwiększenie rozmiaru kodu CSS w części strony widocznej na ekranie i spowolnić renderowanie strony.

Nie wbudowuj atrybutów CSS

Wbudowanie atrybutów CSS w elementy HTML (np. <p style=...>) w miarę możliwości należy unikać, ponieważ często prowadzi to do niepotrzebnego duplikowania kodu. Ponadto zasoby CSS wbudowane w elementy HTML są domyślnie blokowane w ramach polityki bezpieczeństwa treści (CSP).

Prześlij opinię

Czy ta strona była pomocna?