Čo sú Core Web Vitals a prečo na nich záleží (zrozumiteľne)

Možno ste to videli v správe od Google alebo od marketéra: „zlepšite Core Web Vitals.“ Znie to technicky, ale v skutočnosti ide o jednoduchú vec - ako rýchlo a príjemne sa váš web používa. A to ovplyvňuje aj pozície v Google, aj to, či vám návštevník nakúpi alebo odíde.

Tri čísla, o ktoré ide

Core Web Vitals sú tri merateľné ukazovatele zážitku z používania webu, ktoré Google berie do úvahy aj pri SEO hodnotení:

LCP (Largest Contentful Paint) - ako rýchlo sa zobrazí hlavný obsah. Koľko sekúnd trvá, kým návštevník uvidí to podstatné (napríklad veľký obrázok alebo nadpis). Cieľ: do 2,5 sekundy.

INP (Interaction to Next Paint) - ako rýchlo web reaguje na kliknutie. Keď používateľ klikne alebo napíše, ako rýchlo sa niečo stane. Nahradilo staršiu metriku FID. Cieľ: do 200 ms.

CLS (Cumulative Layout Shift) - ako veľmi obsah „poskakuje“. Poznáte to: chcete kliknúť na tlačidlo a v poslednej chvíli sa stránka pohne, lebo sa donačítala reklama. Cieľ: pod 0,1.

Prečo na tom záleží

1. Google to berie do úvahy. Core Web Vitals sú súčasťou hodnotenia kvality stránky. Pri inak rovnakom obsahu má rýchlejší web výhodu.

2. Pomalý web stráca zákazníkov. Každá sekunda navyše pri načítaní znižuje šancu, že návštevník zostane. Pri e-shope sa to priamo premieta do tržieb.

3. Dôveryhodnosť. Rýchly, plynulý web pôsobí profesionálne. Pomalý a poskakujúci pôsobí lacno - bez ohľadu na to, koľko stál.

Prečo býva web pomalý

Najčastejšie príčiny, ktoré vidíme v praxi:

• Page-buildery (Elementor, WPBakery) - pohodlné, ale generujú veľa zbytočného kódu.
• Neoptimalizované obrázky - fotka z foťáku má aj 5 MB; na webe stačí zlomok.
• Priveľa pluginov, ktoré sa naťahujú na každej stránke.
• Pomalý alebo lacný hosting.
• Žiadne cachovanie ani moderné formáty obrázkov (WebP/AVIF).

Ako zmerať Core Web Vitals

Máte niekoľko možností, ako zistiť, ako na tom vaš web je:

PageSpeed Insights - najrýchlejšia cesta. Zadáte adresu webu a hneď vidíte skóre Core Web Vitals. Zelená = v poriadku, oranžová/červená = priestor na zlepšenie. Test spravte aj pre mobil - tam býva výsledok zvyčajne horší. PageSpeed tiež navrhuje konkrétne optimalizácie.

Search Console (Google Search Console) - ak máte priestor indexovaný, ponúka správu „Core Web Vitals“ s reálnymi dátami od skutočných používateľov. Toto sú field data, nie laboratórne testovania - lepšie odrážajú realitu. Pozrite sa na 28-dňový priemer.

Chrome User Experience Report (CrUX) - anonymizované dáta z miliónov skutočných návštevníkov. Rozdelené podľa kraja, typu zariadenia a typu prepojenia. Ak chcete vedieť, ako sa váš web javí reálnym ľuďom v Európe, CrUX je zdroj.

Rozdiel medzi lab a field dátami: PageSpeed test spustí váš web v štandardnom prostredí (výkon notebooku, 4G sieť). Reálni používatelia majú rôzne zariadenia a rýchlosti internetu. Preto je field data (Search Console, CrUX) dôležitejšia - vidíte, ako to vyzerá v praxi.

Ako zlepšiť Core Web Vitals

Ak PageSpeed Insights alebo Search Console ukáže oranžovú alebo červenú farbu, tu sú konkrétne kroky na zlepšenie.

Ako zlepšiť LCP (rýchlosť načítania obsahu)

1. Optimalizujte obrázky. Veľký obrázok na úvodnej stránke je najčastejšia príčina pomalého LCP. Zmenšite rozmer súboru (JPG/PNG skomprimujte), alebo použite moderný formát (WebP/AVIF). Webové obrázky nemusia byť také vysokého rozlíšenia ako tlač - 1920x1080 px zvyčajne postačuje.

2. Skrátite čas prvého bytu (TTFB). Ak server dlho čaká kým spracuje request, aj rýchly obsah príde neskoro. Skontrolujte, či máte kvalitný hosting (nie lacný zdieľaný). CDN (Content Delivery Network, napríklad QUIC.cloud) urýchľuje dodávku obsahu, pretože si ho cachuje blízko užívateľa.

3. Odložte nepovinné JavaScripty. Ťažké skripty, ktoré sa načítavajú hneď na začiatku, blokujú obsah. Ak daný skript nepotrebujete pri vykresľovaní, odložte ho pomocou atribútu defer alebo async.

4. Vyhýbajte sa loading="lazy" na LCP obrázke. LCP obrázok treba načítať rýchlo. Ak ste ho označili ako lazy, len sa spomalí.

Ako zlepšiť INP (odozva na kliknutie)

1. Znížte množstvo JavaScriptu. Veľký JavaScript znamená dlhšiu dobu parsingu a kompilácií. Webový prehliadač musí všetok JS prečítať a skompilovať skôr, ako vie bezpečne spustiť váš kód. Ak máte veľa pluginov, skontrolujte, či všetky naozaj potrebujete.

2. Rozdeľte dlhé úlohy na menšie. Ak skript robí veľa práce naraz, celý JavaScript thread sa zablokuje a stránka nereaguje na kliknutia. Použite setTimeout alebo requestAnimationFrame na rozdelenie práce do menších kúskov.

3. Optimalizujte event handlery. Ak sa niečo stane na kliknutie (napríklad výpočet alebo DOM zmena), urobte ho čo najrýchlejšie. Vyhýbajte sa zbytočným prepočtom DOMu hneď po zmene CSS.

4. Skontrolujte, koľko pluginov spustíte. Plugins sú užitočné, ale každý plugin = ďalší JavaScript. Máte plugin na analytics, na popups, na recenzie... každý z nich beží v pozadí a robí prácu. Ak máte 15+ pluginov, je to problém.

Ako zlepšiť CLS (stabilita obsahu)

1. Pridajte rozmery obrázkom. Priraďte atribúty width a height alebo CSS aspect-ratio na každý obrázok. Prehliadač potom vopred vie, koľko miesta obrázok zaberá a nevytvára to posuny obsahu.

2. Rezervujte miesto pre dynamický obsah. Ak sa na stránke vkladá obsah až počas načítavania (reklamy, videá, widgety), nastavte minimálnu výšku (min-height) alebo aspect-ratio na kontajner. Tak sa obsah nenačíta a posúva všetko ostatné.

3. Vyhýbajte sa animáciám, ktoré posúvajú obsah. Animácie vlastností ako top, left alebo box-shadow spôsobujú prekreslenie a posun. Namiesto toho použite transform, ktorý zmení polohu bez vplyvu na ostatný obsah.

4. Dajte pozor na písma. Ak sa web písmo načítava pomaly, prehliadač najprv zobrazí fallback písmo (System Font), a keď sa web písmo načíta, všetok text sa zväčší alebo zmenší. Nakonfigurujte font-display: optional alebo font-display: swap podľa prípadu.

Core Web Vitals a WordPress

Mnoho WordPress webov sa stavia s page-buildermi (Elementor, WPBakery, Divi). Tieto nástroje sú pohodlné - všetko sa klika v GUI - ale za cenu kvality: generujú veľa zbytočného JavaScriptu a CSS, čo zhoršuje Core Web Vitals. Ak máte web v Elementore a vidíte červené skóre, je to často viazané na page-builder, nie na váš obsah.

Najrýchlejšie WordPress weby (tie, ktoré dosahujú Green v PageSpeed) sa stavajú bez page-buildera - s čistým kódom a vlastným thémou. To je aj to, prečo sa mnoho starých webov migruje z Elementoru na čisté WordPress - výkon sa vráti aj bez ďalších optimalizácií.

Ak váš web staviame od základu, počítame s Core Web Vitals od začiatku. Ak máte existujúci web s horšími výsledkami, SEO optimalizácia zahŕňa analýzu a nápravu Core Web Vitals problémov.

Čo s tým

Časť sa dá vyriešiť rýchlo (optimalizácia obrázkov, cache), časť vyžaduje zásah do toho, ako je web postavený. My weby staviame s dôrazom na výkon od základu - bez zbytočného balastu page-builderov. A keď máte existujúci pomalý web, v rámci SEO vieme nájsť, čo ho brzdí, a opraviť to.

Chcete vedieť, čo brzdí váš web? Napíšte nám - pozrieme sa naň a povieme konkrétne, čo zlepšiť.