Reguły spekulacyjne mogą służyć do pobierania z wyprzedzeniem i wstępnego renderowania nawigacji po kolejnych stronach, jak opisano w poprzednim poście. Może to znacznie przyspieszyć, a nawet umożliwić natychmiastowe wczytywanie stron, co znacznie poprawia Core Web Vitals w przypadku tych dodatkowych nawigacji na stronie.
Debugowanie reguł spekulacyjnych może być trudne. Dotyczy to zwłaszcza stron renderowanych wstępnie, ponieważ są one renderowane w osobnym module renderującym – przypomina to ukrytą kartę działającą w tle, która po aktywacji zastępuje bieżącą kartę. Dlatego nie zawsze można używać zwykłych opcji Narzędzi deweloperskich do debugowania problemów.
Zespół Chrome intensywnie pracuje nad ulepszeniem obsługi reguł spekulacyjnych w Narzędziach deweloperskich. W tym poście przedstawimy różne sposoby korzystania z tych narzędzi, aby zrozumieć reguły spekulacji strony, dlaczego mogą nie działać i kiedy deweloperzy mogą używać bardziej znanych opcji Narzędzi deweloperskich, a kiedy nie.
Wyjaśnienie terminów z przedrostkiem „pre-”
Istnieje wiele terminów z przedrostkiem „pre-”, które mogą być mylące, dlatego zaczniemy od ich wyjaśnienia:
- Pobieranie z wyprzedzeniem: pobieranie zasobu lub dokumentu z wyprzedzeniem w celu poprawy wydajności w przyszłości. Ten post dotyczy pobierania wstępnego 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 pobierania wstępnego zasobów podrzędnych. - Renderowanie wstępne: to krok dalej niż pobieranie wstępne. Polega na wyrenderowaniu całej strony, tak jakby użytkownik do niej przeszedł, ale zachowaniu jej w ukrytym procesie renderowania w tle, gotowej do użycia, gdy 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 renderowania wstępnego). - Nawigacja spekulatywna: zbiorcze określenie nowych opcji pobierania wstępnego i renderowania wstępnego, które są wywoływane przez reguły spekulatywne.
- Wstępne załadowanie: termin o wielu znaczeniach, który może odnosić się do wielu technologii i procesów, w tym
<link rel="preload">, skanera wstępnego załadowania i wstępnego załadowania nawigacji przez skrypt service worker. Nie będziemy ich tutaj omawiać, ale uwzględniliśmy ten termin, aby wyraźnie odróżnić je od „nawigacji spekulacyjnych”.
Reguły spekulacyjne dla: prefetch
Reguły spekulacyjne mogą służyć do wstępnego pobierania dokumentu następnej nawigacji. Jeśli na przykład wstawisz na stronie ten kod JSON, wstępnie pobrane zostaną adresy 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 nawigacji ma pewne zalety w porównaniu ze starszą składnią <link rel="prefetch">, takie jak bardziej ekspresyjny interfejs API i wyniki przechowywane w pamięci podręcznej pamięci RAM, a nie w pamięci podręcznej na dysku HTTP.
Debugowanie reguł spekulacyjnych prefetch
Pobieranie wstępne wywołane przez reguły spekulacyjne można zobaczyć w panelu Sieć w taki sam sposób jak inne pobrania:
Dwa żądania wyróżnione na czerwono to wstępnie pobrane zasoby, co widać w kolumnie Typ. Są one pobierane z priorytetem Lowest, ponieważ są przeznaczone do 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 identyfikowanie tych żądań po stronie serwera:
Debugowanie prefetch za pomocą kart ładowania spekulacyjnego
W panelu Aplikacja w Narzędziach deweloperskich w Chrome, w sekcji Usługi w tle, dodaliśmy nową sekcję Ładowanie spekulatywne, która ułatwia debugowanie reguł spekulacyjnych:
W tej sekcji dostępne są 3 karty:
- Ładowanie spekulacyjne, które zawiera stan renderowania wstępnego bieżącej strony.
- Reguły, które zawierają listę wszystkich zestawów reguł znalezionych na bieżącej stronie, oznaczonych jako adresy URL lub tagi reguł (jeśli występują).
- Spekulacje, która zawiera listę wszystkich wstępnie pobranych i wyrenderowanych adresów URL z zestawów reguł.
Na poprzednim zrzucie ekranu widać kartę Spekulacje. Możemy zobaczyć, że ta przykładowa strona ma jeden zestaw reguł spekulacyjnych dotyczących pobierania z wyprzedzeniem 3 stron. Dwa z nich się powiodły, a jeden nie. Możesz kliknąć ikonę obok Zestawu reguł, aby przejść do źródła zestawu reguł w panelu Elementy. Możesz też kliknąć link Stan, aby przejść do karty Spekulacje przefiltrowanej według tego zestawu reguł.
Na karcie Speculations (Spekulacje) znajdziesz listę wszystkich docelowych adresów URL wraz z działaniem (pobieranie wstępne lub renderowanie wstępne), zestawem reguł, z którego pochodzą (ponieważ na stronie może być ich kilka), oraz stanem każdej spekulacji:
Nad adresami URL znajduje się menu, za pomocą którego można wyświetlić adresy URL ze wszystkich zestawów reguł lub tylko z określonego zestawu reguł. 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, więc zwraca kod 404, czyli kod stanu HTTP 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 renderowania wstępnego.
W przypadku strony pobranej z wyprzedzeniem po przejściu na nią powinien wyświetlić się komunikat o powodzeniu:
Niezrównane spekulacje
Jeśli nawigacja następuje ze strony z regułami spekulacyjnymi, która nie powoduje pobierania z wyprzedzeniem ani renderowania wstępnego, w dodatkowej sekcji karty wyświetlą się szczegółowe informacje o tym, dlaczego adres URL nie pasował do żadnego z adresów URL spekulacji. Jest to przydatne do wykrywania literówek w regułach spekulacyjnych.
Na przykład tutaj przeszliśmy do next4.html, ale tylko next.html, next2.html lub next3.html są pobierane z wyprzedzeniem, więc widzimy, że nie pasuje to do żadnej z tych 3 reguł.
Karty Ładowanie spekulatywne są bardzo przydatne do debugowania samych reguł spekulacji i znajdowania błędów składni w kodzie JSON.
Jeśli chodzi o same pobrania wstępne, panel Sieć jest prawdopodobnie bardziej znanym miejscem. W przypadku błędu pobierania wstępnego możesz zobaczyć błąd 404:
Karty Ładowanie spekulacyjne są jednak znacznie bardziej przydatne w przypadku reguł spekulacyjnych renderowania wstępnego, które omówimy w następnej sekcji.
Reguły spekulacyjne dla: prerender
Reguły spekulacyjne renderowania wstępnego mają taką samą składnię jak reguły spekulacyjne pobierania wstępnego. Na przykład:
<script type="speculationrules">
{
"prerender": [
{
"source": "list",
"urls": ["next.html", "next2.html"],
"tag": "rule-set-tag-1"
}
]
}
</script>
Ten zestaw reguł powoduje pełne wczytanie i wyrenderowanie 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 pobierania wstępnego nie są one jednak widoczne w panelu Sieć, ponieważ są pobierane i renderowane w osobnym procesie renderowania w Chrome. Dzięki temu karty Wczytywanie spekulatywne są ważniejsze do debugowania reguł spekulacyjnych renderowania wstępnego.
Debugowanie prerender za pomocą kart ładowania spekulacyjnego
Te same ekrany Wczytywanie spekulacyjne mogą być używane w przypadku reguł spekulacyjnych renderowania wstępnego, jak pokazano na podobnej stronie demonstracyjnej, która próbuje renderować wstępnie, a nie pobierać z wyprzedzeniem 3 strony:
Widzimy, ż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 Speculations (Spekulacje), klikając link 2 Ready, 1 Failure (2 gotowe, 1 niepowodzenie).
W Chrome 121 wprowadziliśmy obsługę reguł dokumentów. Dzięki temu przeglądarka może pobierać te informacje z linków o tym samym pochodzeniu na stronie, zamiast wyświetlać listę konkretnych 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 renderowania wstępnego są wybierane wszystkie linki z tego samego źródła, z wyjątkiem tych, które zaczynają się od /not-safe-to-prerender.
Ustawia też wstępne renderowanie eagerness na moderate, co oznacza, że nawigacja jest renderowana wstępnie, gdy link zostanie najechany (na komputerze), na podstawie widocznego obszaru (na urządzeniu mobilnym) lub kliknięty.
Podobne reguły znajdziesz na demonstracyjnej stronie reguł spekulacyjnych. Nowa sekcja Ładowanie 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 uruchomiono, ponieważ proces renderowania wstępnego nie został rozpoczęty. Gdy jednak najedziemy kursorem na linki, zobaczymy, że stan zmienia się, gdy każdy adres URL jest wstępnie renderowany:
Chrome ma limity renderowania wstępnego, w tym maksymalnie 2 renderowania wstępne w przypadku ustawienia moderate. Po najechaniu kursorem na trzeci link widzimy przyczynę niepowodzenia dla tego adresu URL:
Debugowanie prerender za pomocą innych paneli Narzędzi deweloperskich
W odróżnieniu od stron pobranych wstępnie strony, które zostały wyrenderowane wstępnie, nie będą widoczne w bieżących procesach renderowania w panelach Narzędzi deweloperskich, takich jak panel Sieć, ponieważ są renderowane w osobnym procesie renderowania w tle.
Teraz można jednak przełączyć mechanizm renderowania używany przez panele Narzędzi deweloperskich za pomocą menu w prawym górnym rogu lub wybierając URL w górnej części panelu i klikając Zbadaj:
To menu (i wybrana wartość) jest też udostępniane we wszystkich innych panelach, np. w panelu Sieć, w którym widać, że żądana strona jest wstępnie wyrenderowana:
Jeśli spojrzymy na nagłówki HTTP tych zasobów, zobaczymy, że wszystkie będą miały nagłówek Sec-Purpose: prefetch;prerender:
Możesz też użyć panelu Elementy, w którym możesz zobaczyć zawartość strony, jak na tym zrzucie ekranu, gdzie widać element <h1> wyrenderowanej wstępnie strony:
Możesz też otworzyć panel Konsola, w którym znajdziesz logi konsoli wygenerowane przez wstępnie wyrenderowaną 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 renderowanie wstępne. Możliwe jest jednak również, że same wstępnie renderowane strony będą dostarczać informacje na potrzeby debugowania, wykonując wywołania analityczne lub rejestrując dane w konsoli (którą można wyświetlić w sposób opisany w poprzedniej sekcji).
Dodatkowo, gdy użytkownik aktywuje wstępnie wyrenderowaną stronę, przechodząc na nią, na karcie Speculative loads (Wczytywanie spekulatywne) pojawi się ten stan oraz informacja o tym, czy strona została wstępnie wyrenderowana. Jeśli nie udało się przeprowadzić renderowania wstępnego, podane jest wyjaśnienie, dlaczego tak się stało:
Dodatkowo – podobnie jak w przypadku pobierania z wyprzedzeniem – jeśli przejdziesz ze strony z regułami spekulacyjnymi, które nie pasują do bieżącej strony, na karcie Ładowanie spekulacyjne spróbujemy pokazać, 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 renderowania wstępnego. Nasz zespół nadal pracuje nad narzędziami do obsługi reguł spekulacji. Chętnie poznamy sugestie deweloperów dotyczące innych sposobów debugowania tego nowego interfejsu API. Zachęcamy deweloperów do zgłaszania próśb o dodanie funkcji i wykrytych błędów w narzędziu Issue Tracker w Chrome.
Podziękowania
Miniatura: Nubelson Fernandes, Unsplash.