Skripty třetích stran: kolik stojí měření, chaty a widgety
Cizí skripty jsou nejčastější příčina pomalého webu, kterou nikdo neřeší, protože je nikdo nepovažuje za součást webu. Přitom měření, chat, mapa a přehrávač videa dohromady běžně stáhnou víc dat než celý zbytek stránky.
Kolik co typicky stojí
| Skript | Přenesená data | Čas na hlavním vlákně |
|---|---|---|
| Měření návštěvnosti | 50 až 90 kB | 100 až 300 ms |
| Správce značek s deseti značkami | 200 až 500 kB | 300 až 900 ms |
| Chatovací widget | 300 kB až 1 MB | 400 ms až 2 s |
| Vložené video z cizí služby | 500 kB až 1,5 MB | 500 ms až 2 s |
| Vložená mapa | 400 až 800 kB | 300 až 800 ms |
| Widget s recenzemi | 100 až 300 kB | 150 až 500 ms |
Čísla se liší podle poskytovatele, ale řád je stálý. Web se třemi widgety má rozpočet vyčerpaný dřív, než se začne načítat vlastní obsah.
Postup, který zabere hodinu a obvykle nejvíc pomůže
- Vypište si všechny cizí domény, ze kterých se něco stahuje. V nástrojích pro vývojáře na kartě Network seřaďte podle domény.
- U každé se zeptejte, kdo to používá. Ne k čemu to slouží, ale kdo se na ta data v posledním půlroce díval.
- Co nikdo nepoužívá, zrušte. Tohle bývá polovina.
- Co je potřeba, ale ne hned, načtěte později. Chat, recenze, mapa.
- Co je potřeba hned, nechte a smiřte se s cenou. Obvykle jde o jeden měřicí skript.
Jak odložit načtení až na interakci
Chat, mapa i video se dají nahradit statickou náhradou, která se vymění za skutečný widget teprve tehdy, když návštěvník projeví zájem.
- Chat nahraďte obyčejným tlačítkem. Skript se stáhne až po kliknutí. Rozdíl na mobilu bývá přes sekundu.
- Mapu nahraďte obrázkem s odkazem. Většina lidí mapu stejně neotevře, chtějí jen vidět adresu.
- Video nahraďte náhledovým obrázkem s tlačítkem přehrát. Přehrávač se načte po kliknutí.
- Widget s recenzemi načtěte, teprve až se k němu člověk odroluje.
Vliv na Core Web Vitals
| Ukazatel | Jak ho cizí skripty ovlivňují |
|---|---|
| LCP | Nepřímo. Skripty soutěží o připojení a odsouvají stažení hlavního obrázku |
| INP | Přímo a nejvíc. Dlouhé úlohy na hlavním vlákně zdrží reakci na klepnutí |
| CLS | Přímo, když se widget vloží mezi obsah bez rezervovaného místa |
Co dělat, když skript vyžaduje marketing
Argument o rychlosti sám nestačí. Užitečnější je ukázat cenu: kolik sekund skript přidá na mobilu a co to znamená pro počet lidí, kteří odejdou dřív, než se stránka načte. Když je skript nezbytný, dá se aspoň omezit na stránky, kde je opravdu potřeba. Chat na stránce s obchodními podmínkami nikdo nečeká.
Časté dotazy
Zpomaluje Google Tag Manager web?
Samotný kontejner je malý. Zpomalují ho značky uvnitř, které se přes něj načítají, protože každá stáhne vlastní skript z cizí domény. Typický český web má v kontejneru osm až patnáct značek a polovinu z nich nikdo nesleduje. Audit obsahu kontejneru bývá nejrychlejší cesta ke zrychlení, jakou existuje.
Pomůže načítat skripty s atributem async?
Pomůže s blokováním vykreslení, ne s celkovou zátěží. Atribut async znamená, že se skript stáhne souběžně, ale jakmile se stáhne, provede se a zablokuje hlavní vlákno. U měřicích skriptů je lepší defer, u těch, které nejsou potřeba hned, je nejlepší načíst je až při interakci uživatele.
Jak poznám, který skript škodí nejvíc?
V nástrojích pro vývojáře na kartě Performance spusťte záznam načtení a podívejte se na rozpis podle domény. Ukáže, kolik času na hlavním vlákně spotřeboval který zdroj. Druhá možnost je vypnout skripty po jednom v blokovači a měřit rozdíl. U chatovacích widgetů a přehrávačů videa bývá rozdíl v řádu sekund.
Jakub Knytl
Patnáct let opravuji weby českým firmám a e-shopům. Většina problémů, o kterých tu píšu, mě potkala u klienta dřív, než jsem o nich napsal.
Související návody
Mobilní verze webu: co se hodnotí a co lidi vyhání pryč
Google hodnotí výhradně mobilní verzi. Co na mobilu chybí, pro vyhledávač neexistuje, i kdyby to na počítači bylo.
Přístupnost a SEO: kde se překrývají a kde ne
Přístupný web se lépe čte i robotům. Od roku 2025 navíc platí povinnost pro část komerčních služeb podle evropské směrnice.
Core Web Vitals srozumitelně: LCP, INP a CLS
LCP, INP a CLS bez omáčky: kde přesně jsou hranice, proč vám Search Console mlčí a co na WordPressu opravdu zabere. S čísly a pořadím oprav.
Pojmy z tohoto textu
- Core Web Vitals Trojice ukazatelů, kterými Google měří, jak se web chová k návštěvníkovi: rychlost načtení, odezva a stabilita obrazu.
- LCP Doba, za kterou se zobrazí největší prvek v úvodní části obrazovky. Obvykle jde o hlavní obrázek nebo nadpis.
- INP Doba mezi klepnutím a viditelnou reakcí stránky. Nahradilo starší měřítko FID a je mnohem přísnější.
- CLS Míra toho, jak moc se obsah stránky během načítání posouvá. Vysoká hodnota znamená, že čtenář kliká na něco jiného, než chtěl.
- Odložené načítání Technika, kdy se obrázky a rámce načtou až ve chvíli, kdy se k nim návštěvník přiblíží. U hlavního obrázku škodí.
- Blokující zdroj Soubor, který musí prohlížeč stáhnout a zpracovat, než začne stránku vykreslovat. Typicky styly a skripty v hlavičce.
Nevíte, jestli se vás to týká?
Pusťte kontrolu na svůj web a uvidíte, jestli tenhle problém máte. Trvá to necelou minutu.