Speculation Rules API 2026: azonnali navigáció, nulla JS

Az archívumból4 rész · 2 percÍrta: Dezső Mező · Megjelent 2026. április 22..mdWebPerformanceCWVChromiumSEO

A Speculation Rules API a 2024-26-os web-teljesitmeny legnagyobb csendes gyozelme. Tegy egy kis JSON-blokkot a HTML-be, a Chromium elore rendereli a valoszínuleg kovetkezoo oldalt. Amikor a user kattint, a navigacio azonnali. Es nulla JS-bundle-meretet kostet.

01Mit csinal

Ket mod: 'prerender' (teljes render rejtett tab-ba) es 'prefetch' (csak fetch). A prerender agresszivabb · az oldal kattintaskor eloben. A prefetch olcsóbb · a HTML meleg, de rendere kell aktivalaskor.

02A konfig, amit szallitunk

<script type='speculationrules'>
{
  'prerender': [{
    'source': 'document',
    'where': { 'href_matches': '/*' },
    'eagerness': 'moderate'
  }],
  'prefetch': [{
    'source': 'list',
    'urls': ['/blog', '/services', '/projects']
  }]
}
</script>

Az eagerness 'moderate' hoveren triggerel (200ms pre-click). 'Eager' azonnal lista-alapjan. 'Conservative' csak egerlenyomasra. A moderate a jó default · azonnalinak érzodik, de nem robbantja fol a per-origin prerender-budgetet.

03Valodi szamok

Nav LCP · 1.2s -> 0.05s prerender-elt targeton.
Nav INP · 180ms -> 35ms.
Prerender-talalati arány produkcióban · ~75% moderate eagernessen.

04Egy gotcha

A prerender rogton kliens-oldali JS-t futtat · az analytics-ot is. A GA4, Segment es Amplitude dedupelnek, de egyes regebbi trackerek duplazanak. Adj hozzá 'prerendering' checket az analytics init-be, ha egyedit hasznalsz.

Szallitsd. 20 sor konfig, 200ms-600ms INP win navigaciora, 0 JS-bundle koltseg. Most minden Next.js oldalra default.

Amit érdemes elvinni

A Speculation Rules API (Chromium) a navigacios célokat elorerendereli hover-re vagy listára. Azonnali navigacio, merheto LCP / INP nyereseg, nulla JS-bundle koltseg. A produkciós konfig, amit default-kent szallitunk, es az egy gotcha.

Ezt is megépítjükWebteljesítmény

Több a laborból

Összes bejegyzés

Megnézzük ugyanezt a te rendszereden?Kezdjünk bele

LaborSpeculation Rules API 2026: azonnali navigáció, nulla JS