Core Web Vitals: LCP, INP ir CLS

4 modulis: Greitis, mobilieji įrenginiai ir https · Skaitymo laikas: 13 min.

Mokymosi tikslas: Po šios pamokos galėsite paaiškinti tris Core Web Vitals rodiklius ir jų ribines vertes, įvardyti lauko ir laboratorinių duomenų skirtumą, perskaityti PageSpeed Insights matavimą, spręsti svarbiausias prasto rezultato priežastis ir sąžiningai įvertinti, kiek greitis lemia vietą paieškos rezultatuose.

Pagrindinės sąvokos: Core Web Vitals, LCP (Largest Contentful Paint), INP (Interaction to Next Paint), CLS (Cumulative Layout Shift), 75-asis procentilis, lauko duomenys (CrUX), laboratoriniai duomenys (Lighthouse), PageSpeed Insights, Core Web Vitals ataskaita Search Console, TTFB, glaudinimas, width ir height paveikslėliuose, loading="lazy", puslapio patirtis

Greitis trimis skaičiais

"Ar mano svetainė greita?" yra miglotas klausimas. Google ir Chrome kūrėjai pavertė jį trimis išmatuojamais klausimais, vadinamaisiais Core Web Vitals:

Keletas dalykų, kuriuos verta gerai suprasti:

• LCP matuoja momentą, kai pasirodo didžiausias matomas elementas. Dažniausiai tai didelė nuotrauka viršuje (vadinamoji "hero") arba didelis teksto blokas. Bloemenatelier Lotte svetainėje tai gėlių kompozicijos nuotrauka pagrindiniame puslapyje.
• INP vertina visus spustelėjimus, palietimus ir klavišų paspaudimus per apsilankymą ir nurodo (beveik) lėčiausią reakciją. 2024 m. kovo 12 d. INP pakeitė senesnį matavimą FID (First Input Delay), kuris vertino tik pirmą spustelėjimą ir tik laukimą iki apdorojimo. Jei sename straipsnyje rasite FID, ši informacija pasenusi.
• CLS yra ne laikas, o rodiklis be matavimo vieneto. Jis didėja, kai turinys pasislenka Jums skaitant: norite paliesti mygtuką, bet tą akimirką viršuje atsiranda reklamjuostė ir Jūs paliečiate ką kita.

75-asis procentilis

Puslapis "atitinka" Core Web Vitals, kai 75 procentai apsilankymų gerai įvertinami pagal visus tris rodiklius, atskirai matuojant mobiliuosiuose įrenginiuose ir kompiuteriuose. Tai vadinama 75-uoju procentiliu. Tai reiškia, kad svarbus ne Jūsų greitas kompiuteris su šviesolaidžiu, o daugumos lankytojų patirtis, taip pat tų, kurie naršo senesniu telefonu per 4G.

Lauko ir laboratoriniai duomenys

Yra dviejų rūšių matavimai, ir jie dažnai rodo skirtingus skaičius.

• Lauko duomenys gaunami iš tikrų lankytojų. Chrome (iš naudotojų, kurie tam pritaria) anonimiškai renka, kaip greitai krovėsi puslapiai, ir kaupia tai Chrome User Experience Report (CrUX) ataskaitoje. PageSpeed Insights rodo paskutinių 28 dienų lauko duomenis. Core Web Vitals ataskaita Search Console naudoja tą patį šaltinį. Jei Jūsų puslapis turi per mažai lankytojų, PageSpeed Insights rodo visos svetainės (vadinamojo "origin") duomenis, o jei ir jų per mažai, lauko duomenų nėra.
• Laboratoriniai duomenys gaunami iš imituoto testo su Lighthouse: vienas įkėlimas imituotu vidutiniu telefonu ir ryšiu. Lighthouse negali išmatuoti INP (niekas nespusteli), todėl pateikia kitus skaičius, pavyzdžiui, Total Blocking Time, kurie leidžia numanyti INP.

Vertinimui svarbūs lauko duomenys. Laboratoriniai duomenys naudingi ieškant priežasčių ir norint po patobulinimo iškart pamatyti, ar jis padeda, nelaukiant 28 dienų.

Kiek tai lemia?

Čia daug kas perdedama. Štai ką pati Google rašo dokumentacijoje apie puslapio patirtį:

• "Core Web Vitals are used by our ranking systems": taigi jie į reitingavimą įskaičiuojami.
• Atskiro "puslapio patirties signalo" nėra. Kitos geros puslapio patirties dalys (https, jokių įkyrių iššokančių langų, patogumas mobiliuosiuose) pasak Google tiesiogiai nepadeda pakilti aukščiau, tačiau daro Jūsų svetainę malonesnę.
• "Google Search always seeks to show the most relevant content, even if the page experience is sub-par." Taigi lėtas puslapis su geriausiu atsakymu gali būti pačiame viršuje.
• Siekti tobulo rezultato vien dėl SEO, pasak Google, "galbūt ne geriausias Jūsų laiko panaudojimas".

Išvada: pasirūpinkite, kad būtumėte žalioje arba bent oranžinėje zonoje, pirmiausia todėl, kad lankytojai palieka lėtą ar šokinėjantį puslapį. Vaikytis 100 taškų vietoj 90 Lighthouse teste paieškos rezultatuose duoda mažai naudos.

Priežastys, kurias galite pašalinti patys

Lėtas pirmasis atsakas (TTFB)

Viskas prasideda nuo momento, kai atkeliauja pirmasis HTML baitas, vadinamasis Time to First Byte. TTFB pats nėra Core Web Vitals rodiklis, tačiau esant lėtam TTFB gero LCP pasiekti beveik neįmanoma. web.dev nurodo orientacinę vertę: gerai yra 0,8 sekundės ar mažiau, prastai yra daugiau nei 1,8 sekundės. Priežastys pagal web.dev: per maža prieglobos skaičiavimo galia, nėra podėlio (kiekvienas puslapis kuriamas iš naujo, tai būdinga WordPress be podėlio įskiepio), nukreipimai (pamoka 4.1) ir toli esantis serveris be CDN.

Glaudinimas taip pat svarbus: serveris turėtų siųsti HTML, CSS ir JavaScript suglaudintus gzip arba Brotli. Tai matyti iš antraštės Content-Encoding: gzip arba br. Beveik kiekviena priegloba tai daro pagal numatytuosius nustatymus, tačiau neteisingas nustatymas ar senas serveris gali tai išjungti.

Paveikslėliai

Paveikslėliai yra dažniausia prasto LCP ir CLS priežastis:

1. Per dideli. 4.000 pikselių pločio ir 5 MB nuotrauka 800 pikselių laukeliui. Sumažinkite prieš įkeldami ir naudokite modernų formatą, pavyzdžiui, WebP arba AVIF.

2. Nenurodytas plotis ir aukštis. Be width ir height naršyklė nežino, kiek vietos reikia paveikslėliui, todėl po juo esantis tekstas pasislenka, vos paveikslėlis įsikelia. web.dev rekomenduoja nurodyti width ir height kiekvienam <img>:

   <img src="bloemstuk.webp" width="800" height="600" alt="Bruidsboeket met witte rozen">

3. Svarbiausia nuotrauka kraunama atidėtai. loading="lazy" įkelia paveikslėlį tik tada, kai jis pasirodo ekrane. Tai puiku žemiau esančioms nuotraukoms, tačiau web.dev aiškiai sako: paveikslėlių, kurie matomi iškart atidarius puslapį, ir ypač LCP paveikslėlio, atidėtai nekraukite. Antraip naršyklė delsia įkelti būtent tą nuotrauką, kuri lemia Jūsų LCP.

Pasislenkantis turinys ir lėtos reakcijos

Kitos CLS priežastys pagal web.dev: šriftai, kurie kraunantis keičia dydį, reklamos ir įterpti valdikliai, kurie patys padidėja, ir turinys, vėliau įterpiamas virš esamo turinio (pavyzdžiui, slapukų juosta, kuri nustumia puslapį žemyn, užuot buvusi virš jo). Prastas INP beveik visada atsiranda dėl per didelio JavaScript kiekio: sunkios temos, slankikliai, pokalbių valdikliai ir trečiųjų šalių sekimo įrankiai. Kritiškai įvertinkite kiekvieną įskiepį ar įterptą paslaugą: čia mažiau tikrai reiškia daugiau.

Praktikoje: matavimas su PageSpeed Insights

Atidarykite pagespeed.web.dev, įveskite savo pagrindinio puslapio adresą ir spustelėkite Analyze. Matysite du skirtukus (Mobile ir Desktop). Viršuje pateikiamas Core Web Vitals įvertinimas pagal lauko duomenis, jei jų yra. Žemiau rodomas Lighthouse testas su balu ir sąrašu "Diagnostics" su konkrečiais punktais, pavyzdžiui, apie paveikslėlius, didesnius nei reikia, arba LCP paveikslėlį, kraunamą atidėtai (tikslūs pavadinimai keičiasi su naujomis Lighthouse versijomis). Pradėkite nuo Mobile: ten rezultatai paprastai prastesni, o Google pirmiausia vertina mobiliąją versiją (pamoka 4.2).

Jei Jūsų svetainė įtraukta į Search Console (modulis 2), peržiūrėkite ir skiltį Experience, Core Web Vitals. Ten matysite panašių puslapių grupes ir jų būseną, taip pat puslapių, kurių patys netikrinote.

AI Builder sukurta svetainė nurodo plotį ir aukštį paveikslėliams, kurių dydis žinomas, pirmąją puslapio nuotrauką įkelia iškart ir pirmumo tvarka (fetchpriority="high"), o kitas atidėtai, be to, skelbiant iš didelių nuotraukų sukuria 800 pikselių pločio variantą. WordPress svetainėje labiausiai padeda podėlio įskiepis ir paveikslėlių mažinimas; WordPress kurso modulis 6 tai nagrinėja išsamiau. Kitose svetainių kūrimo priemonėse ir prieglobos įmonėse viskas veikia panašiai: mygtukai skiriasi, o priežastys tos pačios.

Santrauka

• Core Web Vitals yra LCP (gerai iki 2,5 s), INP (gerai iki 200 ms, nuo 2024 m. kovo vietoj FID) ir CLS (gerai iki 0,1), matuojami 75-uoju procentiliu pagal įrenginio tipą.
• Lauko duomenys (CrUX, 28 dienos) lemia įvertinimą; laboratoriniai duomenys (Lighthouse) padeda rasti priežastis.
• Google naudoja Core Web Vitals reitingavimui, bet svarbiau yra aktualumas: tobulas rezultatas nėra tikslas savaime.
• Didžiausia nauda: greitas serverio atsakas su podėliu ir glaudinimu, nedideli paveikslėliai su width ir height, svarbiausia nuotrauka kraunama ne atidėtai, mažiau trečiųjų šalių JavaScript.

Testas (quiz)

Užduotis

Užduotis A4.3: Greitas atsakas ir lengvi paveikslėliai. Įveskite puslapio adresą. Programa tris kartus iš mūsų serverio išmatuoja laiką iki pirmojo baito (TTFB) ir paima vidurinę vertę, patikrina, ar HTML siunčiamas suglaudintas (gzip, Brotli ar zstd), suskaičiuoja paveikslėlius be width ir height ir patikrina, ar svarbiausias paveikslėlis viršuje nėra kraunamas su loading="lazy". Atkreipkite dėmesį: tai matavimas iš vienos vietos, o ne Jūsų lankytojų matavimas. Neturite savo svetainės? Naudokite www.wikipedia.org.

Užduotis D4.3: Jūsų Core Web Vitals. Paleiskite PageSpeed Insights savo pagrindiniam puslapiui ir dar vienam svarbiam puslapiui, pirmiausia skirtuke Mobile. Kiekvienam puslapiui užsirašykite: ar yra lauko duomenų (puslapio ar visos svetainės), LCP, INP ir CLS iš lauko duomenų, Lighthouse balą ir elementą, kurį Lighthouse nurodo kaip LCP elementą. Pasirinkite vieną patobulinimą, kuris, Jūsų nuomone, duotų daugiausia naudos, ir paaiškinkite kodėl.

Skaitykite daugiau

• web.dev, Web Vitals: https://web.dev/articles/vitals
• web.dev, Largest Contentful Paint (LCP): https://web.dev/articles/lcp
• web.dev, Interaction to Next Paint (INP): https://web.dev/articles/inp
• web.dev, Cumulative Layout Shift (CLS): https://web.dev/articles/cls
• web.dev, Time to First Byte (TTFB): https://web.dev/articles/ttfb
• web.dev, Browser-level image lazy loading: https://web.dev/articles/browser-level-image-lazy-loading
• Google Search Central, Understanding page experience in Google Search results: https://developers.google.com/search/docs/appearance/page-experience
• PageSpeed Insights, About PageSpeed Insights: https://developers.google.com/speed/docs/insights/v5/about
• Search Console Help, Core Web Vitals report: https://support.google.com/webmasters/answer/9205520