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.
Kontroly, které tenhle návod řeší
Když je v reportu některá z nich červená nebo okrová, patří sem. Váha je počet bodů, o které se při chybě přijde.
| Kontrola | Proč na ní záleží | Váha |
|---|---|---|
| Skripty od třetích stran | Měřicí kódy, chaty a widgety se stahují z cizích serverů, na jejichž rychlost nemáte vliv. Bývají hlavní příčinou pomalé odezvy. | 6 |
| Načítání písem | Písmo stažené z cizí domény bez nastavení font-display nechá text na okamžik zmizet. Kromě rychlosti je to i otázka ochrany osobních údajů. | 4 |