Veebisaidi jõudlus ei seisne ainult selles, kui kiiresti leht laaditakse. Isegi kui sisu ilmub mõne sekundiga, võivad aeglaselt reageerivad nupud või ootamatud paigutuse nihked külastajaid häirida ja nende kogemust halvendada. Kuidas siis aru saada, kas teie veebisait toimib hästi? Core Web Vitals on Google’i peamised jõudlusnäitajad, mis mõõdavad laadimiskiirust, interaktiivsust ja visuaalset stabiilsust. Sellest juhendist saate teada kolmest Core Web Vitalsi näitajast, nende soovitatud lävenditest ning tööriistadest, millega saate oma veebisaidi jõudlust mõõta ja parandada.
Mis on Core Web Vitals?
Core Web Vitals on Google’i kasutusele võetud jõudlusnäitajate kogum, mis mõõdab veebisaidi kasutajakogemuse olulisi aspekte. Need näitajad keskenduvad kolmele peamisele tegurile: laadimisjõudlusele, interaktiivsusele ja visuaalsele stabiilsusele. Teisisõnu aitavad need veebisaidi omanikel mõista, kui kiiresti leht laaditakse, kui sujuvalt saavad kasutajad sellega suhelda ja kas lehe sisu püsib laadimise ajal paigal.
Veebisaidi jõudlus ei tähenda ainult seda, kui kiiresti leht avaneb. Veebisait võib oma sisu lühikese ajaga laadida, kuid kui kasutajad peavad enne nupule klõpsamist ootama või lehe paigutus ootamatult muutub, võib üldine kogemus siiski kehv olla. Core Web Vitals aitab neid probleeme tuvastada ja annab veebisaidi jõudluse parandamiseks mõõdetavad eesmärgid.
Google kasutab praegu kolme Core Web Vitalsi näitajat: Largest Contentful Paint (LCP), Interaction to Next Paint (INP) ja Cumulative Layout Shift (CLS). Iga näitaja mõõdab kasutajakogemuse erinevat osa, seega ühe näitaja paranemine ei tähenda tingimata, et paranevad ka ülejäänud kaks.
Miks on Core Web Vitals oluline?
Veebisait peaks pakkuma külastajatele sujuvat ja usaldusväärset kogemust. Kui lehe laadimine võtab liiga kaua aega, võivad kasutajad lahkuda enne, kui jõuavad vajaliku teabeni. Samamoodi võivad külastajad pettuda ja neil võib olla raske oma toiminguid lõpule viia, kui nupud reageerivad aeglaselt või lehe elemendid ootamatult liiguvad.
Core Web Vitals aitab veebisaidi omanikel neid probleeme tuvastada mõõdetavate jõudlusandmete abil, mitte ainult isiklikele muljetele toetudes. Näiteks võib arendaja testida veebisaiti võimsal arvutil ja leida, et see laadib kiiresti. Vanemaid mobiilseadmeid või aeglasemaid internetiühendusi kasutavatel külastajatel võib laadimine aga kesta palju kauem.
Just need erinevused muudavad jõudluse jälgimise oluliseks. Core Web Vitalsi andmeid analüüsides saavad arendajad kindlaks teha, milliseid veebisaidi osi on vaja parandada ja kas optimeerimine annab oodatud tulemusi.
Core Web Vitals on oluline ka otsingumootoritele optimeerimise (SEO) seisukohalt. Google kasutab oma järjestussüsteemides lehekogemuse signaale, kuid head Core Web Vitalsi tulemused ei taga kõrgemat asetust. Asjakohane sisu ja paljud muud tegurid on endiselt olulised. Seetõttu tuleks nende näitajate parandamist käsitleda osana laiemast strateegiast, mille eesmärk on luua kasulik, ligipääsetav ja usaldusväärne veebisait.
Millised on kolm Core Web Vitalsi näitajat?
Iga Core Web Vitalsi näitaja keskendub veebisaidi jõudluse konkreetsele aspektile. Kui mõistate, kuidas need toimivad, on lihtsam jõudlusprobleeme tuvastada ja valida õiged optimeerimisvõtted.
Mis on Largest Contentful Paint (LCP)?
Largest Contentful Paint (LCP) mõõdab, kui kaua kulub esialgses vaateaknas nähtava suurima pildi või tekstiploki kuvamiseks. See näitaja aitab hinnata, millal lehe põhisisu kasutajale nähtavaks muutub.
Kujutage näiteks ette, et külastaja avab blogiartikli. Lehe taust ja navigatsioonimenüü võivad ilmuda peaaegu kohe, kuid põhipealkirja või esiletõstetud pildi laadimine võib võtta mitu sekundit. Sellises olukorras võib külastajale tunduda, et leht alles laadib, kuigi osa selle elementidest on juba nähtav. Hea LCP-tulemus on 2,5 sekundit või vähem. Kui väärtus jääb vahemikku 2,5–4 sekundit, vajab leht parandamist. Üle 4 sekundi pikkust LCP väärtust peetakse kehvaks.
LCP-d võivad mõjutada mitmed tegurid, sealhulgas serveri aeglane vastamisaeg, suured pildid, renderdamist blokeerivad CSS- ja JavaScripti failid ning viivitused põhisisu leidmisel.
LCP parandamiseks saavad veebisaidi omanikud teha järgmist:
- Optimeerige pilte: vähendage pildifailide suurust ja kasutage vajaduse korral kaasaegseid vorminguid, nagu WebP või AVIF.
- Parandage serveri vastamisaega: kasutage tõhusaid majutusressursse, vahemälu ja sisuedastusvõrku (CDN), kui need veebisaidile sobivad.
- Seadke põhisisu esikohale: veenduge, et brauser leiaks olulised pildid otse HTML-lähtekoodist, ja seadke vajaduse korral nende laadimine prioriteediks.
- Vähendage renderdamist blokeerivaid ressursse: optimeerige CSS- ja JavaScripti faile, mis takistavad brauseril põhisisu kuvamast.
- Ärge kasutage LCP-pildi puhul laiska laadimist: kui pilt on tõenäoliselt LCP-element, võib selle laadimise edasilükkamine muuta lehe aeglasemaks.
Need võtted võivad lühendada aega, mille kasutajad põhisisu ilmumist oodates veedavad. Kõige tõhusam lahendus sõltub aga viivituse põhjusest, seega on enne muudatuste tegemist oluline lehte mõõta.
Mis on Interaction to Next Paint (INP)?
Interaction to Next Paint (INP) mõõdab, kui kiiresti veebisait kasutaja tegevustele reageerib. See hindab viivitust kasutaja tegevuse, näiteks nupule klõpsamise või klahvivajutuse, ja brauseri järgmise visuaalse värskenduse vahel.
Võtame näiteks e-poe, kus külastaja klõpsab nupul Lisa ostukorvi. Kui brauseril kulub ostukorvi värskendamiseks märgatavalt aega, võib külastaja arvata, et nupp ei töötanud, ja klõpsata uuesti. See võib tekitada segadust ja isegi põhjustada toimingute dubleerimist.
INP aitab seda tüüpi probleeme tuvastada, mõõtes lehe reageerimisvõimet kogu kasutaja külastuse vältel. Erinevalt näitajast First Input Delay (FID), mis mõõtis ainult viivitust enne, kui brauser hakkas esimest tegevust töötlema, arvestab INP laiemalt kogu lehe eluea jooksul toimunud interaktsioone. Hea INP-tulemus on 200 millisekundit või vähem. Väärtused üle 200 ja kuni 500 millisekundi vajavad parandamist, üle 500 millisekundi pikkusi väärtusi peetakse aga kehvaks.
Kehva INP levinud põhjus on JavaScript, sest brauser võib enne kasutaja sisendile reageerimist ja värskenduse kuvamist pidada skripte käivitama. Pikalt kestvad ülesanded võivad takistada brauseril interaktsioone kiiresti töötlemast.
INP parandamiseks saavad arendajad kasutada mitmeid võtteid:
- Vähendage ebavajalikku JavaScripti: eemaldage kasutamata kood ja vältige skriptide laadimist, mida praegusel lehel vaja ei ole.
- Jagage pikad ülesanded osadeks: jagage suured JavaScripti ülesanded väiksemateks, et brauseril oleks rohkem võimalusi kasutaja tegevusi töödelda.
- Optimeerige sündmuste käsitlejaid: hoidke interaktsioonidega seotud funktsioonid võimalikult lihtsad ja tõhusad.
- Vältige ebavajalikke DOM-i värskendusi: liiga paljude elementide korraga värskendamine võib pikendada renderdamisaega ja lükata edasi järgmise visuaalse värskenduse.
- Vähendage kolmandate osapoolte skripte: analüüsitööriistad, reklaamiskriptid ja manustatud teenused võivad kulutada töötlusressursse ja mõjutada reageerimisvõimet.
INP parandamiseks ei piisa ainult JavaScripti failide kogumahu vähendamisest. Arendajad peavad mõistma ka seda, millal skriptid käivituvad ja kui palju tööd peab brauser pärast interaktsiooni tegema.
Mis on Cumulative Layout Shift (CLS)?
Cumulative Layout Shift (CLS) mõõdab veebilehe visuaalset stabiilsust. See keskendub nähtavate elementide asukoha ootamatutele muutustele lehe kuvamise ajal.
Kujutage näiteks ette, et külastaja loeb artiklit ja näeb äkki, kuidas tekst nihkub allapoole, sest selle kohale ilmus reklaam. Kui külastaja oli just lingile klõpsamas, võib ootamatu liikumine panna ta klõpsama hoopis teisel elemendil. Sellised paigutuse muutused võivad muuta veebisaidi kasutamise keeruliseks, eriti mobiilseadmetes, kus nähtav ala on piiratud. Hea CLS-tulemus on 0,1 või vähem. Tulemused üle 0,1 ja kuni 0,25 vajavad parandamist, üle 0,25 tulemusi peetakse aga kehvaks.
Ootamatuid paigutuse nihkeid võivad põhjustada mitmed levinud probleemid. Visuaalset stabiilsust võivad mõjutada määramata mõõtmetega pildid, dünaamiliselt lisatavad reklaamid, hilja laaditav sisu ja veebifondid, mis muudavad teksti välimust.
CLS-i parandamisel aitavad järgmised võtted:
- Määrake piltide mõõtmed: määrake piltide laius ja kõrgus või kasutage CSS-i kuvasuhteid, et vajalik ruum oleks enne pildi laadimist reserveeritud.
- Reserveerige ruum reklaamidele: eraldage reklaamikonteineritele piisavalt ruumi, et ümbritsev sisu ei liiguks reklaamide ilmumisel.
- Ärge lisage sisu olemasoleva sisu kohale: kui on vaja kuvada uusi elemente, paigutage need nii, et need ei nihutaks ootamatult sisu, mida kasutajad juba vaatavad.
- Optimeerige fontide laadimist: kasutage sobivaid fontide laadimise strateegiaid ja varufonte, et vähendada teksti paigutuse ootamatuid muutusi.
- Kasutage sobivaid CSS-animatsioone: eelistage võimaluse korral animatsioone, mis põhinevad sellistel omadustel nagu transform ja opacity, mitte omadustel, mis muudavad paigutust.
Oluline on mõista, et mitte iga paigutuse nihe pole kahjulik. Muutus, mis toimub otseselt vastusena kasutaja tegevusele, võib olla oodatud. CLS keskendub ootamatule visuaalsele ebastabiilsusele ja kasutab hindamismeetodit, mis põhineb paigutuse nihke mõjul ja kaugusel.
Millised on Core Web Vitalsi soovitatud lävendid?
Google on määranud kindlad lävendid, mis aitavad veebisaidi omanikel hinnata, kas nende lehed pakuvad head kasutajakogemust. Need lävendid jagavad jõudluse kolme kategooriasse: hea, vajab parandamist ja kehv.
Need lävendid aitavad arendajatel iga näitajat eraldi hinnata. Ühest testist ei piisa aga selleks, et otsustada, kas veebisait pakub järjepidevalt head kogemust.
Google soovitab hinnata Core Web Vitalsi lehekülastuste 75. protsentiili alusel, käsitledes mobiili- ja lauaarvutitulemusi eraldi. See tähendab, et vähemalt 75% mõõdetud külastustest peaks iga näitaja puhul vastama hea tulemuse lävendile.
Oletame näiteks, et veebisaidi LCP väärtus 75. protsentiilil on 2 sekundit. See tähendab, et 75% mõõdetud lehekülastuste LCP on 2 sekundit või vähem, mis vastab soovitatud lävendile.
Veebisait peaks püüdma saavutada hea tulemuse lävendid kõigi kolme näitaja puhul, mitte keskenduma ainult oma tugevaimale tulemusele.
Millised on Core Web Vitalsi mõõtmise tööriistad?
Core Web Vitalsi saab mõõta mitme Google’i pakutava tööriistaga. Need tööriistad aitavad arendajatel mõista, kuidas veebisait toimib, ja tuvastada valdkonnad, mis vajavad parandamist.
PageSpeed Insights
PageSpeed Insights on üks kasulikumaid tööriistu Core Web Vitalsi kontrollimiseks. See pakub nii pärisandmeid tegelikelt kasutajatelt (kui need on saadaval) kui ka simuleeritud testiga kogutud laboriandmeid. Lisaks annab see soovitusi lehe jõudluse parandamiseks.
Google Search Console
Google Search Console sisaldab Core Web Vitalsi aruannet, mis näitab, millised lehtede rühmad pakuvad head kasutajakogemust ja millised vajavad parandamist. See kasutab tegelikke kasutusandmeid, et aidata veebisaidi omanikel tuvastada jõudlusprobleeme mitmel lehel korraga.
Chrome DevTools ja Lighthouse
Chrome DevTools ja Lighthouse aitavad arendajatel testida lehe jõudlust kontrollitud keskkonnas. Nendega saab tuvastada probleeme, mis on seotud JavaScripti käivitamise, piltide laadimise, paigutuse nihete ja muude Core Web Vitalsi mõjutavate teguritega.
Mis vahe on välja- ja laboriandmetel?
Core Web Vitalsi saab hinnata kahte tüüpi andmete põhjal: väljaandmete ja laboriandmete abil. Nende erinevuse mõistmine aitab arendajatel testitulemusi tõlgendada ja valida veebisaidi jõudluse parandamiseks õige lähenemise.
Väljaandmed
Väljaandmed kogutakse tegelikelt kasutajatelt nende veebisaidi sirvimise ajal. Need peegeldavad tegelikke sirvimistingimusi, sealhulgas erinevaid seadmeid, võrguühendusi ja kasutajate tegevusi.
Need andmed on eriti kasulikud, et mõista, kas veebisait vastab tegelikes oludes Google’i soovitatud Core Web Vitalsi lävenditele.
Laboriandmed
Laboriandmed kogutakse kontrollitud testkeskkonnas selliste tööriistadega nagu Lighthouse. Need aitavad arendajatel jõudlusprobleeme taasesitada ja nende võimalikke põhjuseid uurida.
Erinevalt väljaandmetest ei esinda laboriandmed iga tegeliku kasutaja kogemust. Seetõttu võib veebisait saada laboritestides ja tegelike kasutajate mõõtmistes erinevaid tulemusi.
Kuidas parandada Core Web Vitalsi tulemusi
Core Web Vitalsi parandamiseks tuleb tuvastada probleemid, mis mõjutavad laadimiskiirust, interaktiivsust ja visuaalset stabiilsust. Õige lahendus sõltub sellest, milline näitaja on kehv.
Parandage Largest Contentful Painti (LCP)
LCP parandamiseks peaksid arendajad keskenduma sellele, et suurim nähtav sisuelement laaditaks võimalikult kiiresti. Levinud parendused on piltide optimeerimine, usaldusväärse veebimajutusteenuse valimine, serveri vastamisaja lühendamine, vahemälu kasutamine ja oluliste ressursside laadimisel tarbetute viivituste vältimine.
Parandage Interaction to Next Painti (INP)
INP-d saab parandada pikalt kestvate JavaScripti ülesannete vähendamise ja põhilõimel tehtava ebavajaliku töö minimeerimisega. Arendajad peaksid ka optimeerima sündmuste käsitlejaid ja vältima olukorda, kus brauser peab pärast kasutaja klõpsu, puudutust või trükkimist liiga palju tööd tegema.
Parandage Cumulative Layout Shifti (CLS)
CLS-i vähendamiseks peaksid arendajad reserveerima ruumi piltidele, videotele, reklaamidele ja muudele elementidele enne nende laadimist. Vältige uue sisu ootamatut lisamist olemasoleva sisu kohale ja kasutage visuaalsete elementide puhul võimaluse korral ühtseid mõõtmeid.
Kokkuvõtteks
Core Web Vitals aitab arendajatel mõista, kuidas kasutajad veebisaiti laadimisjõudluse, interaktiivsuse ja visuaalse stabiilsuse seisukohalt kogevad. LCP-d, INP-d ja CLS-i mõõtes saavad veebisaidi omanikud tuvastada jõudlusprobleeme ja seada esikohale parendused, mis muudavad nende lehed hõlpsamini kasutatavaks.
Regulaarne jälgimine, tegelike kasutajate andmed ja sihipärane optimeerimine aitavad veebisaitidel säilitada häid Core Web Vitalsi tulemusi ka pikema aja jooksul
KKK
1. Mis vahe on välja- ja laboriandmetel?
Väljaandmed pärinevad veebisaiti külastavatelt tegelikelt kasutajatelt, laboriandmed kogutakse aga kontrollitud testkeskkonnas. Väljaandmed peegeldavad tegelikku kasutajakogemust, laboriandmed aitavad arendajatel jõudlusprobleeme taasesitada ja diagnoosida.
2. Kuidas parandada oma Core Web Vitalsi tulemusi?
Core Web Vitalsi tulemusi saab parandada piltide optimeerimise, ebavajaliku JavaScripti vähendamise, serveri vastamisaja lühendamise, vahemälu kasutamise ja ootamatute paigutuse nihete vältimisega.
