Reguły i zalecenia PageSpeed

Ilya Grigorik

Data publikacji: 17 sierpnia 2018 r.

W tym przewodniku omawiamy reguły PageSpeed Insights w kontekście: wyjaśniamy, na co zwracać uwagę podczas optymalizacji ścieżki renderowania krytycznego, i dlaczego.

Usuń kod JavaScript i CSS blokujący renderowanie

Aby skrócić czas pierwszego renderowania, zminimalizuj liczbę kluczowych zasobów na stronie i (w miarę możliwości) wyeliminuj je, zminimalizuj liczbę pobranych bajtów kluczowych i zoptymalizuj długość krytycznej ścieżki.

Optymalizowanie korzystania z 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 JavaScriptu asynchronicznego

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, że nie jest on niezbędny do pierwszego renderowania. Zalecamy ładowanie skryptów niesynchronicznie po początkowym renderowaniu.

Unikaj synchronicznych wywołań serwera

Aby ograniczyć dane wysyłane przez XMLHttpRequests w obsługach unload, użyj metody navigator.sendBeacon(). Ponieważ wiele przeglądarek wymaga, aby takie żądania były asynchroniczne, mogą one spowolnić przełączanie się między stronami, czasami w znacznym stopniu. Poniższy kod pokazuje, jak za pomocą funkcji navigator.sendBeacon() wysłać dane na serwer w obiekcie pagehide zamiast w obiekcie 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 za pomocą obietnic zamiast wielu obciążników zdarzeń. W przeciwieństwie do odpowiedzi na 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 też 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ć ilość pracy, jaką przeglądarka musi wykonać, aby wyrenderować stronę, opóźnij wczytywanie nieistotnych skryptów, które nie są niezbędne do tworzenia widocznych treści na potrzeby początkowego renderowania.

Unikaj długiego wykonywania kodu 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

Kod CSS jest potrzebny do tworzenia drzewa renderowania, a kod JavaScript często blokuje kod CSS podczas początkowej budowy strony. Upewnij się, że wszystkie nieistotne pliki CSS są oznaczone jako niekrytyczne (np. pliki z zapytaniami dotyczącymi mediów w wersji na potrzeby druku i innych), a ilość krytycznych plików CSS i czas ich wczytywania są jak najmniejsze.

Umieść kod CSS w nagłówku dokumentu

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

Unikaj importowania kodu CSS

Dyrektywa importu CSS (@import) umożliwia importowanie reguł z jednego pliku arkusza stylów do innego. Unikaj jednak tych dyrektyw, ponieważ wprowadzają one dodatkowe przejścia w ścieżce krytycznej: zaimportowane zasoby CSS są wykrywane dopiero po otrzymaniu i przetworzeniu arkusza stylów CSS z 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ę