Webové stránky sú preplnené nepoužívaným kódom

Išli by ste na 3-dňový trek v horách s 8 kg navyše v batohu, o ktorých viete, že ich vôbec nebudete potrebovať? Pretože presne toto robíme s väčšinou webových stránok.

V priemere takmer 50 % kódu, ktorý od návštevníkov vyžadujeme stiahnuť, zostáva úplne nevyužitého. Hlavne JavaScript a CSS.

Dopad presahuje len výkon a obchodné metriky. Zamyslite sa nad batériou svojho smartfónu. Mobilný procesor musí spracovať každý riadok kódu, aj keď je úplne nepoužívaný. Každý zbytočný skript odoberá energiu bez akéhokoľvek úžitku.

Ale vráťme sa a zamerajme sa hlavne na výkon a obchodné metriky.

Množstvo JavaScriptu rastie

S rýchlejším internetom a výkonnejšími zariadeniami rastie aj množstvo JavaScriptu. Medziročne zaznamenávame rast približne 14 %.

Hlavným zdrojom problému sú statické generátory, primárne vyvinuté pre aplikácie, ale používané aj pre webové stránky. WordPress pluginy k tomuto neporiadku tiež prispievajú. Napríklad pluginy pre kontaktné formuláre často načítavajú súvisiaci JavaScript a CSS na každej stránke, nie len na tej, kde sa formulár skutočne používa. S implementovaným reCAPTCHA to zaberá niekoľko megabajtov kódu na úplne každej stránke.

Predtým, než budeme obviňovať reCaptchu, Google Tag Manager a ďalšie analytické skripty, majme na pamäti, že vo viac ako 80 % prípadov je za plytvanie JavaScriptom zodpovedný vlastný kód, nie kód tretích strán.

Preplnené weby tiež spotrebovávajú naše obmedzené mobilné dátové balíčky na smartfónoch rýchlejšie, ako stihneme dojesť večeru. Problém je však aj na strane crawlerov. Keď Google musí načítavať megabajty nepoužívaného JavaScriptového kódu, znižuje to počet stránok, ktoré navštívi. Tým sa znižuje šanca na crawlovanie a indexovanie.

Len si predstavte, Google potrebuje približne 9-krát viac zdrojov na crawlovanie a vykreslenie stránky s veľkým množstvom JavaScriptu v porovnaní s obyčajnou HTML stránkou.

jQuery je stále všade

Pred rokmi bola jQuery najpopulárnejšia JavaScriptová knižnica. Veľmi pomáhala. Aj ja ako vývojár som ju používal. Postupom času som však začal uprednostňovať čistý JavaScript, keďže to výrazne to zrýchľuje načítavanie stránok a redukuje problémy.

Žiaľ, aj v roku 2024 bol jQuery stále na takmer 75 % mobilných stránok. jQuery Migrate pre spätnú kompatibilitu bol stále na 33 % stránok. Obe knižnice majú spolu 101 kilobajtov kódu. Väčšinou nepoužívaného a nepotrebného.

Na desktope s neobmedzeným rýchlym internetom a dostatočne dobrým procesorom tých 101 KB kódu navyše nikto naozaj nevidí. Na mobile, kde parsovanie a kompilácia kódu trvá až 5-krát dlhšie, sa pocit pomalosti stáva veľmi reálnym.

CSS sa nafukuje tiež, spolu s nadmerným DOM

Je tu ešte jeden problém a nemali by sme obviňovať iba JavaScript. CSS je tiež zdrojom pomalých webov.

Môžeme hovoriť napríklad o Elementore, jednom z najpopulárnejších drag-and-drop builderov vo WordPress. Elementor často pridáva viac ako 300 KB CSS bez toho, aby ste na stránku pridali akýkoľvek prvok. Existujú síce funkcie, ktoré sa to snažia minimalizovať, ale stále to nie je dostatočne efektívne. Stránky v Elementore sú jednoducho preplnené tonami nepoužívaného kódu.

Na druhej strane, page buildery ako Elementor majú problémy aj s nadmerným DOM. Pri rovnakom jednoduchom prvku, kde Gutenberg potrebuje len 8 DIV-ov, Elementor používa viac ako 40. Pre prehliadač a procesor zariadenia to znamená omnoho viac práce na stiahnutie, spracovanie a vykreslenie obsahu.

Ako to vyriešiť?

Riešenie vo väčšine prípadov pravdepodobne nie je jednoduché. Osobne verím, že každá firma, ktorá berie podnikanie na internete vážne, by mala investovať do svojho webu, optimalizovať ho a priniesť návštevníkom lepšiu používateľskú skúsenosť.

Rýchlejšie a menšie weby pomáhajú všetkým. Crawlerom, návštevníkom a dokonca aj majiteľom webov, ktorí budú mať viac peňazí vo vrecku vďaka vyšším konverziám.