Zoptymalizuj przesyłanie CSS

. Ta reguła uruchamia się, gdy PageSpeed Insights wykryje, że strona zawiera elementy blokujące renderowanie zewnętrzne arkuszy stylów, które opóźniają pierwsze renderowanie.

Omówienie

Zanim przeglądarka będzie mogła wyrenderować treść, musi przetworzyć wszystkie informacje o stylu i układzie bieżącej stronie. W rezultacie przeglądarka blokuje renderowanie do czasu, aż zewnętrzne arkusze stylów pobrane i przetworzone, co może wymagać wielu cykli wymiany danych i opóźnienia pierwszego renderowania. Zobacz konstrukcję, układ i renderowanie, aby dowiedzieć się więcej o krytycznej ścieżce renderowania. i renderowanie Blokowanie CSS, aby dowiedzieć się, jak odblokować renderowanie i ulepszyć wyświetlanie 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 ostrzeże ostrzeżenie, że część strony widoczna na ekranie część strony jest za duża. 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>
A 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ć kluczowy kod CSS w ten 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/niekrytycznego kodu CSS, wbudowanie krytycznego kodu CSS i odroczenie wczytywania niekrytycznego kodu CSS, może być automatycznie realizowany przez Moduły optymalizacji PageSpeed dla witryny nginx, apache, IIS, ATS oraz Open Lightspeed, jeśli włączysz prioritize_critical_css.

Zobacz też loadCSS asynchronicznie, co może współpracować Krytyczne, narzędzie do wyodrębniania najważniejszych elementów CSS ze strony internetowej.

Style krytyczne niezbędne 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 jest wczytywany po pierwszym wyrenderowaniu strony. Jego style są stosowane na stronie po zakończeniu wczytywania, bez blokowania początkowego wyrenderowania najważniejszych treści.

Zwróć uwagę, że już wkrótce platforma internetowa będzie obsługiwać ładowanie arkuszy stylów bez blokowania renderowania i bez konieczności korzystania z JavaScriptu za pomocą funkcji importowania HTML.

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

Zachowaj ostrożność przy wbudowywaniu identyfikatorów URI danych w plikach CSS. Chociaż selektywne użycie identyfikatorów URI niewielkich danych w Twojej usłudze porównywania cen może być sensowne, identyfikatory URI dużych danych mogą powodować większy rozmiar kodu CSS w części strony widocznej na ekranie i wydłużać czas renderowania 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 CSS wbudowany w elementy HTML jest domyślnie blokowany przez tag w ramach polityki Content Security Policy (CSP).

Prześlij opinię

Czy ta strona była pomocna?

.