V dnešním digitálním věku je rychlost načítání webových stránek klíčová pro udržení pozornosti uživatelů a zajištění dobré uživatelské zkušenosti. Techniky jako DNS-prefetch a preconnect hrají v tomto procesu významnou roli. Tyto metody pomáhají snížit latenci spojenou s načítáním zdrojů z různých domén.

DNS-Prefetch: Co to je a jak to funguje

DNS-prefetch je proces, při kterém prohlížeč předem načte DNS informace domén, ze kterých se očekává, že budou na stránce potřeba. Tím se snižuje doba potřebná k zahájení požadavku na tyto zdroje, protože informace o DNS jsou již k dispozici.

V HTML dokumentu lze DNS-prefetch aktivovat pomocí link elementu s rel atributem nastaveným na "dns-prefetch". Tato metoda je obzvláště užitečná, pokud vaše stránka odkazuje na zdroje z externích domén, jako jsou skripty, obrázky, nebo styly.

Příklad kódu:

<link rel="dns-prefetch" href="//example.com">

Tento kód instruuje prohlížeče, aby načetly DNS informace pro doménu example.com, což umožní rychlejší načítání zdrojů z této domény, když budou potřeba.

Preconnect: Co to je a jak to funguje

Preconnect je pokročilejší technika než DNS-prefetch. Kromě načtení DNS informací, preconnect také navazuje TCP handshake a, pokud je to potřeba, provede TLS handshake. To výrazně snižuje celkovou dobu potřebnou k zahájení požadavku na zdroj, protože navázání spojení s serverem je již hotovo.

V HTML se preconnect nastavuje podobně jako DNS-prefetch, avšak s použitím hodnoty "preconnect" v atributu rel.

Příklad kódu:

<link rel="preconnect" href="https://example.com" crossorigin>

Tento element říká prohlížeči, aby navázal spojení s doménou example.com, včetně DNS vyhledávání, TCP a TLS handshaku. Atribut crossorigin se používá pro zdroje, které mohou vyžadovat CORS.

Kdy používat DNS-Prefetch a Preconnect

Výběr mezi DNS-prefetch a preconnect závisí na specifických potřebách vaší stránky a na tom, jak jsou zdroje načítány a používány. DNS-prefetch je vhodnější pro situace, kdy očekáváte mírné zpoždění před požadavkem na zdroj. Preconnect se doporučuje, když víte, že zdroj bude potřeba co nejdříve, a je tedy výhodné snížit veškerou latenci spojenou s navázáním spojení.

Optimalizace načítání zdrojů pomocí DNS-prefetch a preconnect může výrazně zlepšit rychlost a celkovou uživatelskou zkušenost vaší Webové stránky. Použitím těchto technik můžete předcházet zbytečnému zpoždění a ujistit se, že vaši uživatelé získají rychlý a plynulý přístup k obsahu vašeho webu. Vždy je důležité pečlivě zvážit, kterou metodu použít, a testovat její dopad na výkon vaší stránky.