Čo je Prefetching?
Prefetching je technika, ktorá prehliadaču naznačuje, aby na pozadí stiahol zdroje, ktoré bude používateľ pravdepodobne potrebovať v budúcnosti — typicky na ďalšej stránke. Má nízku prioritu a nezdržiava načítanie aktuálnej stránky. Používa sa element <link rel="prefetch">.
Definícia Prefetching
Čo je prefetching
Prefetching (po slovensky prednačítanie) je optimalizačná technika, pri ktorej prehliadač v čase nečinnosti stiahne zdroje, ktoré bude používateľ s vysokou pravdepodobnosťou potrebovať pri navigácii na ďalšiu stránku. Je definovaný v špecifikácii Resource Hints W3C.
Typy prefetchingu
- Link prefetch —
<link rel="prefetch">stiahne konkrétny zdroj (JS chunk, CSS, dáta) s nízkou prioritou - DNS prefetch —
<link rel="dns-prefetch">vopred preloží DNS pre externú doménu, čo ušetrí 20-120 ms pri prvej požiadavke - Preconnect —
<link rel="preconnect">nadviaže TCP spojenie a TLS handshake vopred
Prefetching v moderných frameworkoch
Frameworky ako Next.js implementujú inteligentný prefetching automaticky:
- Komponent
<Link>automaticky prefetchne cieľovú stránku, keď sa link objaví vo viewport - Prefetch sa vykoná len v čase nečinnosti prehliadača (idle time)
- Na pomalých pripojeniach a pri zapnutom šetrení dát sa prefetching automaticky vypne
Správne nastavený prefetching môže dosiahnuť takmer okamžitú navigáciu medzi stránkami bez viditeľného načítavania.
Praktický príklad
Príklad: E-shop má kategóriu produktov a stránku produktového detailu. Analytika ukazuje, že 70 % používateľov klikne na prvý produkt v zozname.
Na stránke kategórie sa pridá prefetch pre JavaScript chunk a dáta detailovej stránky prvých 3 produktov. Keď používateľ klikne na produkt, stránka sa zobrazí takmer okamžite — všetky zdroje sú už v cache prehliadača. Subjektívny čas načítania klesne z 800 ms na menej ako 100 ms.
Často kladené otázky
Čo je prefetching?
Prefetching je technika, pri ktorej prehliadač v čase nečinnosti stiahne zdroje pre budúce stránky. Má nízku prioritu a neovplyvňuje výkon aktuálnej stránky. Výsledkom je rýchlejšia navigácia.
Aký je rozdiel medzi prefetch a preload?
Preload stiahne zdroj s vysokou prioritou pre aktuálnu stránku. Prefetch stiahne zdroj s nízkou prioritou pre budúcu navigáciu. Preload je povinný, prefetch je len nápoveda pre prehliadač, ktorú môže ignorovať.
Plýtva prefetching dátami používateľa?
Prehliadače sú inteligentné — na pomalých pripojeniach a pri zapnutom šetrení dát prefetching automaticky vypnú. Na Wi-Fi a rýchlych pripojeniach je spotreba dát minimálna v porovnaní s prínosom rýchlejšej navigácie.
Súvisiace pojmy
Potrebujete pomôcť s webom?
Napíšte mi a poradím vám s vaším projektom. Prvá konzultácia je zadarmo a nezáväzná.