Reguły i zalecenia PageSpeed

Ilya Grigorik

W tym przewodniku omawiamy reguły PageSpeed Insights w kontekście – na czym należy zwrócić uwagę podczas optymalizacji krytycznej ścieżki renderowania, i dlaczego.

Wyeliminuj blokujący renderowanie kod JavaScript i CSS

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

Optymalizowanie wykorzystania 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 w JavaScripcie wymusza na przeglądarce oczekiwanie na CSSOM i wstrzymuje konstrukcję DOM, co z kolei może znacznie opóźnić czas pierwszego renderowania.

Preferuj asynchroniczne zasoby JavaScript

Zasoby asynchroniczne odblokowują parser dokumentów i pozwalają przeglądarce uniknąć blokowania dostępu do CSSOM przed wykonaniem skryptu. Często, jeśli skrypt może używać atrybutu async, oznacza to również, że nie jest istotny przy pierwszym renderowaniu. Po wstępnym wyrenderowaniu rozważ asynchroniczne ładowanie skryptów.

Unikaj synchronicznych wywołań serwera

Metoda navigator.sendBeacon() pozwala ograniczyć ilość danych wysyłanych przez XMLHttpRequests w modułach obsługi unload. Wiele przeglądarek wymaga, aby żądania tego typu były zsynchronizowane, dlatego przejście między nimi może spowolnić przejście, czasem w sposób zauważalny. Poniższy kod pokazuje, jak za pomocą metody navigator.sendBeacon() wysyłać dane na serwer w module obsługi pagehide zamiast w module unload.

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

Nowa metoda fetch() zapewnia łatwy sposób asynchronicznego żądania danych. Funkcja ta nie jest jeszcze dostępna wszędzie, dlatego przed jej użyciem warto sprawdzić jej obecność za pomocą funkcji wykrywania funkcji. Ta metoda przetwarza odpowiedzi za pomocą obietnic, a nie za pomocą wielu modułów obsługi zdarzeń. W przeciwieństwie do żądania XMLHttpRequest odpowiedź pobierania jest obiektem strumienia, począwszy od Chrome 43. Oznacza to, że wywołanie funkcji json() również zwraca 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ć nakład pracy, jaki przeglądarka musi wykonać, aby wyrenderować stronę, odłóż pozostałe skrypty, które nie są niezbędne do utworzenia widocznej treści na potrzeby początkowego renderowania.

Unikaj długo działającego JavaScriptu

Długo działający kod JavaScript blokuje przeglądarce możliwość tworzenia DOM i CSSOM oraz renderowania strony, więc odkładaj na później wszystkie logiki i funkcje inicjowania, które nie są niezbędne przy pierwszym renderowaniu. Jeśli konieczna jest długa sekwencja inicjowania, rozważ podzielenie jej na kilka etapów, aby umożliwić przeglądarce przetwarzanie w ich trakcie innych zdarzeń.

Optymalizowanie wykorzystania CSS

CSS jest wymagany do zbudowania drzewa renderowania, a JavaScript często blokuje kod CSS w trakcie początkowej konstrukcji strony. Upewnij się, że wszystkie mniej ważne pliki CSS są oznaczone jako niekrytyczne (np. zapytania dotyczące drukowania i inne media), a liczba niezbędnych elementów CSS i czasu na ich dostarczanie jest jak najmniejsza.

Umieść kod CSS w nagłówku dokumentu

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

Unikaj importowania danych CSS

Dyrektywa importu CSS (@import) umożliwia jednemu arkuszowi importowanie reguł z innego pliku arkusza stylów. Unikaj jednak tych dyrektyw, ponieważ wprowadzają one dodatkowe cykle wymiany danych do ścieżki krytycznej: zaimportowane zasoby CSS są wykrywane dopiero po odebraniu i przeanalizowaniu arkusza stylów CSS zawierającego samą regułę @import.

Wbudowany kod CSS blokujący renderowanie

Aby uzyskać najlepsze wyniki, możesz wstawić najważniejsze elementy CSS bezpośrednio do dokumentu HTML. Eliminuje to dodatkowe przesyłanie danych w obie strony na ścieżce krytycznej, a jeśli zostanie wykonane poprawnie, może zapewnić „jedną cykliczną” długość ścieżki krytycznej, w której tylko kod HTML jest zasobem blokującym.

Prześlij opinię