Core Web Vitals: LCP, INP ja CLS

Moodul 4: Kiirus, mobiil ja https · Lugemisaeg: 13 minutit

Õpieesmärk: Pärast seda õppetundi oskad selgitada kolme Core Web Vitalsi näitajat ja nende piirväärtusi, nimetada väljaandmete ja laboriandmete erinevuse, lugeda PageSpeed Insightsi mõõtmistulemust, kõrvaldada halva tulemuse peamised põhjused ning ausalt hinnata, kui palju kiirus otsingutulemustes kaalub.

Põhimõisted: Core Web Vitals, LCP (Largest Contentful Paint), INP (Interaction to Next Paint), CLS (Cumulative Layout Shift), 75. protsentiil, väljaandmed (CrUX), laboriandmed (Lighthouse), PageSpeed Insights, Search Console'i Core Web Vitalsi aruanne, TTFB, tihendamine, width ja height piltidel, loading="lazy", lehekogemus

Kiirus kolme numbrina

"Kas mu sait on kiire?" on ebamäärane küsimus. Google ja Chrome'i loojad on teinud sellest kolm mõõdetavat küsimust, Core Web Vitals:

Mõned asjad, mida tasub hästi mõista:

• LCP mõõdab hetke, mil ilmub suurim nähtav element. Tavaliselt on see suur foto lehe ülaosas (nn "hero") või suur tekstiplokk. Bloemenatelier Lotte puhul on see avalehel olev lilleseade foto.
• INP vaatab kõiki külastuse ajal tehtud klõpse, puudutusi ja klahvivajutusi ning annab teada (peaaegu) kõige aeglasemast reaktsioonist. INP asendas 12. märtsil 2024 vanema mõõdiku FID (First Input Delay), mis vaatas ainult esimest klõpsu ja ainult ootamist enne töötlemist. Kui kohtad vanas artiklis FID-i, on see aegunud.
• CLS ei ole aeg, vaid ühikuta skoor. See kasvab, kui asjad lugemise ajal nihkuvad: tahad puudutada nuppu ja just siis ilmub selle kohale bänner, nii et puudutad hoopis midagi muud.

75. protsentiil

Leht "läbib" Core Web Vitalsi, kui 75 protsenti külastustest saab kõigis kolmes hea tulemuse, mõõdetuna eraldi mobiilis ja lauaarvutis. Seda nimetatakse 75. protsentiiliks. See tähendab: loeb mitte sinu enda kiire arvuti valguskaabli otsas, vaid enamiku külastajate kogemus, ka nende oma, kel on vanem telefon 4G-võrgus.

Väljaandmed ja laboriandmed

Mõõtmisi on kahte liiki ja need annavad sageli erinevaid numbreid.

• Väljaandmed tulevad päris külastajatelt. Chrome kogub (kasutajatelt, kes on sellega nõus) anonüümselt andmeid lehtede kiiruse kohta Chrome User Experience Reporti (CrUX). PageSpeed Insights näitab viimase 28 päeva väljaandmeid. Search Console'i Core Web Vitalsi aruanne kasutab sama allikat. Kui su lehel on liiga vähe külastajaid, näitab PageSpeed Insights kogu saidi ("origin") numbreid, ja kui ka neid on liiga vähe, siis väljaandmeid pole.
• Laboriandmed tulevad simuleeritud testist Lighthouse'iga: üks laadimine jäljendatud keskpärasel telefonil ja ühendusel. Lighthouse ei saa INP-d mõõta (keegi ei klõpsa) ning annab seetõttu teisi numbreid, näiteks Total Blocking Time, mis on INP kohta siiski vihjeks.

Hinnangu jaoks loevad väljaandmed. Laboriandmed on kasulikud põhjuste leidmiseks ja selleks, et pärast parandust kohe näha, kas see aitab, ilma 28 päeva ootamata.

Kui palju see kaalub?

Siin liialdatakse palju. Mida Google ise lehekogemuse dokumentatsioonis ütleb:

• "Core Web Vitals are used by our ranking systems": need lähevad seega arvesse.
• Eraldi "lehekogemuse signaali" ei ole. Hea lehekogemuse muud osad (https, pealetükkivate hüpikakende puudumine, mobiilis kasutatavus) ei aita Google'i sõnul sul otseselt kõrgemale tõusta, kuid muudavad su saidi meeldivamaks.
• "Google Search always seeks to show the most relevant content, even if the page experience is sub-par." Aeglane leht, millel on parim vastus, võib seega vabalt tipus olla.
• Täiusliku tulemuse taotlemine ainult SEO pärast ei pruugi Google'i sõnul olla "sinu aja parim kasutus".

Järeldus: hoolitse, et oleksid rohelises või vähemalt oranžis alas, eelkõige seetõttu, et külastajad lahkuvad aeglaselt või nihkuvalt lehelt. Lighthouse'is 90 punktilt 100-le pürgimine annab otsingutulemustes vähe.

Põhjused, millega saad ise tegeleda

Aeglane esimene vastus (TTFB)

Kõik algab hetkest, mil HTML-i esimene bait kohale jõuab, see on Time to First Byte. TTFB ise ei ole Core Web Vital, kuid aeglane TTFB teeb hea LCP peaaegu võimatuks. web.dev nimetab sihtväärtuseks: hea on 0,8 sekundit või vähem, halb on üle 1,8 sekundi. Põhjused web.dev järgi: majutusel on liiga vähe arvutusvõimsust, puudub vahemälu (iga leht ehitatakse uuesti üles, tüüpiline WordPressi puhul ilma vahemäluplugina), ümbersuunamised (õppetund 4.1) ja kaugel asuv server ilma CDN-ita.

Siia kuulub ka tihendamine: server peaks saatma HTML-i, CSS-i ja JavaScripti kokkupakituna gzip'i või Brotliga. Seda näed päiserealt Content-Encoding: gzip või br. Peaaegu iga majutus teeb seda vaikimisi, kuid vale seadistus või vana server võib selle välja lülitada.

Pildid

Pildid on halva LCP ja CLS-i kõige sagedasem põhjus:

1. Liiga suured. 4000 pikslit lai ja 5 MB foto 800-pikslise kasti jaoks. Vähenda pilti enne üleslaadimist ja kasuta tänapäevast vormingut, näiteks WebP või AVIF.

2. Laius ja kõrgus puuduvad. Ilma width ja height väärtuseta ei tea brauser, kui palju ruumi pilt vajab, ja selle all olev tekst nihkub, kui pilt kohale jõuab. web.dev soovitab panna width ja height igale <img> elemendile:

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

3. Kõige tähtsama foto laisk laadimine. loading="lazy" laadib pildi alles siis, kui see ekraanile jõuab. See sobib allpool olevatele fotodele, kuid web.dev ütleb selgelt: pilte, mis on avamisel juba nähtaval, ja kindlasti LCP-pilti, ära laadi laisalt. Muidu ootab brauser just selle fotoga, mis su LCP määrab.

Nihkuv sisu ja aeglased reaktsioonid

CLS-i muud põhjused web.dev järgi: fondid, mis laadimisel suurust muudavad, reklaamid ja manustatud vidinad, mis end ise suuremaks teevad, ning sisu, mis lisatakse hiljem olemasoleva sisu kohale (näiteks küpsiseriba, mis lükkab lehe allapoole, selle asemel et olla selle peal). Halb INP tuleb peaaegu alati liigsest JavaScriptist: rasked teemad, liugurid, vestlusvidinad ja kolmandate osapoolte jälgijad. Vaata iga pluginat ja manustatud teenust kriitiliselt; siin on vähem tõesti rohkem.

Praktikas: mõõtmine PageSpeed Insightsiga

Mine aadressile pagespeed.web.dev, sisesta oma avalehe aadress ja klõpsa Analyze. Saad kaks vahekaarti (Mobile ja Desktop). Üleval on Core Web Vitalsi hinnang väljaandmete põhjal, kui need on olemas. Selle all on Lighthouse'i test koos skoori ja loendiga "Diagnostics", kus on konkreetsed punktid, näiteks vajalikust suuremad pildid või laisalt laaditav LCP-pilt (täpsed nimetused muutuvad Lighthouse'i uute versioonidega). Alusta vahekaardist Mobile: seal on tulemus tavaliselt halvem ja Google vaatab esmalt mobiili (õppetund 4.2).

Kui su sait on Search Console'is (moodul 2), vaata ka jaotist Experience, Core Web Vitals. Seal näed sarnaste lehtede rühmi koos nende olekuga, ka lehtede kohta, mida sa ise ei testinud.

AI Builderiga tehtud sait lisab laiuse ja kõrguse piltidele, mille mõõdud on teada, laadib lehe esimese foto kohe ja eelisjärjekorras (fetchpriority="high") ning ülejäänud laisalt, ja teeb avaldamisel suurtest fotodest 800 pikslit laia variandi. WordPressis aitavad kõige rohkem vahemäluplugin ja piltide vähendamine; WordPressi kursus käsitleb seda põhjalikumalt moodulis 6. Teiste veebilehe koostajate ja majutusettevõtete juures toimib see sarnaselt: nupud on erinevad, põhjused samad.

Kokkuvõte

• Core Web Vitals on LCP (hea kuni 2,5 s), INP (hea kuni 200 ms, alates märtsist 2024 FID-i asemel) ja CLS (hea kuni 0,1), mõõdetuna 75. protsentiilil iga seadmetüübi kohta eraldi.
• Väljaandmed (CrUX, 28 päeva) määravad hinnangu; laboriandmed (Lighthouse) aitavad põhjusi leida.
• Google kasutab Core Web Vitalsi järjestamisel, kuid asjakohasus on tähtsam: täiuslik skoor ei ole eesmärk omaette.
• Suurim võit: kiire serverivastus vahemälu ja tihendamisega, väikesed pildid koos width ja height väärtusega, kõige tähtsama foto mittelaisk laadimine, vähem kolmandate osapoolte JavaScripti.

Test

Ülesanne

Ülesanne A4.3: Kiire vastus ja kerged pildid. Sisesta lehe aadress. Programm mõõdab meie serverist kolm korda aega esimese baidini (TTFB) ja võtab keskmise numbri, kontrollib, kas HTML saadetakse tihendatult (gzip, Brotli või zstd), loendab pildid, millel puuduvad width ja height, ning kontrollib, et lehe ülaosas olevat kõige tähtsamat pilti ei laadita loading="lazy" abil. Pane tähele: see on mõõtmine ühest kohast, mitte sinu külastajate mõõtmine. Sul pole oma saiti? Kasuta aadressi www.wikipedia.org.

Ülesanne D4.3: Sinu Core Web Vitals. Käivita PageSpeed Insights oma avalehel ja veel ühel olulisel lehel, kõigepealt vahekaardil Mobile. Pane iga lehe kohta kirja: kas väljaandmed on olemas (leht või kogu sait), väljaandmete LCP, INP ja CLS, Lighthouse'i skoor ning element, mille Lighthouse LCP-elemendiks märgib. Vali üks parandus, mis sinu arvates annab kõige rohkem, ja selgita, miks.

Loe edasi

• 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