Rozšírené hľadanie
Štvrtok 28. Marec 2024 |
meniny má Soňa
Použití preconnect dns-prefetch pro včasné připojení k doménám třetích stran a zvýšení rychlosti web

Vzhůru dolů 16.01.2020 03:33 Docela často se stává, že na stránce potřebujeme stahovat prvky z jiných domén než je ta hlavní, na které web běží. Prohlížeč ovšem musí pro každou novou doménu zjednodušeně řečeno navázat spojení. A je blbé, když to dělá mnohokrát během procesu načítání stránky. Prostě to zdržuje. Možným řešením je použití meta značek preconnect a dns-prefetch, které prohlížeč informují o našich úmyslech navazovat spojení na cizí domény: Stane se pak to, že prohlížeč tato spojení naváže hned zkraje zpracování stránky. No a díky tomu pak může být načtení stránky mírně rychlejší. Obrázek: Tohle vypadá fajn, ale je to zjednodušené. V rámci „navázání spojení“ prohlížeč dělá tři úkony: DNS lookup, TCP handshake, Vyhodnocení TLS . CSS berte jen jako příklad. Preconnect je možné aplikovat na cokoliv. Dobře nastavený preconnect/dns-prefetch vám zlepší metriky jako je Doba do interaktivity nebo Load. Hodí se to dělat především u webů běžících na HTTP/2. Nečekejte od téhle techniky kdovíjaké zázraky, ale určitě je dobré ji znát. Šetřete s ní a použijte na správných místech. Prostě to není tak jednoduché, proto prosím čtěte dále. Pojďme to probrat nejprve z technického pohledu. Preconnect a dns-prefetch technicky Určitě vás budou zajímat rozdíly mezi těmito dvěma zápisy: preconnect Obstará všechny tři úkony potřebné k navazování spojení , ale nemá podporu v Internet Exploreru 11. caniuse.com/preconnect dns-prefetch Uvládne z těchto tří kroků jen DNS lookup, ale má podporu ve všech prohlížečích. caniuse.com/dns-prefetch Když tedy uvedeme oba zápisy, v moderních prohlížečích se provede preconnect a v IE11 dns-prefetch, který poslouží jako částečný fallback. Uvedení v HTML hlavičce Jde o základní způsob použití. Prostě do hlavičky někam před link na CSS uvedeme: Atribut crossorigin je totéž jako zápis crossorigin="anonymous" – povoluje sdílení prvků napříč doménami – v případě hodnoty anonymous pak bez výměny cookies a podobných informací. HTTP hlavička Oba „hinty“ je pak možné vložit na backendu přímo do HTTP hlaviček a ušetřit tím nějaký čas potřebný pro stažení a parsování HTML: Link: ; rel=preconnect Link: ; rel=dns-prefetch Kdy preconnect použít a osvědčené postupy Velmi často se vývojářky a vývojáři dostanou k nápadu na použití preconnect radami z nástroje Lighthouse. Ten obvykle hlásí něco jako „Preconnect to required origins“ nebo „K potřebným zdrojům se připojujte předem“. Lighthouse je ale stroj, takže vyhodnocení, na které domény je vhodné preconnect skutečně nasadit, už je na nás. Pokusím se pomoci. Příklady scénářů použití Vlastní doména třetího řádu Tady s preconnectem vůbec neváhejte. Pokud vám například HTML dokument běží na www.example.com a CSS na cdn.example.com, s preconnectem můžete ušetřit důležitý čas v kritické vykreslovací cestě. Komponenty třetí strany Něco se bude stahovat, nevíme přesně co, ale víme, z jakých domén. Third parties jsou většinou dobrý adeptem na preconnect. Ovšem pozor, vyberte si jen ty nejdůležitější pro vykreslení první obrazovky. Typický příklad je například reklama, která se zobrazuje nad zlomem, chatovací služby, Google Fonts nebo třeba Hotjar a podobné nahrávací služby. Streamování médií Je velmi pravděpodobné, že uživatel si na stránce pustí video nebo audio? Jasně, pojďme přednavázat spojení na doménu, z které stream pojede. Osvědčené postupy Je nutné si uvědomit dvě věci: Každý preconnect „sežere“ prohlížeči výkon, který v tu chvíli potřebuje pro důležitější úkoly, například vykreslování stránky. Po 10 vteřinách od přednavázání spojení, kdy se z domény nezačalo nic stahovat, prohlížeč spojení zavře. Z toho vyplývá – ano, používejte preconnect, ale opatrně s ním. Doporučené maximum přednavázaných spojení je za mě 5 - 7 domén. Preconnect je skvělý na zdroje nutné pro urychlení prvních vykreslení stránky a tak by se také měl používat. Děkuji partnerům Vzhůru dolů. Aktuálně hledají tyto lidi: .