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.

Wyeliminuj blokujący renderowanie kod JavaScript i CSS

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 JavaScript są domyślnie blokowane przez parser, chyba że są oznaczone jako async lub dodane za pomocą specjalnego fragmentu kodu JavaScript. 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 umożliwiają przeglądarce uniknięcie blokowania w CSSOM przed wykonaniem skryptu. Jeśli skrypt może używać atrybutu async, często 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 znaczącym stopniu. Ten kod pokazuje, jak używać navigator.sendBeacon() do wysyłania danych na serwer w module obsługi 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 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>

Wstrzymaj analizowanie 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 zbudowania widocznych treści na potrzeby początkowego 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

CSS jest wymagany do tworzenia drzewa renderowania, a skrypt JavaScript często blokuje 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 najmniejsze.

Umieść kod CSS w nagłówku dokumentu

Wskazywanie wszystkich zasobów CSS jak najszybciej w dokumencie HTML, aby przeglądarka mogła jak najszybciej wykryć tagi <link> i wysłać żądanie do pliku CSS.

Unikaj importowania z 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ą odczytywane 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 umieścić najważniejszy kod CSS bezpośrednio w dokumencie HTML. Pozwala to wyeliminować dodatkowe ścieżki na ścieżce krytycznej. Jeśli wszystko zostanie wykonane prawidłowo, można uzyskać ścieżkę krytyczna o długości „jednego przejścia”, na której tylko kod HTML jest zasobem blokującym.

Prześlij opinię