Core Web Vitals: rýchly web sa meria aj po načítaní

Jedno zelené skóre nepokrýva všetky návštevy

Vývojár spustí test na rýchlom počítači a stránka vyzerá svižne. Návštevník na staršom mobile čaká na titulný obrázok a po kliknutí na filter sa rozhranie na chvíľu zastaví. Obe skúsenosti môžu patriť k tomu istému webu. Laboratórny test pomáha reprodukovať a opraviť problém, no jeho konkrétne zariadenie, sieť a scenár nepredstavujú všetkých používateľov.

Core Web Vitals sledujú načítanie hlavného obsahu cez LCP, odozvu interakcií cez INP a vizuálnu stabilitu cez CLS. Za dobré hodnoty sa považuje LCP do 2,5 sekundy, INP do 200 milisekúnd a CLS do 0,1. Hodnotenie pracuje so 75. percentilom, oddelene pre mobilné a desktopové návštevy. Technický tím preto potrebuje rozumieť rozloženiu výsledkov, nie iba priemeru.

Najprv zistite, čo návštevníka skutočne brzdí

V ilustračnom firemnom webe porovnajte domovskú stránku, detail služby a článok. Každý typ môže mať iný najväčší prvok a iné interakcie. Sledujte výsledky podľa typu stránky a zariadenia; rozdelenie až na identitu používateľa na tento účel netreba. Ak CrUX nemá dostatok verejných údajov, vlastné meranie reálnych návštev môže doplniť diagnostiku pri vhodnej ochrane súkromia.

Zaznamenajte východiskový stav a jednu prioritnú zmenu. Ak je problémom hlavný obrázok, výmena celej knižnice formulára nemusí výsledok zlepšiť. Ak reaguje pomaly filter, ďalšie zmenšenie loga nepomôže jeho výpočtu. Pre konkrétnu chybu pripravte reprodukovateľný scenár aj porovnateľné meranie po oprave. Podmienky testu zachovajte, aby ste neporovnávali rozdielne siete.

LCP obrázok musí byť dostupný v správnom čase

Pri obrázku tvoriacom LCP preverujte, kedy sa jeho adresa objaví v dokumente a kedy začne sťahovanie. Hlavný viditeľný obrázok načítaný až po ďalšom klientskom requeste pridáva čakanie pred prenosom. Lazy loading je vhodný pre obrázky nižšie na stránke, ale pri hlavnom obrázku v prvom pohľade môže načítanie oddialiť. Prioritu prideľujte cielene tomu prvku, ktorý to potrebuje.

Pripravte primerané rozmery a responzívne varianty. Moderný formát, napríklad WebP, pomôže prenosu, ale obrovský zdroj ostáva zbytočný pre malú kartu. Skontrolujte sizes a reálne stiahnutý variant. LCP môže byť aj blok textu, takže meranie musí zohľadniť CSS, fonty a serverovú odpoveď. Komprimovanie obrázka nevyrieši čas strávený čakaním na pomalé databázové čítanie.

INP sa prejaví až pri používaní stránky

INP hodnotí odozvu na interakcie vrátane čakania pred spracovaním, práce handlerov a zobrazenia ďalšieho snímku. Dlhá úloha na hlavnom vlákne môže blokovať kliknutie, aj keď stránka už vyzerá načítaná. Preto počas profilovania naozaj otvárajte menu, filtrujte zoznam a používajte formulár. Prázdny scenár bez interakcií neotestuje ich náklady.

V ilustračnom zozname môže každý stlačený kláves spustiť filtrovanie tisícov položiek aj veľké prekreslenie. Najprv zmerajte, kde čas vzniká. Znížte zbytočnú prácu, obmedzte vykresľované položky alebo presuňte vhodný výpočet do workeru. Pri dlhšej úlohe môže pomôcť uvoľniť hlavné vlákno medzi časťami práce. Samotný animovaný indikátor problém neopraví, ak sa pre blokovanie ani nedokáže prekresliť.

CLS potrebuje rezervované miesto

Obrázky majú mať známe rozmery alebo pomer strán, aby si prehliadač pripravil miesto ešte pred načítaním. Podobný problém vzniká pri vloženom videu, externe doplnenej sekcii alebo vymenenom fonte. V ilustračnom článku môže oneskorené doplnenie banneru posunúť text presne vtedy, keď človek číta ďalší odsek alebo sa chystá kliknúť na odkaz.

Rezervujte primerané miesto a nepresúvajte už čítaný obsah bez potreby. Pri vlastných dynamických komponentoch otestujte pomalú sieť aj rôzne dĺžky textu. CLS je meranie vybraných neočakávaných posunov; nie každý pohyb rozhrania sa započítava rovnako. Ani dobrý výsledok preto nenahrádza kontrolu, či je prechod zrozumiteľný a človek dokáže dokončiť svoju úlohu.

Overte výsledok počas reálneho používania

Po nasadení porovnajte laboratórny scenár aj dostupné údaje z prevádzky. Verejné field dáta sa neobnovia okamžite po jednej úprave. Zaznamenajte dátum nasadenia a rozsah zmeny, aby bolo jasné, ku ktorej verzii výsledok patrí. Lepšie Core Web Vitals samo osebe negarantuje konkrétnu pozíciu vo vyhľadávaní; je to dôkaz zlepšenia určitej časti používateľskej skúsenosti.

• Hlavný obsah sa načíta bez čakania na zbytočný klientsky krok.
• Menu, filtre a formuláre reagujú aj na pomalšom zariadení.
• Obrázky a neskoro vložený obsah neposúvajú čítaný text.
• Meranie po oprave používa porovnateľný scenár a sleduje aj návštevy z prevádzky.

Od témy ku konkrétnemu riešeniu.