Veebivitaalid arendajale: mida need mõõdavad ja kuidas parandada
Veebivitaalid on katse mõõta seda, kuidas leht kasutajale tundub: kui kiiresti ta midagi näeb, kui kiiresti leht reageerib ja kui palju asjad hüppavad.
See juhend selgitab iga näitaja, annab sihtväärtused ja loetleb parandused mõju järjekorras.
Kolm näitajat#
Igaüks mõõdab erinevat frustratsiooni ja neid parandatakse eri viisil.
| Näitaja | Mida mõõdab | Hea väärtus |
|---|---|---|
| LCP | Millal suurim sisuelement nähtavaks saab | Alla 2,5 sekundi |
| INP | Kui kiiresti leht interaktsioonile reageerib | Alla 200 millisekundi |
| CLS | Kui palju paigutus laadimisel hüppab | Alla 0,1 |
| TTFB | Serveri esimene vastus | Alla 0,8 sekundi |
| FCP | Millal esimene sisu ilmub | Alla 1,8 sekundi |
Sihtväärtused kehtivad seitsmekümne viiendale protsentiilile päris kasutajatest, mitte sinu lauaarvutile kiirel ühendusel.
LCP parandamine#
Kõige sagedamini süüdi on üks suur pilt või aeglane server. Järjekord mõju järgi.
- Leia, mis element LCP on — see on tavaliselt esimene suur pilt või pealkiri.
- Kui see on pilt: õige suurus, kaasaegne formaat, ilma laisa laadimiseta.
- Laadi see pilt eelnevalt ja anna sellele kõrge prioriteet.
- Paranda serveri vastusaega vahemäluga — see mõjutab kõike ülejäänut.
- Eemalda renderdamist blokeeriv CSS ja JavaScript.
- Laadi fondid eelnevalt ja kasuta font-display seadet, et tekst oleks kohe nähtav.
- Kaalu sisuvõrku, kui külastajad on serverist kaugel.
INP ja CLS#
Kaks näitajat, mida parandatakse peaaegu alati koodi, mitte taristu muutmisega.
| Probleem | Põhjus | Parandus |
|---|---|---|
| Aeglane reageerimine klikile | Pikad JavaScripti ülesanded | Tükelda töö, lükka mittevajalik edasi |
| Vidinad blokeerivad | Kolmandate osapoolte skriptid | Laadi hiljem või eemalda |
| Paigutus hüppab | Piltidel puuduvad mõõtmed | Määra laius ja kõrgus |
| Tekst hüppab | Font laeb hiljem | Eellaadimine ja sobiv varufont |
| Sisu lükkub alla | Reklaam või bänner ilmub | Reserveeri ruum ette |
| Nupp liigub | Dünaamiline sisu laadimisel | Reserveeri ruum kohatäitega |
Mõõtmine õigesti#
Kõige levinum viga on optimeerida laborinäitajaid, kui päris kasutajate andmed näitavad muud.
- Laboritest annab korratava numbri; päris kasutajate andmed näitavad tegelikkust.
- Usalda päris kasutajate andmeid, kui neid on piisavalt kogunenud.
- Vaata mobiili eraldi lauaarvutist — vahe on tavaliselt suur.
- Vaata lehetüüpide kaupa, mitte kogu lehe keskmisena.
- Mõõda pärast iga suuremat muudatust, mitte kord aastas.
- Sea eesmärgiks püsiv hea tulemus, mitte üksik hea test.
- Ära jälita täiuslikku sada punkti — see maksab rohkem kui annab.
Sada punkti laborinäitajas ei tähenda head päris kasutajakogemust ja vastupidi. Näitaja on vahend, mitte eesmärk.
Korduma kippuvad küsimused
Kas veebivitaalid mõjutavad positsioone?
Jah, kuid nõrgalt ja ainult siis, kui muud tegurid on võrdsed. Sisu asjakohasus kaalub oluliselt rohkem. Parem põhjus neid parandada on, et aeglane ja hüplev leht kaotab külastajaid ja teisendusi — see mõju on suurem ja otsesem kui rankingu efekt.
Mis asendas FID näitaja?
INP, mis mõõdab kõiki interaktsioone kogu külastuse jooksul, mitte ainult esimest. See on rangem ja realistlikum näitaja, sest ta tabab aeglust, mis ilmneb alles pärast lehe laadimist — täpselt seal, kus kasutaja päriselt ootab.
Miks on mu laboritulemus hea, aga päris andmed halvad?
Sest laboritest kasutab tavaliselt kiiret masinat ja stabiilset ühendust, samas kui päris kasutajatel on vanemad telefonid ja kõikuv võrk. Lisaks mõõdab labor ühte lehte üks kord, päris andmed aga kõiki lehti kõigil seadmetel. Usalda päris andmeid.
Mis annab kõige rohkem kõige väiksema vaevaga?
Enamikul lehtedel kaks asja: LCP-pildi optimeerimine koos eellaadimisega ja serveri vahemälu sisselülitamine. Need on tavaliselt paar tundi tööd ja liigutavad numbreid rohkem kui nädalate kaupa JavaScripti peenhäälestamist.
veebivitaalidcore web vitalslcpinpclsveebilehe kiirus
