Ako zrýchliť web na 90+ bodov: 12 krokov ku Core Web Vitals

Prečo na rýchlosti naozaj záleží

Podľa výskumov Google stúpa pravdepodobnosť, že návštevník odíde, o 32 % už pri spomalení z jednej na tri sekundy. Pri e-shope to znamená priamu stratu tržieb — a pri firemnom webe stratený dopyt. Rýchlosť pritom nie je len o pocite: od roku 2021 je súčasťou hodnotenia v Google cez tzv. Core Web Vitals.

Sú to tri merateľné metriky, ktoré popisujú, ako web pôsobí na skutočného človeka — nie ako vyzerá na papieri.

• LCP (Largest Contentful Paint) — za ako dlho sa vykreslí najväčší prvok na obrazovke. Cieľ: pod 2,5 sekundy.
• CLS (Cumulative Layout Shift) — koľko obsah „skáče“ počas načítania. Cieľ: pod 0,1.
• INP (Interaction to Next Paint) — ako rýchlo web reaguje na klik či ťuknutie. Cieľ: pod 200 ms.

Obrázky: najväčší zdroj kíl navyše

Na priemernom webe tvoria obrázky 50 – 70 % celkovej veľkosti stránky. Ak vyriešite iba ich, väčšinou vyskočíte o 20 – 30 bodov. Postupujte takto:

1. Zmenšite rozmery na reálnu potrebu. Fotka zobrazená na 600 px nemá byť nahraná v 4000 px. Exportujte ju v tej veľkosti, v akej sa reálne zobrazuje (plus 2× pre retina displeje).
2. Použite moderný formát WebP alebo AVIF. Oproti JPG ušetria 25 – 50 % veľkosti pri rovnakej kvalite.
3. Zapnite lazy loading. Obrázky mimo obrazovky sa načítajú, až keď sa k nim používateľ doscrolluje.
4. Vždy uveďte rozmery. Atribúty width a height rezervujú miesto a zabránia skákaniu layoutu (CLS).

<!-- Rezervované miesto + lazy loading -->
<img src="hero.webp" width="1200" height="675"
     loading="lazy" decoding="async" alt="Popis obrázka">

Fonty a písmo bez blikania

Vlastné fonty vedia zdržať vykreslenie textu o stovky milisekúnd. Tri jednoduché opatrenia to vyriešia:

• Do CSS pridajte font-display: swap — text sa zobrazí okamžite v systémovom fonte a po dotiahnutí sa vymení.
• Prednačítajte kľúčový font cez <link rel="preload">, aby ho prehliadač stiahol prioritne.
• Nenačítavajte päť rezov, keď reálne používate dva. Každý rez je ďalší súbor.

JavaScript, ktorý brzdí

Ťažké skripty (chaty, analytiky, widgety) blokujú hlavné vlákno a kazia hlavne INP. Nemusíte ich mazať — stačí ich odložiť.

1. Pridajte atribút defer ku skriptom, ktoré nemusia bežať okamžite. Načítajú sa na pozadí a spustia až po vykreslení stránky.
2. Načítavajte tretie strany až po interakcii. Chat alebo mapu spustite, keď na ne používateľ prvýkrát ukáže — nie hneď pri načítaní.
3. Odstráňte, čo nepoužívate. Staré knižnice a pluginy, na ktoré ste zabudli, sú mŕtva váha.

Server, cache a posledné percentá

Keď máte vyriešený front-end, dobehnite zvyšok na strane servera:

• Zapnite kompresiu Brotli alebo Gzip — textové súbory zmenšia o 70 – 80 %.
• Nastavte cache hlavičky pre statické súbory, aby si ich vracajúci sa návštevník nesťahoval znova.
• Zvážte CDN, ak máte návštevníkov z rôznych kútov — obsah sa doručí z najbližšieho servera.
• Minifikujte CSS a JS — odstránenie medzier a komentárov ušetrí ďalšie kilobajty.

Rýchlosť nie je jednorazová úloha, ale návyk. Merajte pri každej väčšej zmene — inak sa web nenápadne spomalí späť. Pravidlo z praxe

Ako to odmerať správne

Nástroj PageSpeed Insights ukáže laboratórne aj reálne dáta. Laboratórne skóre je fajn na ladenie, no rozhodujúce sú terénne dáta od skutočných návštevníkov — tie nájdete v Google Search Console v sekcii Core Web Vitals. Ak sa laboratórne a reálne čísla líšia, verte reálnym: to je skúsenosť, ktorú Google hodnotí.