Google Lighthouse on työkalu, joka auttaa verkkopalvelun nopeuden, löydettävyyden, käytettävyyden ja saavutettavuuden optimoinnissa. Kuinka sitä käytetään, ja miten tuloksia kannattaa tulkita?

Pureuduin edellisessä blogitekstissäni Googlen ensi vuoden suureen hakualgoritmipäivityksen, jonka myötä verkkopalvelun käyttökokemus nousee teknisen toteutuksen ja sisällön rinnalle merkittäväksi hakukonelöydettävyyteen liittyväksi tekijäksi.

Tämä teksti käsittelee Google Lighthouse -työkalua, joka auttaa paikantamaan ja parantamaan nimenomaan verkkopalvelun käyttökokemukselle tärkeitä ominaisuuksia. Tulosten lisäksi on tärkeä ymmärtää, kuinka niitä kannattaa tulkita.

100/100 pistettä Lighthouse-testissä on käytännössä kaikkien verkkopalveluiden osalta pelkkä haave, mutta lähelle voi pyrkiä.

Tulossa on tuhti paketti – jos haluat hypätä yhteenvetoon, klikkaa tästä :D

Mikä on Google Lighthouse?

Lighthouse on Googlen kehittämä avoimen lähdekoodin työkalu, joka auttaa verkkopalvelun nopeuden, löydettävyyden, käytettävyyden ja saavutettavuuden optimoinnissa.

Olet ehkä testannut verkkopalvelusi nopeutta käyttämällä Google PageSpeed Insights -sivustoa, mutta näppärämpi tapa on ajaa testi suoraan Google Chrome -selaimessa käyttämällä sisäänrakennettua DevTools-työkalua.

DevToolsin käytössä on se hyvä puoli, että voit testata myös sivustoa, joka ei ole julkisessa verkkoympäristössä.

Kun käytössäsi on Google Chrome -selaimen uusin versio, löydät Lighthouse-työkalun suoraan DevTools -päävalikosta. DevTools-työkaluihin pääset joko klikkaamalla sivua hiiren oikealla painikkeella ja valitsemalla ”Tarkista” tai valitsemalla Chromen päävalikosta ”Näytä” --> ”Kehittäjälle” --> ”Kehittäjän työkalut”. 

 

crasman-blog-google-lighthouse-start-min

Lighthouse -työkalu löytyy uusimmassa Chrome-selaimessa suoraan DevTools-valikosta. Lighthousesta on myös saatavilla Google Chrome -selainlaajennus.

Lighthouse -testi simuloi tosielämän hidasta nettiyhteyttä

Jotta Lighthouse-testi olisi mahdollisimman realistinen, työkalu näkee verkkopalvelun kuten keskiverto, hieman laiska mobiililaite. Lisäksi testi ajetaan myös pätkivää 3G-yhteyttä simuloiden.

Oletusasetuksilla Lighthouse skannaa oleelliset sivuston nopeuteen ja käytettävyyteen vaikuttavien seikkojen osalta. Raportti ajetaan yksinkertaisesti painamalla ”Generate Report” -painiketta.

Suosittelen ajamaan testin useampaan kertaan, koska tulokset voivat vaihdella paljonkin. Heittelyt voivat johtua esimerkiksi siitä, että sivusto käyttää paljon 3. osapuolen koodiresursseja, kuten seurantaskripteja ja -tageja.

Kuinka Lighthouse -raportin tuloksia kannattaa tulkita? Valokeilassa Crasman.fi 

Siirrytäänpäs rohkeasti itse asiaan ja tutkitaan sen kuuluisan suutarin lapsen kenkiä. Käyn läpi crasman.fi-sivuston skannauksen, joka on toteutettu 15.6. DevToolsin Lighthouse -testillä. Testi on ajettu oletusasetuksilla, eli mittaristo jakautuu viiteen kategoriaan.

  1. Performance. Sivuston nopeus ja suorituskyky mittaa sitä, kuinka nopean käyttökokemuksen sivusto antaa käyttäjälle.
  2. Accessibility. Saavutettavuus mittaa sitä, kuinka hyvin sivusto palvelee käyttäjiä, joilla on erityistarpeita kuten heikentynyt näkö.
  3. Best Practises. Parhaat käytännöt -kategoria analysoi sivuston koodia ja siellä mahdollisesti piileviä virheitä, jotka voivat pahimmillaan aiheuttaa käyttäjälle tietoturvariskin tai turhaa hitautta.
  4. SEO. Search Engine Optimation eli hakukoneoptimointi mittaa sivuston teknistä valmiutta hakukoneoptimoinnissa. Se kertoo, onko sivustolta unohtunut jokin hakukonelöydettävyydelle merkittävä tekijä, kuten metatiedot. Lighthouse SEO ei siis anna sinulle avainsana- tai kilpailija-analyysiä :)
  5. Progressive Web App (PWA) -mittarin jätämme tässä vaiheessa oman onnensa nojaan, koska Crasmanin verkkopalvelun ei ole tarkoitus toimia mobiiliapplikaation tavoin. Jos aihe kiinnostaa, löydät lisätietoa täältä.

Sitten pureudutaan Crasman.fi-sivuston tuloksiin.


Elements Console Sources Network Lighthouse-min

 

Performance - Sivuston nopeuteen vaikuttavat tekijät

Sivuston latausnopeus on yksi merkittävin Performance-mittariin vaikuttava tekijä. Sivuston kokoa ei mitata yhtenä könttänä. Tärkeää on, kuinka nopeasti sivun tärkeimmät, ensimmäiset elementit piirtyvät selaimeen ja että sivu on käyttökunnossa.

Mittaristo koostuu kuudesta osasesta, jotka kaikki vaikuttavat kokonaisarvoon (0-100).

  • First Contentful Paint eli FCP mittaa, kuinka nopeasti selain piirtää ensimmäiset sisällöt näytölle. Tähän sisältyvät kuvat ja muut graafiset elementit (<canvas> ja SVG-grafiikat). Mitään iframe-upotuksien sisältöä ei mittaroida.
  • Speed index mittaa, kuinka nopeasti sisältö piirtyy ruudulle sivulatauksen aikana. Sivuston sisällöstä pitää siis saada tolkkua, vaikka lataus olisi vielä kesken.
  • Largest Contentful Paint eli LCP on uunituore mittari, joka laskee kuinka pitkään sivuston suurin ja raskain sisältöelementti, kuten kuva tai video, latautuu. Siinä missä FCP mittaa ensimmäisen sisällön latautumista, LCP antaa kenties realistisemman kuvan siitä, kuinka nopeaksi käyttäjä kokee sivuston latautumisen.
  • Time to Interactive eli TTI on sivuston toimivuuden nopeusmittari. Se kertoo, kuinka nopeasti sivuston käyttöliittymäelementit reagoivat klikkauksiin. Kynsille siis tulee, jos navigaatio latautuu nopeasti, mutta klikatessa ei tapahdu mitään.
  • Total Blocking Time eli TBT on aika, joka kuluu FCP- ja TTI -vaiheiden välillä. Hyvä FCP-arvo menee siis hukkaan, jos sivuston käyttöliittymä ei kuitenkaan ole vielä toimiva.
  • Cumulative Layout Shift eli CLS mittaa sivuston sisältörakenteessa tapahtuvia muutoksia sivulatauksen aikana. Tästä voit lukea enemmän edellisessä blogikirjoituksessani.

Crasman.fi-tulokset

Ruudunkaappauksessa nähtävä tulos on OK-suoritus, joskaan ei täydellinen. Performance-mittari alkaa hipoa vihreän rajaa, mutta useita testejä ajettuani huomasin, että tulos vaihtelee melkoisesti, enkä saanut mitään stabiilia lukemaa aikaiseksi.

Osasyynä on verkkopalvelun taustamoottorina toimiva Hubspot CMS, joka lataa melkoisen läjän 3. osapuolen JS-koodia ulkoisista lähteistä. Tärkeimpänä yksittäisenä kehityskohteena esiin nousee Time To Interactive eli TTI-ajan lyhentäminen.

Yleisenä vinkkinä latausajan nopeuttamiseen suosittelen sivustolle kertyneiden seurantaaskriptien ja -tagien tutkimista ja turhien poistoa.

Myös skriptien latausjärjestyksellä on suuri merkitys: ladataanko skripti heti sivun alussa? Jos kyllä, voiko sen lataamista siirtää myöhemmäksi ilman, että sivuston toiminnallisuus kärsii?

Accessibility - Saavutettavuus

Keväällä 2019 voimaan tullut laki digitaalisten palveluiden tarjoamisesta velvoittaa julkisen sektorin lisäksi tiettyjä yksityisen sektorin toimijoita noudattamaan WCAG 2.1. AA-tason mukaista saavutettavuutta.

Lain tavoitteet ovat:

  • Varmistaa sisältöjen saavutettavuus myös avustavilla teknologioilla, kuten ruudunlukuohjelmilla.
  • Varmistaa sivuston käytettävyys riippumatta näkörajoitteista tai muista esteistä.
  • Varmistaa sisällön toistuminen oikein eri päätelaitteilla.

Suunnittelujohtajamme Teemu Korpilahti on kirjoittanut saavutettavuudesta hyvän artikkelin. Artikkelin lopusta löydät myös syventävän oppaan.

Crasman.fi-sivuston saavutettavuuden osalta parannettavaa olisi esimerkiksi käyttöliittymäelementtien nimeämisissä ruudunlukuohjelmia ajatellen ja värien riittävässä kontrastissa.

Best Practises – Parhaat käytännöt

Tämä mittari sisältää melkoisen määrän koodaamisen laatuun liittyviä käytänteitä ja tekniikoita. Kattavan listauksen löydät täältä. Nopeasti referoiden kyse on näistä osatekijöistä:

  • Sovellusvälimuistia (application cache) ei käytetä, koska se on vanhentunutta tekniikkaa.
  • HTTPS-yhteys on käytössä ja linkitykset ulkoisiin verkkopalveluihin ovat turvallisia.
  • Sivustolle ei injektoida koodia document.write(); -komennolla.
  • Sivusto ei kysele geo-lokaatiota, eikä lupaa notifikaatioille sivulatauksen yhteydessä.
  • HTML-dokumentti on määritelty oikein.
  • Sivusto ei käytä deprekoituneita eli käytöstä poistuneita ohjelmistorajapintoja.
  • Sivusto ei generoi selainvirheitä.
  • Kuvat ladataan oikeassa koossa suhteessa käytössä olevaan päätelaitteeseen.

Crasman.fi:n osalta saamme huoumautuksen käytössä olevien Javascript -kirjastojen (Bootstrap 3.3.6 ja jQuery 3.3.1) osalta. Kyseiset kirjastot ovat erittäin suosittuja ja laajalti käytössä, mutta Lighthouse näkee nämä resurssit jonkinasteisena tietoturvariskinä. Huomautus on meidän tapauksessa aiheellinen, koska molemmista koodikirjastoista on päivitetyt versiot --> tämä tietää koodarille töitä 😀

SEO - Hakukoneoptimointi

Aah - lempiaiheeni, mutta Lighthousen testi ei ota kantaa hakukoneoptimointiin sisällön näkökulmasta, vaan puhtaasti teknisestä vinkkelistä.

Testissä tarkistetaan tietyt tekniset määritykset, joilla on vaikutusta siihen, miten Google näkee sivun sisällöt. SEO-mittari tutkii muun muassa seuraavia osatekijöitä:

  • Sivu on mobiilioptimoitu, eli <meta name=”viewport”> on määritelty oikein ja sisältää oikeat width tai initial-scale -arvot eri kokoisille päätelaitteille.
  • Metatiedot (title ja description) on määritelty – nämähän ovat Google-hakutulosnäkyvyyden kannalta kaksi oleellisinta SEO-tekijää.
  • Sivu latautuu oikein ja indeksoituu hakukoneisiin, tai jos osoite on muuttunut, ohjaa uuteen paikkaan (HTTP-status + robots.txt).
  • Sivulle on määritelty oikea kieliversio (hreflang) ja jos sivulla on lähes samankaltainen ”kaksoisolento”, rel=canonical -määritykset on tehty oikein.
  • Sivulle on määritelty riittävän kokoinen kirjasintyyppi ja klikattavat elementit ovat riittävän suuria
  • Sivu ei esitä sisältöä Java- tai Flash -tekniikalla.

Crasmanin sivuston osalta puutteita näyttäisi olevan kuvan sisältöä kuvailevien ALT-tunnisteiden osalta. 

Yhteenveto: verkkopalvelun nopeuden merkitys hakukoneoptimoinnissa

Verkkopalvelun nopeuteen vaikuttavia tekijöitä on paljon ja ne kaikki vaikuttavat toisiinsa, joten yksiselitteistä ohjeistusta sivuston nopeuttamiseksi on mahdoton antaa. Päivänselvää on se, että Google painottaa hakutuloksissaan nyt ja tulevaisuudessa nopeita sivuja hitaiden edelle, joten nopeusoptimointia tulee tehdä systemaattisesti. 

Selkeimpiä sivuston latausnopeuteen vaikuttavia tekijöitä ovat niin sanotut pakolliset resurssit, joita ilman sivu ei toimi tai sisältö ei näy. Sivun renderöinti eli näytölle piirtyminen tarvitsee yleensä CSS- ja Javascript-tiedostoja, jotka latautuessaan estävät sivun esittämisen.

Joskus näistä resursseista voi muodostua ei-toivottuja esteitä latautumiselle – etenkin jos ne eivät ole ensimmäisenä näkyvän sisällön osalta välttämättömiä. Tässä tilanteessa niiden latautumista kannattaa lykätä myöhemmäksi sivulatauksen loppuun.

Ehkäpä yksi oleellisin vinkki verkkopalvelun nopeuden kehittämiseen on kuvien optimointi, joka usein saattaa yksinkertaisesti unohtua sisällönsyöttäjältä.

Kokeile siis Lighthouse-testiä, jos et vielä ole sitä tehnyt! Muitakin testejä löytyy: esimerkiksi GTmetrix on suosittu ja luotettava testi.

Aurinkoista kesää toivotellen,
Mika

PS: Jos haluat jutella oman verkkopalvelusi kehittämisestä, niin kliksuttele alla olevaa nappia!

Ota yhteyttä


Mika Sormunen avatar