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 prohlížeče, takže když to něco jiného potřebuje, je to 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 preload použít
Použijte jej, když budete potřebovat zdroj brzy. Tag link rel="preload" pomůže, když víte, že budete potřebovat zdroj brzy po načtení stránky a chcete jej načíst dříve.
Podívejte se na tabulku kompatibility preload s jednotlivými prohlížeči.
Nepřehánějte to! Preloading všeho magicky nezrychlí web. Místo toho to pravděpodobně znemožní prohlížeči naplánovat načtení stránky chytře a může dojít ke zpomalení.
Nezaměňujte si s prefetch. Nepoužívejte rel="preload", pokud nepotřebujete zdroj bezprostředně po nebo při načtení stránky. Pokud to potřebujete pouze později, např. až pro další stránku, použijte rel="prefetch".
Preconnect
Link rel="preconnect" požádá prohlížeč, aby předem provedl připojení k jiné doméně. Je užitečné, když víte, že si brzy z této domény něco prohlížeč pro vykreslení stránky stáhne a chcete počáteční připojení urychlit.
Prohlížeč musí nastavit připojení, když načte něco z nové domény třetí strany. Doména třetí strany je doména, která se liší od domény, ve které je vaše aplikace hostována. K tomu může dojít, když web používá písmo z Google Fonts, čte zdroje z CDN, využivá externích JS a podobně.
Nastavení nového připojení obvykle trvá několik set milisekund. Je potřeba pouze jednou na doménu, ale stále to trvá čas. Pokud nastavíte připojení předem, ušetříte tento čas a načítáte zdroje z této domény rychleji.
href ukazuje na doménové jméno, které chcete připojit.
Kdy preconnect použít
Použijte jej pro domény, které budete brzy potřebovat. Link rel="preconnect" vám pomůže, když máte důležitý styl, skript nebo obrázek na doméně třetí strany, ale přesnou adresu URL zdroje neznáte.
Podívejte se na tabulku kompatibility preconnect s jednotlivými prohlížeči.
Nepřehánějte to. Nastavení a udržování otevřeného připojení je nákladné pro klienta i pro server. Tuto značku použijte pro maximálně 4-6 domén.
Prohlížeč není povinen postupovat podle pokynů rel="preconnect". To znamená, že se může rozhodnout, zda nenaváže nové připojení například pokud již bylo nastaveno mnoho připojení.
DNS-prefetch
Link rel="dns-prefetch" požádá prohlížeč, aby provedl předem DNS rozlišení domény. Je užitečné, když víte, že se k této doméně brzy připojíte a chcete počáteční připojení urychlit.
U každé nové domény trvá vyřešení záznamu DNS obvykle 20–120 ms. Ovlivňuje to pouze první zdroj stažený z této domény, ale na tom stále záleží. Pokud provedete rozlišení DNS předem, ušetříte tento čas a načte tento zdroj rychleji.
href ukazuje na doménové jméno, které chcete připojit.
Kdy dns-prefetch použít
Použijte jej pro domény, které budete brzy potřebovat. Link rel="dns-prefetch" vám pomůže, když máte nějaké důležité zdroje v doménách třetích stran, o kterých prohlížeč předem neví.
Podívejte se na tabulku kompatibility dns-prefetch s jednotlivými prohlížeči.
Poznámka k rel="dns-prefetch" a rel="preconnect". Použití obou těchto značek pro stejnou doménu není užitečné. Link rel="preconnect" již zahrnuje vše, co rel="dns-prefetch" i další funkce. Smysl použití dns-prefetch je, pokud chcete podpořit rychlost zobrazení ve starých prohlížečích nebo chcete otevřít připojení pro více než 6 domén.
Prohlížeč není povinen postupovat podle pokynů rel="dns-prefetch". To znamená, že se může rozhodnout neprovést překlad DNS například pokud je jich již mnoho.
DNS je cachována, i když ne spolehlivě. Některé operační systémy a prohlížeče ukládají do mezipaměti vaše požadavky DNS. To by ušetřilo čas, pokud potřebujete znovu načíst něco z domény třetí strany. Ale nespoléhejte se na to. Linux obvykle nemá DNS cache vůbec. Chrome má mezipaměť DNS, ale pouze krátkou dobu. Windows ukládá odpovědi DNS na pár dní.
prerender
Link rel="prerender" požádá prohlížeč, aby načetl URL a vykreslil ji kompletně na neviditelné kartě. Když uživatel klikne na odkaz na tuto adresu URL, stránka by měla být vykreslena víceméně okamžitě. Je užitečné, když jste si opravdu jisti (například z analytiky), že uživatel navštíví další konkrétní stránku a chcete ji vykreslit rychleji.
Link rel="prerender" má aktuálně špatnou podporu ve velkých prohlížečích. Prohlížeč Chrome aktuálně již nedělá úplné vykreslení. Místo úplného vykreslení vytvoří prohlížeč Chrome NoState Prefetch, aby ušetřil paměť. To znamená, že Chrome stáhne stránku a všechny následné zdroje, ale nevykreslí ji a ani nespustí JavaScript. Firefox a Safari tuto značku vůbec nepodporují.
href ukazuje na doménové jméno, které chcete připojit.
Kdy prerender použít
Když jste si opravdu jisti, že uživatel přejde na další stránku. Pokud máte konverzní trychtýř, ve kterém 70% návštěvníků přechází ze stránky A na stránku B, může rel="prerender" na stránce A pomoci rychle vykreslit stránku B.
Podívejte se na tabulku kompatibility prerender s jednotlivými prohlížeči.
Nepřehánějte to. Předkreslování stránky je mimořádně nákladné jak z hlediska dat, tak paměti. Nepoužívejte rel="prerender" pro více než jednu stránku.
Další zdroje:
https://developers.google.com/web/fundamentals/performance/resource-prioritization
https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content
ttps://www.keycdn.com/blog/resource-hints
https://w3c.github.io/resource-hints/
Kdo jsem?
Jsem konzultant na volné noze se specializací optimalizace pro vyhledávače (SEO). Praxi se SEO mám již téměř 15 let. Spolupracoval jsem nebo stále spolupracuji se špičkami mezi weby a e-shopy. Ve volném čase jsem (od)dechový muzikant.
S čím se na mě můžete obrátit?
- Dlouhodobé řešení vašeho SEO
- Podpora vašich interních SEO týmů
- Komplexní a technické SEO analýzy
- Školení SEO a základů webové analytiky (GA4)
- Konzultace, mentoring a marketingové poradenství