UX & dizajn

Ako Core Web Vitals ovplyvňujú váš web?

Stalo sa vám, že ste merali rýchlosť stránky cez Google PageSpeed a zrazu ste dosiahli oveľa nižšie skóre ako prednedávnom? Problém je zrejme v tom, že Google zmenil metriky hodnotenia rýchlosti webov. Načítavanie stránky teraz hodnotí pomocou nových veličín, známych ako Core Web Vitals. Poďme si na ne posvietiť!

Doterajšie parametre, podľa ktorých Google hodnotil user experience (čiže skúsenosť užívateľov s webom), boli napr. tieto:

optimalizácia pre mobilné zariadenia,
bezpečnosť pri prehliadaní (žiaden malware, spyware a pod.),
HTTPS šifrovanie,
množstvo rušivých prvkov (pop-up a pod.).

Google však oznámil, že sa chystá implementovať nové metriky pre meranie user experience (UX) - tzv. Core Web Vitals. Tieto sa majú stať nástrojmi aj pre ranking stránok vo výsledkoch vyhľadávania (SERP), nie však skôr ako v roku 2021. Máte preto čas navyše sa s týmito metrikami zoznámiť.

Stále platí, že obsah stránky je na prvom mieste, Google však pri hodnotení stránok sleduje viacero faktorov. Práve tieto sledované faktory môžu byť v prípade “remízy” dvoch podobne relevantných stránok s kvalitným obsahom “tie-breakom” - čiže rozhodujúcim faktorom. Preto by vašej pozornosti nemali uniknúť ani Core Web Vitals. Tie hodnotia tri konkrétne aspekty stránok - načítavanie, interaktivitu a vizuálnu stabilitu.

Najväčšie vykreslenie obsahu - LCP (Largest Contentful Paint)

Metrika LCP vyjadruje čas načítania najväčšieho grafického prvku (obrázku či textového bloku) v zobrazovacom poli - čiže v tom, čo momentálne vidíte na obrazovke. Tento čas je zaradený do troch intervalov: pokiaľ je doba načítania contentu dlhšia ako 4 sekundy, Google ho vyhodnotí ako nedostatočný a vaša stránka dostane nízke skóre.

Dobré LCP skóre podľa Googlu je, ak sa 75% užívateľom načíta grafický prvok pod 2,5 sekundy. LCP, podobne ako zvyšné tri metriky viete merať napr. cez PageSpeed Insights.

Ak chcete odmerať LCP v “laboratórnych” podmienkach pred spustením stránky, môžete využiť napríklad WebPageTest.

Ak si chcete zlepšiť LCP skóre, môžete si nechať poradiť priamo od developerov Googlu na tomto linku.

Oneskorenie prvého vstupu - FID (First Input Delay)

Táto metrika sa zameriava na hodnotenie interaktivity stránky. Meria responzivitu stránky v momente, keď s ňou užívateľ interaguje prvýkrát. Medzi interakcie zaraďujeme napríklad:

kliknutie na link alebo tlačidlo,
zadanie textu do prázdneho poľa,
výber z drop down menu,
zakliknutie možnosti v checkboxe.

Medzi interakcie sa nepočítajú priebežné činnosti ako napríklad scrollovanie či zoomovanie. Prirodzene, niektorí užívatelia nemusia s vašou stránkou interagovať vôbec, v takom prípade FID nevráti žiadnu hodnotu.

Prvé oneskorenie spravidla nastáva medzi tzv. prvým vykreslením obsahu (FCP) a časom do interaktívneho vykreslenia (TTI). Druhá menovaná metrika meria čas od začiatku načítavania stránky po moment, keď sú všetky jej zdroje načítané a je pripravená spoľahlivo reagovať na interakciu užívateľa s ňou.

Opäť, Google od vás očakáva responzivitu stránky rýchlejšiu ako 0,1s pri 75% percentách všetkých pokusoch o jej načítanie.

FID, na rozdiel od LCP, sa nedá merať v “laboratórnych” podmienkach - je totiž nevyhnutná interakcia s užívateľom. Ako nástroj na jeho meranie môžete využiť PageSpeed Insights.

Ak chcete zrýchliť čas odozvy, niekoľko krokov vám ponúka samotný Google. Pre ďalšie informácie ohľadom problematiky FID-u kliknite sem.

Kumulatívna odchýlka rozloženia - CLS (Cumulative Layout Shift)

Ide o najväčšiu novinku spomedzi nových metrík. Ako už bolo napísané hore, meria vizuálnu stabilitu webu. Čo si pod tým predstaviť?

Určite ste zažili situáciu, keď sa grafický obsah stránky nevykreslil naraz. A vy ste v dôsledku nechtiac klikli na obrázok, ktorý tam ešte pred zlomkom sekundy nebol. Toto je v skratke princíp metriky CLS - zisťuje možnú nestabilitu rozloženia prvkov na webe.

Táto nestabilita môže byť spôsobená náhlym “objavovaním” sa nových prvkov na webe, na ktorom sa takýmto spôsobom neočakávane posúva či zobrazuje obsah. Zaskočený užívateľ by v konečnom dôsledku mohol kliknúť na nesprávne miesto na stránke - čo môže byť problém, ak by išlo napr. o predčasné odoslanie objednávky.

CLS sa konkrétne zameriava na veľkosť zobrazovacieho okna a pohyb nestabilných prvkov. Výsledné skóre sa počíta ako celkový súhrn jednotlivých nečakaných zmien v rozložení obsahu na stránke počas celej doby zobrazenia stránky

Za neočakávanú zmenu v rozložení stránky (layout shift) sa považuje, ak vizuálny prvok zmení pozíciu z jedného vykresleného rámca (frame) na nasledujúci. Každý prvok, ktorý je vidno v zobrazovacom okne a zmení svoju štartovaciu pozíciu medzi dvoma rámcami, sa pokladá za nestabilný prvok. Výsledné CLS skóre je súčinom dvoch veličín:

koeficient dopadu zmeny pozície prvku na zobrazovacie okno,
koeficient vzdialenosti štartovacej a zmenenej pozície prvku.

Vo vyššie uvedenom príklade je najväčším rozmerom zobrazovacieho okna výška a nestabilný prvok sa posunul o 25% výšky okna, v čoho dôsledku je koeficient vzdialenosti 0,25.

V tomto príklade je teda koeficient dopadu 0,75 a frakcia vzdialenosti 0,25, takže CLS je 0,75 x 0,25 = 0,1875.

Google očakáva, že váš web bude mať nižšie skóre ako 0,1 pri viac ako 75% pokusoch o načítanie stránky. CLS si môžete zmerať za chodu cez PageSpeed Insights, resp. v skúšobnej prevádzke napr. cez WebPageTest.

Ak CLS hodnotenie nedosahuje vaše očakávania, môžete si opäť nechať poradiť od programátorov z Googlu.