Weby jsou přehlcené nepoužívaným kódem

Vyrazili byste na třídenní trek do hor s 8 kg navíc v batohu, o kterých víte, že je vůbec nebudete potřebovat? Protože přesně tohle děláme s většinou webů.

V průměru téměř 50 % kódu, který po návštěvnících vyžadujeme ke stažení, zůstane zcela nevyužito. Hlavně JavaScript a CSS.

Dopad přesahuje samotný výkon a obchodní metriky. Zamyslete se nad baterií svého smartphonu. Mobilní CPU musí zpracovat každý řádek kódu, i když je zcela nevyužitý. Každý zbytečný skript zbytečně vybíjí baterii.

Ale vraťme se zpět a zaměřme se hlavně na výkon a obchodní metriky.

Množství JavaScriptu roste

S rychlejším internetem a výkonnějšími zařízeními roste i množství JavaScriptu. Meziroční nárůst činí přibližně 14 %.

Hlavním zdrojem problému jsou statické generátory, vyvinuté primárně pro aplikace, ale používané i pro weby. Svůj díl přidávají i pluginy pro WordPress. Například pluginy pro kontaktní formuláře často načítají související JavaScript a CSS na každé stránce, nejen na té, kde se formulář skutečně používá. S implementovanou reCAPTCHA to na každé jednotlivé stránce znamená několik megabajtů kódu.

Než z toho ale obviníme reCAPTCHA, Google Tag Manager a další analytické skripty, mějte na paměti, že ve více než 80 % případů je za plýtvání JavaScriptem zodpovědný vlastní kód (first-party), nikoli kód třetích stran.

Přehlcené weby také rychleji vyčerpávají naše omezené mobilní datové balíčky na smartphonech. Problém je ale i na straně crawlerů. Když musí Google načítat megabajty nevyužitého JavaScriptu, snižuje počet stránek, které navštíví. Tím se snižuje šance na procházení a indexaci.

Jen si představte, Google potřebuje přibližně 9× více prostředků k procházení a vykreslení stránky náročné na JavaScript ve srovnání s obyčejnou HTML stránkou.

jQuery všude

Před lety byl jQuery nejpopulárnější JavaScriptovou knihovnou. Hodně pomáhal. I já jako vývojář jsem ho používal. Postupem času jsem ale začal preferovat čistý JavaScript, což výrazně zrychluje načítání stránek.

Bohužel i v roce 2024 byl jQuery stále na téměř 75 % mobilních stránek. jQuery Migrate pro zpětnou kompatibilitu byl stále na 33 % stránek. Dohromady mají 101 kilobajtů kódu. Převážně nevyužitého a nepotřebného.

Na desktopu s neomezeným rychlým internetem a dostatečně výkonným CPU si těch 101 KB kódu navíc nikdo nevšimne. Na mobilu, kde parsování a kompilace kódu trvá až 5× déle, se ale pocit pomalosti stává velmi reálným.

CSS bobtná také, spolu s nadměrným DOM

Je tu ještě jeden problém a neměli bychom obviňovat jen JavaScript. Zdrojem pomalých webů je i CSS.

Můžeme mluvit například o Elementoru – jednom z nejpopulárnějších drag-and-drop builderů ve WordPressu. Elementor často přidá přes 300 KB CSS, aniž by na stránku přidal jakýkoli prvek. Existují funkce, které se to snaží minimalizovat, ale stále to není dostatečně efektivní. Stránky v Elementoru jsou jednoduše přehlcené tunami nevyužitého kódu.

Na druhou stranu mají page buildery, jako je Elementor, problémy i s nadměrným DOM. Pro stejný jednoduchý prvek, kde Gutenberg potřebuje jen 8 DIVů, Elementor používá přes 40. Pro prohlížeč a CPU zařízení to znamená spoustu práce navíc se stažením, zpracováním a vykreslením obsahu.

Jak to vyřešit?

Řešení ve většině případů asi není snadné. Osobně jsem přesvědčený, že každá firma, která to na internetu myslí vážně, by měla investovat do svého webu, aby ho optimalizovala a nabídla návštěvníkům lepší uživatelský zážitek.

Rychlejší a lehčí weby pomáhají všem – crawlerům, návštěvníkům i majitelům webů, kteří budou mít díky vyšším konverzím více peněz v kapse.