Technické SEO

Prefetch, preload, preconnect, dns-prefetch, prerender

Ivo Kylián

12. prosinec 2019 • 4 min čtení

Resource hinty jako prefetch, preload a preconnect jsou nativní nástroje prohlížečů pro zrychlení načítání webu. Správné využití těchto atributů umožňuje předběžně stáhnout klíčové zdroje (fonty, skripty) nebo vytvořit spojení se servery dříve, než jsou skutečně potřeba. Tato optimalizace přímo zlepšuje metriky Core Web Vitals a celkový uživatelský zážitek (UX).

Existuje několik způsobů, jak zvýšit celkovou rychlost webu. Jedním z těchto způsobů je předem načíst zdroje, který budete potřebovat později. Rychlost webu je důležitou metrikou nejen pro SEO, ale také pro další online marketingové kanály. V neposlední řadě má rychlost webu přímý vliv na míru plnění stanovených cílů webu - konverzní poměr.

Ještě skvělejší je, že prohlížeče mají jednoduchý vestavěný (nativní) způsob, jak dělat všechny tyto věci. Je to výrazně komplexnější činnost a nechci fušovat do práce specialistů na zvyšování rychlosti webů, ale potřeboval jsem mít zdroj informací, na který se mohu odkazovat a mohu si současně sám modifikovat podle potřeb.

Začnu spoilerem :-) Optimální použití:

rel="preload" - když budete potřebovat zdroj během několika sekund

rel="prefetch" - když budete potřebovat zdroj na další stránce

rel="preconnect" - když víte, že budete potřebovat zdroj brzy, ale ještě neznáte jeho úplnou adresu URL

rel="dns-prefetch" - když víte, že budete potřebovat zdroj brzy, ale ještě neznáte jeho úplnou adresu URL (pro starší prohlížeče)

rel="prerender" - když jako určití uživatelé budete přecházet s velkou pravděpodobností na další konkrétní stránku a chcete ji urychlit

Prefetch

Link rel="prefetch" požádá prohlížeč, aby stáhl a uložil do mezipaměti zdroj (například skript nebo šablonu stylů) na pozadí. Stahování probíhá s nízkou prioritou, takže nezasahuje do důležitějších zdrojů. Je užitečné, když víte, že budete potřebovat tento zdroj na následující stránce a chcete jej předem uložit do mezipaměti.

Prohlížeč s tímto zdrojem po stažení nic neudělá. Skripty se nevykonávají, styly se nepoužijí. Je to pouze v mezipaměti, takže když to něco jiného potřebuje, je okamžitě k dispozici.

href ukazuje na URL zdroje, který chcete stáhnout.

as to být cokoli, co si můžete stáhnout v prohlížeči:

style - načtení stylů
script - pro skripty
font - pro písma
fetch - pro prostředky stažené pomocí funkce fetch() nebo XMLHttpRequest
a další hodnoty - viz. úplný seznam MDN

Pro různé druhy zdrojů (styly, skripty, písma atd.) prohlížeče obvykle přiřazují různé priority. To umožňuje nejprve stáhnout nejdůležitější zdroje. V případě zdroje načteného pomocí rel="preload" prohlížeče určují jeho prioritu podle as atributu.

Kdy prefetch použít

Link rel="prefetch" pomůže, pokud potřebujete zdroj na jiné stránce a chcete jej předem načíst a urychlit vykreslování této stránky.

Například máte e-shop a 40% vašich uživatelů přejde z domovské stránky na stránku produktu, pomocí rel="prefetch" stáhnete předem soubory CSS a JS odpovědné za vykreslení produktových stránek.

Podívejte se na tabulku kompatibility prefetch s jednotlivými prohlížeči.

Je bezpečné to používat. Prohlížeče obvykle plánují prefetch s nejnižší prioritou, takže nezasahují do jiných zdrojů. To znamená, že je bezpečné předběžně načíst spoustu věcí. Mějte však na paměti, že to bude i používat data uživatele navíc.

Prohlížeč není povinen postupovat podle pokynů rel="prefetch". To znamená, že se může rozhodnout tento zdroj nenačíst, například pokud je připojení pomalé.

Nepoužívejte prefetch pro urgentně užívané zdroje. Nepoužívejte jej, pokud budete potřebovat zdroj na vykreslení stránky během několika sekund. V tomto případě použijte link rel="preload".

Preload

Link rel="preload" říká prohlížeči, aby co nejdříve stáhl a uložil do mezipaměti zdroj (například skript nebo šablonu stylů CSS) a byl rychle k dispozici. Je užitečné, když tento zdroj potřebujete dříve během načítání stránky.

Prohlížeč s tímto zdrojem po stažení nic neudělá. Skripty se nevykonávají, styly se nepoužijí. Je to pouze uloženo v mezipaměti, takže když to něco jiného potřebuje, je okamžitě k dispozici.

Používání preload je velmi podobné prefetch. Hlavním rozdílem je, že prohlížeč má tendenci stahovat zdroje načtené pomocí preload s vyšší prioritou.

Kdy preload použít

Link rel="preload" pomůže, pokud potřebujete zdroj na aktuální stránce co nejdříve.

Například ve vašem souboru CSS načítáte konkrétní fonty. Než však prohlížeč soubor CSS stáhne a začne jej analyzovat, neví, že tyto fonty bude potřebovat. Pomocí preload můžete prohlížeči říci, aby tyto fonty začal stahovat hned.

Podívejte se na tabulku kompatibility preload s jednotlivými prohlížeči.

Preload je pro aktuální stránku, proto jej s ním neplýtvejte. Načítejte pouze ty zdroje, které jsou skutečně důležité pro počáteční vykreslení stránky.

Preconnect

Prohlížeč musí před požadavkem na zdroj (např. od jiného dodavatele - typicky scripty typu GTM, Analytics atd.) vytvořit spojení. Link rel="preconnect" požádá prohlížeč, aby to udělal předem. Šetří to čas, protože když prohlížeč skutečně potřebuje stáhnout zdroj, spojení je již vytvořeno.

Kdy preconnect použít

Použití preconnect dává smysl, pokud víte, že si ze serveru brzy něco stáhnete, ale ještě nevíte přesnou adresu URL zdroje.

Často se to stává u fontů Google. Váš soubor CSS může načíst písma z fontů Google (např. fonts.gstatic.com), ale vy nevíte, jaká bude jejich přesná URL, protože Google je může dynamicky měnit. S rel="preconnect" mu můžete říci, aby se připojil k serveru fonts.gstatic.com předem.

Podívejte se na tabulku kompatibility preconnect s jednotlivými prohlížeči.

DNS-prefetch

Link rel="dns-prefetch" funguje podobně jako preconnect. Pouze provádí dřívější překlad DNS pro konkrétní doménu.

Kdy dns-prefetch použít

Dns-prefetch je starší verze preconnect. Ponechte jej v kódu jako zálohu pro prohlížeče, které nepodporují preconnect.

Podívejte se na tabulku kompatibility dns-prefetch s jednotlivými prohlížeči.

prerender

Link rel="prerender" požádá prohlížeč, aby stáhl a vykreslil celou stránku na pozadí. Když pak uživatel na danou stránku klikne, zobrazí se okamžitě, jako by tam už byla.

Kdy prerender použít

Používejte jej opatrně! Prerender spotřebovává hodně zdrojů (CPU i paměť). Používejte jej pouze tehdy, pokud jste si jisti, že uživatel na danou stránku skutečně klikne. Například pokud máte v nákupním košíku tlačítko "Zaplatit", můžete prerenderem připravit stránku s výběrem platby.

Podívejte se na tabulku kompatibility prerender s jednotlivými prohlížeči.