Nové metriky od Google: Jak je zlepšit?

V květnu Google aktualizoval svůj vyhledávací algoritmus, aby zohledňoval nové metriky souhrně nazývané Core web vitals. Tyto metriky jsou 3.
 

LCP - rychlost načtení dominantního prvku na stránce (typicky banneru nebo velkého bloku textu). Ovlivňuje ji například datová náročnost stránky, líné načítání obrázků nebo rychlost odezvy serveru.
 

FID - zjednodušeně interaktivita webu. Ukazuje za jak dlouho po načtení je stránka pro uživatele použitelná. Typicky ji zpomaluje špatně optimalizovaný JavaScript (ideální čas projít všechny GTM skripty a zapřemýšlet, jestli je skutečně potřebujete).
 

CLS - vizuální stabilita stránky při načítání. Stává se vám, že při brouzdání na webu chcete kliknout na odkaz a přesně v té chvíli se pod váš palec donačte reklama? To je právě špatně odladěné CLS.

Tyto metriky jsou žhavé téma právě kvůli možnému dopadu na SEO. Měli bychom ale pamatovat, že Google pouze převádí do čísel kvalitu a uživatelskou přívětivost webu. Zlepšení CWV není pouze o vyhledávačích, v první řadě přinese lepší zážitek z nákupu pro vaše uživatele. 

Pokud máte přístup do Search Console, najdete hodnoty CWV právě v ní. Je to nejjednodušší a přehledná cesta. Web si můžete sami snadno otestovat pomocí nástroje od Googlu, který se jmenuje Page Speed Insights. Doporučujeme otestovat homepage, nejnavštěvovanější sekci a typický detail produktu. Při testování se zaměřte na mobilní výsledky, které Google upřednostňuje. Procentuální výsledky vám ukážou, kde je prostor pro zlepšení. Podívejte se na video, kde vám ukážeme, jak se v testu orientovat.

Ukazuje vám Search console nebo PageSpeed Insights, že máte co zlepšovat? Můžeme vám udělat podrobnou analýzu problémových metrik a návrh na to, jak je zlepšit.

Skóre jednotlivých metrik se získává anonymními daty z prohlížeče Chrome. Není to tedy synteticky naměřená hodnota, jedná se o hodnoty, kterých dosahují typičtí návštěvníci webu. Z toho důvodu je potřeba po každé optimalizaci čekat měsíc, než se změny projeví (bere se v potaz průměrné skóre za posledních 28 dnů).

Ukažme si názorný příklad na našem klientovi Horsefeathers.cz. Prohlédněte si zejména grafy a výsledky před a po úpravách.

Co jsme upravovali:

CLS - K obrázkům jsme přidali rozměrové attributy a tím jim vyčlenili dostatečné místo v layoutu, aby nedocházelo k posunům. Využili jsme nativní lazy loading, díky tomu se stahují obrázky až v době, kdy je uživatel potřebuje a snížil se datový tok. Prověřili jsme velikosti jednotlivých obrázků a případně zmenšili nebo jsme vytvořili další rozměr speciálně pro mobilní zařízení.

FID - Abychom zvýšili rychlost načítání a celkový uživatelský dojem, optimalizovali jsme databázové dotazy a využili načítání z cache. Tuto metodu jsme použili převážně na homepage a root sekcích, kde to dost ulevilo serveru a tím pádem je e-shop rychleji interaktivní a uživatelsky mnohem lépe dostupný. V návaznosti na úpravu databázových dotazů jsme se ještě pokusili optimalizovat použitý javascript.

LCP - Nakonec jsme se snažili optimalizovat úvodní banner na homepage, kde byl problém převážně na mobilních zařízeních. Zde jsme také přidali nový rozměr obrázku pro mobilní telefony, refaktorovali HTML a CSS a v neposlední řadě optimalizovali podpůrný javascript. Výsledek se projevil i na desktopových zařízeních.