Když web zpomaluje sám sebe: Proč velké CSS a JS knihovny škodí výkonu

V době, kdy Google i Seznam zvýhodňují rychlé weby s kvalitním uživatelským zážitkem, se ukazuje paradox moderního vývoje. Snaha odlišit se pomocí cool technologií, efektů a knihoven často vede k opačnému výsledku – vyšší složitosti a horšímu výkonu. Zpomalení pak nezpůsobují jen obrázky nebo hosting, ale hlavně nadbytečné CSS/JS knihovny, ikonové sady, animace a multimédia, které web zatěžují víc, než kolik užitku přinášejí.

Problém velkých CSS a JS knihoven

Frameworky jako Bootstrap nebo ikonové sady typu Font Awesome urychlují vývoj, ale často výrazně zpomalují web. Obsahují totiž velké množství stylů a skriptů, z nichž web reálně využije jen malou část, píše web Developer Mozilla.

Typickým příkladem plýtvání jsou ikonové fonty. Kvůli několika ikonám se načítá celá knihovna, včetně fontů a doprovodného kódu. Modernější a rychlejší řešení jsou SVG ikony, které jsou menší a dají se načítat jen tam, kde jsou potřeba.

Situaci často zhoršují i marketingové skripty – analytika, A/B testy nebo externí widgety. Každý další skript znamená víc dat, víc výpočtů a delší čekání uživatele.

Čím méně zbytečného CSS a JavaScriptu web načítá, tím rychlejší a použitelnější je. Minimalistický frontend, selektivní načítání a omezení univerzálních knihoven (například jQuery) mají často větší přínos než jakákoli serverová optimalizace.

SVG ikony vs. ikonové fonty

Ikony patří mezi nejčastější prvky webového rozhraní – v navigaci, tlačítkách, patičce i formulářích. Právě proto mají překvapivě velký vliv na výkon. Dlouhé roky dominovaly ikonové fonty, dnes je ale stále častěji nahrazují SVG ikony, a není to náhoda, uvádí web Verpex.

Ikonové fonty (typicky Font Awesome) fungují podobně jako písmo. Prohlížeč musí:

• stáhnout CSS knihovny,
• stáhnout fontové soubory (woff, woff2…),
• načíst font do paměti,
• teprve potom vykreslit ikony.

Problém je v tom, že kvůli několika ikonám se obvykle načítá celá sada stovek nebo tisíců ikon, které web nikdy nepoužije. Navíc dokud se font nenačte, mohou ikony chybět nebo se zobrazí se zpožděním (FOIT/FOUT efekt).

SVG ikony jsou oproti tomu běžná vektorová grafika. Načítají se jen konkrétní ikony, jsou menší, vykreslí se okamžitě a nevyžadují žádné fonty ani skripty. Snadno se stylují přes CSS a zůstávají ostré na všech typech displejů.

Z pohledu výkonu i uživatelského zážitku jsou SVG ikony výrazně efektivnější – zejména na mobilech a pomalejších připojeních. Pokud cílem není univerzální balík ikon, ale rychlý web, SVG dává jednoznačně větší smysl.

Multimédia – proč video nestačí jen vložit

Video je jeden z nejtěžších prvků webu a bez optimalizace dokáže stránku výrazně zpomalit. Častou chybou je nahrání videa ve zbytečně vysokém rozlišení nebo bez komprese. To zvyšuje objem dat a prodlužuje načítání, hlavně na mobilech.

Pokud se video načítá hned při otevření stránky, soupeří o výkon s HTML, CSS a JavaScriptem a zhoršuje metriky jako Largest Contentful Paint (LCP). Problematické je i automatické přehrávání, které zatěžuje prohlížeč, připojení i baterii, i když uživatel video nesleduje.

Základem správného řešení je lazy loading – video se začne načítat až ve chvíli, kdy ho uživatel skutečně potřebuje. U externích platforem, například YouTube, je navíc nutné počítat s dalšími skripty a iframe prvky, které web zatěžují už při načtení stránky.

Video má tedy smysl jen tehdy, když je správně zmenšené, komprimované a načítané až v pravý čas. Jinak se z něj stává jedna z největších brzd výkonu webu.

V praxi dnes není problém video před publikací výrazně zmenšit a zkomprimovat pomocí dostupných online nástrojů – Squoosh (jednoduchý webový nástroj od Googlu pro optimalizaci médií) nebo FreeConvert (online kompresor videa, který umožňuje snížit datový objem bez nutnosti instalace nástrojů).

Méně je často více

Výkon moderního webu do velké míry závisí na tom, kolik kódu musí prohlížeč stáhnout a zpracovat, než se zobrazí skutečný obsah. Každý zbytečný CSS nebo JavaScript soubor prodlužuje načítání a zhoršuje použitelnost, zejména na mobilech.

Mnoho webů dnes načítá víc kódu, než skutečně potřebuje – univerzální frameworky, ikonové fonty, marketingové skripty nebo externí knihovny. Přitom právě odstranění nadbytečného CSS/JS, nahrazení ikonových fontů lehčími SVG, omezení externích knihoven a odložené načítání JavaScriptu patří k nejúčinnějším způsobům, jak web výrazně zrychlit.

Optimalizace výkonu tak často není o přidávání dalších technologií, ale o zjednodušení. O načítání jen toho, co má pro uživatele skutečnou hodnotu. Právě s tím pomáhá technická optimalizace a audit webu od CZECHIA.COM, které odhalí zbytečné zpomalující prvky a navrhnou konkrétní kroky ke zrychlení webu v praxi.