Reguły spekulacyjne mogą być używane do wstępnego pobierania i renderowania nawigacji na następnej stronie, jak opisano w poprzednim poście. Przyspiesza to wczytywanie stron (lub nawet natychmiastowe), co znacznie poprawia podstawowe wskaźniki internetowe.
Debugowanie reguł spekulacyjnych może być trudne. Dotyczy to zwłaszcza wstępnie renderowanych stron, ponieważ są one renderowane w osobnym mechanizmie renderowania, na przykład jako 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 ulepszeniem obsługi narzędzi deweloperskich w zakresie debugowania reguł spekulacyjnych. W tym poście omówimy wszystkie sposoby korzystania z tych narzędzi, które pomogą Ci zrozumieć reguły spekulacyjne na stronie, powody, dla których mogą one nie działać, oraz sytuacje, w których deweloperzy mogą korzystać z bardziej znanych opcji Narzędzi deweloperskich, a gdy nie.
Wyjaśnienie warunków „pre-”
Istnieje wiele terminów poprzedzających powtarzanie, które można łatwo pomylić. Zacznijmy więc od wyjaśnienia tych terminów:
- Pobierz z wyprzedzeniem: pobieranie zasobu lub dokumentu z wyprzedzeniem w celu zwiększenia wydajności w przyszłości. Ten post dotyczy pobierania dokumentów z wyprzedzeniem za pomocą interfejsu Speculation Rules API, a nie podobnej, ale starszej opcji
<link rel="prefetch">, używanej do tego często. - Wstępne renderowanie: wykracza poza wstępne pobieranie i renderuje całą stronę tak, jakby użytkownik ją przeszedł, ale wciąż odbywa się w ukrytym procesie renderowania w tle gotowym do użycia, jeśli użytkownik faktycznie tam przejdzie. Ten dokument dotyczy nowszej wersji interfejsu Speculation Rules API, a nie starszej opcji
<link rel="prerender">(która nie umożliwia już pełnego renderowania wstępnego). - Spekulacje nawigacyjne: zbiorcza nazwa nowych opcji pobierania z wyprzedzeniem i wstępnego renderowania wywołanych przez reguły spekulacyjne.
- Wstępne wczytywanie: termin przeciążony, który może odnosić się do szeregu technologii i procesów, takich jak
<link rel="preload">, skaner wstępnego wczytywania i wstępne wczytywanie nawigacji przez mechanizmy Service Worker. Te kwestie nie zostaną tu omówione, jednak ten termin jest uwzględniony w celu wyraźnego odróżnienia ich od terminu „spekulacje nawigacyjne”.
Reguły spekulacyjne dla elementu prefetch
Reguły spekulacyjne mogą służyć do pobierania z wyprzedzeniem dokumentu następnej nawigacji. Gdy na przykład wstawisz na stronie ten kod JSON, z wyprzedzeniem zostaną pobrane pliki next.html i next2.html:
<script type="speculationrules">
{
"prefetch": [
{
"source": "list",
"urls": ["next.html", "next2.html"]
}
]
}
</script>
Korzystanie z reguł spekulacyjnych przy pobieraniu z wyprzedzeniem ma pewne zalety w porównaniu ze starszą składnią <link rel="prefetch">, na przykład bardziej wyrazisty interfejs API i wyniki przechowywane w pamięci podręcznej, a nie na dysku HTTP.
Debugowanie reguł spekulacyjnych prefetch
Pobieranie z wyprzedzeniem aktywowane przez reguły spekulacyjne można zobaczyć w panelu Sieć tak samo jak inne pobieranie:
Dwa żądania wyróżnione na czerwono to wstępnie pobrane zasoby, co jest widoczne w kolumnie Typ. Są one pobierane z priorytetem Lowest, ponieważ są używane podczas przyszłej nawigacji. Chrome traktuje priorytetowo zasoby bieżącej strony.
Kliknięcie jednego z wierszy spowoduje też wyświetlenie nagłówka HTTP Sec-Purpose: prefetch, dzięki któremu żądania będą identyfikowane po stronie serwera:
Debugowanie prefetch za pomocą kart ładowania spekulacyjnego
Aby ułatwić debugowanie reguł spekulacyjnych w sekcji Usługi w tle w panelu Aplikacja w Narzędziach deweloperskich w Chrome, dodaliśmy nową sekcję Ładowanie spekulacyjne:
W tej sekcji dostępne są 3 karty:
- Ładunki spekulacyjne, które wskazują stan wstępnego renderowania bieżącej strony.
- Reguły – lista wszystkich zestawów reguł znalezionych na bieżącej stronie.
- Spekulacje, które zawierają listę wszystkich wstępnie pobranych i wyrenderowanych adresów URL z zestawów reguł.
Karta Spekulacje jest widoczna na poprzednim zrzucie ekranu. Ta przykładowa strona zawiera jeden zestaw reguł spekulacyjnych do wczytywania z wyprzedzeniem 3 stron. Dwa pobieranie z wyprzedzeniem się powiodło, a 1 – niepowodzenie. Możesz kliknąć ikonę obok pozycji Zestaw reguł, aby przejść do źródła zestawu reguł w panelu Elementy. Możesz też kliknąć link Stan, aby przejść do karty Spekulacje odfiltrowanej według tego zestawu reguł.
Na karcie Spekulacje znajdziesz wszystkie docelowe adresy URL wraz z działaniem (pobieranie z wyprzedzeniem lub renderowaniem), z jakiego zestawu reguł pochodzą (na stronie może ich być wiele) oraz stan każdej spekulacji:
Nad adresami URL możesz użyć menu, aby wyświetlić adresy URL ze wszystkich zestawów reguł lub tylko z wybranego zestawu reguł. Poniżej znajdują się wszystkie adresy URL. Kliknięcie adresu URL spowoduje wyświetlenie bardziej szczegółowych informacji.
Na tym zrzucie ekranu widzimy przyczynę błędu strony next3.html (nie istnieje, a dlatego zwraca kod 404, który jest kodem stanu HTTP innym niż 2xx).
Karta podsumowania Ładowanie spekulacyjne zawiera raport Stan ładowania spekulacyjnego tej strony, który informuje, czy w przypadku tej strony użyto pobierania z wyprzedzeniem lub renderowania wstępnego.
W przypadku strony pobranej z wyprzedzeniem po otwarciu tej strony powinien pojawić się komunikat o udanym pobraniu:
Niedopasowane spekulacje
Jeśli nawigacja odbywa się ze strony z regułami spekulacyjnymi, które nie skutkują użyciem wstępnego pobierania ani renderowania, w dodatkowej sekcji karty znajdziesz więcej informacji o tym, dlaczego adres URL nie pasuje do żadnego z adresów URL spekulacyjnych. Przydaje się to do wykrywania literówek w regułach spekulacyjnych.
Przeszliśmy na przykład do elementu next4.html, ale tylko next.html, next2.html i next3.html są pobraniami z wyprzedzeniem, więc widzimy, że nie pasuje to do żadnej z tych 3 reguł.
Karty Ładowania spekulacyjne są bardzo przydatne podczas debugowania reguł spekulacyjnych i znajdowania błędów składni w pliku JSON.
Jeśli chodzi o same pobieranie z wyprzedzeniem, panel Sieć jest prawdopodobnie lepiej Ci znany. Jeśli chodzi o przykład błędu pobierania z wyprzedzeniem, kod 404 dotyczący tego pobierania znajdziesz tutaj:
Do wstępnego renderowania reguł spekulacyjnych przydają się jednak karty Ładowania spekulacyjne – o czym piszemy w dalszej części tego artykułu.
Reguły spekulacyjne dla elementu prerender
Reguły spekulacyjne dotyczące renderowania wstępnego mają taką samą składnię jak reguły spekulacyjne dla wstępnego pobierania. Na przykład:
<script type="speculationrules">
{
"prerender": [
{
"source": "list",
"urls": ["next.html", "next2.html"]
}
]
}
</script>
Ten zestaw reguł uruchamia pełne wczytanie i renderowanie określonych stron (z zastrzeżeniem pewnych ograniczeń). Może to zapewnić błyskawiczne wczytywanie, ale wiąże się to z dodatkowymi kosztami zasobów.
W przeciwieństwie do pobierania z wyprzedzeniem nie są one jednak widoczne w panelu Sieć, ponieważ są one pobierane i renderowane w osobnym procesie renderowania w Chrome. Dlatego karty Ładowanie spekulacyjne mają większe znaczenie przy debugowaniu reguł spekulacyjnych renderowania wstępnego.
Debugowanie prerender za pomocą kart ładowania spekulacyjnego
Do reguł spekulacyjnych renderowania z wyprzedzeniem można używać tych samych ekranów Ład spekulacyjnych, co pokazano na podobnej stronie demonstracyjnej, która próbuje wstępnie wyrenderować, zamiast z wyprzedzeniem pobierać 3 strony:
Tutaj ponownie widzimy, że jednego z 3 adresów URL nie udało się wstępnie wyrenderować, a deweloperzy mogą uzyskać szczegółowe informacje o danym adresie 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 będzie mogła pobierać linki z tego samego źródła na stronie, a nie wyświetlać konkretny 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 wybieramy wszystkie linki źródła z wyjątkiem tych rozpoczynających się od /not-safe-to-prerender jako kandydatów do wstępnego renderowania.
Ustawia też renderowanie wstępne eagerness na moderate, co oznacza, że elementy nawigacyjne są renderowane wstępnie po najechaniu kursorem na link lub kliknięciu go.
Podobne reguły obowiązują w tej witrynie demonstracyjnej, a korzystanie w niej z sekcji Ładowanie spekulacyjne pokazuje przydatność nowej karty, ponieważ zawiera listę wszystkich odpowiednich adresów URL znalezionych przez przeglądarkę na stronie:
Stan to Nie aktywowano, ponieważ proces wstępnego renderowania tych elementów jeszcze się nie rozpoczął. Gdy jednak najedziesz kursorem na linki, zauważysz zmianę stanu, ponieważ każdy URL jest już wyrenderowany wstępnie:
W Chrome zostało ustawione limity dotyczące renderowania wstępnego, w tym maksymalnie 2 renderowania wstępne dotyczące zainteresowania z użyciem moderate. Dlatego gdy najedziesz kursorem na 3 link, zobaczysz przyczynę niepowodzenia w przypadku tego adresu URL:
Debugowanie narzędzia prerender z innymi panelami Narzędzi deweloperskich
W przeciwieństwie do pobierania z wyprzedzeniem strony, które zostały wstępnie wyrenderowane, nie pojawiają się w bieżących procesach renderowania w panelach Narzędzi dla programistów, takich jak panel Sieć, ponieważ są renderowane we własnym mechanizmie renderowania zakulisowego.
Można jednak teraz zmienić mechanizm renderowania 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 Zbadaj:
To menu (i wybrana wartość) jest też wspólne dla wszystkich innych paneli, takich jak panel Sieć, gdzie widać, że żądana strona jest wstępnie wyrenderowana:
Patrząc na nagłówki HTTP tych zasobów, widzimy, że wszystkie mają nagłówek Sec-Purpose: prefetch;prerender:
Ewentualnie do panelu Elementy, gdzie widać zawartość strony, tak jak na zrzucie ekranu poniżej, na którym widać, że element <h1> dotyczy wstępnie renderowanej strony:
Ewentualnie w panelu konsoli, gdzie możesz wyświetlić logi konsoli generowane przez wstępnie renderowaną stronę:
Debugowanie reguł spekulacyjnych na wstępnie renderowanej stronie
W poprzednich sekcjach omówiliśmy debugowanie wstępnie wyrenderowanych stron na stronie, które inicjują renderowanie wstępne. Wstępnie renderowane strony mogą też jednak przekazywać informacje debugowania, wywołując funkcje analityczne lub logując się w konsoli (co jest dostępne w sposób opisany w poprzedniej sekcji).
Dodatkowo, gdy użytkownik, który ją wyrenderuje, aktywuje wstępnie wyrenderowaną stronę, ten stan będzie widoczny na karcie Ładowania spekulacyjne wraz z informacją o tym, czy udało się ją wyrenderować wstępnie. Jeśli nie można wyrenderować wstępnie, podaj powód tej sytuacji:
Dodatkowo – tak jak w przypadku pobierania z wyprzedzeniem – przejście ze strony zawierającej reguły spekulacyjne, które nie pasują do bieżącej strony, spowoduje próbę pokazania, dlaczego adresy URL nie odpowiadają tym z reguł spekulacyjnych na poprzedniej stronie na karcie Ładowania spekulacyjne:
Podsumowanie
W tym poście pokazaliśmy różne sposoby debugowania reguł pobierania z wyprzedzeniem i wstępnego renderowania przez deweloperów. Zespół nadal pracuje nad narzędziami dla reguł spekulacyjnych i chętnie poznamy sugestie deweloperów dotyczące innych sposobów debugowania tego ekscytującego nowego interfejsu API. Zachęcamy deweloperów do zgłaszania problemów w narzędziu Issue Tracker w przypadku próśb o dodanie funkcji lub zauważonych błędów.
Podziękowania
Zdjęcie Thumbail od Nubelsona Fernandesa w Unsplash.