ProHoster > Blog > podávání > Preload, prefetch a další značky

Preload, prefetch a další značky

K dispozici je mnoho způsobů, jak zlepšit výkon webu. Jedním z nich je předběžné načítání obsahu, který bude později potřeba. Předzpracování CSS, předběžné vykreslování celé stránky nebo překlad názvu domény. Vše děláme předem a poté okamžitě zobrazíme výsledek! Zní to skvěle.

Co je ještě cool, je to, že je velmi jednoduše implementován. Pět značek dejte prohlížeči příkaz k provedení předběžných akcí:

<link rel="prefetch" href="/cs/style.css" as="style" />
<link rel="preload" href="/cs/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" />


Pojďme si krátce vysvětlit, co dělají a kdy je použít.

Skočit do: předpětí · prefetch · předpřipojit · dns-prefetch · předvykreslení

předpětí

<link rel= "preload"> říká prohlížeči, aby načetl a uložil do mezipaměti zdroj (jako je skript nebo šablona stylů) co nejdříve. To je užitečné, když je potřeba zdroj několik sekund po načtení stránky – a chcete proces urychlit.

Prohlížeč po načtení se zdrojem nic nedělá. Skripty se nespouštějí, šablony stylů nejsou aplikovány. Zdroj je jednoduše uložen do mezipaměti a na požádání okamžitě zpřístupněn.

syntax

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

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

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

  • style pro šablony stylů,
  • script pro skripty,
  • font pro písma,
  • fetch pro zdroje načtené pomocí fetch() nebo XMLHttpRequest,
  • viz úplný seznam na MDN.

Je důležité specifikovat atribut as – to pomáhá prohlížeči správně upřednostňovat a plánovat stahování.

Kdy použít

Předběžné načítání použijte, když bude zdroj potřeba ve velmi blízké budoucnosti. Například:

  • Nestandardní písma z externího souboru: 
    <!-- index.html -->
<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 se začne načítat až po stažení a analýze index.css. Abyste nemuseli čekat tak dlouho, můžete si písmo stáhnout dříve pomocí <link rel= "preload">:

    <link rel="preload" href="comic-sans.woff2" as="font" />
  • Pokud své styly oddělíte podle přístupu Kritické CSS na dvě části, kritickou (pro okamžité vykreslení) a nekritickou: 
    <style>
/* Inlined critical styles */
</style>

<script>
/* Custom JS that starts downloading non-critical styles */
loadCSS('/app/non-critical.css');
</script>

    S tímto přístupem se nekritické styly začnou načítat pouze při spuštění JavaScriptu, což se může stát několik sekund po vykreslení. Místo čekání použijte JS <link rel= "preload">pro zahájení stahování dříve:

    <style>
/* Inlined critical styles */
</style>

<link rel="preload" href="/cs/app/non-critical.css" as="style" />

<script>
/* Custom JS that starts downloading non-critical styles */
loadCSS('/app/non-critical.css');
</script>

Nepoužívejte nadměrně předběžné načítání. Pokud načtete vše za sebou, web se nijak magicky nezrychlí, naopak zabrání prohlížeči ve správném plánování práce.

Nezaměňovat s přednačítáním. Nepoužívat <link rel= "preload">, pokud nepotřebujete zdroj ihned po načtení stránky. Pokud to budete potřebovat později, třeba na další stránku, tak použijte <link rel= "prefetch">.

podrobnosti

Toto je povinná značka být spuštěn prohlížečem (pokud to podporuje), na rozdíl od všech ostatních značek související s předpětím. Prohlížeč musí stáhnout zdroj uvedený v <link rel="preload">. V jiných případech může ignorovat předběžné načítání, například pokud běží na pomalém připojení.

Priority. Prohlížeče obvykle přidělují různé priority různým zdrojům (stylům, skriptům, fontům atd.), aby nejdříve načetly nejdůležitější zdroje. V tomto případě prohlížeč určuje prioritu podle atributu as. Pro prohlížeč Chrome se můžete podívat na tabulka s plnou prioritou.

Preload, prefetch a další značky

prefetch

<link rel= "prefetch"> požádá prohlížeč, aby stáhl a uložil do mezipaměti zdroj (jako je skript nebo šablona stylů) na pozadí. Načítání probíhá s nízkou prioritou, takže nezasahuje do důležitějších zdrojů. To je užitečné, pokud je zdroj potřeba na další stránce a chcete jej předem uložit do mezipaměti.

I zde prohlížeč po načtení se zdrojem nic nedělá. Skripty se nespouštějí, šablony stylů nejsou aplikovány. Zdroj je jednoduše uložen do mezipaměti a na požádání okamžitě zpřístupněn.

syntax

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

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

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

  • style pro šablony stylů,
  • script pro skripty,
  • font pro písma,
  • fetch pro zdroje načtené pomocí fetch() nebo XMLHttpRequest,
  • viz úplný seznam na MDN.

Je důležité specifikovat atribut as - to pomáhá prohlížeči správně upřednostňovat a plánovat stahování.

Kdy použít

Chcete-li načíst zdroje z jiných stránek, pokud potřebujete zdroj z jiné stránky a chcete jej předem načíst, abyste urychlili vykreslování dané stránky. Například:

  • Máte internetový obchod a 40 % uživatelů opustí domovskou stránku na stránku produktu. Použití <link rel= "prefetch">, načítání CSS a JS souborů pro vykreslování produktových stránek.
  • Máte jednostránkovou aplikaci a různé stránky načítají různé balíčky. Když uživatel navštíví stránku, mohou být předem načteny balíčky pro všechny stránky, na které odkazuje.

Je pravděpodobné, že tuto značku lze bezpečně používat v jakékoli míře.. Prohlížeče obvykle plánují přednačítání s nejnižší prioritou, takže to nikoho neobtěžuje. Jen mějte na paměti, že spotřebovává uživatelský provoz, který může stát peníze.

Ne pro naléhavé požadavky. Nepoužívat <link rel= "prefetch">, když je zdroj potřeba během několika sekund. V tomto případě použijte <link rel= "preload">.

podrobnosti

Volitelný štítek. Prohlížeč není povinen se tímto pokynem řídit, může jej ignorovat například při pomalém připojení.

Priorita v Chrome. V Chromu <link rel= "prefetch"> obvykle prováděny s minimální prioritou (viz tabulka s plnou prioritou), tedy po načtení všeho ostatního.

předpřipojit

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

Prohlížeč musí navázat spojení, pokud načte nějaké prostředky z nové domény třetí strany. Pokud například načte písma Google, písma React z CDN nebo požaduje odpověď JSON ze serveru API.

Navázání nového spojení obvykle trvá několik set milisekund. Je to hotové jednou, ale stále to chce čas. Pokud jste navázali připojení předem, ušetříte čas a stáhnete zdroje z této domény rychleji.

syntax

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

href označuje název domény, pro kterou chcete určit IP adresu. Lze zadat předponou (https://domain.com) nebo bez něj (//domain.com).

Kdy použít

Použijte pro domény, které budou brzy potřeba stáhnout si odtud důležitý styl, skript nebo obrázek, ale ještě neznáte adresu URL zdroje. Například:

  • Vaše aplikace je hostována na my-app.com a odesílá požadavky AJAX na api.my-app.com: Konkrétní dotazy předem neznáte, protože jsou vytvářeny dynamicky z JS. Zde je celkem vhodné použít značku pro předpřipojení k doméně.
  • Vaše aplikace je hostována na my-app.com a používá Google Fonts. Stahují se ve dvou krocích: nejprve se z domény stáhne soubor CSS fonts.googleapis.com, pak tento soubor požaduje písma s fonts.gstatic.com. Nemůžete vědět, ze kterých konkrétních souborů písem jsou fonts.gstatic.com budete potřebovat, dokud nenačtete soubor CSS, takže předem můžeme provést pouze předběžné připojení.

Pomocí této značky můžete trochu urychlit skript nebo styl třetí strany kvůli předem vytvořenému spojení.

Nepoužívejte nadměrně. Navázání a udržování připojení je nákladná operace pro klienta i server. Tuto značku použijte pro maximálně 4–6 domén.

podrobnosti

Volitelný štítek. Prohlížeč nemusí tento pokyn dodržovat a může jej ignorovat, například pokud již bylo vytvořeno mnoho připojení nebo v jiném případě.

Co zahrnuje proces připojení?. Pro připojení ke každému webu musí prohlížeč provést následující:

  • Překlad DNS. Najít IP adresu serveru (216.58.215.78) pro zadaný název domény (google.com).
  • TCP handshake. Výměna paketů (klient → server → klient) pro navázání TCP spojení se serverem.
  • TLS handshake (pouze weby HTTPS). Dvě kola výměny paketů (klient → server → klient → server → klient) k zahájení zabezpečené relace TLS.

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

dns-prefetch

<link rel= "dns-prefetch"> požádá prohlížeč, aby předem provedl překlad DNS pro doménu, pokud se k ní budete brzy připojovat a chcete urychlit počáteční připojení.

Pokud bude prohlížeč získávat nějaké zdroje z nové domény třetí strany, musí určit IP adresu domény. Například načítání písem Google, písem React z CDN nebo vyžádání odpovědi JSON ze serveru API.

U každé nové domény trvá překlad DNS záznamů obvykle asi 20–120 ms. To ovlivní pouze načítání prvního zdroje z dané domény, ale stále to přináší zpoždění. Pokud provedeme překlad DNS předem, ušetříme čas a načteme zdroj rychleji.

syntax

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

href označuje název domény, pro kterou chcete nastavit adresu IP. Lze zadat předponou (https://domain.com) nebo bez něj (//domain.com).

Kdy použít

Použijte pro domény, které budou brzy potřeba stahovat odtud zdroje, o kterých prohlížeč předem neví. Například:

  • Vaše aplikace je hostována na my-app.com a odesílá požadavky AJAX na api.my-app.com: Konkrétní dotazy předem neznáte, protože jsou vytvářeny dynamicky z JS. Zde je celkem vhodné použít značku pro předpřipojení k doméně.
  • Vaše aplikace je hostována na my-app.coma používá Google Fonts. Stahují se ve dvou krocích: nejprve se z domény stáhne soubor CSS fonts.googleapis.com, pak tento soubor požaduje písma s fonts.gstatic.com. Nemůžete vědět, ze kterých konkrétních souborů písem jsou fonts.gstatic.com budete jej potřebovat, dokud nenačtete soubor CSS, takže můžeme předem provést pouze předběžné připojení.

Pomocí této značky můžete trochu urychlit skript nebo styl třetí strany kvůli předem vytvořenému spojení.

Všimněte si prosím podobných vlastností jako <link rel= "dns-prefetch"/> и <link rel= "preconnect">. Obvykle nemá smysl používat je společně pro jednu doménu: <link rel= "preconnect"> již zahrnuje <link rel= "dns-prefetch"/> a mnohem víc. To lze odůvodnit ve dvou případech:

  • Chcete podporovat starší prohlížeče?. <link rel= "dns-prefetch" /> podporováno od IE10 a Safari 5. <link rel= "preconnect"> byl chvíli podporován v prohlížečích Chrome a Firefox, ale byl přidán do Safari až ve verzi 11.1 a stále není podporován v IE/Edge. Pokud potřebujete tyto prohlížeče podporovat, použijte <link rel= "dns-prefetch" /> jako záložní možnost pro <link rel= "preconnect">.
  • Chcete zrychlit připojení k více než 4-6 doménám. Štítek <link rel= "preconnect"> Nedoporučuje se používat s více než 4-6 doménami, protože navázání a udržování spojení je nákladná operace. <link rel= "dns-prefetch" /> spotřebovává méně zdrojů, takže je v případě potřeby použijte.

podrobnosti

Volitelný štítek. Prohlížeč nemusí postupovat podle tohoto pokynu, takže nemusí provést překlad DNS, například pokud je na stránce mnoho takových značek nebo v jiném případě.

Co je DNS. Každý server na internetu má jedinečnou IP adresu, která vypadá 216.58.215.78. Název webu se obvykle zadává do adresního řádku prohlížeče (např. google.com) a servery DNS (Domain Name System) jej přiřazují k IP adrese serveru (216.58.215.78).

Pro určení IP adresy musí prohlížeč dotazovat DNS server. Při připojení k nové doméně třetí strany trvá 20–120 ms.

DNS je v mezipaměti, i když ne příliš spolehlivě. Některé operační systémy a prohlížeče ukládají dotazy DNS do mezipaměti: to ušetří čas na opakované dotazy, ale na ukládání do mezipaměti se nelze spolehnout. Na Linuxu to většinou nefunguje vůbec. Chrome má mezipaměť DNS, ale ta trvá jen minutu. Systém Windows ukládá odpovědi DNS do mezipaměti po dobu pěti dnů.

předvykreslení

<link rel= "prerender"> požádá prohlížeč, aby stáhl adresu URL a zobrazil ji na neviditelné kartě. Když uživatel klikne na odkaz, stránka by se měla okamžitě zobrazit. To se hodí, pokud jste si jisti, že uživatel navštíví určitou stránku a chce urychlit její zobrazení.

Navzdory (nebo kvůli) výjimečné účinnosti této značky v roce 2019 <link rel= "prerender"> špatně podporovány ve velkých prohlížečích. Zobrazit další podrobnosti. níže.

syntax

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

href ukazuje na adresu URL, kterou chcete začít vykreslovat na pozadí.

Kdy použít

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

Nepoužívejte nadměrně. Předběžné vykreslování je extrémně nákladné z hlediska šířky pásma a paměti. Nepoužívat <link rel= "prerender"> pro více než jednu stránku.

podrobnosti

Volitelný štítek. Prohlížeč nemusí tento pokyn dodržovat a může jej ignorovat, například při pomalém připojení nebo při nedostatku volné paměti.

Pro úsporu paměti Chrome neprovádí úplné vykreslovánía pouze preload NoState. To znamená, že Chrome načte stránku a všechny její zdroje, ale nevykreslí ani nespustí JavaScript.

Firefox a Safari tuto značku vůbec nepodporují. To neporušuje specifikaci, protože prohlížeče nejsou povinny se těmito pokyny řídit; ale stále smutný. Chyba při implementaci Firefox je otevřený sedm let. Existují zprávy, že Safari ani tuto značku nepodporuje.

Shrnutí

Použití:

  • <link rel= "preload"> - když potřebujete zdroj během několika sekund
  • <link rel= "prefetch"> - když potřebujete zdroj na další stránce
  • <link rel= "preconnect"> - když víte, že budete zdroj brzy potřebovat, ale ještě neznáte jeho úplnou URL
  • <link rel= "dns-prefetch"> - podobně, když víte, že budete zdroj brzy potřebovat, ale ještě neznáte jeho plnou URL (u starších prohlížečů)
  • <link rel= "prerender"> — když jste si jisti, že uživatelé přejdou na určitou stránku, a chcete urychlit její zobrazení

Zdroj: www.habr.com

Přidat komentář