Reguły spekulacji można wykorzystać do wstępnego pobierania i renderowania kolejnych stron, jak opisano w poprzednim poście. Może to umożliwić znacznie szybsze, a nawet natychmiastowe wczytywanie stron, co znacznie poprawi podstawowe wskaźniki internetowe w przypadku tych dodatkowych przejść między stronami.
Debugowanie reguł spekulacyjnych może być trudne. Dotyczy to zwłaszcza stron wstępnie wyrenderowanych, ponieważ są one renderowane w osobnym renderzerze – jest to jak ukryta karta w tle, która zastępuje bieżącą kartę po jej aktywacji. Dlatego nie zawsze można użyć standardowych opcji Narzędzi deweloperskich do debugowania problemów.
Zespół Chrome pracował nad ulepszeniami obsługi debugowania reguł spekulacji w Narzędziech deweloperskich. Z tego artykułu dowiesz się, jak używać tych narzędzi, aby zrozumieć reguły spekulacji strony, dlaczego mogą one nie działać oraz kiedy deweloperzy mogą korzystać z bardziej znanych opcji DevTools, a kiedy nie.
Wyjaśnienie terminów „wcześniej”
Istnieje wiele niejasnych terminów, dlatego zacznijmy od wyjaśnienia tych:
- Pobieranie z wyprzedzeniem: pobieranie zasobu lub dokumentu z wyprzedzeniem w celu poprawy wydajności w przyszłości. W tym poście omówiliśmy pobieranie dokumentów w ramach wstępnego pobierania za pomocą interfejsu Speculation Rules API, a nie podobnej, ale starszej opcji
<link rel="prefetch">, która jest często używana do pobierania zasobów podrzędnych. - Przedrenderowanie: to coś więcej niż wstępna pamięć podręczna. Polega ono na renderowaniu całej strony tak, jakby użytkownik na nią przeszedł, ale zachowuje ją w ukrytym procesie renderowania w tle, aby można było z niej skorzystać, gdy użytkownik ją otworzy. Ten dokument dotyczy nowszej wersji interfejsu Speculation Rules API, a nie starszej opcji
<link rel="prerender">(która nie wykonuje już pełnego prerenderowania). - Nawigacje spekulatywne: zbiorcze określenie nowych opcji wstępnego pobierania i renderowania, które są wywoływane przez reguły spekulacji.
- Wstępnie wczytywanie: termin, który może odnosić się do wielu technologii i procesów, w tym
<link rel="preload">, skanera wstępnego oraz wstępnego wczytania nawigacji robota usługi. Te elementy nie są tutaj omawiane, ale termin ten został uwzględniony, aby wyraźnie odróżnić je od „niepewności nawigacyjnej”.
Reguły spekulacyjne dotyczące prefetch
Reguły spekulacyjne można stosować do wstępnego pobierania dokumentu następnej nawigacji. Gdy na przykład wstawisz na stronę następujący kod JSON, elementy next.html i next2.html zostaną pobrane z poziomu pamięci podręcznej:
<script type="speculationrules">
{
"prefetch": [
{
"source": "list",
"urls": ["next.html", "next2.html"]
}
]
}
</script>
Stosowanie reguł spekulacji w przypadku wstępnego pobierania nawigacji ma pewne zalety w porównaniu ze starszą składnią <link rel="prefetch">, np. bardziej rozbudowany interfejs API i przechowywanie wyników w pamięci podręcznej zamiast w pamięci podręcznej dysku HTTP.
Debugowanie prefetch reguł spekulacyjnych
W panelu Sieć można zobaczyć wczytywanie w tle wywołane przez reguły spekulacji w taki sam sposób jak inne wczytywania:
Dwa żądania wyróżnione na czerwono to zasoby pobrane wcześniej, co widać w kolumnie Typ. Są one pobierane z priorytetem Lowest, ponieważ są przeznaczone do przyszłych nawigacji, a Chrome stawia na pierwszym miejscu zasoby bieżącej strony.
Po kliknięciu jednego z wierszy wyświetli się też nagłówek HTTP Sec-Purpose: prefetch, który pozwala na identyfikację tych żądań po stronie serwera:
Debugowanie prefetch za pomocą kart Ładowanie spekulacyjne
W panelu Aplikacja w Narzędziach deweloperskich Chrome dodano nową sekcję Wstępne wczytywanie w sekcji Usługi w tle, aby ułatwić debugowanie reguł spekulacji:
W tej sekcji są 3 karty:
- Ładowanie spekulacyjne, które zawiera informacje o stanie wstępnie wyrenderowanej bieżącej strony.
- Reguły – lista wszystkich zestawów reguł znalezionych na bieżącej stronie.
- Przewidywania, które zawiera listę wszystkich wstępnie pobieranych i wstępnie renderowanych adresów URL z zestawów reguł.
Na poprzednim zrzucie ekranu widać kartę Przewidywania. Widać na niej, że ta przykładowa strona ma jeden zestaw reguł przewidywania, który służy do wstępnego pobierania 3 stron. Dwa z nich zakończyły się sukcesem, a jeden nie powiódł. Kliknięcie ikony obok Zestawu reguł spowoduje przejście do źródła zestawu reguł w panelu Elementy. Możesz też kliknąć link Stan, aby otworzyć kartę Spory z filtrem według tych reguł.
Na karcie Przypuszczenia znajdują się wszystkie docelowe adresy URL wraz z działaniem (pobieranie wstępne lub prerenderowanie), zestawem reguł, z którego pochodzą (na stronie może być ich kilka) oraz stanem każdego przypuszczenia:
Nad adresami URL znajduje się menu, w którym możesz wybrać, czy mają być wyświetlane adresy URL ze wszystkich zestawów reguł, czy tylko z określonego zestawu reguł. Poniżej znajdują się wszystkie adresy URL. Kliknięcie adresu URL spowoduje wyświetlenie bardziej szczegółowych informacji.
Na tym zrzucie ekranu widać przyczynę niepowodzenia w przypadku strony next3.html (która nie istnieje i dlatego zwraca kod stanu 404, czyli kod stanu HTTP inny niż 2xx).
Karta podsumowania Ładowanie spekulacyjne zawiera raport Stan ładowania spekulacyjnego tej strony, który pokazuje, czy na tej stronie użyto wstępnego wczytania lub wstępnego renderowania.
W przypadku strony pobranej z wyprzedzeniem powinien wyświetlić się komunikat o udanym przekierowaniu:
Niedopasowane spekulacje
Gdy nastąpi przejście z strony z regułami spekulacyjnymi, które nie powoduje użycia pobierania z wyprzedzeniem ani prerenderowania, na dodatkowej sekcji karty pojawią się szczegółowe informacje o tym, dlaczego adres URL nie pasuje do żadnego z adresów URL spekulacyjnych. Jest to przydatne do wykrywania literówek w regułach spekulacyjnych.
Na przykład tutaj otworzyliśmy stronę next4.html, ale tylko next.html, next2.html lub next3.html są z wyprzedzeniem, więc widzimy, że ta strona nie pasuje do żadnej z tych 3 reguł.
Karty Załadowania spekulatywne są bardzo przydatne do debugowania samych reguł spekulatywnych i wyszukiwania błędów składni w pliku JSON.
Jeśli chodzi o wstępne pobieranie, prawdopodobnie bardziej znany jest panel Sieć. W przypadku błędu pobierania wstępnego możesz zobaczyć błąd 404 dla pobierania wstępnego tutaj:
Jednak karty Ładowania spekulacyjne są znacznie bardziej przydatne do renderowania wstępnego reguł spekulacyjnych, o których mowa w następnym rozdziale.
Reguły spekulacyjne dotyczące prerender
Reguły spekulacyjne dotyczące wstępnego renderowania mają tę samą składnię co reguły spekulacyjne dotyczące wstępnego pobierania. Na przykład:
<script type="speculationrules">
{
"prerender": [
{
"source": "list",
"urls": ["next.html", "next2.html"]
}
]
}
</script>
Ten zestaw reguł powoduje pełne załadowanie i renderowanie określonych stron (z zastrzeżeniem pewnych ograniczeń). Dzięki temu strony wczytują się błyskawicznie, ale kosztuje to dodatkowe zasoby.
W przeciwieństwie do wstępnego pobierania te dane nie są widoczne w panelu Sieć, ponieważ są pobierane i renderowane w ramach osobnego procesu renderowania w Chrome. W rezultacie karty Wstępny wczyt z użyciem spekulacji stają się ważniejsze w procesie debugowania reguł spekulacji.
Debugowanie prerender za pomocą kart Ładowanie spekulacyjne
Te same ekrany wstępnego wczytywania można wykorzystać do reguł spekulacji wstępnego renderowania, jak pokazano na podobnej stronie demonstracyjnej, która próbuje wstępnie renderować zamiast pobierać wstępne dane o 3 stronach:
Tutaj widzimy, że prerenderowanie jednego z 3 adresów URL zakończyło się niepowodzeniem. Deweloperzy mogą uzyskać szczegóły dotyczące adresu URL na karcie Przewidywania, klikając link 2 gotowe, 1 niepowodzenie.
W Chrome 121 wprowadziliśmy obsługę reguł dokumentów. Dzięki temu przeglądarka może pobrać te informacje z linków z tego samego pochodzenia na stronie zamiast z wybranego zestawu adresów URL:
<script type="speculationrules">
{
"prerender": [
{
"source": "document",
"where": {
"and": [
{"href_matches": "/*"},
{"not": { "href_matches": "/not-safe-to-prerender/*"}}
]
},
"eagerness": "moderate"
}
]
}
</script>
W tym przykładzie jako kandydatów do wstępnego renderowania wybrano wszystkie linki z tego samego źródła, z wyjątkiem tych, które zaczynają się od /not-safe-to-prerender.
Ustawia też wartość wstępnie renderowania eagerness na moderate, co oznacza, że elementy nawigacyjne są wstępnie renderowane, gdy najedziesz kursorem na link lub klikniesz go.
Na stronie demonstracyjnej reguł spekulatywnych znajdują się podobne reguły. Korzystanie z nowej sekcji Wczytywanie spekulatywne pokazuje przydatność tej nowej karty, ponieważ zawiera ona listę wszystkich adresów URL znalezionych na stronie:
Stan to Nie rozpoczęto, ponieważ proces wstępnego renderowania nie został uruchomiony. Gdy jednak najedziemy kursorem na linki, zobaczymy, że stan zmienia się, gdy każdy adres URL jest renderowany wstępnie:
Chrome ma określone limity wstępnego renderowania, w tym maksymalnie 2 wstępnie renderowane wersje dla moderate z uwzględnieniem dostępności, więc po najechaniu kursorem na 3 link widzimy przyczynę błędu dla tego adresu URL:
Debugowanie prerender za pomocą innych paneli w Narzędziach deweloperskich
W przeciwieństwie do stron z wstępnym renderowaniem strony, które zostały wstępnie wyrenderowane, nie będą się pojawiać w bieżących procesach renderowania w panelach DevTools, takich jak panel Sieć, ponieważ są renderowane w ramach własnego renderowania w tle.
Teraz możesz jednak przełączyć renderowanie używane przez panele Narzędzi deweloperskich za pomocą menu w prawym górnym rogu lub przez wybranie adresu URL w górnej części panelu i kliknięcie Zbadaj:
Ten menu (i wybrana wartość) jest udostępniany we wszystkich pozostałych panelach, np. w panelu Sieć, gdzie możesz zobaczyć, że żądana strona jest wstępnie wyrenderowana:
Przyjrzymy się nagłówkom HTTP tych zasobów. Wszystkie mają nagłówek Sec-Purpose: prefetch;prerender:
Możesz też użyć panelu Elementy, w którym możesz zobaczyć zawartość strony. Na poniższym zrzucie ekranu element <h1> dotyczy strony wyrenderowanej wstępnie:
Możesz też otworzyć panel konsoli, aby sprawdzić loga konsoli wygenerowane przez stronę z wstępnym wyrenderowaniem:
Debugowanie reguł spekulacyjnych na stronie z przedrenderowaniem
W poprzednich sekcjach opisaliśmy, jak debugować wstępnie renderowane strony na stronie, która inicjuje wstępne renderowanie. Możliwe jest jednak, że informacje debugowania są dostarczane przez same strony wstępnie wyrenderowane, np. przez wywołania funkcji analitycznych lub rejestrowanie w konsoli (które można wyświetlić w sposób opisany w poprzedniej sekcji).
Dodatkowo, gdy użytkownik przejdzie na stronę z zabezpieczeniem przed przedwczesnym wczytaniem, na karcie Wczytywanie spekulatywne pojawi się stan tej strony oraz informacja, czy została ona z zabezpieczeniem przed przedwczesnym wczytaniem czy nie. Jeśli nie udało się przerenderować obrazu w ramach prerenderowania, podajemy wyjaśnienie, dlaczego tak się stało:
Dodatkowo – tak jak w przypadku pobierania z wyprzedzeniem – przechodzenie z strony z regułami spekulacyjnymi, które nie pasują do bieżącej strony, spowoduje wyświetlenie na karcie Pobieranie spekulacyjne informacji o tym, dlaczego adresy URL nie pasują do adresów objętych regułami spekulacyjnymi poprzedniej strony:
Podsumowanie
W tym poście pokazaliśmy różne sposoby, dzięki którym deweloperzy mogą debugować reguły spekulacji dotyczącej wstępnego pobierania i wstępnego renderowania. Nasz zespół nadal pracuje nad narzędziami do obsługi reguł spekulacji. Chętnie poznamy sugestie deweloperów dotyczące innych sposobów na debugowanie tego nowego, ekscytującego interfejsu API. Zachęcamy deweloperów do zgłaszania problemów w śledzeniu problemów z Chrome, jeśli chcą zgłosić prośbę o dodanie nowej funkcji lub poinformować o wykrytym błędzie.
Podziękowania
Miniatura autorstwa Nubelson Fernandes z Unsplash.