Proč rychlost rozhoduje
Polovina lidí zavře web, který se načítá déle než 3 vteřiny. Tvoji návštěvníci nebudou mít nový iPhone na rychlé Wi-Fi – budou mít starší mobil ve vlaku. Šéf projektu myslí na ně.
Dobrá zpráva: největšího zrychlení dosáhneš jednou věcí – obrázky. Fotka z mobilu má klidně 5 MB; na webu stačí desetina.
Ukaž mi to: změř se Lighthousem
Lighthouse je měřič zabudovaný přímo v Chrome:
- Otevři svůj web (ostrou verzi, ne localhost).
- F12 → záložka Lighthouse → Analyze page load.
- Dostaneš skóre 0–100 za výkon, přístupnost, SEO – a hlavně seznam konkrétních rad, co zlepšit.
Nejčastější rady a co s nimi:
| Rada od Lighthouse | Co udělat |
|---|---|
| Properly size images | zmenši obrázky (viz níže) |
| Serve images in next-gen formats | ulož jako WebP |
| Image elements do not have width/height | přidej width a height atributy |
| Links do not have descriptive text | místo „klikni zde” piš, kam odkaz vede |
Zmenši obrázky
- Rozměry: na web stačí šířka ~1200 px (hero foto) nebo ~600 px (běžná fotka). Zmenšíš v jakémkoli editoru, i online (např. squoosh.app).
- Formát: WebP je o třetinu menší než JPG při stejné kvalitě.
- Lazy loading: obrázky pod čárou se načtou, až když k nim návštěvník doroluje:
<img src="fotka.webp" alt="Zápas s Lipovou" width="600" height="400" loading="lazy" />Teď ty 💪
- Změř svůj web Lighthousem a zapiš si skóre výkonu – to je tvoje startovní čára.
- Najdi 3 největší obrázky na svém webu (F12 → záložka Network → seřaď podle Size).
- Zmenši je (rozměry + WebP) a přidej
loading="lazy"všude kromě prvního obrázku nahoře. - Změř znovu a porovnej skóre. Zapiš do
LAUNCH.md: před → po. - Bonus: otestuj web na svém mobilu s vypnutou Wi-Fi. Jaké to je?
💡
Nečekej 100 bodů. I velké weby mají 70–90. Důležitý je posun: z 60 na 85 je vítězství, které návštěvníci poznají.
✅
Kontrola: Znáš svoje Lighthouse skóre před a po. Obrázky jsou zmenšené, ve WebP a s lazy loadingem. Web se znatelně rychleji načítá na mobilu.
Co si z téhle lekce odnést
- Rychlost = návštěvníci zůstanou. 3 vteřiny jsou hranice.
- Lighthouse ti přesně řekne, co zlepšit.
- Největší páka: menší obrázky (rozměry, WebP, lazy loading).
© 2026 Ing. Martin Polak / AlgoRhino · Podmínky užití obsahu