Data publikacji: 23 stycznia 2026 r.
W Chrome 144 rozpoczynamy nowe testowanie origin funkcji prerender until script w ramach interfejsu Speculation Rules API. Wersja próbna origin umożliwia witrynom wypróbowanie nowej funkcji na rzeczywistych użytkownikach. Celem jest przetestowanie tej funkcji w praktyce i przekazanie zespołowi Chrome opinii, które pomogą ją ulepszyć i zdecydować, czy powinniśmy dodać ją do platformy internetowej.
Jaki problem ma rozwiązać ta funkcja?
Interfejs Speculation Rules API umożliwia rozpoczęcie wczytywania stron, zanim użytkownicy faktycznie na nie przejdą. Może to przyspieszyć wczytywanie stron w przyszłości, ponieważ część lub całość pracy zostanie wykonana z wyprzedzeniem. Do tej pory umożliwiała ona 2 rodzaje spekulacji: wstępne pobieranie i wstępne renderowanie.
Pobieranie wstępne pobiera tylko dokument HTML. Dzięki temu krytyczny pierwszy zasób jest dostępny z wyprzedzeniem, co zwiększa wydajność podczas przechodzenia do adresu URL. Nie wczytuje żadnych zasobów podrzędnych (np. CSS, JavaScript ani obrazów) ani nie wykonuje kodu JavaScript, więc przeglądarka może mieć jeszcze sporo pracy do wykonania po wczytaniu strony.
Wstępne renderowanie robi znacznie więcej. Pobiera zasoby podrzędne i rozpoczyna renderowanie strony oraz wykonywanie kodu JavaScript, prawie tak, jakby strona została otwarta na ukrytej karcie w tle. Gdy użytkownik kliknie link, może natychmiast przejść do strony, jeśli przeglądarka wykonała wszystkie czynności potrzebne do jej renderowania.
Użycie opcji wstępnego renderowania może znacznie poprawić wydajność, ale wiąże się z dodatkowymi kosztami wdrożenia i zasobów. Jeśli nie zostanie to dokładnie przemyślane, może to również powodować nieoczekiwane efekty uboczne podczas pełnego wstępnego renderowania strony, zanim użytkownik faktycznie na nią przejdzie. Jeśli na przykład dostawca usług analitycznych nie uwzględnia spekulacji, usługi analityczne mogą się uruchamiać, zanim użytkownik przejdzie do innej strony, co zniekształca statystyki.
Witryny korzystające z wstępnego renderowania muszą też uważać, aby nie wyświetlać użytkownikom nieaktualnych stron. Jeśli na przykład spekulujesz na stronie witryny e-commerce, a potem dodasz coś do koszyka i wczytasz wcześniej spekulowaną stronę, możesz zobaczyć starą liczbę produktów w koszyku, jeśli witryna nie zadba o to, aby była ona aktualna.
Te komplikacje występują również w przypadku wstępnego pobierania, jeśli część zarządzania stanem odbywa się po stronie serwera, ale często stanowią większy problem w przypadku wstępnego renderowania. Używanie wstępnego renderowania na bardziej złożonych stronach może być bardziej skomplikowane.
Deweloperzy informują nas jednak, że już teraz widzą wzrost skuteczności dzięki pobieraniu stron z wyprzedzeniem i chcą jeszcze bardziej wykorzystać reguły spekulacyjne, aby uzyskać jeszcze większe korzyści. W takiej sytuacji przydaje się wstępne renderowanie do momentu wykonania skryptu.
Co to jest wstępne renderowanie do momentu wykonania skryptu?
Wstępne renderowanie do momentu załadowania skryptu to nowe rozwiązanie pośrednie między wstępnym pobieraniem a wstępnym renderowaniem. Pobiera wstępnie dokument HTML (tak jak w przypadku wstępnego pobierania), a następnie rozpoczyna renderowanie strony, w tym pobieranie wszystkich zasobów podrzędnych (tak jak w przypadku wstępnego renderowania). Co ważne, przeglądarka nie będzie wykonywać elementów <script> (w przypadku skryptów wbudowanych i skryptów src). Gdy napotka tag blokujący <script>, wstrzymuje analizator i czeka, aż użytkownik przejdzie na stronę, zanim będzie kontynuować. W tym czasie skaner wstępnego wczytywania może kontynuować pobieranie zasobów podrzędnych potrzebnych na stronie, aby były gotowe do użycia, gdy strona będzie mogła kontynuować wczytywanie.
Dzięki pominięciu elementów blokujących <script> można uniknąć wielu złożonych kwestii związanych z wdrażaniem. Jednocześnie rozpoczęcie procesu renderowania i pobieranie zasobów podrzędnych daje ogromną przewagę nad pobieraniem wstępnym – potencjalnie prawie taką samą jak pełne wstępne renderowanie.
W najlepszym przypadku (gdy na stronie nie ma żadnych skryptów) ta opcja wstępnie wyrenderuje całą stronę. Jeśli strona zawiera w stopce tylko elementy skryptowe lub tylko skrypty z atrybutami async lub defer, zostanie w pełni wstępnie wyrenderowana bez tego JavaScriptu. Nawet w najgorszym przypadku (gdy w <head> znajduje się skrypt blokujący) rozpoczęcie renderowania strony, a w szczególności wstępne pobieranie zasobów podrzędnych, powinno znacznie przyspieszyć wczytywanie strony.
Jak korzystać z funkcji wstępnego renderowania do momentu wykonania skryptu?
Najpierw włącz tę funkcję, a potem wstępnie renderuj stronę, dopóki skrypt nie zostanie użyty w taki sam sposób jak inne opcje interfejsu Speculation Rules API z nowym kluczem prerender_until_script (zwróć uwagę na podkreślenia, aby nazwa klucza JSON była prawidłowa).
Możesz go używać z regułami listy statycznych adresów URL:
<script type="speculationrules">
{
"prerender_until_script": [{
"urls": ["next.html", "next2.html"]
}]
}
</script>
Można jej też używać w przypadku reguł dotyczących dokumentów, w których adresy URL do spekulacji są dostępne jako linki na stronie:
<script type="speculationrules">
{
"prerender_until_script": [{
"where": { "href_matches": "/*" }
}]
}
</script>
Wstępne renderowanie do momentu, w którym skrypt może być używany ze zwykłymi opcjami interfejsu Speculation Rules API, w tym z różnymi wartościami gotowości.
Skrypt JavaScript nie zostanie wykonany, więc nie będzie można odczytać document.prerendering ani zdarzenia prerenderingchange. Jednak czas activationStart będzie różny od zera.
Poniższy przykład pokazuje, jak wdrożyć poprzedni przykład z wypadkowym pobieraniem wstępnym w przypadku przeglądarek, które nie obsługują prerender_until_script:
<script type="speculationrules">
{
"prerender_until_script": [{
"where": { "href_matches": "/*" }
}],
"prefetch": [{
"where": { "href_matches": "/*" }
}]
}
</script>
Chrome poradzi sobie z tym powieleniem bez problemu i wykona najbardziej odpowiednią regułę dla każdego ustawienia niecierpliwości.
Możesz też użyć ich z różnymi poziomami gotowości, aby aktywnie pobierać wstępnie dane, a następnie przejść na wstępne renderowanie, dopóki skrypt z większą liczbą sygnałów nie będzie gotowy, jak sugerowaliśmy wcześniej w przypadku wstępnego pobierania i wstępnego renderowania:
<script type="speculationrules">
{
"prefetch": [{
"where": { "href_matches": "/*" },
"eagerness": "eager"
}],
"prerender_until_script": [{
"where": { "href_matches": "/*" },
"eagerness": "moderate"
}]
}
</script>
Pamiętaj, że w ten sposób nie możesz uaktualnić wstępnego renderowania do pełnego renderowania, ale jeśli chcesz, aby Chrome obsługiwał taką funkcję, oznacz ten błąd gwiazdką.
Czy wszystkie skrypty JavaScript są wstrzymane?
Nie, tylko elementy <script> powodują wstrzymanie parsera. Oznacza to, że moduły obsługi skryptów wbudowanych (np. onload) lub adresy URL javascript: nie spowodują wstrzymania i mogą zostać wykonane.
Na przykład przed przejściem na stronę może to zapisać w konsoli wartość Hero image is now loaded:
<img src="hero.jpg"
onload="console.log('Hero image is now loaded!')"
alt="Example Photo">
Jeśli jednak detektor zdarzeń zostanie dodany za pomocą <script>, wartość Hero image is now loaded nie zostanie zarejestrowana w konsoli, dopóki strona nie zostanie aktywowana:
<img src="hero.jpg" id="hero-image" alt="Example Photo">
<script>
const heroImage = document.querySelector('#hero-image');
if (heroImage.complete) {
console.log('Hero image is now loaded');
} else {
heroImage.addEventListener('load',
(event) => {
console.log('Hero image is now loaded');
}
);
}
</script>
Może się to wydawać sprzeczne z intuicją, ale w wielu przypadkach (np. w poprzednim przykładzie) lepiej jest podjąć działanie od razu, ponieważ opóźnienie może prowadzić do nieoczekiwanych komplikacji.
Dodatkowo większość zdarzeń wbudowanych wymaga działania użytkownika (np. onclick, onhover), więc nie zostaną one wykonane, dopóki użytkownik nie będzie mógł wejść w interakcję ze stroną.
Na koniec skrypty blokujące będą wstrzymywać analizator, co uniemożliwi wykrycie wbudowanych modułów obsługi zdarzeń. Dlatego ta funkcja nie załaduje wiadomości do konsoli do czasu aktywacji, mimo że jest wbudowanym modułem obsługi zdarzeń:
<script>...</script>
<img src="hero.jpg"
onload="console.log('Hero image is now loaded!')"
alt="Example Photo">
Jest to szczególnie istotne w przypadku obsługi skryptów wbudowanych, które korzystają z wcześniej zdefiniowanego kodu. Będą one nadal działać zgodnie z oczekiwaniami:
<script>
imageLoadFunction() = {
...
}
</script>
<img src="hero.jpg" onload="imageLoadFunction" alt="Example Photo">
A co ze skryptami z atrybutami async i defer?
Skrypty z atrybutami async i defer są opóźniane do momentu aktywacji, ale nie blokują parsera przed dalszym przetwarzaniem pozostałej części strony. Skrypty są pobierane, ale nie są wykonywane, dopóki użytkownik nie przejdzie na stronę.
Jak włączyć wstępne renderowanie do momentu wykonania skryptu?
„Prerender until script” to nowa opcja, nad którą pracujemy i która może ulec zmianie. Nie jest ona dostępna bez wcześniejszego włączenia.
Można ją włączyć lokalnie dla programisty za pomocą chrome://flags/#prerender-until-scriptflagi Chrome lub --enable-features=PrerenderUntilScriptflagi wiersza poleceń.
Wstępne renderowanie do momentu wykonania skryptu jest teraz dostępne w ramach wersji próbnej origin w Chrome 144. Testy pochodzenia umożliwiają właścicielom witryn włączenie funkcji w swoich witrynach, aby prawdziwi użytkownicy mogli z niej korzystać bez konieczności ręcznego włączania. Dzięki temu można zmierzyć wpływ funkcji na prawdziwych użytkowników i upewnić się, że działa ona zgodnie z oczekiwaniami.
Wypróbuj go i podziel się swoją opinią
Bardzo nas cieszy ta proponowana zmiana w interfejsie Speculation Rules API i zachęcamy właścicieli witryn do jej przetestowania.
Podziel się swoją opinią na temat propozycji w repozytorium GitHub. Jeśli masz uwagi dotyczące implementacji w Chrome, zgłoś błąd w Chromium.