PageSpeed Insights lugemine: Core Web Vitals lihtsas keeles
Oled testinud oma veebilehte tööriistaga PageSpeed Insights ja näed punast numbrit, näiteks 45. Mida see tähendab ja kui tõsine see on? Sellest artiklist loed, kuidas raportit lugeda, mida kolm Core Web Vitals näitajat mõõdavad ja mida saad ise parandada.
Kolm mõõtmist
| Mõõtmine | Mida see mõõdab | Hea | Vajab parandamist | Halb |
|---|---|---|---|---|
| LCP (Largest Contentful Paint) | Kui kiiresti kuvatakse suurim sisuosa, tihti suur foto lehe ülaosas | kuni 2,5 s | 2,5 kuni 4 s | üle 4 s |
| INP (Interaction to Next Paint) | Kui kiiresti leht reageerib, kui klõpsad, puudutad või tipid | kuni 200 ms | 200 kuni 500 ms | üle 500 ms |
| CLS (Cumulative Layout Shift) | Kui palju leht laadimise ajal nihkub (skoor, mitte aeg) | kuni 0,1 | 0,1 kuni 0,25 | üle 0,25 |
Leht vastab Core Web Vitals nõuetele, kui vähemalt 75 protsenti külastustest saab kõigi kolme näitaja puhul hea tulemuse, eraldi mobiili ja arvuti kohta. Niisiis ei loe sinu kiire arvuti, vaid enamiku külastajate kogemus, ka vanemal telefonil. INP asendas märtsis 2024 vanema mõõtmise FID. Kui kohtad veel terminit FID, siis on see info aegunud.
Väljaandmed ja laboriandmed
PageSpeed Insights näitab kahte liiki mõõtmisi ning need annavad tihti erinevaid numbreid:
- Väljaandmed (ülal): mõõtmised päris külastajatelt, kes kasutavad Chrome'i, viimase 28 päeva jooksul. Need määravad, kas vastad Core Web Vitals nõuetele. Kui lehel on liiga vähe külastajaid, näed kogu saidi numbreid või väljaandmeid üldse ei kuvata.
- Laboriandmed (allpool): test tööriistaga Lighthouse, mis laadib lehe üks kord simuleeritud keskmise telefoni ja ühenduse peal. Siit tuleb number vahemikus 0 kuni 100. Lighthouse ei saa mõõta INP-d, sest keegi ei klõpsa midagi.
Kasuta laboriandmeid põhjuste leidmiseks ja selleks, et parandusi tehes kohe näha, kas need aitavad. Alusta vahekaardist Mobiil: seal on tulemus tavaliselt halvem ja Google vaatab eelkõige sinu saidi mobiiliversiooni.
Kui palju see Google'is kaalub?
Google kirjutab, et Core Web Vitals mõjutavad järjestamist. Kuid Google näitab alati kõige asjakohasemat sisu, isegi kui see leht pole kõige kiirem. Number vahemikus 0 kuni 100 tuleb laboritestist ega ole Google'i hinnang; see hinnang tuleb väljaandmetest. Täiusliku tulemuse saavutamine ainult Google'i jaoks ei ole Google'i enda sõnul parim ajakasutus. Hoolitse selle eest, et jääksid rohelisse või vähemalt oranži tsooni, eriti kuna külastajad lahkuvad aeglaselt laaduva või hüppava lehe pealt.
Mida saad lehe sees parandada
- Väiksemad pildid. Mitme tuhande piksli laiune foto 800 pikslise lahtri jaoks on kõige levinum aeglase LCP põhjus. Vähenda fotosid enne üleslaadimist ja kasuta kaasaegset vormingut nagu WebP või AVIF.
- Laius ja kõrgus iga pildi juures. Ilma
widthjaheightväärtusteta ei tea brauser, kui palju ruumi foto vajab, ning tekst nihkub, kui foto saabub. See suurendab CLS väärtust:<img src="bloemstuk.webp" width="800" height="600" alt="Pruudi lillekimp valgete roosidega">
- Peamist fotot ära laadi laisalt.
loading="lazy"sobib hästi allpool olevatele fotodele, kuid mitte fotole, mis on juba avamisel nähtaval. Vastasel juhul ootab brauser just selle fotoga, mis määrab sinu LCP väärtuse. - Ära lisa hiljem midagi sisu kohale. Küpsiseriba, reklaam või vidin, mis lükkab lehe allapoole, põhjustab kõige nihkumist. Lase selline riba pigem lehe peale kattuda.
- Vähem kolmandate osapoolte skripte. Halb INP tuleb peaaegu alati liiga paljust JavaScriptist: raskest teemast, slaideritest, vestlusakendest ja jälgijatest. Vaata kriitiliselt üle iga pistikprogramm või sisestatud teenus.
Mida teeb server
Kõik algab serveri esimesest vastusest, Time to First Byte (TTFB). See ei ole ise Core Web Vital näitaja, kuid aeglase esimese vastusega on hea LCP peaaegu võimatu. Sihtväärtusena on 0,8 sekundit või vähem hea. Põhjuseks on sageli sait ilma vahemäluta (cache), liiga vähe arvutusvõimsust või ümbersuunamised. Server peaks saatma tekstifailid ka pakitult (tihendus gzip või Brotli abil). Kuidas serveripoolt parandada, loed artiklist Minu veebileht on aeglane või kasutab liiga palju protsessori võimsust: nii teed selle kiiremaks ja DirectAdmini juhendist Minu veebileht on aeglane.
AI Bouweris ja WordPressis
AI Bouweriga loodud sait määrab laiuse ja kõrguse piltidele, mille mõõt on teada, laadib lehe esimese foto kohe ja esikohale seades ning ülejäänud alles siis, kui need ekraanile ilmuvad, ning teeb avaldamisel suurtest fotodest väiksema versiooni. WordPressis aitavad kõige rohkem vahemäluga pistikprogramm ja piltide vähendamine. Selle kohta loed tasuta WordPressi kursuse tundidest Mis muudab saidi aeglaseks ja kuidas seda mõõta? ning Pildid, PHP ja muud kiirusevõidud.
Loe edasi
- web.dev: Web Vitals (inglise keeles)
- PageSpeed Insightsist (inglise keeles)
- Google: lehekülje kogemus ja Google'i otsing (inglise keeles)
- Google: raport Veebisaidi elutähtsad näitajad