Jak minimalizovat dopad skriptů třetích stran na rychlost načítání webu

Od doby, co Google v loňském roce prohlásil rychlost načítání za oficiální hodnotící faktor, je rychlost načítání mezi SEO specialisty poměrně žhavé téma. Ze zkušenosti víme, že většina webů trpí zejména na ohromné množství externích skriptů, které je nutné načítat. Musí to tak opravdu být? A pokud ano, nedá se i s nimi zacházet tak, aby nám načítání důležitého obsahu nebrzdily? Právě tomu se dnes podíváme na zoubek. Vycházet při tom budeme jak z vlastních zkušeností, tak i z nápovědy Google pro developery.

Proč to vůbec řešit?

Externí skripty nám umožní na web přidat další funkcionality (analytika, A/B testování, sociální tlačítka, mapy…), zároveň s sebou ale nesou řadu nevýhod. Jakýkoliv JavaScript může negativně ovlivnit rychlost načítání webu. V případě těch externích je to ještě trochu komplikovanější, protože nejsou plně v naší moci. Jejich zpracování přitom probíhá ve dvou fázích:

1. Stažení

Pro stažení jednotlivých skriptů je nutné nejprve navázat spojení s cílovým serverem. Už to zabere určitý čas potřebný pro nastavení komunikace, zabezpečení atp. Následně se na každý zdroj pošle požadavek a zdroj se musí stáhnout. Skripty navíc často zapříčiní další požadavky pro stažení dalších zdrojů, které nemusí být optimalizované. Příkladem mohou být například neoptimalizované obrázky.

2. Renderování

Druhou fází je samotné renderování skriptu vaším prohlížečem. Externí skripty jsou často vykonány synchronně, čímž blokují renderování HTML kódu.

Jak to tedy vlastně mohu řešit?

Základ je v rozhodování

Pro minimalizaci negativních dopadů na výkon vašeho webu platí v první řadě základní pravidlo. U každého skriptu, pluginu, nástroje nebo měřicího kódu si dvakrát rozmyslete, jestli ho opravdu potřebujete. Je jasné, že některým skriptům se určitě nevyhnete, je ale opravdu nutné využívat HotJar v kombinaci se Smartlookem, když se jedná v podstatě o stejné analytické nástroje?

Pokud dojdete do fáze, kdy se budete muset rozhodnout pro jeden či druhý externí zdroj, zkuste do rozhodování začlenit také jeho náročnost a množství kódu.

Optimalizujte načítání externích zdrojů

V případě, že externí skript nemá pro váš web žádnou přidanou hodnotu, jednoduše se ho zbavte. V identifikaci takových zdrojů vám může pomoci záložka „Coverage“ v Chrome Console, která vám odhalí nevyužité zdroje, viz obrázek:

Nevyužité zdroje ze záložky Coverage.

Pokud ale skript potřebujete, můžete alespoň optimalizovat proces jeho načítání. Už jsme si řekli, že načítání externích zdrojů  často probíhá asynchronně, což znamená, že se vždy čeká na jejich načtení a teprve poté se zpracuje HTML kód. To ale lze poměrně jednoduše ovlivnit. V první fázi je potřeba se rozhodnout, jestli je daný skript potřeba renderovat ještě před zpracováním HTML kódu. V případě, že identifikujeme zdroje, pro které toto neplatí, můžeme jejich načtení odložit.

Použití async a defer atributů

Pomocí těchto atributů můžeme označit skript, čímž prohlížeči řekneme, aby nečekal na jeho načtení, pokračoval dále v konstrukci DOMu a skript zatím načítal v pozadí. Až teprve když dojde k jeho načtení se skript začne renderovat. Díky tomu uvidí uživatel důležitý obsah bez nutnosti čekat na načtení všech skriptů. Níže si povíme o rozdílu mezi těmito atributy.

Async

Skripty, kterým přiřadíme atribut async, se sice budou načítat v pozadí, ale jakmile k plnému načtení dojde, okamžitě se začnou renderovat. Pokud tedy k načtení dojde ještě před plnou konstrukcí DOMu, můžou jeho konstruování přerušit.

Defer

Defer je ve své podstatě trochu přísnější variantou async atributu. K renderování skriptu totiž nedojde okamžitě, jakmile je skript načtený. Počká se tedy na plné zpracování HTML dokumentu a teprve poté se skript renderuje. Použití tohoto atributu je vhodné třeba u prvků, které se nachází mimo viewport uživatele (mapa na konci stránky).

Rozdíl mezi async a defer. (zdroj: https://www.emaze.com/@AITLQRWZ)

Urychlete navázání spojení s externími servery

Další možností optimalizace je přednostní navázání spojení se servery, ze kterých externí zdroje stahujeme. To nám může urychlit řádově až půl vteřiny. Tyto techniky se nazývají resource hints. Pokud by vás toto téma zajímalo, věnovali jsme mu samotný článek.

Udělejte z externích skriptů interní

Jednou z možností je také přesunout externí skripty na svůj server. Výhoda je v tomto případě pravděpodobně všem jasná. Ušetříte čas nutný pro navázání spojení. Kromě toho můžete zefektivnit využití cache či využít protokolu HTTP/2.

Z toho ale plyne jedna zásadní nevýhoda. V případě, že se skripty zaktualizují, nedojde k automatické aktualizaci u vás.

Jak identifikovat problémové externí skripty?

Možností, jak identifikovat skripty, které aktuálně blokují renderování stránky, je mnoho a existuje na to řada nástrojů. Jedním z nich, který určitě všichni znáte, je PageSpeed Insights. Skripty ale můžete zjistit také přímo z console prohlížeče Google Chrome:

• Otevřete console (CTRL + SHIFT + J).
• Jděte na záložku „Audits“.
• Vyberte audit „Performance“ a audit spusťte.

Obrázek 1 – Lighthouse audit v prohlížeči Chrome

Následně hledejte položku s návem „Eliminate render-blocking resources“. Pokud ji nenajdete, pravděpodobně ji vypátráte v úspěšných auditech. A máte vyhráno! V případě, že ji najdete, uvidíte něco takového:

Obrázek 2 – zdroje blokující renderování stránky v nástroji Lighthouse

V přehledu bude seznam stylů a skriptů, které aktuálně blokují renderování stránky, a potenciální úspora v případě, že by tomu tak nebylo. Kromě externích skriptů zde uvidíte také ty interní. Jak už bylo řečeno výše, je třeba zjistit, jestli jsou skripty kritické, a proto je nutné je načítat právě před vykreslením HTML dokumentu.

Jak identifikovat kritické skripty

V identifikaci kritických skriptů nám opět pomůže samotná console v prohlížeči. Potřebujeme otestovat, jestli odložení jejich načtení ovlivní obsah ve viewportu uživatele:

• Otevřete consoli (CTRL + SHIFT + J).
• Otevřete záložku „Network“.
• V nástroji „Request blocking“ zaškrtněte „Enable request blocking“.
• Pomocí tlačítka „+“ přidejte cestu ke zdroji.
• Aktualizujte stránku.

Pomocí tohoto postupu zjistíte, jak by vypadala stránka bez využití blokovaných zdrojů, ať už se jedná o skripty, nebo styly. Pokud zjistíte, že skripty nejsou pro obsah kritické, můžete jejich načtení bezpečně odložit.