2025. aasta Core Web Vitals: mida täpselt mõõdetakse
Täna loevad kolm põhilist näitajat: LCP (Largest Contentful Paint), INP (Interaction to Next Paint) ja CLS (Cumulative Layout Shift). Igaühel neist on oma „iseloom“ ja tüüpilised probleemiallikad.
Miks INP muudab mängu
LCP ja kriitilise renderdamistee optimeerimine
CLS - vaikselt konversiooni sööja
Diagnoos: kuidas leida päris pudelikaelu
Optimeerimine ilma korraliku mõõtmiseta on pimesi tormamine. Enne ühegi koodimuudatuse tegemist tasub aru saada, mis reaalselt halvasti on ja millistes segmentides (seadmed, riigid, ühenduse kiirus).
Väliandmed (field data) on olulisemad kui laboritestid
Pikad JavaScripti „long taskid“ kui INP peamine vaenlane
Kõrge mõjuga optimeerimised LCP jaoks
Kui LCP on halb, tasub alustada piltidest, fontidest ja renderdamist blokeerivatest ressurssidest. Need annavad enamasti suurima ja kiireima võidu.
Pildioptimeerimine - mitte ainult pakkimine
Tüüpiline võidukombinatsioon:
- kasutada kaasaegseid formaate (WebP, AVIF)
- rakendada responsive images mustrit (srcset, sizes)
- eraldada hero-pilt ja seada see selgelt prioriteediks (priority või fetchpriority="high")
Oluline:
- above the fold pildid ei tohiks olla lazy-loaditud
- CDN-i transformatsioonid (nt Cloudinary, Imgix) võivad oluliselt vähendada koodipoolset keerukust
Fontide laadimise strateegia
SSR, serverikomponendid ja voogedastamine
INP optimeerimine: uue aja peamine väljakutse
INP on täna paljudele saitidele kõige keerulisem mõõdik - eriti neile, kus on palju JS-i ja rikas interaktiivne UI. Siin ei piisa ainult bundli vähendamisest, vaja on ka teistsuguseid käitumismustreid.
Koodijagamine ja laisklaadimine
Mida vähem JS-i esialgse lehelaadimise jaoks alla tuleb, seda:
- kiiremini saab leht interaktiivseks
- vähem tööd peab brauser tegema enne, kui ta saab järgmise interaktsiooni peale reageerida
Praktilised sammud:
- kasutada route-põhist koodijagamist (dynamic import’id)
- laadida alla ainult need komponendid, mida antud vaates vaja
- lükata allapoole jäävad või harva kasutatavad komponendid laisklaadimise alla
Debounce ja throttle kasutajasisenditel
Raskem töö Web Workeritesse
Kui on vaja töödelda suuri andmekoguseid (nt graafikud, keerukad arvutused, JSON-parsimine), tasub:
- liigutada see töö Web Workeri sisse
- hoida põhiniit võimalikult vaba kasutaja interaktsioonide jaoks
Workeritel on oma overhead, seega on mõistlik kasutada neid ülesannete jaoks, mis võtavad vähemalt kümneid millisekundeid. Väiksemate asjade puhul võib workerite haldamise kulu võita ära kasu.
Kokkuvõte
Vajad abi Core Web Vitalsi parandamisel?
Oleme aidanud kümnetel saitidel tuua LCP, INP ja CLS „rohelisse“ ning näha selle tulemusena märgatavat orgaanilise liikluse ja konversiooni kasvu. Kui soovid süsteemset lähenemist, mis keskendub suurima mõjuga muudatustele, saame aidata nii analüüsi kui rakenduse poolega.