Google Lighthouse – tööriist oma kodulehe kvaliteedi hindamiseks ja parandamiseks

Google Lighthouse – tööriist oma kodulehe kvaliteedi hindamiseks ja parandamiseks

Mis on Google Lighthouse ja milleks seda kasutada?

Google Lighthouse on avatud lähtekoodiga automatiseeritud tööriist veebilehtede kvaliteedi hindamiseks. See annab infot lehe jõudluse, juurdepääsetavuse ja SEO kohta ning aitab arendajatel, veebilehtede omanikel ja ettevõtjatel parandada oma veebilehtede kvaliteeti, toimivust ja kasutuskogemust. Paremini toimiv koduleht mõjub hästi ka lehte külastavate klientide kogemusele, mis tõttu neil tekib ettevõttest parem kuvand ja mille tõttu nad tõenäolisemalt sooritavad ostu, võtavad ettevõttega ühendust või muud sellist.

Kus kasutada Google Lighthouse’i, et kodulehe seisundit hinnata?

Google Lighthouse’i tööriista saab lisada näiteks Google Chrome brauseris laienduste hulka.

Lisaks pakub Google Web Vitals laiendust, mis võimaldab samuti hinnata veebilehe kvaliteeti.

Samuti saab veebilehe kiirust testida lehel https://pagespeed.web.dev/. Google PageSpeed ​​Insights ühendab kasutajaandmed ja laboritingimustes mõõdetud andmed, et anda põhjalik ja kergesti mõistetav ülevaade lehe kiirusest. Lighthouse on rohkem arendajakeskne tööriist ja kogub andmeid audititest, mis sisaldavad infot alates lehe laadimiskiirusest kuni turvalisuseni.

Mobiilisõbralikkuse testimiseks on olemas leht https://search.google.com/test/mobile-friendly, mis annab kiirelt lühikese ülevaate, kas veebileht on mobiilisõbralik.

Valdkonnad, mida Google Lighthouse’i abil parandada või täiustada

Google Lighthouse'i testi abil saab kindlaks määrata valdkonnad, milles enda veebilehte parandada või täiustada. Veebilehe kvaliteedi parandamine nii, et ajapikku Google Lighthouse skoor tõuseb, aitab kaasa veebilehe paremale jõudlusele ja asetusele otsingumootori tulemustes. Valdkonnad, mida Google Lighthouse hindab, on järgmised:

Jõudlus

Lighthouse mõõdab erinevaid jõudlusega seotud mõõdikuid, nagu lehe laadimisaeg, interaktiivseks saamise aeg ja renderduskiirus. Testi tulemustes esile tõstetud probleemide lahendamise tulemusena saab parandada veebilehe kasutajakogemust ja  konversioonimäärasid.

Juurdepääsetavus

Google Lighthouse hindab veebisaidi juurdepääsetavust tagamaks, et see sobib kõigile kasutajatele, sealhulgas puuetega inimestele. Juurdepääsetavuse soovitusi järgides saab muuta veebilehed kaasavamaks ja jõuda laiema vaatajaskonnani.

SEO

Lighthouse analüüsib lehel olevaid SEO elemente, nagu metasildid, pealkirjad ja mobiilisõbralikkus. Neid aspekte optimeerides saavad ettevõtted parandada oma otsingumootorite asetust, suurendada orgaanilist liiklust ja parandada veebis nähtavust.

Progressiivsed veebirakendused

Lighthouse kontrollib, et kui veebisait põhineb PWA rakendusel, kas kasutatakse PWA-ga seotud parimaid tavasid. PWA on lühidalt öeldes rakendus, mis võimaldab kasutada samal ajal nii veebilehe kui ka native app’i kasulikke külgi. PWA funktsioonide rakendamine võib tuua kaasa parema kasutajakogemuse, suurema külastajate arvu ja kõrgema konversioonimäära.

Parimad tavad

Lighthouse hindab veebisaiti veebiarenduse parimate tavade alusel, nagu HTTPS-i kasutamine, aegunud API-de vältimine ja piltide õige optimeerimine. Neid juhiseid järgides on võimalik tagada, et veebilehed on turvalised ja kvaliteetsed.

Tehnilist skoori mõõdab Google Lighthouse kuue parameetri järgi

Google Lighthouse võtab hindamisel arvesse mitut veebilehe parameetrit, et anda veebilehele põhjalik skoor. Kirjeldame järgnevalt neid parameetreid.

Speed index – kui kiiresti leht nägi välja terviklik ja kasutatav alates lehele liikumisest?

Speed index ehk veebilehe kiirusindeks näitab, kui kiirelt lehe sisu ekraani nähtavas osas ära laeb. Mõned elemendid on vähem mahukad ja teised rohkem mahukad, seega on loomulik, et erinevad elemendid laevad ära eri kiirusega. Hea kiirusindeks on reeglina seotud ka heade first contentful paint (FCP) ning largest contentful paint (LCP) näitajatega. Mobiili puhul loetakse heaks tulemust 3,4 sekundit või vähem. Laua- või sülearvutis on hea tulemus 1,2–1,3  sekundit või alla selle.

First contentful paint – kui kiiresti tekst ja pildid ilmusid?

First contentful paint (FCP) on Google’i kasutatav näitaja, mis iseloomustab külastaja vaatenurgast, kui kiiresti ilmub selline visuaalne sisu, milleks on vaja seda eelnevalt brauseris renderdada. See seisneb selles, et brauser peab lugema koodist esmalt välja info, kuidas täpselt mõnda konkreetset kujutist kuvada. Multimeedia võib olla mahukas ja suure laadimisajaga, mistõttu on tähtis, et sisu laadimise kiirus oleks optimaalne. FCP alla 1 sekundi on väga hea näitaja, 1–3 sekundit on keskmine tulemus ja rohkem kui 3 sekundit on halb tulemus. 

Time to interactive – kui kiiresti muutus leht interaktiivseks?

Time to interactive (TTI) – näitab veebilehe interaktiivseks muutumise kiirust. Kui veebileht on interaktiivne, siis on kasutaja jaoks sisu kuvatud, leht reageerib kasutaja tegevusele – näiteks hiirklikile – ja koodi sündmusetöötlejad (event handlers) suuremas osas toimivad lehe nähtavate elementide korral. Event handlers-tüüpi funktsioonid on vajalikud erinevate riistvaraga seotud tegevuste töötlemiseks – näiteks kui kasutaja liigutab hiirt, teeb hiirekliki või vajutab nuppu klaviatuuril. Leht, mis muutub interaktiivseks 3,8 sekundiga või kiiremini alates külastaja lehele jõudmisest, on hea TTI näitajaga. 

Largest contentful paint – millal kõige mahukam visuaalne element lõplikult ära laadis?

Largest contentful paint (LCP) iseloomustab, kui kiirelt laeb leht ära peamise sisu. Täpsemalt öeldes LCP näitab, kui kiiresti laeb ekraani nähtavas osas ära suurim visuaalne element – näiteks pilt, video või tekst.Hea tulemus LCP puhul on 2,5 sekundit või vähem. 

Cumulative layout shift – kui palju disainielemendid liikusid, kui leht veel laadis?

Cumulative layout shift (CLS) näitab lehe visuaalset stabiilsust. Kindlasti on igaüks näinud, kuidas elemendid laevad lehel eri kiirusega ära ja kui näiteks soovitakse kuhugi klikkida, siis õige koht või nupp “hüppab eest ära”, et teha ruumi mõnele elemendile, mis äsja ilmus selle koha või nupu asemele. CLS iseloomustab, kui kiiresti erinevad elemendid nähtavale tulevad. Hea CLS-i näitaja on alla 0,1 ühiku.
CLS väärtuse arvutamiseks korrutatakse omavahel impact fraction ja distance fraction. Impact fraction iseloomustab liiga aeglaselt laadiva elemendi suurust seotuna ekraani nähtava osaga ja distance fraction näitab “vahemaad”, mille võrra too suur ja aeglane element liigutab muu veebilehe sisu mujale.

Total blocking time – mis hetkest alates sai lehel midagi teha?

Total blocking time (TBT) iseloomustab, kui kaua leht blokeerib selliseid tegevusi nagu kasutajapoolsed hiireklikid ja klaviatuurinuppude vajutamine. Kui leht nendele tegevustele eri reageeri, siis tähendabki see, et leht blokeerib antud tegevusi. Blokeerimise tingib asjaolu, et uuele veebilehele mineku korral hakatakse täitma lehe koodist lähtuvalt mitmesuguseid ülesanded (task’e), mille tulemusena kuvatakse kasutajale veebilehe sisu. Seni kuni kõige olulisemad task’id ei ole veel täidetud, on ka külastaja tegevus blokeeritud.

Nii largest contentful paint (LCP) kui ka cumulative layout shift (CLS) on ühtlasi ka Core Web Vitals mõõdikud. Core Web Vitals mõõdikud on näitajad, mida Google kasutab saitide hindamisel. Lisaks LCP-le ja CLS-ile on olemas ka FID – see on first input delay ja sarnaneb total blocking time’ile (TBT-le). Total blocking time iseloomustab lihtsalt aega, mil veebileht ei ole suuteline reageerima mis tahes kasutaja tegevusele, seejuures ei pea kasutaja isegi päriselt midagi tegema, siis first input delay mõõdab aega, mida loetakse kasutaja tegevusest (näiteks hiireklikist või muust sellisest) kuni hetkeni, mil leht tegevusele reageerib. Hea FID näitaja on kuni 0,3 sekundit, üle selle on juba halvem tulemus.

Tuntud ettevõtete kodulehtede Google Lighthouse skoorid

Kas tuntud ettevõtted pööravad tähelepanu Google Lighthouse’i skooridele? Mõõtsime Google Lighthouse testiga erinevate tuntumate ettevõtete kodulehti, mille tulemused järgnevalt välja toome. Lisaks kirjeldame, mis on konkreetsete lehtede juures peamisteks probleemideks.

Telia

Jooniselt 1 võib näha, et Telia kodulehe üheks probleemiks on suure laadimisajaga pildid, mis mõjutavad ka lehe kiirusindeksit. Samuti on Total Blocking Time näit kõrge. Joonisel 2 välja toodud soovituste järgi aitaksid lehe kiirust parandada kasutamata JavaScripti, CSS-i ja renderdust blokeerivate ressursside vähendamine ning suuremahuliste piltide eelnev äralaadimine. 

Joonis 1. Telia kodulehe tulemus Google Lighthouse testi järgi


Joonis 2. Google Lighthouse’i raporti soovitused Telia kodulehe parandamiseks

Selver

Jooniselt 3 nähtub, et Selveri kodulehe kiiruse mõõdikud on kõik punases – seega kiiruse parandamiseks saab paljugi ära teha. Kasutamata JavaScripti vähendamine parandaks lehe kiirust lausa enam kui 5 sekundit. Veidi aitaks ka teksti tihendamine. See on protsess, kus teksti suurust vähendatakse, et seeläbi vähendada ka veebilehe laadimisaega ja serveri koormust andmemahtude edastamisel. Samuti oleks hea vältida vananenud JavaScripti kasutamist modernsetes brauserites.

Joonis 3. Selveri kodulehe tulemus Google Lighthouse testi järgi

Joonis 4. Google Lighthouse’i raporti soovitused Selveri kodulehe parandamiseks

Photopoint

Jooniselt 5  ilmneb, et ka Photpointi kiirust saaks tunduvalt parandada – Total Blocking Time’i tulemus on oranž, kõik teised aga punased. Kiirust aitaks parandada piltide omaduste  optimeerimine, kasutamata JavaScripti ning renderdust blokeerivate ressursside vähendamine, lisaks ka teksti tihendamine.

Joonis 5. Photopointi veebilehe  tulemus Google Lighthouse testi järgi


Joonis 6. Google Lighthouse’i raporti soovitused Photopointi veebilehe parandamiseks

Postimees

Jooniselt 7 on näha, et Google Lighthouse’i test ei suutnud anda Postimehe saidi puhul täielikke tulemusi – leht laadis liiga kaua. Üldine skoor 5 näitab, et parandamisruumi on rohkelt. Pange tähele ka kiirusindeksi tulemust, mis on ligi 30 sekundit. Kiirust aitaks parandada erinevate kasutamata ressursside ja duplikaatide vähendamine, piltide optimeerimine ja vananenud JavaScripti likvideerimine.

Joonis 7. Postimehe saidi tulemus Google Lighthouse testi järgi

Joonis 8. Google Lighthouse’i raporti soovitused Postimehe saidi parandamiseks