Reguł spekulacyjnych można używać do wstępnego pobierania i renderowania stron nawigacyjnych na następnej stronie, jak opisano w poprzednim poście. Dzięki temu strona może wczytywać się znacznie szybciej – a nawet natychmiast – i znacznie poprawić podstawowe wskaźniki internetowe pod kątem dodatkowej nawigacji na stronie.
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ć do debugowania problemów standardowych opcji Narzędzi deweloperskich.
Zespół Chrome ciężko pracuje nad ulepszeniem obsługi debugowania reguł spekulacyjnych w Narzędziach deweloperskich. W tym poście omówimy wszystkie sposoby korzystania z tych narzędzi, aby zrozumieć reguły spekulacyjne na stronie, dlaczego mogą one nie działać i kiedy deweloperzy mogą korzystać z bardziej znanych opcji Narzędzi deweloperskich, a kiedy nie.
Wyjaśnienie terminu „przed” warunki
Jest wiele „przed mylących terminów, dlatego zaczniemy od wyjaśnienia następujących kwestii:
- Pobieranie z wyprzedzeniem: pobieranie zasobu lub dokumentu z wyprzedzeniem w celu zwiększenia 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. - Wstępne renderowanie: to krok poza pobieraniem z wyprzedzeniem i faktycznie renderuje całą stronę tak, jakby użytkownik mógł do niej przejść, ale pozostawia ją w ukrytym procesie renderowania w tle gotowym do użycia, gdy użytkownik faktycznie się tam otworzy. 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). - Spekulacje nawigacyjne: łączny termin nowych opcji pobierania z wyprzedzeniem i renderowania z wyprzedzeniem uruchamianych przez reguły spekulacyjne.
- Wstępne wczytanie: przeciążony termin, który może oznaczać szereg technologii i procesów, takich jak
<link rel="preload">, skaner wstępnego wczytywania i wstępne wczytywanie przez mechanizmy Service Worker. Nie będziemy tu omawiać tych kwestii, ale termin został uwzględniony, aby wyraźnie odróżnić je od „spekulacji 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 stronie poniższy kod JSON, tagi next.html i next2.html zostaną wstępnie pobrane:
<script type="speculationrules">
{
"prefetch": [
{
"source": "list",
"urls": ["next.html", "next2.html"]
}
]
}
</script>
Korzystanie z reguł spekulacyjnych do pobierania z wyprzedzeniem nawigacji ma pewne zalety w porównaniu ze starszą składnią <link rel="prefetch">, np. bardziej wyrazisty interfejs API i wyniki przechowywane w pamięci podręcznej pamięci zamiast w pamięci podręcznej dysku HTTP.
Debuguj reguły spekulacyjne typu 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 wstępnie pobrane zasoby, co widać w kolumnie Typ. Są one pobierane z priorytetem Lowest, ponieważ są stosowane na potrzeby przyszłej nawigacji, a Chrome nadaje priorytet zasobom bieżącej strony.
Kliknięcie jednego z wierszy powoduje też wyświetlenie nagłówka HTTP Sec-Purpose: prefetch, dzięki któremu można zidentyfikować te żądania po stronie serwera:
Debuguj interfejs prefetch za pomocą kart wczytywania spekulacyjnego
W sekcji Usługi w tle w panelu Aplikacja w Narzędziach deweloperskich w Chrome dodaliśmy nową sekcję Ładowanie spekulacyjne, która ma pomóc w debugowaniu reguł spekulacyjnych:
W tej sekcji dostępne są 3 karty:
- Wczytywanie spekulacyjne z informacją o wstępnie wyrenderowanym stanie bieżącej strony.
- Reguły – 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ł.
Karta Spekulacje widoczna na poprzednim zrzucie ekranu – jak widzimy, na tej przykładowej stronie znajduje się pojedynczy zestaw reguł spekulacyjnych do wstępnego wczytywania 3 stron. 2 z tych pobrań z wyprzedzeniem się udało, a 1 nie udało się. Kliknij ikonę obok opcji Zestaw reguł, aby przejść do źródła zestawu reguł w panelu Elementy. Możesz też kliknąć link Stan, aby przejść do karty Spekulacje przefiltrowanej zgodnie z tym zestawem reguł.
Na karcie Spekulacje znajdziesz wszystkie docelowe adresy URL, wraz z działaniem (wstępne pobieranie lub renderowanie wstępne), zestawem reguł, z którego pochodzą (ponieważ może być ich wiele na stronie) oraz stanem każdej spekulacji:
Za pomocą menu nad adresami URL można wyświetlić adresy URL ze wszystkich zestawów reguł lub tylko z konkretnego zestawu. Poniżej wymienione są wszystkie adresy URL. Po kliknięciu adresu URL uzyskasz bardziej szczegółowe informacje.
Na tym zrzucie ekranu widać przyczynę błędu strony next3.html (która nie istnieje i dlatego zwraca kod stanu HTTP inny niż 2xx).
Karta podsumowania Ładowania spekulacyjne zawiera raport Stan ładowania spekulacyjnego tej strony, który pokazuje, czy w przypadku tej strony użyto wstępnego pobierania lub renderowania z wyprzedzeniem.
W przypadku wstępnie wczytanej strony powinien pojawić się komunikat o udanym przeprowadzeniu operacji:
Niedopasowane spekulacje
Gdy nawigacja odbywa się ze strony z regułami spekulacyjnymi, która nie skutkuje użyciem wstępnego pobierania ani renderowania z wyprzedzeniem, w dodatkowej sekcji karty pojawią się szczegółowe informacje 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.
Na przykład doszliśmy do reguły next4.html, ale tylko next.html, next2.html lub next3.html to pobrania z wyprzedzeniem, więc widzimy, że ta wartość nie pasuje do żadnej z tych 3 reguł.
Karty Wczytywanie spekulacyjne są bardzo przydatne przy debugowaniu samych reguł spekulacyjnych i znajdowaniu błędów składni w pliku JSON.
Panel Sieć jest prawdopodobnie bardziej znany. W przypadku przykładowego niepowodzenia pobierania z wyprzedzeniem kod 404 dla pobierania z wyprzedzeniem jest widoczny tutaj:
Jednak karty Ładowania spekulacyjne stają się znacznie bardziej przydatne przy regułach spekulacyjnych renderowania wstępnego, które omówimy w dalszej części tego artykułu.
Reguły spekulacyjne dla prerender
Reguły spekulacji wstępnego renderowania mają tę samą składnię co reguły spekulacji pobierania z wyprzedzeniem. 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). Umożliwia to błyskawiczne wczytywanie, ale wiąże się z dodatkowymi kosztami zasobów.
W przeciwieństwie do pobierania z wyprzedzeniem nie są one widoczne w panelu Sieć, ponieważ są pobierane i renderowane w osobnym procesie renderowania w Chrome. Dzięki temu karty Ładowania spekulacyjne mają większe znaczenie przy debugowaniu reguł spekulacyjnych renderowania wstępnego.
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:
Widzimy, że nie udało się wstępnie wyrenderować jednego z 3 adresów URL, a deweloperzy mogą uzyskać szczegółowe informacje na temat każdego adresu URL na karcie Spekulacje, 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 linki z tego samego źródła linków na stronie, zamiast wyświetlać listę konkretnego 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ż renderowanie wstępne eagerness na moderate, co oznacza, że elementy nawigacyjne są wstępnie renderowane po najechaniu kursorem na link lub kliknięciu 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:
W Chrome ustalono limity renderowania wstępnego, w tym maksymalnie 2 z niecierpliwością moderate. Po najechaniu kursorem na trzeci link pokazujemy przyczynę niepowodzenia dla tego adresu URL:
Debuguj prerender z innymi panelami Narzędzi deweloperskich
W przeciwieństwie do pobierania z wyprzedzeniem strony, które zostały wyrenderowane z wyprzedzeniem, nie będą widoczne w bieżących procesach renderowania w panelach Narzędzi deweloperskich, takich jak panel Network, ponieważ są renderowane we własnym, zakulisowym mechanizmie renderowania.
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 adres URL w górnej części panelu i klikając Zbadaj:
To menu (i wybrana wartość) jest wspólne dla wszystkich pozostałych paneli, np. panelu Sieć, w którym widać, że żądana strona jest wstępnie renderowana:
Przeglądając nagłówki HTTP tych zasobów, widzimy, że wszystkie będą ustawione za pomocą nagłówka Sec-Purpose: prefetch;prerender:
lub w panelu Elements, gdzie widać zawartość strony – jak na zrzucie ekranu poniżej, gdzie element <h1> dotyczy wstępnie renderowanej strony:
W przeciwnym razie możesz skorzystać z panelu konsoli, w którym możesz zobaczyć logi konsoli wygenerowane przez wstępnie renderowaną stronę:
Debuguj reguły spekulacyjne na wstępnie renderowanej stronie
W poprzednich sekcjach opisano sposób debugowania wstępnie renderowanych stron na stronie, która inicjuje renderowanie wstępne. Możliwe jest jednak również, że same wstępnie renderowane strony mogą dostarczać dane 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ą o tym, czy została ona wstępnie wyrenderowana. Jeśli nie udało się wyrenderować wstępnie wyjaśnienia, dlaczego tak było:
Dodatkowo, tak jak w przypadku pobierania z wyprzedzeniem, nawigowanie ze strony z regułami spekulacyjnymi, które nie są zgodne z bieżącą stroną, spowoduje próbę sprawdzenia, dlaczego adresy URL nie pasują do reguł spekulacyjnych dotyczących poprzedniej strony na karcie Wczytywanie spekulacyjne:
Podsumowanie
W tym poście pokazaliśmy różne sposoby debugowania przez deweloperów reguł spekulacyjnych pobierania z wyprzedzeniem i renderowania z wyprzedzeniem. 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, aby zgłaszali problem w narzędziu do śledzenia problemów w Chrome w przypadku wszelkich zauważonych błędów i prośb o dodanie funkcji.
Podziękowania
Zdjęcie: Nubelson Fernandes na temat Unsplash.