Optimalizace rychlosti webu: praktické pořadí práce
Práce na rychlosti má výrazně nerovnoměrný tvar: hrstka zásahů vysvětlí většinu zlepšení na většině webů, a jsou to téměř vždy obrázky, odezva serveru a skripty třetích stran.
Tento průvodce prochází, v jakém pořadí pracovat, jak měřit, zda změna pomohla, a které optimalizace obvykle nestojí za námahu.
Měřte, než něco změníte#
Optimalizovat bez měření znamená opravovat to, co je nejsnazší, místo toho, co je pomalé. Dvě měření, pak práce.
- Získejte terénní data od skutečných návštěvníků — report Core Web Vitals, nebo vlastní monitoring.
- Spusťte laboratorní test na třech hlavních šablonách, omezený na střední mobil na 4G.
- Zapište čísla, než začnete. Bez výchozího stavu nepoznáte, jestli změna pomohla.
- Určete u každé šablony největší jednotlivý soubor a největší blokující požadavek.
- Zapište Time to First Byte zvlášť: nad 800 ms vás žádná frontendová práce nezachrání.
Pořadí, které se vyplatí#
Zhruba podle zlepšení na hodinu úsilí, u typického firemního nebo obsahového webu.
| Práce | Typický zisk | Úsilí |
|---|---|---|
| Optimalizovat a zmenšit obrázky | Velký | Nízké |
| Odstranit nepoužívané skripty třetích stran | Velký | Nízké — hlavně politické |
| Zapnout cache a CDN | Velký | Nízké |
| Vyřešit blokující CSS a JS | Střední až velký | Střední |
| Zmenšit JavaScriptový balík | Střední až velký | Střední až vysoké |
| Opravit pomalé databázové dotazy | Velký, kde se to týká | Střední |
| Optimalizovat načítání písem | Střední | Nízké |
| Minifikovat a komprimovat text | Malý | Nízké — obvykle už zapnuto |
| Mikro-optimalizovat CSS selektory | Zanedbatelný | Nestojí za to |
Obrázky: obvykle největší zisk#
Na většině webů tvoří obrázky většinu váhy stránky a většina se servíruje několikanásobně větší, než se zobrazuje. Je to nejlevnější velké zlepšení, jaké existuje.
- Servírujte WebP nebo AVIF; obojí má širokou podporu a je typicky o 25 až 50 % menší než JPEG při stejné kvalitě.
- Generujte několik velikostí a používejte srcset se sizes, aby si mobily stahovaly soubory pro mobil.
- Nikdy neservírujte obrázek 2000 px v rámečku 400 px — tato jediná chyba je mimořádně častá.
- Odložte načítání všeho pod zlomem, a ničeho nad ním.
- Automatizujte to v buildu nebo v CMS. Ručně optimalizované obrázky přestanou být optimalizované, jakmile nějaký nahraje někdo jiný.
- Odstraňte metadata; EXIF z fotoaparátu může mít desítky kilobajtů na soubor.
Automatizace je jádro. Jednorázové kolo optimalizace pozbude platnosti během měsíců, jak přibývá obsah, a nikdo si toho nevšimne, dokud se váha nezdvojnásobí.
Skripty třetích stran a server#
Dvě oblasti, kde je problém obvykle organizační, ne technický: nikdo nevlastní správce značek a nikdo nevlastní volbu hostingu.
| Problém | Co udělat |
|---|---|
| Správce značek s neznámými značkami | Projít každou; odstranit vše, co nikdo neobhájí |
| Chatovací widget na každé stránce | Načítat při interakci, nebo jen tam, kde je podpora potřeba |
| Několik analytických nástrojů | Nechat jeden; každý je celý skript a spojení |
| Skript A/B testů blokující vykreslování | Přesunout na server, nebo přijmout probliknutí a načítat async |
| Pomalý TTFB na sdíleném hostingu | Přidat cache celých stránek; zvýšit tarif, pokud přetrvává |
| Necachované databázové dotazy | Cachovat ty drahé; přidat indexy pro časté |
| Žádné CDN | Přidat — nejlevnější globální oprava latence |
Skripty třetích stran jsou nejspolehlivějším zdrojem nevysvětlené pomalosti, protože se mění bez ohlášení a stojí mimo váš proces nasazení.
Časté dotazy
Jaká doba načítání je dobrá?
Použitelné cíle jsou prahy Core Web Vitals, ne jedno číslo: LCP pod 2,5 sekundy a Time to First Byte pod 800 ms. Celková doba načítání je špatná míra, protože stránka může být použitelná dlouho předtím, než dobíhá poslední soubor — a na pomalém zařízení nepoužitelná dlouho předtím.
Zvýší rychlejší web konverzi?
Obvykle ano, a efekt je největší tam, kde jsou stránky pomalé a návštěvníci na mobilních sítích. Zisk ze tří sekund na dvě je mnohem větší než z jedné a půl na jednu. Pokud je web už rychlý, věnujte úsilí obsahu a srozumitelnosti — návratnost je lepší.
Vyřeší cache pluginy všechno?
Řeší jednu skutečnou věc dobře — opakovanou práci serveru pro tutéž stránku — a mohou vytvořit nové problémy, zejména u přihlášených uživatelů, košíků a formulářů. Nedělají také nic s příliš velkými obrázky nebo skripty třetích stran, které bývají větším problémem. Užitečné, nedostačující.
Vyplatí se vykreslování na serveru kvůli rychlosti?
Pokud se vaše stránky dnes vykreslují jen v prohlížeči, ano: vykreslování na serveru nebo statické generování odstraní celou cestu tam a zpět, než se obsah objeví, a zároveň pomůže indexaci. Pokud jsou stránky už serverem generované HTML, otázka nevzniká — výhodu už máte.
optimalizace rychlosti weburychlost načítánívýkon webuoptimalizace obrázkůcachecdn
