Reguły spekulacyjne można wykorzystać do pobierania z wyprzedzeniem i wstępnego renderowania nawigacji po następnych stronach, jak opisano w poprzednim poście. Może to znacznie przyspieszyć wczytywanie stron, a nawet sprawić, że będzie ono natychmiastowe, co znacznie poprawi podstawowe wskaźniki internetowe w przypadku tych dodatkowych nawigacji po stronie.
Debugowanie reguł spekulacyjnych może być trudne. Dotyczy to zwłaszcza wstępnie wyrenderowanych stron, ponieważ są one renderowane w osobnym procesie renderowania – podobnie jak ukryta karta w tle, która po aktywowaniu zastępuje bieżącą kartę. Dlatego do rozwiązywania problemów nie zawsze można używać zwykłych opcji Narzędzi deweloperskich.
Zespół Chrome intensywnie pracował nad ulepszeniem obsługi narzędzi deweloperskich w zakresie debugowania reguł spekulacyjnych. Z tego posta dowiesz się, jak korzystać z tych narzędzi, aby poznać reguły spekulacji na stronie, dlaczego mogą one nie działać oraz kiedy deweloperzy mogą używać bardziej znanych opcji Narzędzi deweloperskich, a kiedy nie.
Wyjaśnienie terminów z przedrostkiem „pre-”
Istnieje wiele mylących terminów z przedrostkiem „pre-”, dlatego zaczniemy od ich wyjaśnienia:
- Pobieranie z wyprzedzeniem: pobieranie zasobu lub dokumentu z wyprzedzeniem w celu poprawy wydajności w przyszłości. W tym poście opisujemy wstępne pobieranie 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. - Wstępne renderowanie: to krok dalej niż wstępne pobieranie. Wstępne renderowanie polega na renderowaniu całej strony tak, jakby użytkownik do niej przeszedł, ale strona jest przechowywana w ukrytym procesie renderowania w tle i jest gotowa do użycia, jeśli użytkownik rzeczywiście do niej przejdzie. Ten dokument dotyczy nowszej wersji interfejsu Speculation Rules API, a nie starszej opcji
<link rel="prerender">(która nie wykonuje już pełnego wstępnego renderowania). - Nawigacja spekulacyjna: zbiorcze określenie nowych opcji wstępnego pobierania i wstępnego renderowania wywoływanych przez reguły spekulacji.
- Wcześniejsze załadowanie: termin o wielu znaczeniach, który może odnosić się do różnych technologii i procesów, w tym
<link rel="preload">, skanera wcześniejszego załadowania i wcześniejszego załadowania nawigacji w usłudze Service Worker. Nie będziemy się tu nimi zajmować, ale termin ten został uwzględniony, aby wyraźnie odróżnić go od terminu „nawigacja spekulacyjna”.
Reguły spekulacyjne dla konta prefetch
Reguły spekulacyjne mogą służyć do wstępnego pobierania dokumentu następnej nawigacji. Jeśli na przykład wstawisz na stronę ten kod JSON, wstępnie pobrane zostaną adresy URL next.html i next2.html:
<script type="speculationrules">
{
"prefetch": [
{
"source": "list",
"urls": ["next.html", "next2.html"],
"tag": "rule-set-tag-1"
}
]
}
</script>
Używanie reguł spekulacji do wstępnego pobierania nawigacyjnego ma pewne zalety w porównaniu ze starszą składnią <link rel="prefetch">, takie jak bardziej ekspresywny interfejs API i przechowywanie wyników w pamięci podręcznej zamiast w pamięci podręcznej dysku HTTP.
Debugowanie prefetch reguł spekulacyjnych
Pobieranie wstępne wywoływane przez reguły spekulacyjne można zobaczyć w panelu Sieć w taki sam sposób jak inne pobierania:
Dwa żądania wyróżnione na czerwono to wstępnie pobrane zasoby, co widać w kolumnie Typ. Są one pobierane z priorytetem Lowest, ponieważ dotyczą przyszłych nawigacji, a Chrome traktuje priorytetowo zasoby bieżącej strony.
Kliknięcie jednego z wierszy powoduje też wyświetlenie nagłówka HTTP Sec-Purpose: prefetch, który umożliwia identyfikację tych żądań po stronie serwera:
Debugowanie prefetch za pomocą kart ładowania spekulacyjnego
W panelu Aplikacja w narzędziach deweloperskich w Chrome dodaliśmy nową sekcję Spekulacyjne wczytywanie w sekcji Usługi w tle, aby ułatwić debugowanie reguł spekulacji:
W tej sekcji dostępne są 3 karty:
- Ładowanie spekulacyjne, które zawiera stan wstępnego renderowania bieżącej strony.
- Reguły, która zawiera listę wszystkich zestawów reguł znalezionych na bieżącej stronie, oznaczonych jako adresy URL lub tagi reguł (jeśli takie istnieją).
- Spekulacje, które zawierają listę wszystkich wstępnie pobranych i wstępnie wyrenderowanych adresów URL ze zbiorów reguł.
Na zrzucie ekranu powyżej widać kartę Spekulacje. Na tej przykładowej stronie jest jeden zestaw reguł spekulacji dotyczących wstępnego pobierania 3 stron. 2 z nich się powiodły, a 1 nie. Kliknięcie ikony obok Zestaw reguł spowoduje przejście do źródła zestawu reguł w panelu Elementy. Możesz też kliknąć link Stan, aby przejść do karty Spekulacje przefiltrowanej pod kątem tego zestawu reguł.
Na karcie Spekulacje znajdziesz listę wszystkich docelowych adresów URL wraz z działaniem (wstępne pobieranie lub wstępne renderowanie), zestawem reguł, z którego pochodzą (na stronie może być ich kilka), oraz stanem każdej spekulacji:
Nad adresami URL znajduje się menu, które umożliwia wyświetlanie adresów URL ze wszystkich zestawów reguł lub tylko z wybranego zestawu. Poniżej znajduje się lista wszystkich adresów 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, a więc zwraca kod stanu HTTP 404, czyli kod inny niż 2xx).
Na karcie podsumowania Ładowanie spekulacyjne znajduje się raport Stan ładowania spekulacyjnego tej strony, który pokazuje, czy w przypadku tej strony użyto pobierania z wyprzedzeniem lub wstępnego renderowania.
W przypadku strony pobranej z wyprzedzeniem po przejściu do niej powinien wyświetlić się komunikat o powodzeniu:
Niezrównane spekulacje
Gdy nawigacja następuje ze strony z regułami spekulacyjnymi, które nie powodują użycia pobierania z wyprzedzeniem ani wstępnego renderowania, w dodatkowej sekcji karty wyświetlane są szczegółowe informacje o tym, dlaczego adres URL nie pasuje do żadnego z adresów URL spekulacyjnych. Jest to przydatne do wykrywania błędów w regułach spekulacyjnych.
Na przykład w tym przypadku przeszliśmy do next4.html, ale tylko next.html, next2.html i next3.html są wstępnie pobierane, więc widzimy, że nie pasuje to do żadnej z tych 3 reguł.
Karty Spekulacyjne wczytywanie są bardzo przydatne do debugowania samych reguł spekulacji i wykrywania błędów składni w kodzie JSON.
Jeśli chodzi o same pobieranie z wyprzedzeniem, bardziej znanym miejscem jest prawdopodobnie panel Sieć. W przypadku błędu wstępnego pobierania możesz zobaczyć błąd 404 dotyczący wstępnego pobierania:
Karty Ładowania spekulacyjne stają się jednak znacznie bardziej przydatne w przypadku reguł spekulacyjnych renderowania wstępnego, które omówimy w dalszej części.
Reguły spekulacyjne dla konta prerender
Reguły spekulacyjne dotyczące wstępnego renderowania mają taką samą składnię jak reguły spekulacyjne dotyczące wstępnego pobierania. Na przykład:
<script type="speculationrules">
{
"prerender": [
{
"source": "list",
"urls": ["next.html", "next2.html"],
"tag": "rule-set-tag-1"
}
]
}
</script>
Ten zestaw reguł wywołuje pełne wczytanie i renderowanie określonych stron (z zastrzeżeniem pewnych ograniczeń). Może to zapewnić natychmiastowe wczytywanie, ale wiąże się z dodatkowymi kosztami zasobów.
W przeciwieństwie do wstępnego pobierania nie są one jednak widoczne w panelu Sieć, ponieważ są pobierane i renderowane w osobnym procesie renderowania w Chrome. Dzięki temu karty Spekulacyjne wczytywanie są ważniejsze w procesie debugowania reguł spekulacyjnego renderowania.
Debugowanie prerender za pomocą kart Ładowanie spekulacyjne
Tych samych ekranów Pobieranie spekulacyjne można używać w przypadku reguł spekulacyjnych wstępnego renderowania, co pokazano na podobnej stronie demonstracyjnej, która próbuje wstępnie renderować 3 strony zamiast pobierać je z wyprzedzeniem:
Widzimy tu ponownie, że jeden z 3 adresów URL nie został wstępnie wyrenderowany. Deweloperzy mogą uzyskać szczegółowe informacje o każdym adresie URL na karcie Spekulacje, klikając link 2 gotowe, 1 błąd.
W Chrome 121 wprowadziliśmy obsługę reguł dokumentów. Dzięki temu przeglądarka może pobierać te informacje z linków do tego samego pochodzenia na stronie, zamiast wyświetlać określony zestaw 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 kandydaci do wstępnego renderowania zostaną wybrane wszystkie linki do tej samej domeny z wyjątkiem tych, które zaczynają się od /not-safe-to-prerender.
Ustawia też wstępne renderowanie eagerness na moderate, co oznacza, że nawigacje są wstępnie renderowane po najechaniu kursorem na link (na komputerze), na podstawie obszaru wyświetlania (na urządzeniu mobilnym) lub po kliknięciu.
Podobne reguły znajdziesz na stronie demonstracyjnej reguł spekulacyjnych. Nowa sekcja Pobieranie spekulacyjne na tej stronie pokazuje przydatność tej nowej karty, ponieważ zawiera listę wszystkich kwalifikujących się adresów URL znalezionych przez przeglądarkę na stronie:
Stan to Nie wywołano, ponieważ proces wstępnego renderowania w przypadku tych stron się nie rozpoczął. Gdy jednak przesuwamy wskaźnik nad linkami, widzimy, jak zmienia się stan w miarę wstępnego renderowania poszczególnych adresów URL:
Chrome ma limity dotyczące wstępnego renderowania, w tym maksymalnie 2 wstępne renderowania w przypadku moderate eagerness, więc po najechaniu kursorem na 3 link widzimy przyczynę niepowodzenia dla tego adresu URL:
Debugowanie prerender za pomocą innych paneli Narzędzi deweloperskich
W przeciwieństwie do wstępnego pobierania wstępnie renderowane strony nie będą widoczne w bieżących procesach renderowania w panelach Narzędzi deweloperskich, takich jak panel Sieć, ponieważ są renderowane we własnym rendererze działającym w tle.
Możesz jednak zmienić moduł renderujący używany przez panele Narzędzi deweloperskich, korzystając z menu w prawym górnym rogu lub wybierając adres URL w górnej części panelu i klikając Sprawdź:
To menu (i wybrana wartość) jest wspólne dla wszystkich innych paneli, np. Sieć, w którym widać, że żądana strona jest wstępnie wyrenderowana:
W nagłówkach HTTP tych zasobów widać, że wszystkie będą miały ustawiony nagłówek Sec-Purpose: prefetch;prerender:
Możesz też otworzyć panel Elementy, w którym zobaczysz zawartość strony. Na zrzucie ekranu poniżej widać, że element <h1> dotyczy wstępnie wyrenderowanej strony:
lub w panelu konsoli, w którym możesz zobaczyć logi konsoli wygenerowane przez wstępnie renderowaną stronę:
Debugowanie reguł spekulacyjnych 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, że same wstępnie renderowane strony będą dostarczać informacje do debugowania, wykonując wywołania Analytics lub rejestrując dane w konsoli (którą można wyświetlić w sposób opisany w poprzedniej sekcji).
Gdy użytkownik przejdzie do wstępnie wyrenderowanej strony, na karcie Wczytywanie spekulacyjne pojawi się informacja o tym, czy strona została wstępnie wyrenderowana. Jeśli nie udało się wstępnie wyrenderować strony, podajemy wyjaśnienie:
Dodatkowo – podobnie jak w przypadku pobierania z wyprzedzeniem – przejście ze strony z regułami spekulacyjnymi, które nie pasują do bieżącej strony, spowoduje próbę wyświetlenia w karcie Spekulacyjne wczytywanie informacji o tym, dlaczego adresy URL nie pasują do tych, które są objęte regułami spekulacyjnymi poprzedniej strony:
Podsumowanie
W tym poście pokazaliśmy różne sposoby debugowania reguł spekulacyjnych dotyczących pobierania z wyprzedzeniem 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, które mogą być przydatne do debugowania tego nowego interfejsu API. Zachęcamy deweloperów do zgłaszania problemów w narzędziu do śledzenia problemów w Chrome w przypadku wszelkich próśb o dodanie funkcji lub wykrytych błędów.
Podziękowania
Miniatura autorstwa Nubelsona Fernandesa na Unsplash.