Kuinka lukea Lighthouse-raporttia panikoimatta

Ensimmäinen sääntö: pisteesi eivät ole sivustosi

Kun avaat Lighthouse-raportin ensimmäistä kertaa, vastassa on seinällinen numeroita, värikoodattuja laatikoita ja varoituksia asioista, joista et ole koskaan kuullutkaan. Luonnollinen reaktio on paniikki. Pisteet ovat punaisella. Seitsemäntoista auditointia epäonnistui. Sivuston täytyy siis olla rikki?

Todennäköisesti ei ole. Lighthouse on diagnostiikkatyökalu, ei todistus. Pisteet ovat synteettinen vertailuarvo, joka ajetaan laboratorio-olosuhteissa – usein rajoitetulla yhteydellä ja simuloiden vuoden 2017 keskitason puhelinta. Se kertoo, miten sivustosi toimii kyseisessä nimenomaisessa tilanteessa, ei miten todelliset käyttäjät kokevat sen käytännössä.

Tämä on tärkeää, koska useimmat tiimit takertuvat pisteisiin ja menettävät kontekstin. Pistemäärä 65 voi olla täysin hyväksyttävä monimutkaiselle web-sovellukselle, jossa on reaaliaikaista dataa. Pistemäärä 95 voi silti tarjota huonon kokemuksen, jos optimoidaan vääriä asioita. Pisteet ovat tutkimisen lähtökohta, eivät onnistumisen mittari.

Mitä lukea ensin: Core Web Vitals

Ohita yleinen suorituskykypistemäärä. Vieritä alas Metrics-osioon ja katso kolmea lukua: Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS) ja Interaction to Next Paint (INP). Nämä ovat Core Web Vitals -mittarit, ja ne ovat ainoat suorituskykymittarit, joita Google käyttää sijoitussignaalina.

• LCP mittaa, kuinka kauan suurimman näkyvän elementin renderöinti kestää. Tavoite: alle 2,5 sekuntia. Jos arvo on yli 4 sekuntia, käyttäjät odottavat liian pitkään nähdäkseen merkityksellistä sisältöä.
• CLS mittaa visuaalista vakautta – kuinka paljon sivu hyppii latautuessaan. Tavoite: alle 0,1. Jos arvo on yli 0,25, käyttäjät klikkaavat vahingossa väärää asiaa, koska painikkeet liikkuivat.
• INP mittaa vastekykyä – kuinka nopeasti sivu reagoi klikkauksiin, napautuksiin ja näppäinpainalluksiin. Tavoite: alle 200 ms. Jos arvo on yli 500 ms, sivusto tuntuu tahmealta.

Nämä kolme mittaria korreloivat todellisen käyttäjien turhautumisen kanssa. Korjaa nämä ennen kuin huolehdit mistään muusta.

Mahdollisuudet vs. diagnostiikka: tunne ero

Lighthouse jakaa löydöksensä kahteen kategoriaan: Opportunities ja Diagnostics. Opportunities-kohteet on järjestetty arvioidun ajansäästön mukaan. Diagnostics-kohteet ovat lisäkontekstia – asioita, jotka voivat olla ongelmia, tai sitten eivät.

Aloita Opportunities-kohteista. Jos Lighthouse sanoo, että "Poista renderöintiä estävät resurssit" voisi säästää 1,2 sekuntia, se on konkreettinen voitto. Jos se sanoo, että "Vähennä käyttämätöntä JavaScriptiä" voisi säästää 0,1 sekuntia, refaktorointi ei todennäköisesti ole vaivan arvoista.

Diagnostics-kohteet ovat hankalampia. "Vältä liian suurta DOM-kokoa" kuulostaa pahalta, mutta jos CLS on kunnossa ja INP on nopea, suuri DOM ei välttämättä haittaa ketään. Diagnostiikka on vihjeitä, ei määräyksiä. Tutki ne, jotka liittyvät todellisiin mittareihisi.

Auditoinnit, jotka voit yleensä sivuuttaa

Osa Lighthouse-varoituksista on jäänteitä tai liian aggressiivisia. Tässä ovat ne, jotka aiheuttavat eniten tarpeetonta paniikkia:

• "Ei käytä passiivisia kuuntelijoita vierityksen suorituskyvyn parantamiseksi" — Tämä on mikro-optimointi, joka harvoin muuttaa kokonaiskuvaa. Ellei sinulla ole näyttöä nykivästä vierityksestä, ohita tämä.
• "Kuvaelementeillä ei ole eksplisiittistä leveyttä ja korkeutta" — Tällä on merkitystä CLS:n kannalta, mutta vain jos kuvat aiheuttavat asettelun siirtymiä. Jos CLS on jo hyvä, älä refaktoroi pelkän auditoinnin vuoksi.
• "Tarjoile kuvat seuraavan sukupolven formaateissa" — Kyllä, WebP ja AVIF ovat pienempiä. Mutta jos kuvasi on jo optimoitu ja LCP on nopea, tämä on mukava lisä, ei kriisi.
• "Vältä valtavia verkkokuormia" — Lighthouse merkitsee kaiken yli 1,6 MB:n. Mutta nopeasti latautuva 2 MB:n sivu on parempi kuin 500 KB:n sivu, joka estää renderöinnin. Keskity siihen, miten tavut toimitetaan, älä pelkkään kokonaismäärään.

Mitä tehdä, kun kaikki on punaista

Jos Lighthouse-pistemääräsi on alle 50 ja useimmat auditoinnit epäonnistuvat, kyse on todennäköisesti yhdestä kolmesta juurisyystä:

1. Optimoimattomat fontit. Web-fontit ovat yhä helpoin suorituskykyvoitto useimmilla sivustoilla. Tarkista, lataatko kuusi fonttipaksuutta, vaikka käytät vain kahta, tai toimitatko WOFF-tiedostoja WOFF2:n sijaan.
2. Renderöintiä estävä CSS ja JavaScript. Jos First Contentful Paint (FCP) on yli 3 sekuntia, jokin estää selainta maalaamasta sivua. Etsi suuria CSS-tiedostoja tai synkronisia skriptejä <head>-osasta.
3. Ylisuuret kuvat. Jos LCP-elementtisi on kuva ja sen koko on 4 MB, ongelma on siinä. Pakkaa se, käytä lazy-loadia taitteen alapuolisille kuville ja hyödynnä responsiivisten kuvien syntaksia.

Korjaa yksi näistä ja aja Lighthouse uudelleen. Näet usein 20–30 pisteen hypyn. Sen jälkeen tartu seuraavaan.

Laboratoriodata vs. kenttädata: todellisuustarkistus

Lighthouse toimii laboratoriossa. Se simuloi hidasta yhteyttä ja hidasta laitetta, mutta se ei pysty simuloimaan todellista käyttäytymistä – miten ihmiset vierittävät, mitä he klikkaavat tai ovatko he epävakaassa Wi-Fi-verkossa.

Todellisuustarkistusta varten vertaa Lighthouse-tuloksiasi Chrome User Experience Reportin (CrUX) kenttädataan. CrUX näyttää, miten todelliset Chrome-käyttäjät ovat kokeneet sivustosi viimeisten 28 päivän aikana. Jos Lighthouse sanoo LCP:n olevan 4 sekuntia mutta CrUX näyttää 2 sekuntia, luota CrUXiin. Jos molemmat ovat huonoja, sinulla on todellinen ongelma.

Löydät CrUX-datan PageSpeed Insightsista (Lighthousen verkkoversio) tai Google Search Consolesta kohdasta "Core Web Vitals." Jos tuloksissa on ristiriita, selvitä miksi. Ehkä todelliset käyttäjäsi ovat nopeammissa verkoissa. Ehkä Lighthouse testaa optimoimatonta kehitysversiota.

Milloin Lighthouse kannattaa ajaa uudelleen

Lighthouse on kohinainen. Aja se kolme kertaa peräkkäin, ja saat kolme erilaista pistemäärää jopa samalla sivulla. Tämä johtuu siitä, että suorituskyky vaihtelee – taustaprosessit, verkon vaihtelu ja selaimen heuristiikat vaikuttavat kaikki tulokseen.

Saat vakaamman lähtötason ajamalla Lighthousen incognito-tilassa kaikki laajennukset poistettuina käytöstä, tai käyttämällä CLI-työkalua --preset=desktop-lipulla johdonmukaisempien tulosten saamiseksi. Aja se kolme kertaa ja laske pisteiden keskiarvo. Jos näet suuria heilahteluja (yli 10 pistettä), jokin muu on pielessä – ehkä palvelin on hidas tai sivu lataa joka kerta eri resursseja.

Aja Lighthouse uudelleen jokaisen merkittävän muutoksen jälkeen. Otitko käyttöön uuden fonttistrategian? Tarkista LCP. Otitko kuville käyttöön lazy-loadin? Tarkista CLS. Lisäsitkö kolmannen osapuolen skriptin? Tarkista INP. Suorituskyky ei ole kertakorjaus; se on budjetti, jota puolustetaan.

Työkalut, jotka auttavat toimimaan Lighthouse-löydösten perusteella

Lighthouse kertoo, mikä on hidasta. Se ei aina kerro, miten se korjataan. Siihen tarvitset lisätyökaluja:

• WebPageTest antaa filmstrip-näkymän siitä, miten sivu latautuu ruutu ruudulta. Välttämätön LCP- ja CLS-ongelmien diagnosoinnissa.
• Chrome DevTools Performance panel näyttää tarkasti, mikä JavaScript estää pääsäiettä. Käytä sitä huonon INP-pistemäärän lähteen löytämiseen.
• Kuvien pakkaustyökalut antavat optimoida kuvat suoraan selaimessa, mikä on nopeampaa ja yksityisempää kuin niiden lataaminen kolmannen osapuolen palveluun. Asiakaspään kuvankäsittely on voitto yksityisyydelle, koska kuvasi eivät koskaan poistu koneeltasi.

Lighthouse on lähtöpiste. Nämä työkalut auttavat viemään työn loppuun.

Keskeiset opit

• Lighthouse-pistemääräsi on laboratoriovertailuarvo, ei mittari todellisesta käyttäjäkokemuksesta. Vertaa sitä CrUXin kenttädataan ennen kuin panikoit.
• Keskity ensin Core Web Vitals -mittareihin (LCP, CLS, INP). Nämä ovat mittareita, jotka korreloivat käyttäjien turhautumisen ja SEO-vaikutuksen kanssa.
• Priorisoi Opportunities-kohteet arvioidun ajansäästön mukaan. Sivuutä Diagnostics-kohteet, jotka eivät liity todellisiin suorituskykyongelmiisi.
• Osa auditoinneista – kuten passiiviset kuuntelijat tai seuraavan sukupolven kuvaformaatit – on mikro-optimointeja. Korjaa isot asiat ensin.
• Aja Lighthouse kolme kertaa ja laske tulosten keskiarvo. Suorituskyky vaihtelee, ja yksittäinen ajo voi johtaa harhaan.

FAQ

Q: Miksi Lighthouse-pistemääräni muuttuu joka kerta, kun ajan sen?
A: Lighthouse mittaa suorituskykyä vaihtelevissa olosuhteissa – verkon nopeus, CPU-kuorma ja selaimen heuristiikat vaikuttavat kaikki tulokseen. Aja se kolme kertaa incognito-tilassa ja laske pisteiden keskiarvo vakaamman lähtötason saamiseksi.

Q: Pitäisikö minun optimoida ensin mobiilille vai työpöydälle?
A: Mobiilille. Lighthouse käyttää oletuksena mobiilisimulaatiota, koska suurin osa verkkoliikenteestä on mobiilia ja mobiililaitteet ovat hitaampia. Jos mobiilipisteesi on hyvä, työpöytäpisteesi on yleensä myös kunnossa.

Q: Lighthouse-pistemääräni on 95, mutta sivusto tuntuu silti hitaalta. Mikä on vialla?
A: Lighthouse mittaa sivun latausta, ei vuorovaikutteisuutta latauksen jälkeen. Tarkista INP-pistemääräsi ja profiloi Chrome DevTools Performance panelilla, mitä tapahtuu, kun käyttäjät klikkaavat tai vierittävät. Sinulla voi olla JavaScript-ongelma, jota Lighthouse ei havaitse.

Q: Tarvitsenko täydellisen 100 pisteen tuloksen?
A: Et. Pistemäärä 90+ on erinomainen. Sadan pisteen tavoittelu tarkoittaa usein sellaisten asioiden optimointia, joilla ei ole käyttäjille merkitystä. Keskity todellisiin mittareihin – LCP, CLS, INP – ja sivuuta pistemäärä.

Q: Voinko luottaa Lighthouseen, jos käytän paljon kolmannen osapuolen skriptejä?
A: Lighthouse merkitsee kolmannen osapuolen skriptit ongelmaksi, mutta se ei aina pysty erottamaan välttämättömiä ja tarpeettomia toisistaan. Käytä "Vältä valtavia verkkokuormia"- ja "Vähennä JavaScriptin suoritusaikaa" -auditointeja pahimpien syyllisten tunnistamiseen ja päätä sitten, kannattaako ne pitää.

Lähteet

• "Lighthouse performance scoring" — Google Developers
• "Core Web Vitals" — web.dev
• "Chrome User Experience Report" — Google Developers
• "WebPageTest Documentation" — WebPageTest.org