Core Web Vitals: LCP, INP a CLS

Modul 4: Rýchlosť, mobil a https · Čas čítania: 13 minút

Cieľ lekcie: Po tejto lekcii dokážete vysvetliť tri Core Web Vitals a ich hraničné hodnoty, pomenovať rozdiel medzi poľnými a laboratórnymi údajmi, prečítať meranie v PageSpeed Insights, odstrániť najdôležitejšie príčiny zlého skóre a úprimne odhadnúť, akú váhu má rýchlosť vo výsledkoch vyhľadávania.

Kľúčové pojmy: Core Web Vitals, LCP (Largest Contentful Paint), INP (Interaction to Next Paint), CLS (Cumulative Layout Shift), 75. percentil, poľné údaje (CrUX), laboratórne údaje (Lighthouse), PageSpeed Insights, prehľad Core Web Vitals v Search Console, TTFB, kompresia, width a height pri obrázkoch, loading="lazy", skúsenosti so stránkou

Rýchlosť v troch číslach

„Je moja stránka rýchla?“ je nejasná otázka. Google a tvorcovia prehliadača Chrome z nej urobili tri merateľné otázky, takzvané Core Web Vitals:

Niekoľko vecí, ktorým je dobré porozumieť:

• LCP meria okamih, keď sa objaví najväčší viditeľný prvok. Zvyčajne je to veľká fotografia navrchu (takzvaná „hero“) alebo veľký blok textu. Pri Bloemenatelier Lotte je to fotografia kvetinovej výzdoby na domovskej stránke.
• INP sleduje všetky kliknutia, ťuknutia a stlačenia klávesov počas návštevy a hlási (takmer) najpomalšiu reakciu. INP 12. marca 2024 nahradilo staršie meranie FID (First Input Delay), ktoré sledovalo len prvé kliknutie a len čakanie pred spracovaním. Ak v starom článku narazíte na FID, informácia je zastaraná.
• CLS nie je čas, ale skóre bez jednotky. Zvyšuje sa, keď sa veci posúvajú počas čítania: chcete ťuknúť na tlačidlo a práve vtedy sa nad ním objaví banner, takže ťuknete na niečo iné.

75. percentil

Stránka Core Web Vitals „splní“, keď 75 percent návštev dosiahne dobré hodnoty vo všetkých troch meraniach, osobitne pre mobil a počítač. Tomu sa hovorí 75. percentil. Znamená to: nepočíta sa váš rýchly počítač na optickom pripojení, ale skúsenosť väčšiny návštevníkov, aj tých so starším telefónom na 4G.

Poľné a laboratórne údaje

Existujú dva druhy meraní a často dávajú rozdielne čísla.

• Poľné údaje pochádzajú od skutočných návštevníkov. Chrome (u používateľov, ktorí to povolia) anonymne zbiera, aké rýchle stránky boli, v Chrome User Experience Report (CrUX). PageSpeed Insights zobrazuje poľné údaje za posledných 28 dní. Prehľad Core Web Vitals v Search Console používa rovnaký zdroj. Ak má vaša stránka príliš málo návštevníkov, PageSpeed Insights zobrazí čísla za celý web (takzvaný „origin“), a ak ich má príliš málo aj ten, poľné údaje nie sú k dispozícii.
• Laboratórne údaje pochádzajú zo simulovaného testu nástrojom Lighthouse: jedno načítanie na napodobnenom priemernom telefóne a pripojení. Lighthouse nedokáže merať INP (nikto neklikne), a preto uvádza iné čísla, napríklad Total Blocking Time, ktoré na INP poukazujú.

Pre hodnotenie sú rozhodujúce poľné údaje. Laboratórne údaje pomáhajú nájsť príčiny a po zlepšení hneď vidieť, či pomohlo, bez čakania 28 dní.

Akú váhu to má?

V tejto oblasti sa veľa preháňa. Toto o tom hovorí samotný Google v dokumentácii o skúsenostiach so stránkou:

• „Core Web Vitals are used by our ranking systems“ (Core Web Vitals používajú naše systémy hodnotenia): teda sa započítavajú.
• Neexistuje samostatný „signál skúseností so stránkou“. Ostatné súčasti dobrej skúsenosti so stránkou (https, žiadne dotieravé vyskakovacie okná, použiteľnosť na mobile) vám podľa Google priamo nepomôžu umiestniť sa vyššie, ale váš web budú robiť príjemnejším.
• „Google Search always seeks to show the most relevant content, even if the page experience is sub-par.“ (Vyhľadávanie Google sa vždy snaží zobraziť najrelevantnejší obsah, aj keď skúsenosť so stránkou nie je ideálna.) Pomalá stránka s najlepšou odpoveďou teda môže pokojne byť na prvom mieste.
• Dosahovať dokonalé skóre len kvôli SEO podľa Google „nemusí byť najlepším využitím vášho času“.

Záver: postarajte sa, aby ste boli v zelenom alebo aspoň v oranžovom pásme, hlavne preto, že návštevníci z pomalej alebo poskakujúcej stránky odchádzajú. Naháňanie zo 90 na 100 bodov v Lighthouse prinesie vo výsledkoch vyhľadávania málo.

Príčiny, ktoré môžete odstrániť sami

Pomalá prvá odpoveď (TTFB)

Všetko sa začína okamihom, keď dorazí prvý bajt HTML, takzvaným Time to First Byte. TTFB samo nie je Core Web Vital, ale pri pomalom TTFB je dobré LCP takmer nemožné. web.dev uvádza ako orientačnú hodnotu: dobré je 0,8 sekundy alebo menej, zlé je viac ako 1,8 sekundy. Príčiny podľa web.dev: málo výpočtového výkonu na hostingu, žiadna cache (každá stránka sa zostavuje nanovo, typicky pri WordPress bez cache pluginu), presmerovania (lekcia 4.1) a vzdialený server bez CDN.

Patrí sem aj kompresia: server by mal HTML, CSS a JavaScript posielať zbalené pomocou gzip alebo Brotli. Spoznáte to podľa hlavičky Content-Encoding: gzip alebo br. Takmer každý hosting to robí štandardne, ale nesprávne nastavenie alebo starý server ju môže vypnúť.

Obrázky

Obrázky sú najčastejšou príčinou zlého LCP a CLS:

1. Príliš veľké. Fotografia so šírkou 4.000 pixelov a veľkosťou 5 MB pre políčko široké 800 pixelov. Zmenšite ju pred nahratím a použite moderný formát, napríklad WebP alebo AVIF.

2. Chýba šírka a výška. Bez width a height prehliadač nevie, koľko miesta obrázok potrebuje, a text pod ním sa posunie, len čo sa obrázok načíta. web.dev odporúča uvádzať width a height pri každom <img>:

   <img src="bloemstuk.webp" width="800" height="600" alt="Bruidsboeket met witte rozen">

3. Lenivé načítanie najdôležitejšej fotografie. loading="lazy" načíta obrázok až vtedy, keď sa dostane do zobrazenia. To je v poriadku pre fotografie nižšie na stránke, ale web.dev jasne hovorí: obrázky, ktoré sú viditeľné hneď po otvorení, a najmä obrázok LCP, nenačítavajte lenivo. Inak prehliadač čaká práve s fotografiou, ktorá určuje vaše LCP.

Posúvajúci sa obsah a pomalé reakcie

Ďalšie príčiny CLS podľa web.dev: písma, ktoré pri načítaní menia veľkosť, reklamy a vložené widgety, ktoré sa samy zväčšia, a obsah, ktorý sa neskôr vloží nad existujúci obsah (napríklad lišta cookies, ktorá stránku odtlačí nadol namiesto toho, aby ležala nad ňou). Zlé INP takmer vždy spôsobuje priveľa JavaScriptu: ťažké témy, slidery, chatovacie widgety a sledovacie skripty tretích strán. Kriticky posúďte každý plugin a každú vloženú službu; menej je tu naozaj viac.

V praxi: meranie v PageSpeed Insights

Prejdite na pagespeed.web.dev, zadajte adresu svojej domovskej stránky a kliknite na Analyze. Dostanete dve karty (Mobile a Desktop). Navrchu je hodnotenie Core Web Vitals na základe poľných údajov, ak sú k dispozícii. Pod ním je test Lighthouse so skóre a zoznamom „Diagnostics“ s konkrétnymi bodmi, napríklad o obrázkoch, ktoré sú väčšie, ako treba, alebo o obrázku LCP, ktorý sa načítava lenivo (presné názvy sa menia s novými verziami Lighthouse). Začnite kartou Mobile: tam sú výsledky zvyčajne horšie a Google sa pozerá najprv na mobilnú verziu (lekcia 4.2).

Ak máte web v Search Console (modul 2), pozrite sa aj do časti Experience, Core Web Vitals. Uvidíte tam skupiny podobných stránok s ich stavom, aj pre stránky, ktoré ste sami netestovali.

Web z AI Builder uvádza šírku a výšku pri obrázkoch so známym rozmerom, prvú fotografiu na stránke načíta hneď a prednostne (fetchpriority="high"), ostatné lenivo, a pri publikovaní z veľkých fotografií vytvorí variant so šírkou 800 pixelov. Vo WordPress najviac pomôže cache plugin a zmenšovanie obrázkov; kurz WordPress sa tomu podrobnejšie venuje v module 6. Pri iných nástrojoch na tvorbu webov a u iných hostingových spoločností to funguje podobne: tlačidlá sa líšia, príčiny sú rovnaké.

Zhrnutie

• Core Web Vitals sú LCP (dobré do 2,5 s), INP (dobré do 200 ms, od marca 2024 namiesto FID) a CLS (dobré do 0,1), merané na 75. percentile podľa typu zariadenia.
• Hodnotenie určujú poľné údaje (CrUX, 28 dní); laboratórne údaje (Lighthouse) pomáhajú nájsť príčiny.
• Google používa Core Web Vitals pri hodnotení poradia, ale prednosť má relevantnosť: dokonalé skóre nie je cieľom samo osebe.
• Najväčší prínos: rýchla odpoveď servera s cache a kompresiou, malé obrázky s width a height, žiadne lenivé načítanie najdôležitejšej fotografie, menej JavaScriptu tretích strán.

Kvíz

Úloha

Úloha A4.3: Rýchla odpoveď a ľahké obrázky. Zadajte adresu stránky. Program trikrát zmeria čas do prvého bajtu (TTFB) z nášho servera a zoberie strednú hodnotu, skontroluje, či sa HTML posiela komprimované (gzip, Brotli alebo zstd), spočíta obrázky bez width a height a overí, či sa najdôležitejší obrázok navrchu nenačítava s loading="lazy". Pozor: ide o meranie z jedného miesta, nie o meranie vašich návštevníkov. Nemáte vlastný web? Použite www.wikipedia.org.

Úloha D4.3: Vaše Core Web Vitals. Spustite PageSpeed Insights pre svoju domovskú stránku a pre jednu ďalšiu dôležitú stránku, najprv na karte Mobile. Pre každú stránku si zapíšte: či sú k dispozícii poľné údaje (pre stránku alebo celý web), LCP, INP a CLS z poľných údajov, skóre Lighthouse a prvok, ktorý Lighthouse označí ako prvok LCP. Vyberte jedno zlepšenie, ktoré podľa vás prinesie najviac, a vysvetlite prečo.

Čítajte ďalej

• web.dev, Web Vitals: https://web.dev/articles/vitals
• web.dev, Largest Contentful Paint (LCP): https://web.dev/articles/lcp
• web.dev, Interaction to Next Paint (INP): https://web.dev/articles/inp
• web.dev, Cumulative Layout Shift (CLS): https://web.dev/articles/cls
• web.dev, Time to First Byte (TTFB): https://web.dev/articles/ttfb
• web.dev, Browser-level image lazy loading: https://web.dev/articles/browser-level-image-lazy-loading
• Google Search Central, Understanding page experience in Google Search results: https://developers.google.com/search/docs/appearance/page-experience
• PageSpeed Insights, About PageSpeed Insights: https://developers.google.com/speed/docs/insights/v5/about
• Pomocník Search Console, Core Web Vitals report: https://support.google.com/webmasters/answer/9205520