DNS Prefetching (předběžné načítání)

DNS Prefetching je způsob, jak oznámit prohlížeči, aby vyřešil požadavky na DNS a uložil si je do cache pro pozdější použití.

Pokud si prohlížíte libovolnou stránku a kliknete na odkaz, který vede na jinou doménu, prohlížeč musí nejdříve přeložit název této domény na IP adresu. To zabere určitý čas, čemuž se lze vyhnout pomocí přednačtení.

Implicitní předběžné načítání

Prohlížeče vykonávají mnoho požadavků na předběžné vyřešení DNS automaticky. Pokud moderní prohlížeč narazí v HTML kódu na odkazy, které vedou na jinou webovou stránku v jiné doméně, přednačte si DNS této domény do cache. Při kliknutí na tento odkaz pak již prohlížeč najde ve své cache uložený záznam a nemusí spouštět řešení DNS.

Toto implicitní předběžné načítání můžete zakázat tímto META tagem:

<meta http-equiv="x-dns-prefetch-control" content="off">

Důrazně to však nedoporučuji, jelikož můžete učinit procházení stránek pro vaše uživatele pomalejší.

Explicitní předběžné načítání

Všechny odkazy (na webové stránky, obrázky atd.), které se nenacházejí v kódu, nebude prohlížeč předběžně řešit. Jedná se např. o adresy v JavaScriptu načítané dynamicky. Prohlížeči však můžete explicitně sdělit, které DNS domén má předběžně vyřešit. Dělá se to následovně:

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

Můžete specifikovat libovolné množství domén k vyřešení. Nejlepší je umístit je co nejvýše v HTML kódu.

Link Prefetching (předběžné načítání)

Pomocí Link Prefetching můžete prohlížeči sdělit, které zdroje (obrázky, styly atd.) nebo celé webové stránky má přednačíst a uložit do cache.

<link rel="prefetch" href="//example.com/image.jpg" />
<link rel="prefetch" href="//example.com/page.html" />

Kód se umisťuje do hlavičky (HEAD) HTML kódu.

Prohlížeč po načtení aktuální stránky začne přednačítat zdroje nebo stránky specifikované s atributem rel=“prefetch“. Ty si následně uloží do cache. Pokud uživatel klikne na odkaz vedoucí na stránku, která je již uložená v cache, pouze se vykreslí a nemusí se stahovat.

Aktuálně podporuje Link Prefetching pouze prohlížeč Firefox, a do již od roku 2003.

Link Prerendering (předběžné vykreslování)

Link Prerendering je podobné výše uvedenému Link Prefetching. Prohlížeč si však pouze neuloží načtenou stránku do cache, ale rovnou ji předběžně vykreslí. Pokud uživatel klikne na stránku, která je již takto vykreslená v paměti, rovnou se mu zobrazí.

Použití:

<link rel="prerender" href=//example.com/page.html" />

Tuto techniku zatím používá jen prohlížeč Google Chrome. Na videu se můžete podívat, jak takové předběžné načítání funguje ve vyhledávači Google, který automaticky předběžně vykresluje první stránku ve výsledcích vyhledávání.

Použití

Zrychlení stránek pomocí DNS Prefetching není v dnešní době vysokorychlostního internetu a desktopových prohlížečů tak markantní. Smysl dostává až v případě připojení pomocí Wi-Fi a mobilního připojení, kdy může být latence neboli zpoždění, velice nepříjemné a zpomalující.

Link Prefetching a Link Prerendering jsou velice podobné techniky. Z uvedeného popisu je myslím téměř zřejmě jejich využití. Pokud máte na svém webu stránku A a stránku B a drtivá většina návštěvníků jde ze stránky A na stránku B, pak je vhodné na stránce A přednačíst stránku B.

Tohoto přednačítání lze využít např. ve vícekrokovém objednávkovém procesu, kdy se načítají další kroky objednávky. Dále lze přednačítat obrázky nebo stránky v tzv. slideru.

Tato technika by se však měla používat obezřetně. V opačném případě se stránka přednačte nebo předvykreslí a nepoužije se. Zbytečně by se tak zvyšoval datový tok.

Podpora v prohlížečích

ATRIBUT	CHROME	FIREFOX	INTERNET EXPLORER	OPERA	SAFARI
DNS Prefetching	Ano	3.5	9	?	5
Link Prefetching	Ne	3.5	?	?	?
Link Prerendering	Ano	Ne	?	?	?

DNS Prefetching je již hojně podporován. Link Prefetching má podporu ve Firefoxu a Link Prerendering zase u Chrome. Můžete tedy uvádět tyto dva způsoby pro přednačítání. Firefox stránku přednačte, Chrome ji navíc i předběžně vykreslí.

Uvedené techniky se vztahují k HTML5 (Link Prefetching a Link Prerendering), ale dají se samozřejmě použít i na starších webech.