Core Web Vitals na klientskych weboch: ako sledovať laboratórne a terénne údaje

· · Návrh pripravila AI, skontroloval Pavol Bincik · Ako píšeme

Zhrnutie

Core Web Vitals sa menia pri každej zmene pluginu, témy alebo tagu, takže audit zo dňa spustenia rýchlo zastará. Lighthouse poskytuje opakovateľné laboratórne meranie, ktoré regresiu ukáže pri ďalšom behu. CrUX ukazuje, čo zažili skutoční používatelia Chrome, ako kĺzavý priemer za 28 dní, takže reaguje pomaly oboma smermi. Google používa Core Web Vitals pri určovaní poradia vo vyhľadávaní, ale uvádza, že prednosť má relevantnosť. Sledujte oboje na stránkach, na ktorých záleží. Kontrola dostupnosti nerobí ani jedno: meria, ako rýchlo odpovedá server, nie ako sa stránka vykreslí.

Väčšina klientskych webov dostane pri spustení jeden beh PageSpeed Insights a potom sa už nikto nepozrie. Potom aktualizácia pluginu pridá skript, klient nahrá veľký úvodný obrázok, marketing cez tag manager pridá chatovací widget. Nič z toho nespustí upozornenie na výpadok a všetko to môže stránku spomaliť.

Tri metriky Core Web Vitals a ich prahové hodnoty

  • Largest Contentful Paint (LCP): kedy sa zobrazí najväčší obrázok alebo textový blok. Dobré: 2,5 sekundy alebo menej.
  • Interaction to Next Paint (INP): ako rýchlo stránka reaguje na kliknutia, ťuknutia a stlačenia kláves. Dobré: 200 milisekúnd alebo menej; slabé: viac ako 500. INP nahradil First Input Delay ako metriku Core Web Vitals 12. marca 2024.
  • Cumulative Layout Shift (CLS): ako veľmi rozloženie stránky poskakuje počas načítania. Dobré: 0,1 alebo menej.

Stránka spĺňa prahovú hodnotu, keď ju splní aspoň 75 % načítaní stránky, merané zvlášť pre mobil a desktop.

Aký majú vplyv na poradie vo vyhľadávaní

Google uvádza, že jeho systémy na určovanie poradia používajú Core Web Vitals. Zároveň hovorí, že Vyhľadávanie aj tak zobrazí najrelevantnejšiu stránku, aj keď je jej používateľský zážitok (page experience) slabý, a že dobré výsledky v jeho prehľadoch nezaručujú popredné pozície. Pre klientsky web to znamená, že rýchlosť nezachráni slabý obsah, ale pomalá stránka sa vzdáva výhody, o ktorú nemusela prísť.

Laboratórne a terénne údaje sú rôzne merania

Laboratórne údaje pochádzajú z Lighthouse, nástroja, na ktorom stojí PageSpeed Insights. Ten načíta stránku raz v kontrolovanom, simulovanom prostredí. Vďaka tomu je meranie opakovateľné, vhodné na ladenie a na odhalenie regresie hneď po zmene. Má však svoje hranice:

  • Nedokáže zmerať INP, pretože so stránkou nikto neinteraguje. Total Blocking Time (TBT) je rozumný orientačný ukazovateľ, ale INP nenahrádza.
  • Skóre sa medzi behmi mení, napríklad kvôli reklamám, A/B testom alebo smerovaniu v sieti, preto sledujte trend, nie jedno číslo.
  • Skóre výkonu má tri pásma: 0 až 49 slabé, 50 až 89 vyžaduje zlepšenie, 90 až 100 dobré.

Terénne údaje pochádzajú z Chrome UX Report (CrUX): od skutočných používateľov Chrome, ktorí povolili odosielanie štatistík používania a synchronizáciu histórie. Nepochádzajú z crawlerov. Dôležité sú dve vlastnosti:

  • Ide o kĺzavý priemer za 28 dní, aktualizovaný denne. Regresia nasadená dnes sa prejaví postupne počas nasledujúcich týždňov a oprava sa prejaví rovnako dlho.
  • Stránka potrebuje dostatok návštev z Chrome, aby mala vlastné údaje. Bez nich PageSpeed Insights použije údaje za celý origin (celý web) a malý web nemusí mať terénne údaje vôbec.

Laboratórne údaje vám teda rýchlo povedia, že sa niečo zmenilo; terénne údaje ukážu, čo návštevníci naozaj zažili.

Prečo tu kontrola dostupnosti nepomôže

Kontrola dostupnosti meria, ako rýchlo server odpovie na požiadavku. Stránku nevykresľuje, nenačítava obrázky ani nespúšťa skripty, takže LCP, INP ani CLS nevidí.

Jeden vstupný údaj však vidí: čas odozvy servera. Time to First Byte predchádza First Contentful Paint aj LCP, takže keď sa server spomalí, stiahne so sebou všetko, čo nasleduje. Dobrý TTFB je 0,8 sekundy alebo menej. Ak po zmene hostingu čas odozvy rastie, oplatí sa spustiť Lighthouse.

Čo klientske weby zvyčajne spomaľuje

Toto sú obvyklí podozriví, nie merania:

  • Aktualizácie pluginov a tém, ktoré pridajú skripty, štýly alebo webové písma.
  • Nové tagy v tag manageri: chatovacie widgety, pixely, heatmapy.
  • Obrázky a videá, ktoré klient nahrá v plnej veľkosti.
  • Slidery a page buildery, ktoré sa načítavajú na každej stránke.
  • Zmeny hostingu: lacnejší tarif, nový server, chýbajúca cache.

Postup, ktorý drží krok so zmenami

  1. Pre každého klienta vyberte dve alebo tri stránky: úvodnú stránku a stránky, ktoré prinášajú dopyty alebo predaje.
  2. Zaznamenajte východiskový stav v PageSpeed Insights: laboratórne skóre, LCP, TBT a CLS a terénne údaje, ak nejaké sú.
  3. Po každej aktualizácii spustite Lighthouse znova a medzitým aj pravidelne podľa plánu.
  4. Terénne údaje kontrolujte raz mesačne. Pamätajte, že za zmenami zaostávajú o týždne.
  5. Každých pár mesiacov prejdite s klientom tag manager a odstráňte, čo nikto nepoužíva.

Ako to sleduje Baromio

  • Lighthouse podľa plánu: pri HTTP monitore alebo monitore kľúčového slova zapnite Monitorovať rýchlosť stránky. Baromio spúšťa Lighthouse cez Google PageSpeed Insights (pre mobil) a zaznamenáva skóre výkonu, LCP, FCP, TBT, CLS, Speed Index a váhu stránky podľa typu zdroja. Free: 1 URL, týždenne. Pro (9 EUR mesačne): 5 URL, denne. Business (29 EUR mesačne): 15 URL, denne. História sa uchováva 7, 30 alebo 90 dní podľa plánu.
  • Upozornenia: upozornenie dostanete, keď skóre klesne pod 50, teda do pásma "slabé" podľa Lighthouse, a znova len vtedy, ak klesne o ďalších 15 bodov. Upozornenie o obnovení príde, keď je skóre späť na 50 alebo viac a aspoň o 15 bodov vyššie.
  • Terénne údaje CrUX: pre tie isté monitory Baromio každý deň uloží snímku CrUX pre presne túto URL, pre telefóny, desktopy a všetky zariadenia spolu: p75 LCP, FCP, CLS, INP a TTFB, každú s rozdelením dobré / vyžaduje zlepšenie / slabé. Ak CrUX pre danú URL nemá údaje, snímka sa neuloží a karta Rýchlosť stránky to uvedie; pri stránkach s nízkou návštevnosťou je to bežné.
  • Z AI asistenta: rovnaké terénne údaje sú dostupné cez MCP server Baromio (get-crux-data).

Zdroje