Julkaistu

Lighthouse Audit on avoimen lähdekoodin työkalu, joka löytyy Googlen Chrome-selaimen uusimmista versiosta sisäänrakennettuna tai sen voi asentaa myös omalle koneelle ja ajaa komentoriviltä tai Node-moduulina. Lighthousella voi testata verkkosivuston toimintaa ja raportoi sivuston tehokkuuteen, käyttökokemukseen ja suositeltuihin käytäntöihin liittyviä asioita hieman samaan tyyliin kuin esim. Page Speed Insights. Testasimme Lighthousea ja katsoimme mitä sillä voi parantaa oman verkkosivuston toimivuutta.

Lighthouse Auditin käyttäminen

Lighthousea käytetään joko Chrome-selaimesta käsin tai sitä voi ajaa omalla tietokoneella komentoriviltä. Chromesta se löytyy kun avaa haluamansa verkkosivuston, painaa hiiren oikealla näppäimellä valikon auki ja valitsee siitä ”Inspect”. Inspectorista valitaan vielä Audits-välilehti, jolloin avautuu allaoleva näkymä.

Perform an audit -valinnan jälkeen valitaan vielä mitä testejä sivustolle halutaan ajaa. Normaalin verkkosivun tapauksessa Progressive Web App -valinnan voi ottaa pois päältä. Se pätee tilanteisiin, jossa sivustoon liittyy mobiiliapplikaatio. Lopuksi painetaan Run Audit ja odotellaan kun sivustoa tarkistetaan.

Vaihtoehtoisesti Lighthousen voi asentaa omalle koneelle Googlen ohjeiden mukaisesti ja ajaa sitä komentorivillä:

$ lighthouse sivusto.fi --view

Tämä ajaa testit ja avaa selaimeen samanlaisen HTML-raportin, mikä Chromen inspectorissakin näkyy.

Lighthousen tulosten tulkitseminen

Sivuston tarkistettuaan Lighthouse näyttää raportit löydöksistä ja pisteyttää sivuston nopeuteen, käytettävyyteen ja tekniseen toteutukseen liittyviä asioita. Aloitimme tutkimukset omasta kotipesästä ja ajoimme Lighthousea omaa seravo.com-sivustoamme vasten. Alkutilanteessa Lighthousen raportti näytti tältä.

Sivuston nopeuden suhteen testi näyttää olevan jossain määrin epämääräinen. Kun testin ajoi monta kertaa peräkkäin, Performance kohta vaihteli 0 ja 50 pisteen välillä. Tähän emme keksineet syytä.
Parannettavaa Lighthouse kyllä löysi sivustosta, tosin näihin kuten Page Speed Insightsin ehdotuksiinkin kannattaa paneutua ajatuksella ja miettiä ja testata mistä asioista on todella hyötyä sivuston toiminnan kannalta. Digitoimisto Dudella on hyvä kirjoitus Page Speed Insightsin tuloksien tulkinnasta. Olemme heidän kanssaan samaa mieltä asiasta.
Meille Lighthouse suosittelee mm. seuraavanlaisia asioita.

  • Kuvien muuttaminen pakattuun WebP-formaattiin. WebP on uusi kuvaformaatti, joka pakkaa kuvia paremmin kuin nykyiset JPEG- ja PNG-formaatit, eli kuvien tiedostokoko on pienempi ja niiden lataaminen luonnollisesti nopeampaa. Ainoa selain, joka kuitenkin tämän artikkelin kirjoitushetkellä tukee kunnolla WebP:tä, on Chrome, joten toistaiseksi sivuutamme tämän vinkin.
  • Kuvien optimointi (pienentäminen, pakkaaminen) muuten. Tämä on aina hyvä idea. Kuvat kannattaa pienentää sopivaan käyttökokoon. Mitä se missäkin yhteydessä on, on hankalaa sanoa, mutta ainakin kameroiden tuottamat 5000px – 10000px pitkältä sivulta kuvat ovat webbikäyttöön aivan liian suuria. Koko sivun levyisiinkin kuviin yleensä riittää 2000px leveä kuva, ikoneihin ym. kuvitukseen huomattavasti pienempi. WP-palvelun sivustoilla on käytössä Seravo-lisäosa, joka sisältää myös kuvien optimointiominaisuuden, jonka voi laittaa päälle WordPressin hallintanäkymästä (kohdasta Tools > Optimize images). Jo omalla tietokoneella ennen WordPressiin siirtämistä kuvia voi optimoida esim. komentorivityökaluilla jpegoptim ja optipng, tai Macin GUI-työkalulla ImageOptim ja sen Windows ja Linux vastineilla, jotka löytyvät samalta sivustolta.
  • Kuvien lataaminen vasta kun ne tulevat skrollatessa näkyviin (ns. lazy loading). Tätä varten sivustolle voi asentaan WP-lisäosan Lazy Load, joka automaattisesti hoitaa asian.
  • Tyylitiedostojen ja JavaScriptien lataaminen  myöhemmin, vasta kun niitä käytetään. Usein nämä ladataan sivun HTML-head -osassa ja niiden siirtäminen esim. sivun loppuun saattaa aiheuttaa ns. FOUC (flash of unstyled content) ilmiön, eli sivu latautuu ensin oletustyyleillä ja vasta koko sivun latauduttua tulevat käyttöön omat määritellyt fontit ym. Muutaman testityökalupisteen takia tätä muutosta ei välttämättä kannata tehdä, jos sivusto muuten toimii nopeasti.

Summa summarum

Kuten Page Speed Insightsin tapauksessakin, Lighthouse Audit testaa sivustolta Googlen suosittelemia käytäntöjä ja antaa ohjeita miten niissä havaittuja asioita voisi parantaa. Kummankin suosituksiin tulee suhtautua suuntaa antavasti ja käyttää harkintaa mitkä asiat todella ovat oman sivuston toimintaa parantavia. Lighthouse Audit saattaa olla hyödyllinen työkalu sivustokehittäjille, varsinkin kun se kätevästi löytyy Chromen Inspctorista, mutta sokeasti kaikkea senkään suosittelemaa ei kannata tehdä.
Hämmentävää oli myös se, että tehdyt toimenpiteet, esim. lazy load -lisäosan käyttöönotto ja kuvien optimointi, eivät muuttaneet Lighthousen tulosta mitenkään.
Sivuston nopeudesta puhuttaessa, kannattaa tutustua myös kirjoitukseemme Nginx-palvelimen PageSpeed modulista, (mitä ei tule sekoittaa Page Speed Insightsiin samanlaisesta nimestä huolimatta), sen käyttöönottoon löytyy ohjeita dokumentaatiostamme.
 

Kommentoi

Lue lisää

Kategoriassa: Kehittäjille

PHP 8.2 pian saatavilla

PHP 8.2 on pian kehittäjien saatavilla Seravon WP-palvelussa. Suosittelemme sivustoilla käytettäväksi PHP8:aa – ainakin toistaiseksi!

helmikuu 3, 2023

PHP-päivitykset Seravon WP-palvelussa

Vuonna 2022 Seravon WP-palvelussa siirryttiin käyttämään oletusarvoisesti PHP 8.0:aa, eli se on automaattisesti käytössä uusilla sivustoilla. Myös PHP 8.1 on ollut palvelussamme saatavilla, ja 8.2 pian käytettävissä.

tammikuu 25, 2023

PHP 8.0 käyttöön oletuksena

PHP 8.0:sta tulee oletusversio Seravon WP-palvelussa, myös PHP 8.1 on saatavilla!

tammikuu 7, 2022

Varmista sivustosi toimivuus, vaikka internet hajoaisi

Kun somejätti on offline, voi tällä olla odottamattomia vaikutuksia sivuston toimintaan. Lue vinkkimme ja varmista, että sivustosi latautuu, vaikka ulkoiset palvelut eivät toimisikaan!

lokakuu 8, 2021

Webinaari: Hakutoiminnon toteuttaminen ja räätälöinti WordPressissä

Seuraava Seravon webinaari järjestetään torstaina 14. tammikuuta, aiheena WordPressin hakutoiminto. Kuinka haku toimii, ja miten sitä kannattaisi räätälöidä isommilla sivustoilla?

joulukuu 23, 2020

PHP 8.0 julkaistu, Seravo tukenut sen kehitystä

Ohjelmointikieli PHP:n uusi versio PHP 8.0 on julkaistu tänään 26.11.2020. Suurin osa WordPress-julkaisujärjestelmästä on kirjoitettu PHP:lla, joten tällä on pitkällä aikavälillä olennainen vaikutus WP-ekosysteemiin.

marraskuu 26, 2020