Prečo na rýchlosti záleží
Polovica ľudí zavrie web, ktorý sa načítava dlhšie ako 3 sekundy. Návštevníci nemajú všetci nový telefón na rýchlom Wi-Fi – niekto má starší telefón v vlaku. Šéf projektu myslí aj na nich.
Dobrá správa: najväčší boost rýchlosti získaš z jednej veci – obrázkov. Fotka priamo z telefónu môže mať ľahko 5 MB; web potrebuje len desatinu.
Ukážem ti: meranie cez Lighthouse
Lighthouse je merací nástroj priamo v Chrome:
- Otvor web (živú verziu, nie localhost).
- F12 → záložka Lighthouse → Analyze page load.
- Dostaneš skóre 0–100 pre výkon, prístupnosť, SEO – a hlavne zoznam konkrétnych tipov, čo zlepšiť.
Najčastejšie tipy a čo s nimi:
| Tip Lighthouse | Čo urobiť |
|---|---|
| Properly size images | zmenši obrázky (pozri nižšie) |
| Serve images in next-gen formats | ulož ich ako WebP |
| Image elements do not have width/height | pridaj atribúty width a height |
| Links do not have descriptive text | namiesto „klikni sem” povedz, kam odkaz vedie |
Zmenši obrázky
- Rozmery: web potrebuje zhruba 1200px šírku (hero fotka) alebo zhruba 600px (bežná fotka). Zmenšiť môžeš v ľubovoľnom editore, aj online (napr. squoosh.app).
- Formát: WebP je pri rovnakej kvalite asi o tretinu menší ako JPG.
- Lazy loading: obrázky pod ohybom stránky sa načítajú až keď návštevník scrolluje:
<img src="photo.webp" alt="Match against the Eagles" width="600" height="400" loading="lazy" />Teraz ty 💪
- Zmeraj web cez Lighthouse a zapíš si skóre výkonu – to je štartovacia čiara.
- Nájdi 3 najväčšie obrázky na webe (F12 → záložka Network → zoraď podľa Size).
- Zmenši ich (rozmery + WebP) a pridaj
loading="lazy"všade okrem prvej fotky hore. - Zmeraj znova a porovnaj skóre. Zapíš do
LAUNCH.md: pred → po. - Bonus: otestuj web na telefóne s vypnutým Wi-Fi. Ako to vyzerá?
💡
Nečakaj 100 bodov. Aj veľké weby majú 70–90. Dôležitý je pokrok: z 60 na 85 je výhra, ktorú návštevníci naozaj pocítia.
✅
Skontroluj sa: Poznáš Lighthouse skóre pred a po. Obrázky sú zmenšené, vo WebP a s lazy loadingom. Web sa na mobile načítava citeľne rýchlejšie.
Čo si z tejto lekcie odnášaš
- Rýchlosť = návštevníci zostávajú. 3 sekundy je limit.
- Lighthouse povie presne, čo zlepšiť.
- Najväčší páka: menšie obrázky (rozmery, WebP, lazy loading).
© 2026 Ing. Martin Polak / AlgoRhino · Podmienky používania obsahu