Zoptymalizuj przesyłanie CSS

Ta reguła uruchamia się, gdy PageSpeed Insights wykryje, że strona zawiera blokujące renderowanie zewnętrzne arkusze stylów, które opóźniają odwzorowanie zawartości na ekranie.

Omówienie

Zewnętrzne pliki CSS blokują przeglądarki, zanim na ekranie zostanie odwzorowana zawartość strony. Wydłuża to czas oczekiwania sieci i czas wyświetlania strony.

Zalecenia

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 uruchomić inną regułę PageSpeed Insights: Nadaj priorytet widocznej treści. Pojawi się wówczas ostrzeżenie o zbyt dużym rozmiarze części strony widocznej na ekranie. 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żeli dokument HTML wygląda tak:
<html>
  <head>
    <link rel="stylesheet" href="small.css">
  </head>
  <body>
    <div class="blue">
      Hello, world!
    </div>
  </body>
</html>

A zasób small.css tak:

  .yellow {background-color: yellow;}
  .blue {color: blue;}
  .big { font-size: 8em; }
  .bold { font-weight: bold; }

Możesz wbudować najważniejszą część CSS w ten sposób:

<html>
  <head>
    <style>
      .blue{color:blue;}
    </style>
    </head>
  <body>
    <div class="blue">
      Hello, world!
    </div>
  </body>
</html>
<link rel="stylesheet" href="small.css">

Oryginalny plik small.css będzie wczytywany po wyświetleniu strony. Kolejność stosowania reguł CSS zostanie zachowana dzięki wstawieniu w dokumencie wszystkich elementów <style> i <link> za pomocą JavaScriptu.

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

Zachowaj ostrożność przy wbudowywaniu identyfikatorów URI danych w plikach CSS. Chociaż użycie identyfikatorów URI niewielkich zasobów danych w pliku CSS może być przydatne, wbudowanie identyfikatorów URI dużych zasobów może spowodować nadmierne powiększenie rozmiaru CSS w części strony widocznej na ekranie i spowolnić renderowanie.

Nie wbudowuj atrybutów CSS

Powinieneś unikać wbudowywania atrybutów CSS w elementy HTML (np. &lt p style=...&gt), 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).