Preload és prefetch (erőforrás-előtöltés)
A preload és prefetch böngésző-utasítások, amelyekkel fontos erőforrásokat előre betöltethetsz. Gyorsítják a megjelenést (LCP) és a következő oldalakra navigálást.
Mi a preload és a prefetch?
Mindkettő böngésző-utasítás az erőforrások betöltésének priorizálására. A preload azt mondja: ezt a fontos erőforrást (pl. a fő kép, a fő font) töltsd be korán, mert hamar kell. A prefetch azt: ezt valószínűleg a következő oldalon kell majd, töltsd be előre, amikor ráérsz.
Mit nyersz vele?
Helyesen használva gyorsabb megjelenést (a preload javíthatja az LCP-t a fő kép/font korai betöltésével) és villámgyors navigációt a következő oldalra (a prefetch). Óvatosan kell adagolni: a túl sok preload versenyt okoz az erőforrásokért és ronthat. Haladó, finomhangoló sebesség-eszköz.
Gyakorlati példa magyar környezetben
Egy győri e-kereskedelmi webshop 2025 végén PageSpeed Insights auditot futtatott, és azt kapta, hogy a termékoldalak LCP értéke 3,8 másodperc — jóval a Google által elvárt 2,5 mp-es határ felett. A fejlesztőik megvizsgálták a betöltési sorrendet, és azt találták, hogy a hero-kép és a fő betűtípus (font) csak a CSS letöltése után indult el. A megoldás: a nagy termékképeket és a fő fontot `<link rel="preload">` utasítással bevezették a HTML `<head>` szekciójába, míg az ajánlott termékszekció képeire `<link rel="prefetch">` utasításokat tettek. Az eredmény 3 hét alatt mérhetővé vált: az LCP 3,8 mp-ről 2,1 mp-re csökkent, a Core Web Vitals "jó" tartományba kerültek, és a Google Search Console mobil-teljesítménye 14%-ot javult az organikus forgalomban 2026 januárjára.
Hogyan kapcsolódik más fogalmakhoz?
A preload és prefetch legszorosabban az oldalsebesség (page speed) optimalizáláshoz kapcsolódik: mindkét technika az erőforrás-betöltési sorrendet hangolja a gyorsabb megjelenés érdekében. A Core Web Vitals metrikák közül elsősorban az LCP (Largest Contentful Paint) javítható preloaddal, mert a legfontosabb vizuális elem korábbi betöltése közvetlenül csökkenti a mért értéket. Ha renderelést blokkoló erőforrás (render-blocking) is jelen van az oldalon, a preload és a render-blokkolás egyidejű kezelése szükséges. A mobile-first indexelés kontextusában a preload különösen fontos: a mobil hálózatokon az erőforrás-prioritás meghatározása szignifikáns időt spórolhat. A lazy loading az ellentétes elv: az előtöltés a kritikus elemek gyorsítása, a lazy loading a nem kritikus elemek késleltetése — a kettő együtt optimális eredményt ad.
Gyakori hibák, amiket érdemes elkerülni
- Túl sok preload utasítás: Ha minden képet és fontet preloaddal jelölsz, a böngésző számára nincs valódi prioritás — versenyhelyzet alakul ki, és a tényleges LCP-elem nem gyorsul. Csak a valóban kritikus, above-the-fold erőforrásokat preloadold.
- Prefetch a kritikus elemeknél: A prefetch alacsony prioritású, és a böngésző csak szabad kapacitással tölteti le. Ha egy kritikus erőforrásra teszed, az meg fog jelenni késve — helyette preloadot használj.
- Ellenőrzés nélküli bevezetés: Preload és prefetch módosítás előtt és után mindig futtass PageSpeed Insights vagy Lighthouse tesztet, és nézd meg a Waterfall diagramot — rosszul alkalmazva ronthatja az LCP-t és a Cumulative Layout Shift (CLS) értéket is.
Röviden
A preload és prefetch böngésző-utasítások az erőforrások betöltési sorrendjét optimalizálják. A preload a jelenlegi oldal kritikus elemeit (fő kép, font) tölti be korán az LCP javítása érdekében, a prefetch a következő oldal erőforrásait készíti elő. 2026-ban a Core Web Vitals miatt mindkét technika értékes a technikai SEO-arzenálban.
Gyakran ismételt kérdések
Mi a különbség a preload és a prefetch között?
A preload a jelenlegi oldal kritikus erőforrásait tölti be magas prioritással, korán — például a hero-képet vagy a fő betűtípust, amitől az LCP (Largest Contentful Paint) javul. A prefetch alacsony prioritással, szabad böngésző-kapacitásnál tölti be a várhatóan következő oldalon szükséges erőforrásokat, így a navigáció gyorsabb lesz.
Befolyásolja-e a preload a Google rangsorolást?
Közvetlenül nem, de közvetve igen: a preload egyik fő hatása az LCP javítása, az LCP pedig a Core Web Vitals egyik pillére, amelyet a Google rangsorolási jelként használ. Jobb LCP = jobb Core Web Vitals = jobb esély a rangsorolásban, különösen 2026-ban, ahol a CWV-jelzés egyre hangsúlyosabb.
Hány erőforrást érdemes preloadolni?
A legjobb gyakorlat szerint oldalanként maximum 3-5 kritikus erőforrást érdemes preloadolni (általában 1-2 kép és 1-2 font). Több preload utasítás versenyhelyzetet teremt a böngészőben, és elveszítik hatékonyságukat. PageSpeed Insights vagy Lighthouse segítségével ellenőrizd, hogy a preload ténylegesen javítja-e az LCP-t.
Források
Kapcsolódó tananyagok
Hasznos volt ez a cikk?
Nem találod a választ?
Ezt automatikusan megcsináljuk helyetted
Publicator AI · SEO és GEO autopilot