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 zapewnić jak najkrótszy czas pierwszego renderowania, 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 JavaScript są domyślnie blokowane przez parser, chyba że są oznaczone jako async lub dodane za pomocą specjalnego fragmentu kodu JavaScript. Blokowanie przez parsera kodu JavaScript wymusza na przeglądarce oczekiwanie na CSSOM i wstrzymuje budowę DOM, co z kolei może znacznie opóźnić pierwsze renderowanie.
Preferuj zasoby asynchronicznego JavaScriptu
Zasoby asynchroniczne odblokowują parser dokumentów 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.
Unikanie synchronicznych wywołań serwera
Użyj metody navigator.sendBeacon(), aby ograniczyć dane wysyłane przez obiekty XMLHttpRequest w modułach obsługi unload. Wiele przeglądarek wymaga, by żądania były synchroniczne, więc mogą zauważalnie spowolnić przechodzenie między stronami. 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>
Nowa metoda fetch() ułatwia asynchroniczne żądania danych. Ponieważ funkcja wykrywania nie jest jeszcze dostępna w każdym miejscu, przed jej użyciem należy sprawdzić jej obecność. Ta metoda przetwarza odpowiedzi z obietnicami, a nie z wieloma modułami obsługi zdarzeń. W przeciwieństwie do odpowiedzi na żądanie XMLHttpRequest odpowiedź pobierania jest obiektem strumienia począwszy od Chrome 43. Oznacza to, że wywołanie funkcji json() zwróci też 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>
Wstrzymaj analizowanie 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 modelu DOM, CSSOM i renderowanie strony, więc odłóż tę logikę i funkcję inicjowania na później, aby nie były niezbędne przy pierwszym wyrenderowaniu. Jeśli musisz przeprowadzić długą sekwencję inicjowania, rozważ podzielenie jej na kilka etapów, aby przeglądarka mogła przetwarzać inne zdarzenia pomiędzy nimi.
Optymalizowanie wykorzystania 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. zapytania dotyczące treści drukowanych i innych multimediów), a ilość krytycznych CSS i czas na ich 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 z CSS
Dyrektywa CSS import (@import) umożliwia importowanie reguł z innego pliku arkusza stylów. Unikaj jednak tych dyrektyw, ponieważ powodują one wprowadzenie dodatkowych transferów w obie strony 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. Eliminuje to dodatkowe przesyłanie danych w obie strony na ścieżce krytycznej, a prawidłowe wykonanie tej procedury może zapewnić „jedną obietnicę” o długości krytycznej, gdy tylko kod HTML jest zasobem blokującym.