Väčšina návštevníkov neopustí pomalú stránku preto, že nenávidia značku. Odchádzajú, pretože čakanie pôsobí ako trenie a trenie na prvej obrazovke zabíja konverziu. Core Web Vitals sú pokusom Googlu zmerať toto trenie spôsobom, o ktorom môžu diskutovať vývojári aj vlastníci webov.
Tri metriky, preložené
LCP, Largest Contentful Paint
Ako dlho trvá, kým sa zobrazí hlavný obsah stránky. Pre väčšinu webov je to hlavný obrázok, hlavný nadpis alebo prvá fotka produktu. Dobré LCP pôsobí rýchlo; zlé LCP pôsobí, akoby stránka stále premýšľala.
INP, Interaction to Next Paint
Aká responzívna stránka pôsobí, keď s ňou skúsite interagovať, kliknutie na tlačidlo, rozbalenie menu, otvorenie filtrov. Zlé INP pôsobí, akoby vás stránka na chvíľu ignorovala.
CLS, Cumulative Layout Shift
Ako veľmi obsah poskakuje počas načítavania stránky. Zlé CLS je pocit, keď siahnete po tlačidle a sledujete, ako sa presunie inam, zvyčajne preto, že sa neskoro načítala reklama, obrázok alebo banner.
Prečo tieto metriky ovplyvňujú podnik, nielen SEO
- Pomalé prvé vykreslenie znamená, že ľudia zatvoria kartu skôr, než sa obsah zobrazí.
- Neresponzívne interakcie spôsobujú, že formuláre, filtre a pokladne pôsobia pokazene.
- Posuny rozloženia spôsobujú nesprávne kliknutia, ktoré vytvárajú frustráciu, vrátenia a tikety podpory.
- Google používa tieto metriky ako signál hodnotenia, takže slabý výkon tiež znižuje to, ako často vás vôbec nájdu.
Dopad je kumulatívny: malé problémy s výkonom sa naprieč reláciami sčítavajú a malé zlepšenia sa tiež skladajú.
Čo zvyčajne robí najväčší rozdiel
- Obrázky. Správne nadimenzované, moderné formáty (WebP/AVIF), lenivo načítané pod ohybom a s explicitnými rozmermi, aby prehliadač nemusel hádať.
- Písma. Obmedzte na to, čo skutočne používate, hostujte vlastné, keď je to možné, a prednačítajte to, ktoré vykresľuje hlavný text.
- Skripty tretích strán. Analytika, chatovacie widgety, A/B nástroje a tag manažéry sú často najväčším zdrojom pomalého INP. Načítavajte ich odložene a len na stránkach, kde sú potrebné.
- Nepoužitý JavaScript. Dodávanie menej kódu znamená menej parsovania, menej vykonávania, menej energie na slabších zariadeniach.
- Čas odozvy servera. Pomalý backend nasadzuje strop všetkému ostatnému. Záleží na cachovaní, optimalizácii dotazov a rozumnej úrovni hostingu.
- Rezervovaný priestor. Použite explicitnú šírku/výšku alebo CSS pomery strán pre obrázky, reklamy, iframy a bannery, aby sa rozloženie neskôr neposunulo.
Bežné chyby
- Meranie len na vlastnom rýchlom notebooku. Používatelia sú na mobilných sieťach a zariadeniach strednej triedy. Používajte terénne údaje (monitoring reálnych používateľov) popri laboratórnych testoch.
- Naháňanie jediného čísla. Perfektné skóre Lighthouse v jednom behu veľa neznamená; konzistentné terénne metriky naprieč týždňami áno.
- Pridávanie nástrojov na opravu výkonu. Viac skriptov zriedka urobí web rýchlejším.
- Vnímanie výkonu ako jednorazovej záležitosti. Bez monitoringu sa zhoršuje vždy, keď tím pridá nový widget.
Rozumná postupnosť
- Získajte základné terénne údaje pre LCP, INP a CLS na vašich top 5 stránkach.
- Najprv opravte hlavný obrázok a hlavný nadpis, neúmerne ovplyvňujú LCP.
- Auditujte skripty tretích strán; odstráňte alebo odložte čokoľvek, čo nie je striktne potrebné.
- Rezervujte priestor pre obrázky, reklamy a neskoro načítavané prvky.
- Monitorujte priebežne a berte zhoršenia ako chyby.
