Kuinka käyttää Google Lighthousea verkkosivuston suorituskyvyn testaamiseen – TechCult
Sekalaista / / November 07, 2023
Kun kyse on verkkosivustosi sijoituksesta korkeammalle hakukoneiden tuloksissa, verkkosivuston nopeus on tekijä, jota ei voida jättää huomiotta. Se ei vain ilahduta käyttäjiä, vaan lisää myös näkyvyyttä. Loppujen lopuksi kukaan ei halua napsauttaa sivua ja odottaa ikuisesti sen latautumista. Näet esimerkiksi TechCultin, blogimme latautuvat melko nopeasti, eikö niin? Hah, vitsit sivuun, jos olet huolissasi siitä, että verkkosivustosi ei voi saada sijoitusta alhaisen nopeuden vuoksi, Google Lighthouse on täällä auttamassa sinua. Tämän päivän artikkelissa näytämme sinulle, kuinka voit käyttää Google Lighthousea suorituskyvyn testaamiseen.
![Google Lighthousen käyttäminen verkkosivuston suorituskyvyn testaamiseen](/f/7f811fe66422ab98c5e958550414c475.png)
Mikä on Google Lighthouse ja kuinka sitä käytetään suorituskyvyn testaamiseen?
Se on yleinen sananlasku, että ensimmäinen vaikutelma on viimeinen. Tässä mielessä nopeasti latautuva verkkosivusto on usein korkealla tasolla paremman käyttökokemuksen kannalta, mikä voi lopulta johtaa kohonneisiin tulosprosentteihin. Jopa hakukoneet, kuten Google, sijoittuvat nopeammin latautuvat verkkosivustot korkeammalle hakutuloksissa.
Google Lighthouse on avoimen lähdekoodin automatisoitu työkalu, joka auttaa verkkosivustojen kehittäjiä ja omistajia arvioimaan ja parantamaan verkkosivujen laatua. Se sisältää suorituskyvyn, käytettävyyden, parhaiden käytäntöjen ja hakukoneoptimoinnin tarkastuksia sekä mobiili- että pöytätietokoneille. Yksityiskohtaisten raporttien ja suositusten perusteella käyttäjät voivat optimoida sivuston suorituskyvyn käyttäjien sitoutumisen parantamiseksi. Lighthouse voidaan ajaa mitä tahansa verkkosivua vastaan, julkisesti tai yksityisesti saatavilla. Katsotaan kuinka se toimii ja miten voit käyttää sitä.
Tapa 1: Lisää ja suorita Lighthouse suoraan
Lighthouse on saatavilla myös käyttäjille Google-laajennuksen muodossa, jonka voit ladata ja suorittaa tarkastuksia puolestasi Chrome-selaimessa. Noudata alla olevia ohjeita:
1. Vieraile Lighthouse-laajennuksen Chrome Web Store -sivu millä tahansa verkkoselaimella.
2. Klikkaa Lisää Chromeen.
![Napsauta Lisää Chromeen Google Lighthouselle](/f/ad6fe62b112f529c85e847e2eb0f4f7b.png)
3. Valitse Lisää laajennus vahvistaa.
4. Kun olet lisännyt, käynnistä verkkosivusto selaimessa, jota haluat analysoida.
5. Klikkaa Laajennus (palapeli) -kuvake osoitepalkin vieressä ja valitse Majakka.
6. Klikkaa Luo raportti.
![Napsauta Luo raportti. | majakan suorituskyvyn testaus](/f/3f25d112b7f9b1fb93f9220e8165bb2f.png)
Se siitä! Lighthouse luo muutamassa sekunnissa yksityiskohtaisen raportin, joka analysoi verkkosivustoa, jolle suoritit testin.
Tapa 2: Käytä PageSpeed Insightsia
Google PageSpeed Insights on myös a Web-suorituskyvyn testaustyökalu joka käyttää Lighthousea analyysimoottorinaan. Voit siis käyttää sitä raporttien luomiseen verkkosivustollesi. Seuraa askelmia:
1. Vieraile PageSpeed Insights verkkosivusto.
2. Kirjoita verkkosivuston URL-osoite tekstikenttään ja napsauta Analysoida.
![Kirjoita verkkosivuston URL-osoite tekstikenttään ja napsauta Analysoi.](/f/e87dd332ed467e60b1004f5137ae3baf.png)
Kun testaus on tehty, saat Chromen käyttökokemusraportin, joka näyttää todellisten käyttäjien kokemat tulokset.
![PageSpped Insights -tulokset | majakan suorituskyvyn testaus](/f/8069809c9c171fb448f1de6c4a4cd10d.png)
Diagnosoi suorituskykyongelmat -osio edustaa Lighthouse-pisteitä. Voit tarkistaa tulokset sekä mobiili- että pöytätietokoneille.
![Lighthouse-tulokset – Diagnosoi suorituskykyongelmat](/f/552b36918980db18d172f623f38b0736.png)
Tapa 3: Suorita Lighthouse DevToolsissa
Lighthousessa on Google Chrome DevToolsissa paneeli, jota voit käyttää myös suorituskyvyn testaamiseen, jos verkkosivustosi toimii paikallisella palvelimella tai myös kirjautumista vaativilla sivustoilla. Voit tehdä sen seuraavasti:
1. Vieraile verkkosivustolla, jonka haluat tarkastaa.
2. Napsauta hiiren kakkospainikkeella mitä tahansa sivulla ja valitse Tarkastaa valikosta.
![Napsauta hiiren kakkospainikkeella mitä tahansa sivulla ja valitse valikosta Tarkista. | majakan suorituskyvyn testaus](/f/e893bef1e22a7473542798a872dc1d8e.png)
3. Klikkaa >>-kuvake (Lisää välilehtiä) ja valitse Majakka kontekstivalikosta.
![Napsauta (Lisää välilehtiä) ja valitse pikavalikosta Lighthouse.](/f/9da5ba5935dd9335d517fab2fef5c487.png)
4. Klikkaa Analysoi sivun lataus -painiketta oikeassa yläkulmassa ja odota, kunnes tulokset ovat valmiita.
Huomautus: Valitse Laite asianmukaisesti ja säilytä kaikki Luokat käytössä.
![Napsauta Analysoi sivun lataus -painiketta oikeassa yläkulmassa ja odota, kunnes tulokset ovat valmiita.](/f/dc4311b7879bba6b28382f2e71577273.png)
Voit myös vaihtaa tilaa. Lighthouse DevToolsissa tarjoaa kolme testaustilaa:
- Navigointi: Näyttää kokonaistulokset, mukaan lukien suorituskyky, esteettömyys ja hakukoneoptimointi.
![Navigointitulokset Lighthouse DevToolsissa | majakan suorituskyvyn testaus](/f/fa3f155cd7c9f18f39983688d551bf17.png)
- Aikajänne: Näyttää tulokset sen perusteella, kuinka kauan sivun lataaminen ja vuorovaikutus surffaajan kanssa kestää. Sinun on oltava vuorovaikutuksessa sivun kanssa testin ollessa käynnissä.
![Timespan Lightshouse Score DevTools](/f/b8b8a74643b6b10ac4ad378adf012875.png)
- Tilannekuva: Laskee nykyisen sivun pisteet
![Snapshot Lighthouse -pisteet DevTools | majakan suorituskyvyn testaus](/f/446b17f9aee799792bf815ed24c365da.png)
Lue myös:31 parasta verkkokaappaustyökalua
Tapa 4: Käytä Lighthouse-moduulia komentorivillä
Lighthouse on saatavana myös Node-moduulina, jonka voit integroida jatkuvaan integrointijärjestelmiisi ja käyttää komentorivina tai ohjelmallisesti. Se vaatii vain solmun version. Jos sinulla on Node.js asennettu tietokoneeseen, noudata alla olevia ohjeita:
1. Kirjaudu palvelimellesi ja suorita seuraava komento asentaaksesi Lighthousen globaali moduuli laitteeseen:
npm install -g lighthouse
2. Kun olet asentanut, suorita seuraava komento suorittaaksesi Lighthouse-testin:
lighthouse -- view
Voit tarkastella kaikkia käytettävissä olevia vaihtoehtoja käyttämällä seuraavaa komentoa.
lighthouse --help
Miten Lighthouse laskee pisteet
Google Lighthouse yhdistää ja arvioi verkkosivuston suorituskykymittareita, kuten suorituskykyä, saavutettavuutta, parhaita käytäntöjä, hakukoneoptimointia ja PWA: ta. Kun tarkastus on onnistunut, se luo raportin, joka sisältää pisteet jokaisesta näkökohdasta sekä suosituksia tarvittavista parannuksista parantaaksesi verkkosivustosi suorituskykyä ja käyttäjien vuorovaikutusta. Verkkosivustot arvioidaan yleensä asteikolla 0-100.
Esitys
Lighthouse analysoi, kuinka nopeasti verkkosivu latautuu. Suorituskykypisteet lasketaan ottamalla huomioon seuraavat mittarit:
- First Contentful Paint (FCP): Kuinka nopeasti sisällön ensimmäinen elementti maalataan näytölle
- Suurin sisältöä sisältävä maali (LCP): Mittaa aikaa, joka kuluu, ennen kuin suurin sisältöelementti tulee näkyviin
- Kumulatiivinen ulkoasun muutos (CLS): Mittaa odottamattomien asettelun muutosten määrää sivun latauksen aikana arvioidakseen sivun visuaalista vakautta. Matala CLS tarkoittaa, että sivusto on vakaa.
- Koko estoaika: Mittaa aikaa, jonka pääsäie on estetty eikä reagoi käyttäjän syötteisiin.
- Nopeusindeksi: Ilmaisee, kuinka nopeasti koko sivun sisältö on kokonaan näkyvissä
Nämä mittarit mittaavat verkkosivuston latausnopeutta ja visuaalista vakautta. Tähän raporttiin vaikuttavat useat tekijät, kuten kuvien koko ja määrä, käytettyjen laajennusten määrä ja verkkosivuston koodin tehokkuus.
![Performance Score Lighthouse | majakan suorituskyvyn testaus](/f/8ca1f8c0e79108464f972ed6055d6551.png)
Lighthouse laskee pistemäärän ottamalla mittausarvojen painotetun keskiarvon. Luonnollisesti suuremmilla painotuksilla on suurempi vaikutus kokonaissuorituskykyyn. Mittapisteet eivät näy raportissa, vaan ne lasketaan kulissien takana. Voit napsauttaa Katso laskin -vaihtoehtoa päästäksesi yksityiskohtaiseen laskelmaan verkkosivustoosi vaikuttavista tekijöistä.
![Lighthouse-pisteytyslaskin suorituskykyä varten](/f/b169f5bcf76e53d6a5c24cee84537897.png)
Esteettömyys
Se on käyttäjäkeskeinen pistemäärä, joka mittaa, kuinka helppoa vammaisten käyttäjien on päästä verkkosivustollesi. Siihen vaikuttavat sellaiset tekijät kuin vaihtoehtoisen tekstin esiintyminen kuvissa, ARIA-attribuuttien käyttö ja verkkosivustosi näppäimistön käytettävyys. Jokainen esteettömyystarkastus on joko hyväksytty tai hylätty. Sivu ei saa pisteitä saavutettavuustarkastuksen osittaisesta läpäisystä, toisin kuin suorituskykytarkastukset.
- Kuvien vaihtoehtoinen teksti: Kaikissa sivun kuvissa tulee olla sopiva ja kuvaava vaihtoehtoinen teksti, koska se on tarpeellinen näkövammaisille käyttäjille, jotka luottavat kuvien tulkitsemiseen näytönlukuohjelmiin.
- Semanttinen HTML: Semanttisten HTML-elementtien, kuten otsikon, otsikoiden, luetteloiden jne., oikea käyttö auttaa näytönlukuohjelmia ja muita apuohjelmia ymmärtämään sivun rakennetta
- Värien kontrasti: Värikontrastin tekstin ja sen taustan välillä tulee täyttää verkkosisällön saavutettavuusohjeissa asetetut standardit. Riittävä värikontrasti varmistaa, että teksti on luettavissa henkilöille, joilla on huono näkö tai värisokeus.
![Esteettömyyspisteet Google Lighthouse | majakan suorituskyvyn testaus](/f/b18358eef570d804cf28319111b5bc33.png)
Lue myös: Verkkosivuston rakentaminen ChatGPT: n avulla
Parhaat käytännöt
Lighthouse mittaa, kuinka hyvin verkkosivustosi noudattaa verkkokehityksen parhaita käytäntöjä ja koodausstandardeja, ja antaa sen perusteella pisteytyksen. Se tarkistaa nykyaikaisten JavaScript-ominaisuuksien ja suojattujen yhteyksien (HTTPS) käytön ja siihen vaikuttavat tekijät kuten pienentämisen ja pakkaamisen käyttö, suojausotsikot ja robots.txt-tiedoston käyttö tiedostot. Joitakin sen alaisia yleisiä auditointeja ovat:
- Vältä suuria JavaScript-kirjastoja
- Vältä käyttämätöntä CSS: ää
- Ota tekstinpakkaus käyttöön
- Poista renderöinnin estävät resurssit
- Hyödynnä selaimen välimuistia
- Tarjoa staattisia resursseja tehokkaalla välimuistikäytännöllä
![Parhaat käytännöt Lighthouse Score](/f/2d27de23a93501aed1432faccf97e0f8.png)
SEO
SEO mittaa kuinka hyvin sivusto on optimoitu hakukoneille. Siihen vaikuttavat sellaiset tekijät kuin metakuvausten ja otsikkotunnisteiden läsnäolo, osuvien avainsanojen käyttö ja verkkosivustosi sisällön rakenne. Pisteet lasketaan laskemalla seuraavien tarkastusten pisteiden keskiarvo:
- Asiakirjan otsikko
- Kuvaus
- Otsikot
- Kuvat
- Linkit
- Meta Kuvaus
- Robots.txt
![SEO Google Lighthouse Score | majakan suorituskyvyn testaus](/f/93c9c1cd95a5c26240c1337afa2dd700.png)
Lue myös: 27 parasta ilmaista verkkosivustojen isännöintipalvelua
Kuinka tulkita tuloksia
Lighthouse muuntaa jokaisen raakamittarin mittarin pistemääräksi 0–100. Mitä korkeampi pistemäärä, sitä parempi se on. Mittaripisteet on väritetty näiden vaihteluvälien mukaan:
- 0 - 49 (punainen kolmio): Huono
- 50–89 (Oranssi neliö): Tarvitsee parannusta
- 90-100 (vihreä ympyrä): Hyvä
Kun suoritat testejä samalla verkkosivustolla, on yleistä havaita vaihteluita kokonaispisteissä. Tämä vaihtelu voi johtua useista tekijöistä.
- Jokainen analyysi antaa tietoja vain yhden sivun latauksen tehokkuudesta. Koska mikään kahden sivun lataus ei ole identtinen, latausajat voivat luonnollisesti vaihdella.
- Sivun nopeuteen voivat vaikuttaa dynaaminen sisältö, kuten mainokset tai usein vaihtuvat elementit, verkkopyyntöjä muuttavat selainlaajennukset ja tietokoneen taustatoiminnot.
- Eri ympäristöissä, kuten PageSpeed Insightsissa ja paikallisessa tietokoneessa saadut pisteet eivät välttämättä ole suoraan vertailukelpoisia laitteisto- ja verkkoolosuhteiden erojen vuoksi.
Kuinka parantaa Lighthouse-pisteitäsi
Lighthouse tarjoaa sekä laboratoriotietoja (simuloidut testit) että kenttädataa (todelliset käyttäjätiedot) verkkosivun suorituskyvyn arvioimiseksi. Kenttätiedot tarjoavat tietoa siitä, miten todelliset käyttäjät kokevat sivuston, ja laboratoriotiedot ovat hyödyllisiä muutosten ja parannusten testaamiseen.
![Web-suunnittelu](/f/26dc96a3e7f35319a0f7c23dbd4d7e69.jpg)
Aloita keskittymällä suorituskykyä koskeviin suosituksiin. Nopeammin latautuva verkkosivusto parantaa käyttökokemusta ja saattaa parantaa hakukoneoptimointiasi. Kun suorituskykypisteesi on parantunut, voit alkaa keskittyä muiden alueiden suosituksiin. Koska saavutettavuus ja hakukoneoptimointi ovat olennaisia osia verkkosivustosi yleisessä laadussa, kannattaa panostaa myös näiden alueiden parantamiseen.
Lue myös: Zyro vs Wix: Mikä verkkosivustojen rakentaja sinun pitäisi valita?
Bonusvinkkejä aloittelijoille
Jos olet juuri suunnitellut ja julkaissut verkkosivustosi, tässä on muutamia lisävinkkejä, jotka sinun kannattaa säilyttää:
- Älä hämmenny Lighthouse-raportin lukuisista ehdotuksista. Aloita tärkeimmillä neuvoilla ja siirry luettelossa alaspäin.
- Lighthouse-raporttia voidaan käyttää kehityksesi seuraamiseen ajan mittaan. Lighthouse-luokitusten pitäisi parantua, kun noudatat suosituksia.
- Muista testata verkkosivustoasi useilla laitteilla ja selaimilla. Koska Lighthouse-raportti perustuu yhteen testiin, on tärkeää testata verkkosivustoasi useilla laitteilla ja selaimilla varmistaaksesi, että se toimii hyvin kaikille käyttäjille.
Toivomme, että oppaamme auttoi sinua ymmärtämään, miten sitä käytetään Google Lighthouse verkkosivustosi suorituskyvyn testaamiseen ja siten parantaa sitä. Jos sinulla on meille kysyttävää tai ehdotuksia, kerro meille kommenttiosiossa. Pysy kuulolla TechCultissa saadaksesi lisää tällaisia informatiivisia blogeja.
Henry on kokenut teknologiakirjailija, jonka intohimona on tehdä monimutkaisista teknologiaaiheista jokapäiväisten lukijoiden ulottuvilla. Yli vuosikymmenen kokemuksella teknologia-alalta Henrystä on tullut lukijoilleen luotettava tietolähde.