Kuidas parandada veebilehe Core Web Vitals tulemusi?

Core Web Vitals on kolm näitajat, millega Google mõõdab, kui hea on lehe kasutuskogemus päris külastajate jaoks. See vahe on oluline: PageSpeed Insightsi laboriskoor on diagnostikavahend, aga hinnatakse välitöö andmeid, mis tulevad tegelikest Chrome'i kasutajatest.

Neid näed Google Search Console'i Core Web Vitals aruandest. Sealt tasub alustada - mitte skoorist, mille annab üks üksik test kiirel kontoriühendusel.

Kolm näitajat#

LCP - Largest Contentful Paint#

Kui kiiresti ilmub lehe suurim sisuelement, tavaliselt hero-pilt või pealkiri. Hea tulemus: alla 2,5 sekundi.

Peamised põhjused, miks LCP on halb:

• optimeerimata hero-pilt (mitu megabaidi JPEG, mida kuvatakse 800 pikslit laiuna)
• pilt laaditakse laisalt, kuigi ta on kohe nähtav
• fondid blokeerivad renderdust
• aeglane serveri vastus, tavaliselt vahemälu puudumise tõttu

INP - Interaction to Next Paint#

Kui kiiresti leht reageerib kasutaja tegevusele. Hea tulemus: alla 200 millisekundi.

Peamine põhjus on liiga palju JavaScripti, mis blokeerib põhilõime. Praktikas tähendab see kolmandate osapoolte skripte: vidinad, chat-aknad, mitu analüütikatööriista korraga, A/B-testimise skriptid.

CLS - Cumulative Layout Shift#

Kui palju paigutus laadimise ajal hüppab. Hea tulemus: alla 0,1.

Klassikalised põhjused:

• piltidel ja iframe'idel puuduvad width ja height
• reklaamipinnad, millel ei ole reserveeritud kõrgust
• veebifont vahetub süsteemifondi vastu ja tekst nihkub
• küpsiseriba, mis lükkab sisu allapoole

Millises järjekorras parandada#

Kõige suurem võit tuleb peaaegu alati piltidest. Enne kui hakkad JavaScripti optimeerima:

1. Serveeri õiges mõõdus. Pilt, mida kuvatakse 800px laiuna, ei pea olema 3000px.
2. Kasuta kaasaegset formaati. AVIF või WebP asemel JPEG-i puhul on tavaline võit 40–70% failimahust.
3. Anna mõõdud ette. width ja height atribuudid kõrvaldavad CLS-i põhjuse.
4. Ära laisalt lae seda, mis on kohe nähtav. Hero-pilt peaks olema fetchpriority="high", mitte loading="lazy".

Seejärel:

5. Vähenda kolmandate osapoolte skripte. Iga skript, mille eemaldamise järel ei muutu midagi, oli tasuta kadu. Ülejäänud lae edasilükatult.
6. Kärbi fonte. Lae ainult kasutatavad kaalud ja tähestikud, kasuta font-display: swap ja eelista muutuvfonti mitmele eraldi failile.
7. Pane vahemälu tööle. Serveripoolne lehevahemälu ja CDN-i staatiliste failide vahemälu annavad kohese võidu serveri vastusajas.
8. Reserveeri ruum kõigele, mis hiljem saabub. Küpsiseriba, teavitused, vidinad.

Kaks levinud eksitust#

„Meil on skoor 95.“ Laboriskoor mõõdab üht laadimist ühes seadmes. Search Console'i välitöö andmed mõõdavad tuhandeid päris külastusi, sealhulgas vanematel telefonidel ja mobiilsel andmesidel. Need kaks ei pea kokku langema.

„Parandame kiiruse pluginaga.“ Vahemälu- ja optimeerimispluginad aitavad, kuid nad ei paranda seda, et lehel on kaheksa kolmanda osapoole skripti ja hero-pilt on 4 MB. Plugin katab tagajärgi.

Kui palju see üldse loeb#

Core Web Vitals on üks järjestusesignaal paljudest ja mitte kõige tugevam. Aga aeglane leht kaotab külastajaid enne, kui nad sisuni jõuavad - ja see mõjub tulemustele rohkem kui järjestuse nihe. Kiirus tasub ära ka siis, kui otsingumootorit üldse arvesse ei võta.

Mõõda enne ja pärast, ühe muudatuse kaupa. Muidu ei tea sa kunagi, milline neist kaheksast asjast tegelikult aitas.