Existuje Existuje mnoho způsobů, jak zvýšit výkon webu. Jedním z nich je přednačítání obsahu, který bude potřeba později. Prefetching CSS, předrenderování celé stránky nebo resolvování doménového jména. Vše uděláme předem, a pak okamžitě zobrazíme výsledek! Zní to skvěle.

Ještě lepší je, že to je velmi jednoduché na implementaci. Pět tagů <link rel> dává prohlížeči příkaz k předběžným akcím:

<link rel="prefetch" href="/style.css" as="style" />
<link rel="preload" href="/style.css" as="style" />

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

<link rel="prerender" href="https://example.com/about.html" />

Stručně popíšeme, co dělají a kdy je používat.

Přejít na: preload · prefetch · preconnect · dns-prefetch · prerender

preload

<link rel="preload"> říká prohlížeči, aby co nejdříve načetl a uložit zdroj (například skript nebo stylovou tabulku). To je užitečné, když bude zdroj potřeba za několik sekund po načtení stránky – a chcete tento proces urychlit.

Prohlížeč nic nedělá se zdrojem po jeho načtení. Skripty se nevykonávají, stylové tabulky se neuplatňují. Zdravý zdroj se pouze uchovává v mezipaměti a ihned se poskytuje na požádání.

Syntaxe

<link rel="preload" href="/style.css" as="style" />

href ukazuje na zdroj, který chcete stáhnout.

as může být cokoliv, co lze stáhnout v prohlížeči:

style pro stylové tabulky,
script pro skripty,
font pro písma,
fetch pro zdroje načítané pomocí fetch() nebo XMLHttpRequest,
úplný seznam viz. na MDN.

Je důležité uvést atribut as – pomáhá to prohlížeči správně určovat priority a plánovat načítání.

Kdy použít

Používejte přednačítání, když bude zdroj potřeba v nejbližší době. Například:

Nestandardní písma z externího souboru:
```

<link rel="stylesheet" href="index.css" />

/* index.css */
@font-face {
  src: url('comic-sans.woff2') format('woff2');
}
```
Ve výchozím nastavení comic-sans.woff2 začne se načítat až po načtení a analýze index.css. Aby nebylo čekání tak dlouhé, lze písmo načíst dříve pomocí <link rel="preload">:
```
<link rel="preload" href="comic-sans.woff2" as="font" />
```
Pokud rozdělujete své styly podle přístupu Critical CSS na dvě části, kritickou (pro okamžité vykreslení) a nekritickou:
```
<style>
/* Inline kritické styly */
</style>

<script>
/* Vlastní JS, který začne stahovat nekritické styly */
loadCSS('/app/non-critical.css');
</script>
```
Při tomto přístupu se nekritické styly začnou načítat teprve po spuštění JavaScriptu, což může proběhnout několik sekund po vykreslení. Místo čekání na JS použijte <link rel="preload">, abyste spustili načítání dříve:
```
/* Inlined critical styles */
```

Nepřehánějte to s přednačítáním. Pokud budete načítat všechno možné, web se nezrychlí kouzelným způsobem, spíše naopak, může to bránit prohlížeči v efektivním plánování práce.

Nepleťte si to s prefetchingem. Nepoužívejte <link rel="preload">, pokud nepotřebujete zdroj hned po načtení stránky. Pokud bude potřeba později, například na další stránce, použijte <link rel= "prefetch">.

Detaily

Toto je povinný tag pro vykonání prohlížečem (pokud ho podporuje), na rozdíl od ostatních tagů , souvisejících s předběžným načítáním. Prohlížeč musí načíst zdroj, uvedený v <link rel="preload">. V ostatních případech může předběžné načítání ignorovat, například pokud pracuje na pomalém připojení.

Prioritní zdroje. Různým zdrojům (styly, skripty, písma atd.) obvykle prohlížeče přiřazují různé priority, aby nejprve načítaly ty nejdůležitější zdroje. V tomto případě prohlížeč určuje prioritu podle atributu as. Pro prohlížeč Chrome můžete vidět kompletní tabulku priorit.

prefetch

<link rel= "prefetch"> požaduje, aby prohlížeč načetl a uložit zdroj (například skript nebo tabulku stylů) na pozadí. Načítání probíhá s nízkou prioritou, takže to nebrání důležitějším zdrojům. To je užitečné, pokud bude zdroj potřebný na další stránce a chcete si ho předem uložit do cache.

Ani tady prohlížeč s resourcem po načtení nic nedělá. Skripty se nevykonávají, tabulky stylů se neuplatňují. Zdroje se pouze ukládají do mezipaměti a okamžitě poskytují na vyžádání.

Syntaxe

<link rel="prefetch" href="/style.css" as="style" />

href ukazuje na zdroj, který chcete stáhnout.

as může být cokoliv, co lze stáhnout v prohlížeči:

style pro stylové tabulky,
script pro skripty,
font pro písma,
fetch pro zdroje načítané pomocí fetch() nebo XMLHttpRequest,
úplný seznam viz. na MDN.

Je důležité uvést atribut as — pomáhá prohlížeči správně stanovit priority a plánovat načítání.

Kdy použít

Pro načítání zdrojů z jiných stránek, pokud potřebujete zdroj z jiné stránky a chcete si ho přednostně načíst, aby se urychlilo vykreslování této stránky. Například:

Máte internetový obchod a 40% uživatelů opouští hlavní stránku a přechází na stránku produktu. Použijte <link rel= "prefetch">, načítání CSS a JS souborů pro vykreslení stránek s produktem.
Máte jednopage aplikaci, kde různé stránky načítají různé balíčky. Když uživatel navštíví nějakou stránku, je možné předběžně načíst balíčky pro všechny stránky, na které odkazuje.

Možná lze tento tag bezpečně používat v jakémkoli objemu. Prohlížeče obvykle plánují prefetche s nejnižší prioritou, takže nikomu nepřekážejí. Jen mějte na paměti, že se spotřebovává provoz uživatele, což může stát peníze.

Ne pro urgentní požadavky. Nepoužívejte <link rel= "prefetch">, když bude zdroj potřebný během několika sekund. V tomto případě použijte <link rel="preload">.

Detaily

Nepovinný tag. Prohlížeč není povinen řídit se tímto pokynem, může ho ignorovat, například při pomalém připojení.

Priorita v Chromu. V Chromu <link rel= "prefetch"> se obvykle provádí s minimální prioritou (viz kompletní tabulku priorit), tedy po načtení všeho ostatního.

preconnect

<link rel= "preconnect"> žádá prohlížeč, aby se připojil k doméně předem, když chcete urychlit navázání spojení v budoucnu.

Prohlížeč by měl navázat spojení, pokud stahuje nějaké zdroje z nové externí domény. Například, pokud načítá písma Google Fonts, React z CDN nebo požaduje odpověď JSON ze serveru API.

Navázání nového spojení obvykle trvá několik set milisekund. Provádí se jednou, ale stále to zabere čas. Pokud jste navázali spojení předem, ušetříte čas a rychleji načtete zdroje z této domény.

Syntaxe

<link rel= "preconnect" href="https://api.my-app.com" />

href ukazuje na doménové jméno, pro které je třeba určit IP adresu. Lze uvádět s prefixem (https://domain.com) nebo bez něj (//domain.com).

Kdy použít

Používejte pro domény, které brzy budete potřebovat k načtení důležitého stylu, skriptu nebo obrázku, ale zatím neznáte URL zdroje. Například:

Vaše aplikace je hostována na my-app.com a dělá AJAX požadavky na api.my-app.com: neznáte předem konkrétní požadavky, protože se dělají dynamicky z JS. Zde je zcela oprávněné použití tagu pro předběžné připojení k doméně.
Vaše aplikace je hostována na my-app.com a používá písma Google Fonts. Ty se načítají ve dvou krocích: nejprve se načte CSS soubor z domény fonts.googleapis.com, poté tento soubor požaduje písma z fonts.gstatic.com. Nemůžete vědět, které konkrétní soubory písem z fonts.gstatic.com budete potřebovat, dokud nenahrajete CSS soubor, proto můžeme předem nastavit pouze předběžné spojení.

Použijte tento tag, abyste trochu urychlili nějaký externí skript nebo styl. díky předběžnému nastavení spojení.

Nepřehánějte to.Nastavení a údržba spojení je nákladná operace jak pro klienta, tak pro server. Použijte tento tag maximálně pro 4–6 domén.

Detaily

Nepovinný tagProhlížeč nemusí tuto instrukci dodržovat a může ji ignorovat, například pokud již bylo navázáno mnoho spojení nebo v nějakém jiném případě.

Co zahrnuje proces připojení. Pro připojení k každé stránce musí prohlížeč provést následující kroky:

Resolving DNS. Najít IP adresu serveru (216.58.215.78) pro dané doménové jméno (google.com).
TCP handshake. Výměna paketů (klient → server → klient), aby se iniciovalo TCP spojení se serverem.
TLS handshake (pouze pro HTTPS stránky). Dva kola výměny paketů (klient → server → klient → server → klient), aby se iniciovala bezpečná relace TLS.

Poznámka: HTTP/3 zlepší a urychlí mechanismus handshake, ale je ještě daleko.

dns-prefetch

<link rel= "dns-prefetch"> žádá prohlížeč, aby provedl předběžné vyřešení DNS pro doménu, pokud se k ní brzy připojíte a chcete urychlit počáteční spojení.

Prohlížeč by měl určit IP adresu domény, pokud bude načítat nějaké zdroje z nového externího doménového jména. Například načítání písem Google Fonts, React z CDN nebo vyžadování JSON odpovědi ze serveru API.

Pro každou novou doménu obvykle trvá vyřešení DNS záznamu kolem 20–120 ms. To ovlivňuje pouze načítání prvního zdroje z této domény, ale stále představuje zpoždění. Pokud provedeme vyřešení DNS předem, ušetříme čas a načteme zdroj rychleji.

Syntaxe

<link rel= "dns-prefetch" href="https://api.my-app.com" />

href uvádí doménové jméno, pro které má být nastavená IP adresa. Můžete uvést s prefixem (https://domain.com) nebo bez něj (//domain.com).

Kdy použít

Používejte pro domény, které brzy budete potřebovat pro načítání odtud zdrojů, o kterých prohlížeč nevěděl předem. Například:

Vaše aplikace je hostována na my-app.com a dělá AJAX požadavky na api.my-app.com: neznáte předem konkrétní požadavky, protože se dělají dynamicky z JS. Zde je zcela oprávněné použití tagu pro předběžné připojení k doméně.
Vaše aplikace je hostována na my-app.com, a používá písma Google Fonts. Ta se načítají ve dvou krocích: nejprve se načte CSS soubor z domény fonts.googleapis.com, poté tento soubor požaduje písma z fonts.gstatic.com. Nemůžete vědět, které konkrétní soubory písem z fonts.gstatic.com budete potřebovat, dokud nenahrajete CSS soubor, proto můžeme předem nastavit pouze předběžné spojení.

Použijte tento tag, abyste trochu urychlili nějaký externí skript nebo styl. díky předběžnému nastavení spojení.

Věnujte pozornost podobným vlastnostem na <link rel= "dns-prefetch"/> a <link rel= "preconnect">. Používat je společně pro jednu doménu obvykle nemá smysl: <link rel= "preconnect"> už zahrnuje <link rel= "dns-prefetch"/> a mnoho dalšího. To lze obhájit ve dvou případech:

Chcete podporovat staré prohlížeče. <link rel= "dns-prefetch" /> podporováno počínaje IE10 a Safari 5. <link rel= "preconnect"> bylo nějakou dobu podporováno v Chrome a Firefoxu, ale do Safari bylo přidáno až v 11.1 a stále není podporováno v IE/Edge. Pokud je třeba podporovat tyto prohlížeče, použijte <link rel= "dns-prefetch" /> jako záložní možnost pro <link rel= "preconnect">.

Chcete urychlit připojení k více než 4–6 doménám. Tag <link rel= "preconnect"> se nedoporučuje používat s více než 4–6 doménami, protože nastavení a udržování připojení je nákladná operace. <link rel= "dns-prefetch" /> spotřebovává méně zdrojů, takže v případě potřeby jej použijte.

Detaily

Nepovinný tag. Prohlížeč není povinen řídit se tímto pokynem, takže nemusí provádět DNS reslování, například pokud je na stránce mnohem více těchto tagů nebo v jiné situaci.

Co je DNS. Každému serveru na internetu odpovídá jedinečná IP adresa, která vypadá jako 216.58.215.78. V adresním řádku prohlížeče se obvykle zadává název webu (například google.com), a servery DNS (Domain Name System) jej přiřazují k IP adrese serveru (216.58.215.78).

Aby prohlížeč určil IP adresu, musí provést dotaz na DNS server. To trvá 20–120 ms při připojení k nové externí doméně.

DNS se ukládá do cache, i když ne příliš spolehlivě. Některé operační systémy a prohlížeče ukládají DNS dotazy do cache: to ušetří čas při opakovaných dotazech, ale na caching se nelze spoléhat. V Linuxu to obvykle vůbec nefunguje. Chrome má DNS cache, ale žije jen minutu. Windows ukládá DNS odpovědi do cache po dobu pěti dnů.

prerender

<link rel= "prerender"> žádá prohlížeč, aby načetl URL a zobrazil jej na skryté kartě. Když uživatel klikne na odkaz, stránka se má zobrazit okamžitě. To je užitečné, pokud si jste jisti, že uživatel navštíví určitou stránku a chcete urychlit její zobrazení.

Navzdory výjimečné efektivitě tohoto tagu (nebo kvůli ní) je v roce 2019 <link rel= "prerender"> špatně podporován hlavními prohlížeči. Více informací viz níže.

Syntaxe

<link rel="prerender" href="https://my-app.com/pricing" />

href odkazuje na URL, pro kterou chcete spustit rendering na pozadí.

Kdy použít

Když si opravdu jste jisti, že uživatel přejde na určitou stránkuPokud máte „tunnel“, přes který 70 % návštěvníků ze stránky A přechází na stránku B, pak <link rel= "prerender"> na stránce A velmi rychle zobrazí stránku B.

Nepřehánějte to.Předběžné vykreslování je extrémně nákladné z pohledu provozu a paměti. Nepoužívejte <link rel= "prerender"> více než pro jednu stránku.

Detaily

Nepovinný tagProhlížeč není povinen tuto instrukci dodržovat a může ji ignorovat, například při pomalém připojení nebo při nedostatečném množství volné paměti.

Z důvodu úspory paměti Chrome neprovádí úplné vykreslování,, a pouze přednačítání NoState.To znamená, že Chrome načte stránku a všechny její zdroje, ale nevykreslí je a nevykoná JavaScript.

Firefox a Safari tento tag vůbec nepodporují. To neporušuje specifikaci, protože prohlížeče nejsou povinny tuto instrukci dodržovat; přesto je to smutné. Chyba implementace ve Firefoxu byla otevřena sedm let. Jsou zprávy, že Safari také tento tag nepodporuje..

Shrnutí

Používejte:

<link rel="preload"> — když budete potřebovat zdroj za pár sekund,
<link rel= "prefetch"> — když bude potřeba zdroj na následující stránce,
<link rel= "preconnect"> — když víte, že brzy budete potřebovat zdroj, ale ještě neznáte jeho úplnou URL,
<link rel= "dns-prefetch"> — obdobně, když víte, že brzy budete potřebovat zdroj, ale stále neznáte jeho úplnou URL (pro starší prohlížeče),
<link rel= "prerender"> — když jste si jisti, že uživatelé přejdou na určitou stránku a chcete urychlit její zobrazování.

Zdroj: habr.com