Posílejte obrázky ve správných rozměrech, moderním formátu a responzivních variantách, přičemž hlavní LCP obrázek načítejte prioritně. Odstraňte nepoužívané CSS a JavaScript, kód rozdělte podle stránek a interakcí a omezte skripty třetích stran. Fonty i dynamické prvky nastavte tak, aby neposouvaly rozvržení.
Optimalizace obrázků, CSS a JavaScriptu snižuje množství dat a práce, které prohlížeč potřebuje před zobrazením stránky a před tím, než ji lze ovládat. Cílem není co nejmenší soubor za každou cenu. Obrázek musí zůstat dostatečně kvalitní, styly nesmějí problikávat a interakce musí fungovat i po rozdělení kódu. Dobrá optimalizace vychází z kritické cesty konkrétní šablony a reálných zařízení.
Nejprve změřte vodopád požadavků, hlavní vlákno a prvky, které určují LCP, INP a CLS. Poté odstraňte nepoužívané zdroje a teprve následně komprimujte zbytek. Přidání jednoho univerzálního „speed“ pluginu bez testu může zdvojit lazy loading, změnit pořadí skriptů nebo poškodit formulář. Každé pravidlo proto potřebuje jasný účel, výjimky a regresní kontrolu.
Připravte efektivní obrazový proces
Originál při nahrání zpracujte do více rozměrů podle skutečných komponent. Prohlížeči nabídněte srcset a sizes, aby mobil nestahoval soubor pro desktop. Moderní formát volte podle obsahu a podpory s přiměřeným fallbackem. Fotografie, logo a jednoduchá ilustrace potřebují odlišné nastavení. Kompresi hodnoťte vizuálně v cílové velikosti, ne jen podle procent v nástroji.
Šířku a výšku deklarujte, aby prohlížeč rezervoval místo. Obrázky pod prvním zobrazením mohou používat nativní lazy loading, ale kandidát LCP má být objeven brzy a obvykle se neodkládá. Nepřednačítávejte celou galerii. Dekorativní pozadí zvažte v CSS, obsahový obrázek v HTML s vhodným alternativním textem. Automatický CDN transformátor testujte při ořezech, cache a nedostupnosti originálu.
Zkraťte blokování CSS bez rozbitého vzhledu
Zjistěte, které styly jsou potřebné pro první vykreslení a které patří jen komponentám níže na stránce nebo na jiné stránce. Odstraňte staré knihovny a duplicitní frameworky dříve, než se pokusíte minifikovat všechno. Kritické CSS lze vložit přímo nebo přiměřeně prioritizovat a zbytek načíst bez blokování, generování však musí zohledňovat reálný dynamický obsah. Příliš agresivní odstranění nepoužitých selektorů může smazat stavy vytvářené JavaScriptem.
Globální designový systém snižuje počet nahodilých pravidel a výjimek. Komponenty mají vlastnit své styly a načítat je tam, kde se používají, pokud to architektura umožňuje. Minifikace šetří přenos, komprese na serveru další data, ale obě jsou až poslední vrstvou. Kontrolujte zobrazení bez cache, s pomalejším načítáním, dlouhým textem, chybou formuláře a různými šířkami.
- Odstranění duplicitních a nepoužitých základů
- Přiměřené kritické CSS
- Styly vázané na reálné komponenty
- Vizuální regresní test dynamických stavů
Omezte JavaScript a práci hlavního vlákna
Rozdělte bundle podle tras a funkcí, aby článek nestahoval kód konfigurátoru nebo pokladny. Nepotřebné knihovny odstraňte a menší funkce řešte nativním rozhraním prohlížeče, pokud je podpora pro dané publikum dostatečná. Tree shaking funguje jen při vhodné struktuře modulů. Komprese zmenší přenos, ale nesníží čas parsování a vykonání tak jako odstranění kódu.
Dlouhé úlohy rozdělte a nepodstatnou práci odložte mimo kritickou interakci. Event handlery mají dělat minimum, drahé výpočty lze přesunout nebo připravit předem. DOM udržujte přiměřený a nevytvářejte tisíce skrytých položek. Skripty označujte defer nebo async podle závislostí, ne hromadně. Po změně otestujte menu, formuláře, volby cookies, analytiku a všechny stavy bez rychlé sítě.
Kontrolujte fonty, třetí strany a regrese
Používejte pouze potřebné rodiny, řezy a znakové sady. Lokální hostování může zlepšit kontrolu a soukromí, pokud to licence povoluje. Preload fontů patří jen kritickým souborům; příliš mnoho preloadů soupeří s hlavním obrázkem. Nastavte font-display a náhradní font s podobnými metrikami, aby text zůstal dostupný a rozvržení se výrazně neposunulo.
Každý chat, analytický tag, vložené video nebo reklamní skript přidává síťové a výpočetní náklady. Evidujte vlastníka, účel, podmínku souhlasu a možnost odložení načtení až na interakci. Pravidelně odstraňujte nástroje, které nikdo nevyhodnocuje. Výkonnostní rozpočet a automatický test při vydání zachytí nárůst souborů; terénní metriky potvrdí dopad. Optimalizace je proces řízení změn, ne jednorázový úklid.
Zaveďte bezpečné pořadí optimalizace
Nejprve vytvořte inventuru zdrojů a určete jejich vlastníky. Odstraňte nepoužívaný kód, staré varianty obrázků a tagy bez účelu. Poté nastavte správné rozměry, formáty a rozdělení bundlu. Teprve následně dolaďujte prioritu, preload, minifikaci a cache. Toto pořadí snižuje riziko, že složitě optimalizujete soubor, který web vůbec nepotřebuje, nebo že preloadem odsunete skutečně kritický zdroj.
Každý krok nasazujte na staging s prázdnou i zahřátou cache a porovnejte vodopád před změnou a po ní. Funkčně projděte navigaci, formuláře, vyhledávání, jazykové menu a pokladnu, pokud existuje. Vizuálně zkontrolujte první vykreslení a posuny rozvržení při pomalé síti. Výsledek zaznamenejte do výkonnostního rozpočtu a automatického testu. Pokud se optimalizace spoléhá na konkrétní výjimku, zdokumentujte ji u komponenty, aby ji další refaktoring neodstranil.
- Nejprve odstranit, potom komprimovat
- Měření se studenou i teplou cache
- Funkční a vizuální regresní test
- Výjimky zdokumentované u komponenty
Časté dotazy
Jaký formát obrázků je pro web nejlepší?
Záleží na obsahu, požadované kvalitě, průhlednosti a podpoře. Moderní formáty často snižují velikost fotografií, SVG je vhodné pro bezpečné vektorové prvky. Důležitější je posílat správný rozměr a vizuálně ověřenou kompresi.
Mám zapnout lazy loading u všech obrázků?
Ne. Obrázky mimo první zobrazení z něj těží, ale hlavní LCP obrázek může zpozdit. Rozhodujte podle umístění a šablony. Vždy deklarujte rozměry a ověřte výsledek ve vodopádu načítání.
Je minifikace CSS a JavaScriptu bezpečná?
Obvykle ano při správném build procesu, ale kombinování a změna pořadí může poškodit závislosti nebo dynamický kód. Nejprve odstraňte nepotřebné zdroje, změnu nasazujte na stagingu a otestujte kritické interakce.
Zdroje a další čtení
Adam Antoni vyvíja weby, aplikácie a softvér na mieru. Prepája firemné systémy, automatizuje procesy a vytvára AI agentov. Pôsobí v Spišskej Novej Vsi a spolupracuje s firmami na celom Slovensku.
