Ugrás a tartalomhoz

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

Pénzügyi cégeknél és kreátor-eszközöknél is építettem már olyan rendszereket, amik nap mint nap élesben futnak. Budapesttől San Franciscóig · startupoknak és nagyobb vállalatoknak egyaránt.

Folytatás

HASONLÓ TÉMÁJÚ PROJEKTEK

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

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

Beszéljünk