Preload: Přednačtení prvků stránky detailně a do hloubky

Vzhůru dolů 27.05.2020 05:30 Preload je deklarace, které vyvolává dřívější stažení prvku stránky a v případě JavaScriptu odděluje stažení od spuštění. Vezměme jednoduchý příklad s webfonty. Můžeme jich v CSS mít nalinkováno více. Dva konkrétní soubory včak chceme stáhnout s vyšší prioritou. Uděláme to takhle: Prohlížeč těmto dvěma souborům zvýší prioritu stažení. Ve vodopádu průběhu stahování prvků ze stránky to bude vypadat jako na následujícím obrázku. Obrázek: Preload předbíhá ve frontě. Vytrhne soubory webfontů z jejich přirozeného pořadí a ty přednačtené stáhne dříve. Díky tomuto triku pak dojde k rychlejšímu zobrazení písem ve správném fontu na důležitých místech stránky. Například následovně: Obrázek: Před nasazením preload to tak rychlé nebylo. Optimalizace webfontů u Financial Times. Zdroj: Addy Osmani. O čem se v článku budeme bavit? Obsah Atribut as – určení prioritizace Atribut type - mime type Atribut crossorigin – pravidla pro CORS, u webfontů nutné Atribut media - Media Queries HTTP hlavička JavaScriptem a dynamicky Detekce podpory Podpora v prohlížečích Možné scénáře použití Preload se občas zaměňuje s jinou užitečnou meta značkou . O té ale píšeme na jiném místě. → Související: Preconnect a dns-prefetch: Přednavázání spojení Preload je užitečná pokročilá technika, kterou podporují všechny prohlížeče kromě Firefoxu a Internet Exploreru. Dejme ale důraz na slovo pokročilá. Opatrně s tím Ve zkušených rukou může být preload silná zbraň věc. Raději ale upozorním na to, že jako v mnoha jiných případech je to dobrý sluha, ale zlý pán. Dokud si nejste zcela jistí, co děláte, s preloadem si raději nehrajte. Ono totiž porušení přirozeného vodopádu stahování frontendových souborů může být ke škodě. Už na prvním obrázku je například jedna nevýhoda vidět – díky tomu, že se soubory přednačtených fontů stahují souběžně s CSS, oddálí zpracování stylů a tím také první vykreslení stránky. Stále častěji totiž potkávám weby, kde byla aplikována tzv. Babicova přednačítací metoda: „Když už nevíš, co s tím, dej tam preload.“ Opatrně s tím. V detekci zbytečných preloadů může pomoci sledování konzole prohlížeče. Chrome totiž hlásí nevyužité přednačtení: The resource was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it wasn't preloaded for nothing. Tato informativní hláška se zobrazí zhruba 3 vteřiny po události Load. U takto označených zdrojů je pravděpodobné, že jde o zbytečný . Atribut as – určení prioritizace Tento nepovinný atribut vám doporučuji k preload přidávat vždy. Pomohou prohlížeči určit, o jaký prvek se jedná. Přednačtené prvky stránky používající atribut as totiž budou mít stejnou prioritu jako typ zdroje, který je uvedený v hodnotě. Například preload as="style" získá nejvyšší prioritu, zatímco as="script" získá nízkou nebo střední prioritu. Tyto prvky pak také podléhají stejným zásadám Content Security Policy a do prohlížeče dorazí se správnou hlavičkou Accept. Možných hodnot atributu as je celá řada. Vybírám zde ty nejvíce použitelné: Hodnota Typ souboru audio Audio, typicky v prvku . document HTML dokument, typicky nebo . embed Prvek . fetch Prvek, který použijeme pomocí fetch nebo XHR, např. JSON soubor. font Soubor s fontem, např. WOFF2. image Obrázek. object Prvek . script Soubor s JavaScriptem. style CSS soubor. worker Soubor s javascriptovým web workerem. video Video soubor, typicky v prvku . Všechny možné hodnoty atributu as jsou ve specifikaci. Atribut type - mime type Nepovinný atribut, který umožní prohlížeči zvážit, zda daný typ prvku podporuje a tedy zda jej chce stahovat nebo ne. Vezměme příklad: Soubor video.webm přednačtou díky atributu type="video/webm" pouze prohlížeče, které formát WEBM zvládají, tedy všechny kromě Exploreru a Safari. Atribut crossorigin – pravidla pro CORS, u webfontů nutné Pokud máte na webu nastaveno Cross-Origin Resource Sharing , můžete u  uvést atribut crossorigin. Toto platí hlavně pro případy, kdy stahujete prvky z jiné domény než je ta, odkud se stahuje dokument. V případě přednačtení webfontů ale platí, že byste tento atribut měli uvádět vždy – i když jsou soubory stahované ze stejné domény. Pokud byste crossorigin neuvedli, stáhnou se soubory s fonty dvakrát. Takže fonty vždy přednačítejte takto: Atribut media - Media Queries Může se vám stát, že některý soubor potřebujete přednačíst jen v určitém responzivním kontextu Media Queries. Pak neváhejte využít volitený atribut media: Zde můžeme ukončit téma atributů a podívat se úplně jinam. Vlastně úplně mimo HTML. HTTP hlavička Občas se hodí přidávat informace o dokumentu už rovnou na backendu, bez nutnosti zásahu do HTML. Je tudíž dobré vědět, že v do HTTP hlavičky se toho vejde… Následuje bambilión různých příkladů: Link: ; rel=preload; as=font; type="font/woff2" Link: ; rel=preload; as=script Link: ; rel=preload; as=image Link: ; rel=preload; as=font; crossorigin; type="font/woff2" JavaScriptem a dynamicky Jestliže se vám zachtělo přidávat naopak až při zpracování stránky na frontendu, JavaScriptem, možnosti tady jsou: Uvedený kód do DOMu přidá následující: Ptáte-li se, k čemu by vám bylo přednačtení vkládáné dynamicky až javascriptem, pak si uvědomme, že preload vždy vyvolává stažení souboru a je mu v zásadě jedno, kdy to udělá. Detekce podpory Když už jsme u JS, mohla by se vám také hodit detekce podpory … var preloadSupported = function …čímž se dostáváme k tématu podpory v prohlížečích. Podpora v prohlížečích Kromě Exploreru zatím podle CanIUse přednačtení nepodporuje Firefox. Podle Bugzilly vlastně trochu podporuje, ale nechávají to skryté za vlaječkovým nastavením. Takže v praxi nepodporuje. Nemělo by to vadit, protože hrátky s přednačtením považuji za klasických příklad progressive enhancement, dobrovolného vylepšení uživatelského prožitku. Obrázek: Podpora přednačtení prohlížečích. Zdroj: CanIUse Embed. Možné scénáře použití Vybral jsem pár konkrétních příkladů, kdy se může hodit. Jen tak, pro inspiraci. Přednačtení kritických fontů O použití pro potřeby zrychlení webových fontů se v článku několikrát otíráme: Je ale dobré ještě jednou zdůraznit, že se tímto soubory s webfonty dostanou prioritou stahování ještě před naše CSS a zpozdí nám tím mírně metriku FCP. Proto bychom takto neměli zvýhodňovat všechny řezy webfontů, ale jen ty opravdu podstatné právě pro první vykreslení stránky. Zvýšení priority obrázku z CSS Vezměme, že v hlavičce stránky máme obrázek. Ten je ale vložený v CSS na pozadí prvku: .hero Je asi přirozené takto podobný typ obrázků vkládat, ale ve frontě stahování dostane nízkou prioritu. Pokud bychom obrázku chtěli pomoci k dřívějšímu zobrazení, zvážíme preload: Zvýšení priority asynchronního JS Tento způsob vložení JavaScriptu do HTML určitě znáte: Je výhodný pro méně důležité a samostatně fungující prvky stránky, protože neblokuje první vykreslení. Jenže tento soubor se pak stáhne a kód uvnitř provádí s velmi nízkou prioritou. Pokud bychom prioritu chtěli zvýšit, uděláme to právě pomocí přednačtení: Web Treebo takto vykreslovací metriky zlepšil o 1 vteřinu. Píše to Addy Osmani ve svém textu Preload, Prefetch And Priorities in Chrome. Asynchronní stažení CSS Občas se může hodit soubory se styly načítat asynchronně, například při nějaké vlastní implementaci kritického CSS. Preload tuto vlastnost nabízí díky tomuto elegantnímu triku: