Core Web Vitals: Čo znamenajú a ako overiť ich zlepšenie
Web v kancelárii pôsobí rýchlo, no mobilný report ukazuje problém. Najprv zistite, čo ľudí zdržiava: načítanie obsahu, reakcia na kliknutie alebo posúvanie stránky. Potom opravte konkrétnu príčinu a overte ju v rovnakých podmienkach.
01Začnite stránkou a úlohou zákazníka
Zákazník otvorí detail produktu, zmení variant a vloží tovar do košíka. Pri každom kroku ho môže zdržiavať iná vec. Všeobecné zadanie „zrýchlite web“ preto nahraďte adresou stránky, typom zariadenia a opisom ťažkostí. Vývojár musí vedieť problém zopakovať.
Vyberte najprv jednu dôležitú šablónu, napríklad detail služby alebo objednávku. Zapíšte dátum, verziu webu, použitý nástroj a východiskové hodnoty. Ak naraz zmeníte obrázky, hosting aj meranie, ťažko zistíte, ktorá úprava pomohla. Užitočné zadanie spája jeden problém, jednu hypotézu a spôsob overenia.
02Tri metriky opisujú tri odlišné problémy
Dokumentácia Core Web Vitals pracuje s LCP, INP a CLS. Odporúčané hranice sa posudzujú na 75. percentile, osobitne pre mobil a počítač. Zjednodušene ide o hodnotu, do ktorej sa zmestia tri štvrtiny zaznamenaných návštev, nie o priemer.
| Metrika | Dobrá hodnota | Čo preveriť |
|---|---|---|
| LCP | Najviac 2,5 s | Kedy sa vykreslí hlavný obsah |
| INP | Najviac 200 ms | Odozvu pri klikaní a písaní |
| CLS | Najviac 0,1 | Neočakávané posuny rozloženia |
LCP sa týka najväčšieho viditeľného obrázka alebo textového bloku. INP hodnotí odozvu pri interakciách počas návštevy, nielen pri prvom načítaní. CLS je bezrozmerné skóre neočakávaných posunov rozloženia. Dobré číslo pri jednej metrike nevyváži problém pri druhej. Pri každej zachovajte vlastnú jednotku a hranicu.
03Oddeľte údaje ľudí od jedného laboratórneho testu
V PageSpeed Insights si najprv všimnite, či report ukazuje konkrétnu URL alebo celý origin. Origin spravidla zahŕňa stránky s rovnakým protokolom, doménou a portom. Výsledok celej domény nemusí opisovať váš produktový detail. Chýbajúce verejné údaje tiež neznamenajú, že stránka testom prešla.
Google opisuje údaje CrUX v PageSpeed Insights ako priebežne aktualizovaný súhrn posledných 28 dní. Po dnešnom nasadení preto nečakajte okamžité prepísanie celého obdobia. Laboratórny test pomáha hľadať príčiny a rýchlo skontrolovať zmenu; údaje návštevníkov potvrdzujú skúsenosť v prevádzke.
Samotný automatický beh Lighthouse bez interakcií nezmeria INP. Ponúka pomocnú metriku Total Blocking Time. Jej zlepšenie je užitočný signál, ale nenahrádza výsledok INP zo skutočných návštev. Interaktívne časti prejdite v nástrojoch pre vývojárov počas klikania a písania.
04Pri LCP zistite, na čo prehliadač čaká
Pomalý hlavný obrázok nemusí byť priveľký. Postup optimalizácie LCP rozlišuje odpoveď servera, oneskorenie pred začiatkom sťahovania, samotný prenos a čakanie na vykreslenie. Oprava má riešiť tú časť, ktorá zdržiava konkrétnu stránku.
Nechajte si v zázname ukázať skutočný prvok LCP. Ak sa dôležitý obrázok objaví v HTML až po spustení skriptu, riešte jeho skoršiu dostupnosť. Ak prenos už skončil, no obsah stále nevidno, ďalšie zmenšenie súboru nemusí odstrániť čakanie na zobrazenie. Obrázok, ktorý tvorí LCP, nenačítavajte odložene pomocou lazy loadingu.
Nasledujúci model ukazuje iba aritmetiku jedného ilustračného načítania. Skrátenie oneskorenia pred sťahovaním z 900 na 100 ms pri nezmenených ostatných časoch zníži súčet z 2 700 na 1 900 ms. Nie je to meranie klientského webu, percentil ani prísľub výsledku. V prevádzke sa môžu po zmene zmeniť aj ďalšie časti.
- Odpoveď serveraPred zmenou: 600Po zmene: 600
- Oneskorenie pred sťahovanímPred zmenou: 900Po zmene: 100
- Stiahnutie zdrojaPred zmenou: 400Po zmene: 400
- Oneskorenie vykresleniaPred zmenou: 800Po zmene: 800
Ilustračné hodnoty LISTIFY, nie meranie webu. Jednotka: ms. Súčet pred: 2 700 ms, po: 1 900 ms. Mení sa iba oneskorenie pred sťahovaním.
05Pri INP zopakujte pomalú interakciu
Zapíšte, či problém nastáva pri otvorení menu, filtrovaní katalógu, zadávaní textu alebo potvrdení formulára. V zázname výkonu potom hľadajte, čo v tej chvíli zamestnáva hlavné vlákno prehliadača. Odozvu neposudzujte iba podľa toho, ako rýchlo odpovie server.
Odporúčania pre INP rozlišujú čakanie na spracovanie vstupu, beh obsluhy a oneskorenie do ďalšieho vykreslenia. Úpravu overte pri rovnakej akcii. Môže pomôcť rozdeliť dlhú prácu, obmedziť nepotrebné skripty alebo zmenšiť prekresľovanú časť. Na slabšom telefóne potom skontrolujte aj správnosť výsledku.
06Pri CLS rezervujte miesto vopred
Ak zákazník mieri na tlačidlo a pod prstom sa mu objaví iný obsah, nájdite prvok, ktorý rozloženie posunul. Dokumentácia k CLS rieši okrem iného obrázky bez rozmerov a dodatočne vložený obsah. Miesto pre obrázok, reklamu či vložený prvok má byť známe ešte pred načítaním.
Prejdite tiež načítanie webového písma, otvorenie oznámenia a doplnenie výsledkov pod formulárom. Neočakávaný posun nemusí vzniknúť na začiatku. V kontrolnom scenári preto stránku aj posúvajte a používajte. Oprava rozmerov úvodného obrázka nedokazuje stabilitu celej návštevy.
07Odovzdajte opravu s merateľnou podmienkou dokončenia
Do pracovnej úlohy napíšte adresu, scenár, dotknuté zariadenie, východiskový záznam a očakávanú zmenu. Pridajte aj kontrolu funkcie. Odstránenie skriptu môže stránku zrýchliť, ale ak prestane fungovať košík, práca nie je dokončená.
- Pred zmenou uložte niekoľko opakovaní v rovnakých podmienkach.
- Po zmene zopakujte rovnaký scenár a porovnajte príslušnú časť záznamu.
- Poznačte si nasadenie, aby ste ho našli v prevádzkových údajoch.
- Po získaní dostatočnej vzorky posúďte výsledok návštevníkov aj ďalšie šablóny.
Pri málo navštevovanom webe môžu verejné reporty chýbať. Zvážte vlastné meranie návštev s primeraným rozsahom zberu. Do udalostí o výkone neposielajte hodnoty polí ani osobné údaje. Malú vzorku označte ako obmedzenie a niekoľko meraní nevydávajte za istý záver o všetkých zákazníkoch.
08Zelený report je podklad na rozhodnutie
Google Search Central uvádza, že dobré Core Web Vitals samy nezaručujú popredné pozície. Popri výkone sledujte, či ľudia dokončia úlohu, nájdu potrebné informácie a či funguje obsah aj ovládanie. Technické zlepšenie a obchodný výsledok merajte osobitne.
Pri opakovaní testu zachovajte typ zariadenia, obmedzenie siete a stav vyrovnávacej pamäte. Prvé otvorenie bez uložených súborov a návrat návštevníka nie sú rovnaké podmienky. K výsledku pridajte aj testovaný scenár. Inak si môžete zlepšenie pomýliť s rýchlejším pripojením alebo obsahom, ktorý prehliadač už raz stiahol.
Ak sa výkon po niekoľkých týždňoch vráti späť, hľadajte novú zmenu: vloženú službu, iný obrázok alebo úpravu šablóny. Určite, kto kontroluje web po nasadení. Jednorazové zrýchlenie má malý význam, ak ďalšia redakčná úprava znovu pridá obrovský obrázok.
Chcete zadať opravu, ktorú bude možné prevziať podľa dôkazov? Pripravte URL, problémový scenár a východiskový report. Pri úprave webu na mieru potom môžete rozhodovať podľa konkrétnej príčiny a overeného výsledku.