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 szczególnie wstępnie renderowanych stron, ponieważ są one renderowane w osobnym mechanizmie renderowania – podobnie jak ukryta karta w tle, która po aktywowaniu zastępuje bieżącą kartę. Dlatego nie zawsze można używać standardowych opcji Narzędzi deweloperskich do debugowania problemów.
Zespół Chrome pracował nad ulepszeniami obsługi debugowania reguł spekulacji w Narzędziech deweloperskich. W tym artykule znajdziesz różne sposoby korzystania z 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. Ten post dotyczy wstępnego pobierania dokumentów za pomocą interfejsu Speculation Rules API, a nie podobnej, ale starszej opcji
<link rel="prefetch">, która jest często używana do wstępnego 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). - Przewidywania nawigacyjne: 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 wczytywania i wstępnego wczytywania nawigacji robota usługi. Te elementy nie są tutaj omawiane, ale termin jest uwzględniony, aby wyraźnie odróżnić je od „hipotez nawigacyjnych”.
Reguły spekulacyjne dla prefetch
Reguły spekulacyjne można wykorzystać do pobrania z wyprzedzeniem dokumentu następnej nawigacji. Jeśli 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 reguł spekulacyjnych prefetch
Pobieranie z wyprzedzeniem aktywowane przez reguły spekulacyjne można zobaczyć w panelu Sieć tak samo jak w przypadku innych pobrań:
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 umożliwia identyfikację tych żądań po stronie serwera:
Debugowanie prefetch za pomocą kart Ładowanie spekulacyjne
W sekcji Usługi w tle w panelu Aplikacja w Narzędziach deweloperskich w Chrome dodaliśmy nową sekcję Wczytywanie spekulacyjne, która ma pomóc w debugowaniu reguł spekulacyjnych:
W tej sekcji są 3 karty:
- Ładowanie spekulacyjne, które zawiera informacje o stanie wstępnie wyrenderowanej bieżącej strony.
- Reguły, na której znajduje się lista wszystkich zestawów reguł znalezionych na bieżącej stronie.
- Spekulacje obejmujące wszystkie wstępnie pobrane i wyrenderowane adresy 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ł się. Kliknięcie ikony obok zbioru reguł spowoduje przejście do źródła zbioru reguł w panelu Elementy. Możesz też kliknąć link Stan, aby otworzyć kartę Spory z odfiltrowanymi informacjami na temat tej reguły.
Na karcie Przypuszczenia znajdują się wszystkie docelowe adresy URL wraz z działaniem (pobieranie wstępne lub renderowanie wstępne), zestawem reguł, z którego pochodzą (na stronie może być ich kilka) oraz stanem każdego przypuszczenia:
Powyżej adresów URL znajduje się menu, w którym możesz wyświetlić adresy URL ze wszystkich zestawów reguł lub 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 Wstępne wczytywanie zawiera raport Stan wstępnego wczytywania tej strony, który pokazuje, czy na tej stronie użyto wstępnego wczytywania lub wstępnego renderowania.
W przypadku strony pobranej z wyprzedzeniem powinien wyświetlić się komunikat o powodzeniu, gdy użytkownik przejdzie na tę stronę:
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 przykładowego niepowodzenia pobierania z wyprzedzeniem kod 404 dla pobierania z wyprzedzeniem jest widoczny 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ł aktywuje pełne wczytanie i renderowanie określonych stron (z pewnymi ograniczeniami). 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ępne wczytywanie stają się ważniejsze w procesie debugowania reguł spekulacyjnych.
Debuguj interfejs prerender za pomocą kart wczytywania spekulacyjnego
W przypadku reguł spekulacyjnych renderowania z wyprzedzeniem można używać tych samych ekranów wczytywania spekulacyjnych, co przedstawiono w przypadku podobnej strony demonstracyjnej, która próbuje wyrenderować z wyprzedzeniem trzy strony:
Tutaj widzimy, że prerenderowanie jednego z 3 adresów URL zakończyło się niepowodzeniem. Deweloperzy mogą uzyskać szczegóły dotyczące poszczególnych adresów URL na karcie Próby, 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 pliki z linków na stronie o tym samym pochodzeniu 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 w renderowaniu wstępnym wybierane są wszystkie połączenia z tym samym punktem początkowym z wyjątkiem tych zaczynających 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.
Podobne reguły znajdują się na stronie demonstracyjnej reguł spekulacyjnych. Korzystanie z nowej sekcji Wczytywanie spekulacyjne pokazuje przydatność tej nowej karty, ponieważ wymienione są wszystkie odpowiednie adresy URL znalezione przez przeglądarkę na stronie:
Stan to Nie aktywowano, ponieważ proces renderowania wstępnego w przypadku tych zasobów jeszcze się nie rozpoczął. Gdy jednak najeżdżamy kursorem na linki, zmienia się ich stan w miarę wstępnego renderowania adresu URL:
Chrome ma określone limity wstępnego renderowania, w tym maksymalnie 2 wstępnie renderowane wersje dla moderate z uwzględnieniem szybkości, więc po najechaniu kursorem na 3 link widzimy przyczynę błędu w przypadku 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.
Obecnie można jednak przełączyć mechanizm renderowania używany w panelach Narzędzi deweloperskich, korzystając z menu w prawym górnym rogu lub wybierając URL w górnej części panelu i klikając 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 znajdziesz 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:
Debuguj reguły spekulacyjne na wstępnie renderowanej stronie
W poprzednich sekcjach opisaliśmy, jak debugować wstępnie renderowane strony na stronie, która inicjuje wstępne renderowanie. Możliwe jest jednak również, że same wstępnie renderowane strony mogą dostarczać informacje na potrzeby debugowania przez wywołanie analityki lub logowanie w konsoli (co można wyświetlić w sposób opisany w poprzedniej sekcji).
Dodatkowo, gdy użytkownik aktywuje wstępnie wyrenderowaną stronę, na karcie Ładowania spekulacyjne będzie widoczny ten stan z informacją, czy została ona wstępnie wyrenderowana. Jeśli nie udało się wyrenderować wstępnie wyjaśnienia, dlaczego tak było:
Dodatkowo – podobnie jak w przypadku pobierania z wyprzedzeniem – nawigacja ze 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. Zespół cały czas pracuje nad narzędziami do reguł spekulacyjnych i chętnie poznamy sugestie deweloperów na temat tego, jakie inne sposoby mogłyby pomóc w debugowaniu tego nowego 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.