Kako koristiti Google Lighthouse za testiranje performansi web stranice – TechCult
Miscelanea / / November 07, 2023
Kada je u pitanju bolje rangiranje vaše web stranice u rezultatima tražilice, brzina web stranice je faktor koji se ne može zanemariti. Ne samo da oduševljava korisnike, već se pretvara i u veću vidljivost. Uostalom, nitko ne želi kliknuti na stranicu i čekati vječno da se učita. Vidite na primjer TechCult, naši se blogovi učitavaju prilično brzo, zar ne? Hah, šalu na stranu, ako ste zabrinuti da se vaša web stranica ne može rangirati zbog niske brzine, Google Lighthouse je tu da vam pomogne. U današnjem članku ćemo vam pokazati kako koristiti Google Lighthouse za testiranje performansi.
Što je Google Lighthouse i kako ga koristiti za testiranje performansi?
Poznata je poslovica da je prvi dojam posljednji. S tim u vezi, web stranica koja se brzo učitava često ima prednost u smislu boljeg korisničkog iskustva, što u konačnici može rezultirati povećanjem stopa konverzije. Čak i tražilice kao što je Google rangiraju web stranice koje se brže učitavaju više u rezultatima pretraživanja.
Google Lighthouse je automatizirani alat otvorenog koda koji pomaže razvojnim programerima i vlasnicima web stranica, procijeniti i poboljšati kvalitetu web stranica. Ima revizije za izvedbu, pristupačnost, najbolju praksu i SEO za mobilne uređaje i stolna računala. Na temelju njegovih detaljnih izvješća i preporuka, korisnici mogu optimizirati performanse stranice za bolji angažman korisnika. Lighthouse se može pokrenuti na bilo kojoj web stranici, javno ili privatno dostupnoj. Pogledajmo kako funkcionira i kako ga možete koristiti.
Metoda 1: Izravno dodajte i pokrenite Lighthouse
Lighthouse je također dostupan za korisnike u obliku Googleove ekstenzije koju možete preuzeti za pokretanje revizija u pregledniku Chrome. Slijedite korake u nastavku:
1. Posjetiti Stranica Chrome web trgovine za proširenje Lighthouse na bilo kojem web pregledniku.
2. Kliknite na Dodaj u Chrome.
3. Izaberi Dodajte proširenje potvrditi.
4. Nakon dodavanja, pokrenite web stranicu u pregledniku koji želite analizirati.
5. Klikni na Ikona proširenja (slagalica). pored adresne trake i odaberite Svjetionik.
6. Kliknite na Generiraj izvješće.
To je to! Za nekoliko sekundi Lighthouse će generirati detaljno izvješće analizirajući web stranicu za koju ste pokrenuli test.
Metoda 2: Koristite PageSpeed Insights
Google PageSpeed Insights također je a alat za testiranje web performansi koji koristi Lighthouse kao motor za analizu. Stoga ga možete koristiti za generiranje izvješća za svoju web stranicu. Prati korake:
1. Posjetiti PageSpeed Insights web stranica.
2. Unesite URL web stranice u tekstualno polje i kliknite Analizirati.
Nakon što se testiranje završi, primit ćete izvješće o korisničkom iskustvu preglednika Chrome koje prikazuje rezultate stvarnih korisnika.
Odjeljak Dijagnosticiranje problema s izvedbom predstavlja Lighthouse rezultat. Možete provjeriti rezultate i za mobitel i za stolno računalo.
Metoda 3: Pokrenite Lighthouse u DevTools
Lighthouse ima svoju ploču u Google Chrome DevTools koju također možete koristiti za testiranje performansi ako vaša web stranica radi na lokalnom poslužitelju ili također za stranice koje zahtijevaju prijavu. Evo kako to učiniti:
1. Posjetite web stranicu koju želite revidirati.
2. Desnom tipkom miša kliknite bilo gdje na stranici i odaberite Pregledati iz izbornika.
3. Klikni na >> ikona (Više kartica) i odaberite Svjetionik iz kontekstnog izbornika.
4. Klikni na Analizirajte učitavanje stranice u gornjem desnom kutu i pričekajte da rezultati budu spremni.
Bilješka: Odaberite Uređaj na odgovarajući način i zadržite sve Kategorije omogućeno.
Također možete promijeniti način rada. Lighthouse u DevToolsu nudi tri načina testiranja:
- Navigacija: Prikazuje ukupne rezultate uključujući izvedbu, pristupačnost i SEO.
- Vremenski raspon: Prikazuje rezultate na temelju vremena potrebnog za učitavanje stranice i interakciju sa surferom. Trebali biste komunicirati sa stranicom dok se test izvodi.
- Snimak: Izračunava rezultat za trenutnu stranicu
Također pročitajte:31 najbolji alat za skrapiranje weba
Metoda 4: Koristite Lighthouse Module s naredbenim retkom
Lighthouse je također dostupan kao modul Node koji možete integrirati u svoje sustave kontinuirane integracije i koristiti kao naredbeni redak ili programski. Sve što zahtijeva je verzija čvora. Ako imate Node.js instaliran na računalu, slijedite korake u nastavku:
1. Prijavite se na svoj poslužitelj i pokrenite sljedeću naredbu za instalaciju globalnog modula Lighthouse na uređaj:
npm install -g lighthouse
2. Nakon instalacije, pokrenite sljedeću naredbu za izvođenje Lighthouse testa:
lighthouse -- view
Pomoću sljedeće naredbe možete vidjeti sve dostupne opcije.
lighthouse --help
Kako Lighthouse izračunava rezultat
Google Lighthouse kombinira i procjenjuje različite aspekte metrike izvedbe web stranice, kao što su izvedba, pristupačnost, najbolji primjeri iz prakse, SEO i PWA. Nakon što je revizija uspješna, ona zatim generira izvješće koje uključuje ocjenu za svaki aspekt, kao i preporuke za potrebna poboljšanja za poboljšanje performansi i korisničke interakcije vaše web stranice. Web stranice se obično ocjenjuju na ljestvici od 0 do 100.
Izvođenje
Lighthouse analizira koliko se brzo web stranica učitava. Ocjena izvedbe izračunava se uzimajući u obzir sljedeće metrike –
- Prvo bojanje sadržaja (FCP): Koliko brzo se prvi element iz sadržaja slika na ekranu
- Bojanje najvećeg sadržaja (LCP): Mjeri vrijeme koje je potrebno da najveći element sadržaja postane vidljiv
- Kumulativni pomak izgleda (CLS): Mjeri količinu neočekivanih pomaka izgleda do kojih dolazi tijekom učitavanja stranice kako bi se procijenila vizualna stabilnost stranice. Nizak CLS označava da je web stranica stabilna.
- Ukupno vrijeme blokiranja: Mjeri vrijeme tijekom kojeg je glavna nit blokirana i ne reagira na korisnički unos.
- Indeks brzine: Pokazuje koliko brzo je sav sadržaj stranice potpuno vidljiv
Ove metrike mjere brzinu učitavanja i vizualnu stabilnost web stranice. Nekoliko čimbenika utječe na ovo izvješće, kao što su veličina i broj slika, broj korištenih dodataka i učinkovitost koda web stranice.
Lighthouse izračunava rezultat uzimajući ponderirani prosjek metričkih vrijednosti. Naravno, mjerenja s većim ponderiranjem imaju veći utjecaj na vašu ukupnu ocjenu izvedbe. Rezultati metrike nisu prikazani u izvješću, već se izračunavaju iza scene. Možete kliknuti opciju Vidi kalkulator kako biste dobili pristup detaljnom izračunu čimbenika koji utječu na vašu web stranicu.
Pristupačnost
To je rezultat usmjeren na korisnika koji mjeri koliko je korisnicima s invaliditetom lako pristupiti vašoj web stranici. Na njega utječu čimbenici kao što su prisutnost alternativnog teksta na slikama, upotreba ARIA atributa i dostupnost tipkovnice vašoj web stranici. Svaka revizija pristupačnosti je prolazna ili neuspješna. Stranica ne dobiva bodove ako je djelomično prošla reviziju pristupačnosti, za razliku od revizije izvedbe.
- Zamjenski tekst za slike: Sve slike na stranici trebaju imati odgovarajući i opisni zamjenski tekst, jer je to potrebno korisnicima s oštećenjem vida koji se oslanjaju na čitače zaslona za tumačenje slika.
- Semantički HTML: Pravilna upotreba semantičkih HTML elemenata kao što su naslov, naslovi, popisi itd. pomažu čitačima zaslona i drugom pomoćnom softveru da razumiju strukturu stranice
- Kontrast boja: Kontrast boja između teksta i njegove pozadine treba zadovoljiti standarde postavljene Smjernicama za pristupačnost web sadržaja. Dovoljan kontrast boja osigurava da je tekst čitljiv osobama sa slabim vidom ili sljepoćom za boje.
Također pročitajte: Kako izgraditi web stranicu koristeći ChatGPT
Najbolje prakse
Lighthouse mjeri koliko dobro vaše web mjesto slijedi najbolje prakse web razvoja i standarde kodiranja i na temelju toga daje ocjenu. Provjerava upotrebu modernih JavaScript značajki i sigurnih veza (HTTPS) i pod utjecajem je čimbenika kao što je upotreba minimiziranja i kompresije, prisutnost sigurnosnih zaglavlja i upotreba datoteke robots.txt datoteke. Neke od uobičajenih revizija u okviru njega uključuju:
- Izbjegavajte velike JavaScript biblioteke
- Izbjegavajte neiskorišteni CSS
- Omogući kompresiju teksta
- Uklonite resurse koji blokiraju prikaz
- Iskoristite predmemoriju preglednika
- Poslužite statična sredstva s učinkovitom politikom predmemorije
SEO
SEO mjeri koliko je web stranica optimizirana za tražilice. Na njega utječu čimbenici kao što su prisutnost meta opisa i naslovnih oznaka, upotreba relevantnih ključnih riječi i struktura sadržaja vaše web stranice. Ocjena se izračunava prosjekom ocjena za sljedeće revizije:
- Naslov dokumenta
- Opis
- Naslovi
- Slike
- Linkovi
- Meta opis
- Roboti.txt
Također pročitajte: 27 najboljih besplatnih usluga hostinga web stranica
Kako protumačiti rezultate
Lighthouse pretvara svaku neobrađenu metričku vrijednost u metričku ocjenu od 0 do 100. Što je veći rezultat, to je bolje. Rezultati metrike obojeni su prema ovim rasponima:
- 0 do 49 (crveni trokut): Loše
- 50 do 89 (narančasti kvadrat): Potrebno je poboljšanje
- 90 do 100 (zeleni krug): Dobro
Prilikom izvođenja testova na istoj web stranici, uobičajeno je primijetiti fluktuacije ukupnih rezultata. Ova se varijabilnost može pripisati nekoliko čimbenika.
- Svaka analiza daje samo uvid u izvedbu učitavanja jedne stranice. Budući da nijedno učitavanje dvije stranice nije identično, vremena učitavanja mogu se prirodno razlikovati.
- Na brzinu stranice može utjecati prisutnost dinamičkog sadržaja, kao što su oglasi ili elementi koji se često mijenjaju, proširenja preglednika koja mijenjaju mrežne zahtjeve i pozadinske aktivnosti na računalu.
- Rezultati dobiveni u različitim okruženjima, kao što su PageSpeed Insights i vaše lokalno računalo, možda neće biti izravno usporedivi zbog razlika u hardverskim i mrežnim uvjetima.
Kako poboljšati svoj Lighthouse rezultat
Lighthouse pruža i laboratorijske podatke (simulirani testovi) i podatke s terena (stvarni korisnički podaci) za procjenu izvedbe web stranice. Terenski podaci nude uvid u to kako stvarni korisnici doživljavaju stranicu, dok su laboratorijski podaci korisni za testiranje promjena i poboljšanja.
Započnite koncentriranjem na preporuke u domeni izvedbe. Web stranica koja se brže učitava poboljšat će korisničko iskustvo i može poboljšati vaš SEO rang. Nakon što se vaša ocjena izvedbe poboljša, možete se početi usredotočiti na preporuke u drugim područjima. Budući da su pristupačnost i SEO bitne komponente ukupne kvalitete vaše web stranice, isplati se posvetiti i poboljšanju ovih područja.
Također pročitajte: Zyro vs Wix: Koji alat za izradu web stranica odabrati?
Dodatni savjeti za početnike
Ako ste upravo dizajnirali i pokrenuli svoju web stranicu, evo još nekoliko savjeta koje biste mogli zadržati:
- Nemojte da vas opterećuju brojni prijedlozi Lighthouse izvješća. Započnite s najvažnijim savjetima i krenite niz popis.
- Izvješće Lighthouse može se koristiti za praćenje vašeg razvoja tijekom vremena. Vaše bi se ocjene Lighthousea trebale poboljšati kako budete izvršavali preporuke.
- Ne zaboravite testirati svoju web stranicu na mnogim uređajima i preglednicima. Budući da se Lighthouse izvješće temelji na jednom testu, ključno je testirati svoju web stranicu na nekoliko uređaja i preglednika kako biste bili sigurni da dobro radi za sve korisnike.
Nadamo se da vam je naš vodič pomogao razumjeti kako ga koristiti Google Lighthouse za testiranje izvedbe vaše web stranice i time ga poboljšati. Ako imate bilo kakvih pitanja ili prijedloga za nas, javite nam u odjeljku za komentare. Pratite TechCult za još takvih informativnih blogova.
Henry je iskusan pisac o tehnologiji sa strašću da složene tehnološke teme učini dostupnima svakodnevnim čitateljima. S više od desetljeća iskustva u tehnološkoj industriji, Henry je postao pouzdan izvor informacija za svoje čitatelje.