DNS Prefetching, Prerender – předběžné načítání v HTML

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.

Mgr. Tomáš Matonoha

Zabývám se vývojem webových stránek s redakčním systémem WordPress. Programuji také webové stránky a eshopy na míru pomocí PHP a frameworku Nette. Zajímá mě responzivní design a moderní webové technologie: HTML5, CSS3, LESS, PHP, MySQL, jQuery a Twitter Bootstrap.

Příspěvek byl publikován v rubrice Web se štítky , a jeho autorem je Tomáš Matonoha. Můžete si jeho odkaz uložit mezi své oblíbené záložky nebo ho sdílet s přáteli.

4 komentáře u “DNS Prefetching, Prerender – předběžné načítání v HTML

  1. Zajímavý článek! Ten link prefetching vypadá zajímavě, jen škoda té podpory (rsp. nepodpory). Budu si muset vystačit s klasickým cacheováním :)

  2. Moc zajímavý článek, jen uvažuji, co by udělal zápis prefetch prerender:

    Tyhle 2 se vzájemně nevylučují, tento zápis je možný a vyřešil by se tím problém nekompatibility prohlížečů chrome/FF (tedy částečně samozřejmě). Tohle by mohlo fungovat, ne?

    Jinak předpokládám, že protokol http:// se z odkazů vytratil omylem.

Napsat komentář

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *

Můžete používat následující HTML značky a atributy: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>