Jednym z najskuteczniejszych sposobów na skrócenie czasu wczytywania strony dla użytkowników poruszających się po witrynie jest rozpoczęcie wczytywania kolejnej strony, którą mają zamiar odwiedzić, zanim na nią wejdą. Można to zrobić za pomocą techniki zwanej ładowaniem spekulatywnym, która wykorzystuje interfejs Speculation Rules API.
Jak to działa
Wczytywanie spekulatywne działa na podstawie reguł spekulacyjnych opartych na formacie JSON, które informują przeglądarkę o linkach, które można pobrać z wyprzedzeniem lub wstępnie wyrenderować, aby przyspieszyć wczytywanie strony, gdy użytkownik je kliknie.
Reguły mogą być zakodowaną na stałe listą adresów URL z kluczem urls (tzw. reguła listy) lub z kluczem where zawierającym zestaw selektorów href i CSS używanych do znajdowania linków na stronie (tzw. reguła document).
Reguły mogą też zawierać opcjonalną właściwość eagerness, która określa, kiedy strona powinna zostać pobrana lub wyrenderowana wstępnie. Właściwość eagerness może mieć wartość immediate, eager, moderate lub conservative. immediate wykonuje spekulacje tak szybko, jak to możliwe, podczas gdy pozostałe czekają na sygnały od użytkownika, takie jak najechanie kursorem na krótki lub dłuższy czas albo rozpoczęcie klikania na stronie.
Reguły można łączyć z różnymi ustawieniami gorliwości, aby najpierw pobierać wstępnie, a potem renderować wstępnie, gdy użytkownik wejdzie w interakcję.
Kiedy z niego korzystać
Ładowanie spekulacyjne jest szczególnie przydatne w przypadku stron statycznych, których zawartość nie zmienia się często i których generowanie jest tańsze – zwłaszcza jeśli są przechowywane w pamięci podręcznej na brzegu sieci. Można go też używać w przypadku stron dynamicznych, ale trzeba uważać na potencjalne nieaktualne treści.
Ładowanie spekulacyjne jest zwykle używane w przypadku linków z tego samego źródła, ale bardziej zaawansowane opcje umożliwiają pewne spekulacje dotyczące współdzielenia. Ten przewodnik koncentruje się na częstszym przypadku użycia tej samej domeny.
Bardziej agresywne ładowanie spekulacyjne jest dobrym wyborem w przypadku stron, które prawdopodobnie zostaną odwiedzone jako następne, takich jak artykuł z nagłówka lub następna strona w procesie wieloetapowym, np. kursie szkoleniowym.
Mniej agresywne ładowanie spekulacyjne jest dobrym wyborem, gdy nie jest oczywiste, co użytkownik zrobi dalej, lub gdy na stronie jest wiele linków, z których każdy może zostać kliknięty z podobnym prawdopodobieństwem. Czekając na więcej sygnałów, takich jak najechanie kursorem lub rozpoczęcie klikania na stronie, możesz przyspieszyć działanie następnej strony i poprawić wrażenia użytkownika, nawet jeśli nie została ona w pełni pobrana z wyprzedzeniem lub wstępnie wyrenderowana.
Podobnie pobieranie wstępne jest bardziej zachowawczym wyborem niż renderowanie wstępne, ponieważ zużywa mniej zasobów (zarówno po stronie klienta, jak i serwera), ale przynosi mniej korzyści użytkownikowi. To dobry wybór w przypadku początkowej implementacji, którą można później rozszerzyć o renderowanie wstępne, gdy deweloper wyraźnie o to poprosi.
Jak używać tej funkcji
Reguły spekulacji mają format oparty na JSON i mogą być zawarte w tagu <script type="speculationrules">. Reguły mogą być zawarte w sekcji <head> lub <body> dokumentu albo dodawane dynamicznie za pomocą JavaScriptu.
Możesz też użyć tag na poziomie globalnym lub w poszczególnych regułach. Po ustawieniu ten tag będzie uwzględniany w nagłówku Sec-Speculation-Tags i umożliwi identyfikację po stronie serwera, które spekulacje zostały wykonane.
Przykład prostej reguły listy adresów URL do wstępnego pobierania wstępnie zdefiniowanych adresów URL
<script type="speculationrules">
{
"tag": "product-page-speculations",
"prefetch": [
{
"urls": ["/product/1", "/product/2", "/product/3"]
}
]
}
</script>
Przykład prostej reguły dokumentu dotyczącej renderowania wstępnego wszystkich linków z tego samego źródła na stronie
<script type="speculationrules">
{
"tag": "all-links-speculations",
"prerender": [{
"where": { "href_matches": "/*" }
}]
}
</script>
Przykład złożonej reguły dokumentu dotyczącej linków do renderowania wstępnego z wykluczeniami dla witryn interaktywnych
<script type="speculationrules">
{
"tag": "speculations-with-exclusions",
"prerender": [{
"where": {
"and": [
{ "href_matches": "/*" },
{ "not": {"href_matches": "/wp-admin"}},
{ "not": {"href_matches": "/*\\?*(^|&)add-to-cart=*"}},
{ "not": {"selector_matches": ".do-not-prerender"}},
{ "not": {"selector_matches": "[rel~=nofollow]"}}
]
}
}]
}
</script>
Przykład zestawu reguł mieszanych
Ten przykład pokazuje zestaw reguł, który najpierw pobiera wstępnie wszystkie linki, a następnie renderuje je wstępnie, gdy otrzyma więcej sygnałów z poziomem moderate.
<script type="speculationrules">
{
"prefetch": [{
"tag": "prefetch-speculations",
"where": { "href_matches": "/*" },
"eagerness": "eager"
}],
"prerender": [{
"tag": "prerender-speculations",
"where": { "href_matches": "/*" },
"eagerness": "moderate"
}]
}
</script>
Sprawdzone metody
- UŻYWAJ reguł spekulacyjnych do pobierania z wyprzedzeniem i renderowania wstępnego stron, które użytkownik prawdopodobnie odwiedzi jako następne.
- UŻYWAJ reguł spekulacji w przypadku witryn statycznych, których zawartość nie zmienia się często i których strony są tańsze w tworzeniu – zwłaszcza jeśli są przechowywane w pamięci podręcznej na brzegu sieci.
- ZACHOWAJ większą ostrożność podczas korzystania z reguł spekulacyjnych w przypadku stron dynamicznych, na których treści częściej się zmieniają, mogą stać się nieaktualne i których generowanie jest bardziej kosztowne.
- ZALECAMY preferowanie reguł dokumentów nad regułami list, ponieważ są one bardziej elastyczne, umożliwiają udostępnianie tej samej reguły na wielu stronach i mogą być używane do wstępnego pobierania i renderowania stron, które nie są znane z wyprzedzeniem.
- ZASTANÓW SIĘ nad kompromisem między pobieraniem wstępnym a renderowaniem wstępnym i wybierz odpowiednią opcję dla swojego przypadku użycia. Renderowanie wstępne jest droższe niż pobieranie z wyprzedzeniem i może powodować więcej niezamierzonych efektów ubocznych w złożonych aplikacjach, które wyświetlają stan dynamiczny, ale zapewnia lepsze wrażenia użytkownika. W razie wątpliwości zapytaj dewelopera o jego preferencje.
- WEŹ POD UWAGĘ kompromisy między różnymi poziomami
eagernessi wybierz odpowiedni dla swojego przypadku użycia. Bardziej agresywne spekulacje zapewniają lepsze wrażenia użytkowników, ale zużywają więcej zasobów i mogą powodować więcej niezamierzonych efektów ubocznych w złożonych aplikacjach, które wyświetlają stan dynamiczny. W razie wątpliwości zapytaj dewelopera o jego preferencje. - NIE nadużywaj reguł spekulacji, np. do spekulowania każdego linku na stronie. Przeglądarki mają limity (2 spekulacje w przypadku spekulacji innych niż niecierpliwe). Atrybutu
immediatenależy używać tylko w przypadku bardzo małej liczby linków. - NIE twórz reguł spekulacyjnych dla adresów URL, które mogą wywoływać zmiany stanu, takich jak
/logoutlub/add-to-cart, i wyraźnie wykluczaj je z reguł spekulacyjnych, jeśli mogą być uwzględnione w regułach dokumentu. - NIE używaj reguł spekulacyjnych w aplikacjach jednostronicowych (SPA). Reguły spekulacji są przeznaczone dla aplikacji wielostronicowych (MPA), w których przeglądarka przechodzi do nowego dokumentu przy każdej nawigacji. W aplikacjach jednostronicowych przeglądarka nie przechodzi do nowego dokumentu przy każdej nawigacji, więc reguły spekulacyjne nie będą działać zgodnie z oczekiwaniami.
Obsługa przeglądarek i strategie zastępcze
Ładowanie spekulacyjne jest jednak progresywnym ulepszeniem. Można go bezpiecznie używać jako ulepszenia i jest on zdecydowanie zalecany ze względu na potencjalne korzyści związane ze skutecznością. Jeśli przeglądarka nie obsługuje reguł spekulacyjnych, po prostu je zignoruje.