DField SolutionsMérnöki stúdió · Budapest
Loading · Töltődik
Ugrás a tartalomhoz
Vissza a bloghoz
·7 perc olvasás
Web··7 perc olvasás

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

A Speculation Rules azonnalivá teszi a belso navigaciót · nulla JS-kolten. Ez a konfig, amit default-kent szallitunk.

Legutóbb ellenőrizve
Meghallgatom
Mezo Dezso
Alapito, DField Solutions
MegosztásXLinkedIn#
Speculation Rules API 2026: azonnali navigáció, nulla JS

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.

Mit 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.

A 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.

Valodi szamok

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

Egy 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.

MegosztásXLinkedIn#
Mezo Dezso
Szerző

Mezo Dezso

Alapito, DField Solutions

Olyan rendszereket építettem és üzemeltettem, amiket nap mint nap valódi cégek használnak - pénzügytől a blockchain-ig, kezdő startuptól nagyobb cégig.

Folytatás
HASONLÓ TÉMÁJÚ PROJEKTEK
Beszéljünk

Inkább építenénk együtt?

Beszéljünk a projektedről. 30 perc, nincs kötelezettség.