Většina návštěvníků neopouští pomalou stránku proto, že by nesnášeli značku. Odcházejí, protože čekání je jako tření, a tření na první obrazovce zabíjí konverzi. Core Web Vitals jsou pokusem Googlu změřit toto tření způsobem, o kterém mohou diskutovat vývojáři i majitelé webů.
Tři metriky, přeloženo
LCP, Largest Contentful Paint
Jak dlouho trvá, než se objeví hlavní obsah stránky. U většiny webů je to hlavní obrázek, hlavní nadpis nebo první fotka produktu. Dobré LCP působí rychle, špatné LCP působí, jako by stránka stále přemýšlela.
INP, Interaction to Next Paint
Jak responzivně stránka působí, jakmile se s ní pokusíte interagovat, kliknutí na tlačítko, rozbalení menu, otevření filtrů. Špatné INP působí, jako by vás stránka na okamžik ignorovala.
CLS, Cumulative Layout Shift
Jak moc obsah poskakuje, zatímco se stránka načítá. Špatné CLS je pocit, kdy saháte po tlačítku a sledujete, jak se přesune jinam, obvykle proto, že se pozdě načetla reklama, obrázek nebo banner.
Proč tyto metriky ovlivňují byznys, nejen SEO
- Pomalé první vykreslení znamená, že lidé zavřou kartu dříve, než se obsah objeví.
- Nereagující interakce způsobují, že formuláře, filtry a pokladny působí jako rozbité.
- Posuny rozvržení způsobují chybná kliknutí, což vyvolává frustraci, vratky a požadavky na podporu.
- Google používá tyto metriky jako signál pro umístění, takže slabý výkon také snižuje, jak často vás vůbec lidé najdou.
Dopad je kumulativní: malé výkonnostní problémy se napříč relacemi nasčítají a malá zlepšení se rovněž sčítají.
Co obvykle dělá největší rozdíl
- Obrázky. Správně zmenšené, moderní formáty (WebP/AVIF), líně načítané pod ohybem stránky a s explicitními rozměry, aby prohlížeč nemusel hádat.
- Fonty. Omezte je na to, co skutečně používáte, hostujte je pokud možno sami a přednačtěte ten, který vykresluje hlavní text.
- Skripty třetích stran. Analytika, chatovací widgety, A/B nástroje a tag manažery jsou často největším zdrojem pomalého INP. Načítejte je odloženě a jen na stránkách, kde jsou potřeba.
- Nepoužívaný JavaScript. Dodávat méně kódu znamená méně parsování, méně provádění, méně energie na slabších zařízeních.
- Doba odezvy serveru. Pomalý backend stanovuje spodní hranici pro vše ostatní. Záleží na cachování, optimalizaci dotazů a rozumné úrovni hostingu.
- Rezervované místo. Používejte explicitní šířku/výšku nebo CSS poměry stran pro obrázky, reklamy, iframy a bannery, aby se rozvržení později neposunulo.
Běžné chyby
- Měření jen na vlastním rychlém notebooku. Uživatelé jsou na mobilních sítích a zařízeních střední třídy. Používejte terénní data (monitoring reálných uživatelů) vedle laboratorních testů.
- Honba za jediným číslem. Dokonalé skóre Lighthouse v jednom běhu mnoho neznamená, konzistentní terénní metriky napříč týdny ano.
- Přidávání nástrojů k opravě výkonu. Více skriptů web málokdy zrychlí.
- Braní výkonu jako jednorázové záležitosti. Bez monitoringu se zhoršuje pokaždé, když tým přidá nový widget.
Rozumný postup
- Získejte výchozí terénní data pro LCP, INP a CLS na vašich 5 hlavních stránkách.
- Nejprve opravte hlavní obrázek a hlavní nadpis, neúměrně ovlivňují LCP.
- Proveďte audit skriptů třetích stran, odstraňte nebo odložte cokoli, co není striktně potřeba.
- Rezervujte místo pro obrázky, reklamy a pozdě načítané prvky.
- Monitorujte průběžně a berte zhoršení jako chyby.
