Data publikacji: 23 stycznia 2026 r.
W Chrome 144 rozpoczynamy nowe testowanie origin, które dotyczy prerender until script dodatku do 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 ładowania 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 pobierany 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 zwiększyć 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 renderowania wstępnego strony, zanim użytkownik faktycznie na nią przejdzie. Jeśli na przykład dostawca usług analitycznych nie uwzględnia spekulacji, analiza może zostać uruchomiona, zanim użytkownik przejdzie do innej strony, co spowoduje zniekształcenie statystyk.
Witryny korzystające z renderowania wstępnego muszą też uważać, aby nie udostępniać użytkownikom nieaktualnych stron. Jeśli na przykład spekulujesz na stronie witryny e-commerce, a następnie 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 aktualizowana.
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 renderowania wstępnego. 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 tym momencie pojawia się prerender until script.
Co to jest prerender until script?
prerender until script to nowe rozwiązanie pośrednie między wstępnym pobieraniem a renderowaniem wstępnym. 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> (zarówno w przypadku skryptów wbudowanych, jak i skryptów src). Gdy napotka blokujący tag <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 wstrzymaniu wszelkich elementów blokujących <script> można uniknąć wielu złożonych problemów 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 renderowanie wstępne.
W najlepszym przypadku (gdy na stronie nie ma żadnych skryptów) ta opcja wstępnie renderuje 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 kodu JavaScript. 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 usługi prerender until script?
Najpierw włącz tę funkcję, a potem używaj prerender until script w taki sam sposób jak innych opcji 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>
prerender until script można następnie używać 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 gotowości.
Możesz też używać ich z różnymi poziomami gotowości, aby aktywnie pobierać wstępnie dane, a następnie uaktualniać je do prerender until script z większą liczbą sygnałów , jak sugerowaliśmy wcześniej w przypadku wstępnego pobierania i renderowania wstępnego:
<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 przekształcić prerender until script w pełne wstępne renderowanie, ale jeśli chcesz, aby Chrome obsługiwał ten wzorzec, oznacz ten błąd gwiazdką.
Czy cały kod JavaScript jest wstrzymany?
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 może to spowodować zalogowanie Hero image is now loaded w konsoli przed przejściem na stronę:
<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ć parser, 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ć prerender until script?
prerender until script to nowa opcja, nad którą pracujemy i która może ulec zmianie, więc nie jest dostępna bez wcześniejszego włączenia.
Można ją włączyć lokalnie dla programistów za pomocą chrome://flags/#prerender-until-scriptflagi Chrome lub --enable-features=PrerenderUntilScriptflagi wiersza poleceń.
prerender until script jest też teraz dostępny 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. 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.