Čo sú Core Web Vitals?
Core Web Vitals definujú metriky, ktoré majú priamy vplyv na používateľský zážitok bez ohľadu na typ webovej stránky, cieľovú skupinu či jej účel.
V roku 2020 Google definoval 3 konkrétne metriky, na ktorých najviac záleží a zároveň reprezentujú najdôležitejšie situácie na ktorých stojí používateľská skúsenosť – načítavanie, interaktivita a vizuálna stabilita.
Pozrime sa na zo bližšie
LCP (Largest Contentful Paint) – metrika, ktorá sa zameriava na rýchlosť načítania a definuje bod, v ktorom je načítaný a vykreslený hlavný obsah webu. Z praxe vieme, že najčastejšou príčinou zlých výsledkov tejto metriky sú veľké obrázky, slider či automaticky spúšťané videá.
FID (First Input Delay) – táto metrika sa zameriava na meranie odozvy používateľa a zaťaženie webu. Kvantifikuje skúsenosti používateľov, ktorí pri pokuse o interakciu s webovou stránkou nedostávajú žiadnu spätnú väzbu. V praxi to vyzerá tak, že už sa vám síce načítal obsah, ale pri kliknutí na nejaké tlačidlo alebo scrollovaní nižšie webová stránka neraguje.
Táto metrika väčšinou nebýva problémom, ale keď sa už vyskytne, najbežnejšou príčinou je slabý výkon servera (alebo jeho umiestnenie geograficky ďaleko), príliš veľa použitých JavaScriptových kódov alebo zahltený server requestami z pluginov tretích strán (tento problém sa vyskytuje najčastejšie pri weboch postavených na open source systémoch ako napríklad WordPress).
CLS (Cumulative Layout Shift) – metrika CLS zastupuje v používateľskej skúsenosti vizuálnu stabilitu a v jednoduchosti teda stav, kedy po načítaní prvých elementov webovej stránky dochádza k zmene ich polohy.
Toto začali používatelia cítiť najmä po príchode cookie líšt, ktoré niektorí majitelia webových stránok umiestňujú na úplný vrch stránky, ale načítavajú ich až po zobrazení hlavného obsahu webu. To spôsobí, že stránka sa posunie o výšku tejto cookie lištysmerom nadol a s ňou aj všetky elementy ako tlačidlá, obrázky či text.
Aké sú hraničné hodnoty Core Web Vitals?
Pri stanovení týchto 3 kľúčových parametrov používateľskej skúsenosti z pohľadu rýchlosti načítavania webových stránok bolo potrebné definovať aj presné hraničné hodnoty.
To znamená, do akého momentu považujeme danú metriku sa splnenú a používateľskú skúsenosť uspokojenú, do akého momentu je to akceptovateľné ale existuje priestor na zlepšenie a od akého momentu je metrika nesplnená a trpí používateľská skúsenosť. Tieto hraničné hodnoty najlepšie vyjadruje obrázok priamo z nápovedy Google pre developerov.
Ako zmerať Core Web Vitals?
Google verí, že Core Web Vitals majú významný vplyv na používateľskú skúsenosť, a preto ich zapracoval do všetkých hlavných analytických nástrojov pre vývojárov:
- PageSpeed Insights
- Google Serach Console (časť Core Web Vitals report)
- Google Lighthouse
- Chrome User Experience Report
Pozor! Každý nástroj vám vygeneruje rôzne hodnoty a dokonca jeden nástroj vám môže vrátiť mierne rozdielne výsledky aj v niekoľkých po sebe idúcich meraniach. To je spôsobené odlišnými spôsobmi merania týchto dát a zároveň treba mať na pamäti neustále meniace sa okolnosti ako záťaž na server, lokalitu servera, ktorý meranie vykonáva alebo uloženie niektorých dát do pamäti cache.
To, na čo by ste sa pri optimalizácií týchto metrík mali zamerať viac ako na finálne hodnotenie je zoznam odporúčaných riešení ako zlepšiť výsledky Core Web Vitals. Tie sú naprieč všetkými nástrojmi veľmi podobné, ak nie totožné.
Výstup z merania rýchlosti načítania webovej stránky byt-in.sk prostredníctvom PageSpeed Insigts
Dosiahnuť výborné hodnotenia v týchto meraniach môže byť však pomerne náročné bez pomoci skúseného programátora. Problém zároveň nastáva, pokiaľ nemáte možnosť upravovať kód vašej webovej stránky napr. z dôvodu, že využívate nejaké „krabicové riešenie“ ako napríklad Wix, Squarespace či Atomer.
Ako optimalizovať Core Web Vitals?
Keď už vieme, čo to Core Web Vitals sú, poznáme hraničné hodnoty a vieme ich zmerať, je na mieste otázka, čo s tým vieme spraviť a ako dosiahnuť lepšie výsledky.
V zásade rozdeľujeme optimalizáciu Core Web Vitals do 3 častí:
- Optimalizácia obrázkov
- Optimalizácia zdrojového kódu
- Zvýšenie výkonu servera
Optimalizácia obrázkov
Výhodou tejto časti je, že ju zvládne úplne každý a to dokonca ja tí, ktorých weby fungujú na uzatvorených systémoch (krabicové riešenia popísané vyššie). V tomto prípade viete spraviť 3 efektívne kroky:
- Nahrávanie obrázkov v primeranom rozmere
Keď na web nahrávate obrázky a rozmer miesta v ktorom sa majú zobraziť je napríklad 300 x 300 pixelov, je dobré si obrázok upraviť práve na tento rozmer. Pokiaľ tam totiž nahráte obrázok s rozmerom napríklad 3000 x 3000 pixelov, dôjde k tomu, že obrázok má väčší dátový objem a zároveň pri zobrazení stránky sa bude musieť prehliadač vysporiadať so zmenou rozmerov obrázka, v tomto prípade jeho zmenšením.
- Komprimácia obrázka
V skratke ide o minimalizáciu dátovej veľkosti obrázka pri strate jeho kvality do miery, ktorá je akceptovateľná – to znamená, že si ju ľudské oko nedokáže všimnúť. Vo všeobecnosti sa najlepšie komprimujú JPEG obrázky. Komprimáciu obrázka môžete spraviť buď priamo v niektorom z grafických nástrojov ako Adobe Photoshop alebo GIMP, prípadne dodatočne cez službu tretej strany ako napríklad TinyPNG.
Existujú aj nástroje a programy pre hromadnú kompresiu viacerých obrázkov naraz, prípadne rozšírenia do open source systémov ako WordPress, ktoré spustia kompresiu obrázka automaticky po jeho nahratí na server.
Ja osobne v prípade WordPressu odporúčam plugin Imagify ale dobré výsledky som dosahoval aj s pluginmi TinyPNG API alebo Smash.it. Pozor! Veľa nástrojov nepodporuje komprimáciu obrázka, ktorý presahuje veľkosť 5MB.
- Zobrazovanie obrázkov v novšej generácií ako napríklad WebP alebo AVIF.
Pri aktuálnom stave zastúpenia používaných prehliadačov skôr odporúčam formát WebP, ktorý má širšiu podporu. Problém, ktorému budete v tomto prípade čeliť je, že pokiaľ nahráte na web iba obrázky vo formáte WebP a používateľ, ktorý sa na web pripojil z webového prehliadača, ktorý nepodporuje tento formát obrázkov, žiadne obrázky neuvidí.
To sa dá technologicky riešiť tak, že na webe máte oba formáty obrázkov (WebP aj PNG/JPEG/Gif atď.) a systém automaticky rozpozná, z akého prehliadača sa používateľ pripája, porovná jeho verziu prehliadača s databázou podporovaných prehliadačov a podľa toho mu zobrazí obrázky v novšej alebo staršej generácií formátov. V prípade WordPress stránok túto technológiu viete pokryť práve spomínaným pluginom Imagify.
Optimalizácia zdrojového kódu
V tomto prípade je možností omnoho viac v závislosti od technológií a systémov, na ktorých váš web funguje. V zásade sa pri optimalizácií zdrojového kódu rozprávame najmä o optimalizácií JavaScriptových kódov, HTML, CSS a databáz (napr. MySQL).
Overenými a technicky najjednoduchšie implementovateľnými metódami sú:
- Minifikácia zdrojových kódov
- Odstránenie nepoužívaných jazykov
- Oddialenie načítavania mimo obrazovky (tzv. Lazy Loading)
- Odstránenie zdrojov blokujúcich vykreslenie
- Premazanie zbytočných údajov z databázy (napr. priebežné ukladania, komentáre v spame alebo koši a pod.)
- Prechod na HTTPS/2
Pokiaľ vaša stránka beží na CMS systéme WordPress, odporúčam využiť platený plugin WP-Rocket, ktorý používame aj na našej agentúrnej stránke Glidy.sk, ale aj webových stránkach našich klientov. Tento plugin je síce spoplatnený ročným poplatkom 44€ ročne (odporúčam nakupovať počas BlackFriday) ale jeho implementácia je veľmi jednoduchá, rýchla a naozaj účinná.
Výsledok PageSpeed Insights webu glidy.sk pre mobilné aj desktopové prehliadanie
V prípade, že chcete ušetriť, k dispozíciísú aj bezplatné pluginy pre WordPress,ako napríklad Hummingbird, Autoptimize alebo W3 total cashe.
Zvýšenie výkonu servera
Zvýšenie výkonu servera z pohľadu Core Web Vitals je asi najnáročnejší krok, pretože vybrať dobrý server nie je jednoduché. Spravidla je dobré umiestniť svoj web na dedikovaný server (zdieľaný server býva cenovo dostupnejší, ale menej výkonný) a zároveň blízko geolokácie, z ktorej očakávate návštevníkov.
Pokiaľ máte web, na ktorý chodia ľudia z celého sveta, tak odporúčam implementovať aj riešenie CDN (Content Delivery Network), čo v jednoduchosti znamená, že vaša stránka nie je umiestnená len na 1 serveri, ale na viacerých serveroch rôzne po svete, pričom používateľ sťahuje webovú stránku práve zo servera, ktorý je k nemu najbližšie.
Takéto riešenie ponúkajú napríklad hostingy od AWS (Amazon Web Services) alebo aj rôzne tretie strany, ktoré viete napojiť na váš existujúci hosting, ako napríklad RocketCND (služba od tých istých vývojárov ako WP-Rocket alebo Imagify).
Ďalšou možnosťou, ako zrýchliť načítavanie stránky, je aj zmena DNS providera ako napríklad využitím služby Cloudflare.
Core Web Vitals z pohľadu SEO
Oznámenie Core Web Vitals v roku 2020 spravilo veľkým šum aj v kruhoch SEO špecialistov, a to najmä po tom, čo sa v roku 2021 objavila v Google Search Console položka venovaná práve Core Web Vitals.
Sám John Mueller z Google Search Central počas pravidelného online stretnutia SEO špecialistov z celého sveta nazývaného „Google SEO office-hours“ povedal, že Core Web Vitals majú priamy vplyv na radenie výsledkov vo vyhľadávaní Google. Zároveň však dodal: „Pokiaľ je stránka A rýchlejšia ako stránka B, avšak zároveň stránka B ponúka používateľovi relevantnejší výsledok, stále stránka B bude na vyššej pozícií ako stránka A“.
Z toho vychádza, že kvalitný a relevantný obsah je stále dôležitejšou metrikou ako rýchlosť načítavania. Vo vysko konkurenčom prostredí však stále platí, že pri SEO si nestavíme len na 1 kartu a metriku, ale že musíme budovať SEO naprieč všetkými úrovňami ako obsah, linkbuilding ale aj práve spomínané naplnenie používateľských očakávaní od webu a teda, že sa používateľovi stránka načíta rýchlo a korektne.
Zopár rýchlych slov na záver
Core Web Vitals sú súčasťou komplexnejšieho systému Web Vitals, do ktorého okrem 3 vyššie menovaných metrík (CLS, LCP, FID) spadajú aj ďalšie, ako napríklad HTTPS alebo mobile friendly. Rýchlosť načítania webovej stránky a jej korektné ovládanie vždy bolo aj bude veľmi dôležitou súčasťou webových stránok.
Google však má obrovský vplyv na to, ako dnešný internet vyzerá a dokáže niektoré témy vytiahnuť do popredia len tým, že z nich spraví hodnotiace SEO faktory. Optimalizovať rýchlosť načítania by ste však stále mali robiť v prvom rade pre používateľov a nie z dôvodu SEO.
