Reguły i zalecenia PageSpeed

Ilya Grigorik

Opublikowano: 17 sierpnia 2018 r.

Ten przewodnik omawia reguły PageSpeed Insights w kontekście: na co należy zwrócić uwagę podczas optymalizacji krytycznej ścieżki renderowania i dlaczego.

Wyeliminuj blokujący renderowanie kod JavaScript i CSS

Aby maksymalnie przyspieszyć pierwsze renderowanie, zminimalizuj i (jeśli to możliwe) wyeliminuj liczbę zasobów krytycznych na stronie, zminimalizuj liczbę pobranych bajtów krytycznych i zoptymalizuj długość ścieżki krytycznej.

Optymalizacja pod kątem obsługi JavaScriptu

Zasoby JavaScriptu są domyślnie blokowane przez parsowanie, chyba że są oznaczone jako async lub dodane za pomocą specjalnego fragmentu kodu JavaScriptu. Blokowanie parsera JavaScript zmusza przeglądarkę do oczekiwania na CSSOM i wstrzymuje tworzenie DOM, co z kolei może znacznie opóźnić pierwsze renderowanie.

Preferuj zasoby asynchronicznego JavaScriptu

Zasoby asynchroniczne odblokowują parsowanie dokumentu i pozwalają przeglądarce uniknąć blokowania w CSSOM przed wykonaniem skryptu. Często jeśli skrypt może używać atrybutu async, oznacza to również, że nie jest on niezbędny podczas pierwszego renderowania. Rozważ asynchroniczne ładowanie skryptów po początkowym wyrenderowaniu.

Unikaj synchronicznych wywołań serwera

Użyj metody navigator.sendBeacon(), aby ograniczyć dane wysyłane przez XMLHttpRequests w unload modułów obsługi. Ponieważ wiele przeglądarek wymaga, aby takie żądania były asynchroniczne, mogą one spowolnić przełączanie stron, czasami w znacznym stopniu. Poniżej pokazuje, jak używać navigator.sendBeacon() do wysyłania danych na serwer w Moduł pagehide zamiast w module obsługi unload.

<script>
  function() {
    window.addEventListener('pagehide', logData, false);
    function logData() {
      navigator.sendBeacon(
        'https://putsreq.herokuapp.com/Dt7t2QzUkG18aDTMMcop',
        'Sent by a beacon!');
    }
  }();
</script>

Metoda fetch() zapewnia lepszy sposób asynchronicznego wysyłania żądań dotyczących danych. fetch() przetwarza odpowiedzi z użyciem obietnic, a nie wielu modułów obsługi zdarzeń. W przeciwieństwie do odpowiedzi na żądanie XMLHttpRequest odpowiedź fetch() jest obiektem strumienia. Oznacza to, że wywołanie funkcji json() zwraca również obietnicę.

<script>
  fetch('./api/some.json')
    .then(
      function(response) {
        if (response.status !== 200) {
          console.log('Looks like there was a problem. Status Code: ' +  response.status);
          return;
        }
        // Examine the text in the response
        response.json().then(function(data) {
          console.log(data);
        });
      }
    )
    .catch(function(err) {
      console.log('Fetch Error :-S', err);
    });
</script>

Metoda fetch() może również obsługiwać żądania POST.

<script>
  fetch(url, {
    method: 'post',
    headers: {
      "Content-type": "application/x-www-form-urlencoded; charset=UTF-8"
    },
    body: 'foo=bar&lorem=ipsum'
  }).then(function() { // Additional code });
</script>

Opóźnianie analizowania kodu JavaScript

Aby zminimalizować nakład pracy, jaki musi wykonać przeglądarka przy wyrenderowaniu strony, odłóż mniej ważne skrypty, które nie mają kluczowego znaczenia dla tworzenia widocznej treści podczas wstępnego renderowania.

Unikaj długotrwałego JavaScriptu

Długo działający kod JavaScript uniemożliwia przeglądarce tworzenie DOM, CSSOM i renderowanie strony, dlatego odłóż na później logikę inicjowania, która nie jest niezbędna do pierwszego renderowania. Jeśli sekwencja inicjalizacji jest długa, rozważ podzielenie jej na kilka etapów, aby umożliwić przeglądarce przetwarzanie innych zdarzeń.

Optymalizacja korzystania z kodu CSS

Do budowania drzewa renderowania potrzebny jest CSS, a kod JavaScript często blokuje kod CSS podczas początkowej budowy strony. Upewnij się, że wszystkie mniej ważne elementy CSS są oznaczone jako niekrytyczne (np. dla zapytań dotyczących plików drukowanych i innych multimediów), a ilość krytycznego kodu CSS i czas na jego dostarczenie są jak najkrótsze.

Umieść kod CSS w nagłówku dokumentu

Określ wszystkie zasoby CSS w dokumencie HTML jak najwcześniej, aby przeglądarka mogła wykryć tagi <link> i jak najszybciej wysłać żądanie CSS.

Unikaj importowania kodu CSS

Dyrektywa CSS import (@import) umożliwia jednemu arkuszowi stylów importowanie reguł z innego pliku. Unikaj jednak tych dyrektyw, ponieważ wprowadzają one dodatkowe powtórzenia ruchu na ścieżce krytycznej: zaimportowane zasoby CSS są wykrywane dopiero po odebraniu i przeanalizowaniu arkusza stylów CSS z samą regułą @import.

Wbudowany kod CSS blokujący renderowanie

Aby uzyskać najlepszą wydajność, możesz rozważyć wbudowanie kluczowych arkuszy stylów CSS bezpośrednio w dokument HTML. Pozwala to wyeliminować dodatkowe pętle na ścieżce krytycznej. Jeśli wszystko zostanie wykonane prawidłowo, można uzyskać ścieżkę krytyczną o długości „jednej pętli”, na której tylko kod HTML jest zasobem blokującym.

Prześlij opinię