Core Web Vitals ľudskou rečou: LCP, INP a CLS

Google meria, aký príjemný je váš web pre skutočných ľudí. Robí to pomocou troch ukazovateľov s nezrozumiteľnými skratkami LCP, INP a CLS, ktoré spolu tvoria Core Web Vitals (základné ukazovatele kvality webu). Vysvetlíme ich na príkladoch z obchodu, bez technického žargónu.

Prečo by vás to malo zaujímať

Z dvoch dôvodov. Prvý: Core Web Vitals patria medzi signály, ktoré Google berie do úvahy pri hodnotení stránok. Nie sú najdôležitejším faktorom (dobrý obsah vyhráva), ale pri podobne kvalitných stránkach môžu rozhodnúť.

Druhý dôvod je dôležitejší: tieto ukazovatele merajú presne to, čo návštevníkov hnevá. Pomalé načítanie, stránka, ktorá nereaguje na ťuknutie, a obsah, ktorý uskočí práve vo chvíli, keď na niečo klikáte. Aj keby ich Google nesledoval, oplatí sa ich mať v poriadku.

LCP: ako rýchlo uvidíte to hlavné

LCP (Largest Contentful Paint, teda vykreslenie najväčšieho obsahu) meria, za aký čas sa zobrazí najväčší prvok na prvej obrazovke. Zvyčajne je to hlavná fotka alebo veľký nadpis.

Príklad z obchodu: Vojdete do predajne a chvíľu je tma. Kým nerozsvietia, neviete, či ste na správnom mieste. LCP meria, ako dlho trvá, kým sa „rozsvieti“.

Dobré LCP je do 2,5 sekundy. Nad 4 sekundy je to zlé.

Čo LCP najčastejšie zhoršuje

• obrovská hlavná fotka alebo video v úvode stránky,
• pomalá odpoveď servera,
• skripty a písma, na ktoré musí prehliadač čakať, kým niečo ukáže,
• slider (prezentácia viacerých fotiek) na úvodnej stránke.

Ako LCP zlepšiť

• zmenšiť hlavnú fotku a použiť formát WebP alebo AVIF,
• povedať prehliadaču, aby hlavnú fotku načítal prednostne,
• zapnúť cache na serveri alebo zvoliť rýchlejší hosting,
• nahradiť slider jednou silnou fotkou a jasným nadpisom.

INP: ako rýchlo web zareaguje

INP (Interaction to Next Paint, teda reakcia na interakciu) meria, ako dlho trvá od kliknutia alebo ťuknutia, kým stránka viditeľne zareaguje. Napríklad sa otvorí menu, pridá sa tovar do košíka alebo sa zobrazí chyba vo formulári. INP v roku 2024 nahradil staršiu metriku FID.

Príklad z obchodu: Pozvoníte na zvonček pri pulte a nikto neprichádza. Po chvíli zazvoníte znova, a potom ešte raz. Presne tak sa správajú ľudia na webe, ktorý nereaguje: klikajú opakovane, až kým to nevzdajú.

Dobré INP je do 200 milisekúnd (pätina sekundy). Nad 500 milisekúnd je to zlé.

Čo INP najčastejšie zhoršuje

• veľa JavaScriptu (kódu, ktorý v prehliadači robí interaktívne veci),
• skripty tretích strán: chaty, reklamy, meracie kódy, sociálne siete,
• veľmi dlhé stránky s tisíckami prvkov.

Ako INP zlepšiť

• odstrániť skripty, ktoré nič neprinášajú,
• načítať menej dôležité skripty až neskôr, napríklad chat až po chvíli,
• rozdeliť ťažké úlohy v kóde na menšie (to je práca pre programátora).

CLS: či vám obsah neuskakuje

CLS (Cumulative Layout Shift, teda súhrnný posun rozloženia) meria, ako veľmi sa obsah stránky nečakane posúva, kým sa načítava.

Príklad z bežného života: Chcete ťuknúť na „Zrušiť“, no na poslednú chvíľu sa nad tlačidlom načíta banner, všetko poskočí nadol a vy ťuknete na „Objednať“. Alebo čítate článok a text vám pod prstom odskočí o pol obrazovky.

Dobré CLS je do 0,1. Nad 0,25 je to zlé. Nejde o sekundy, ale o mieru posunu: čím menšie číslo, tým pokojnejšia stránka.

Čo CLS najčastejšie zhoršuje

• obrázky a videá bez zadanej veľkosti (prehliadač nevie, koľko miesta im nechať),
• bannery, cookie lišty a reklamy, ktoré sa vložia do stránky a odtlačia obsah,
• písma, ktoré sa načítajú neskoro a zmenia veľkosť textu.

Ako CLS zlepšiť

• zadať obrázkom rozmery (šírku a výšku),
• rezervovať miesto pre prvky, ktoré sa načítajú neskôr,
• cookie lištu zobraziť ako prekrytie, nie ako blok, ktorý posunie stránku.

Všetky tri ukazovatele v tabuľke

Google pritom nehodnotí jednu návštevu, ale takzvaný 75. percentil. Zjednodušene: aby ste boli v zelenom, dobré hodnoty musia mať aspoň tri zo štyroch návštev. Jeden rýchly test na vašom počítači preto nestačí.

Laboratórne a skutočné merania

Pri Core Web Vitals sa stretnete s dvoma druhmi čísel:

• Laboratórne merania: simulácia načítania stránky na „modelovom“ zariadení. Takto meria napríklad nástroj PageSpeed Insights (jeho časť Lighthouse). Výhoda: výsledok máte hneď. Nevýhoda: je to simulácia.
• Skutočné merania: dáta od reálnych návštevníkov, ktoré Google zbiera z prehliadača Chrome. Zobrazia sa len pri weboch s dostatočnou návštevnosťou. Nájdete ich v PageSpeed Insights a v prehľade Core Web Vitals v Google Search Console.

INP sa v laboratóriu zmerať nedá, lebo tam nikto neklikne. Laboratórne nástroje preto ukazujú náhradnú hodnotu TBT (Total Blocking Time: ako dlho je stránka „zaseknutá“ pri načítaní). Keď je TBT vysoké, INP pravdepodobne tiež nebude dobré.

Ako si Core Web Vitals overiť sami

1. PageSpeed Insights: bezplatný nástroj Google. Zadajte adresu stránky. Horná časť ukazuje dáta od skutočných návštevníkov (ak ich je dosť), dolná časť laboratórne meranie s konkrétnymi odporúčaniami.
2. Google Search Console: v prehľade Core Web Vitals uvidíte, ktoré skupiny stránok na webe sú v poriadku a ktoré treba opraviť. Hodí sa hlavne pri väčších weboch a e-shopoch.
3. Náš Audit zdarma: zmeria rýchlosť na mobile aj desktope a vysvetlí výsledky ľudskou rečou, spolu s ďalšími kontrolami SEO a bezpečnosti.

Ako k Core Web Vitals pristupujeme my

Pri každom webe, ktorý staviame, je cieľom skóre Google PageSpeed 90 a viac na mobile aj desktope. Nedosahujeme to trikmi, ale tým, čo na webe nie je: žiadne zbytočné knižnice ani zbytočné skripty z cudzích serverov, len nevyhnutné meranie návštevnosti bez cookies. K tomu obrázky v správnej veľkosti a písma uložené priamo na serveri webu. Rovnaký prístup sme použili aj pri webe salónu Runway Care & Beauty.

Ak máte web a chcete vedieť, ako je na tom:

• Audit zdarma za minútu zmeria rýchlosť úvodnej stránky na mobile aj desktope,
• Audit Komplex za 350 € zmeria rýchlosť a Core Web Vitals pre každý typ stránky a pripraví návod na opravu,
• najčastejšie brzdy webov nájdete v článku 10 chýb, ktoré nájdeme pri audite.

A ak plánujete nový web, pozrite si, koľko stojí web v roku 2026 a čo má byť v cene.