Google suosii hakukonetuloksissaan verkkosivuja, joita se pitää teknisesti laadukkaana.
Verkkosivustolla ei ole mitään virkaa ilman asiallista sisältöä. Siksi hakukoneoptimointi on perinteisesti keskittynyt sivuston tekstisisältöön.
Vuonna 2020 Google ilmoitti kuitenkin alkavansa painottaa verkkosivuston käyttökokemusta hakutuloksissaan. Se perusteli päätöstä sillä, että käyttäjät suosivat nopeasti lataavia ja kannettavilla laitteilla hyvin toimivia sivustoja. Google on siis ryhtynyt mittaamaan verkkosivuston suoriutumiskykyä arvioidessaan sen merkittävyyttä hakutuloksena.
Verkkosivustojen tekniseen laatuun keskittyvä päivitys on ollut tuotannossa jo elokuusta. Uudistuksen keskellä yksi asia on muuttumaton: Google on monopoli eikä muiden hakukoneiden mielipiteillä ole optimoinnin kannalta mitään käytännön merkitystä.
Siksi viimeistään tänään on syytä tehdä läksyt, jotka kuningas Google on määrännyt.
Googlen etu on se, että verkossa on paljon laadukasta sisältöä, josta hakukoneen käyttäjät voivat löytää mieleisensä. Siksi Google kertoo avoimesti, miten se arvioi sisältösi teknistä laatua ja antaa korjausehdotuksia yksilöidysti verkkosivustollesi PageSpeed Insights -testillä, joka on osa laajempaa Lighthouse-testiä.
Yleinen käytännön nyrkkisääntö on se, että teknisesti yksinkertaisempi käyttöliittymätoteutus on parempi kuin monimutkainen.
Ennen kuin pureudun Googlen käyttämiin suureisiin on hyvä hetki laittaa taustalle jurnuttamaan PageSpeed Insights tai laajempi Lighthouse-testi.
Jos haluat suorittaa Lighthouse-testin omalla Chrome-selaimellasi, avaa kehittäjätyökalut verkkosivuillasi, valitse “Lighthouse”-välilehti ja paina “Generate report”. Huomioi, että omalla selaimella tehdyn Lighthouse-testin tulokset ovat riippuvaiset työasemasi suorituskyvystä. Ota myös mainosten torjunta pois päältä, jotta voit katsoa totuutta silmiin.
Core Web Vitals on Googlen nimitys kolmelle sivuston laskennalliselle suureelle, jotka vaikuttavat silminnähtävästi loppukäyttäjän käyttäjäkokemukseen.
Luettelen ensin ne tavanomaiset konstit ja konnankoukut, joiden oletan jo lähtökohtaisesti olevan käytössä:
Seuraavaksi yritän avata mahdollisimman helposti käsitettävästi, mitä Core Web Vitals -suureet ovat, ja mikä ne useimmiten pilaa. Vaikka PageSpeed Insight antaakin suoria kehoituksia, kuten “vähennä käyttämätöntä JavaScriptiä”, “poista renderöinnin estävät resurssit” ja “minimoi pääsäikeen työkuorma”, ymmärrys siitä, mitä niillä tarkoitetaan, ja keinot puuttua ongelmiin saattavat joskus olla hakusessa.
LCP on suure, joka mittaa sivuston latausnopeutta. Se etsii heti sen päätteellä näkyvän sisällöllisen elementin, joka piirtyy loppukäyttäjän päätteelle suurimpana. LCP-suure siis mittaa aikaa, joka kuluu sivuston avaamisesta sen ensimmäisen vierityksen suurimman sisällöllisen elementin piirtymiseen näytölle. Tavoiteaika on 2,5 sekuntia tai vähemmän.
FID on suure, joka mittaa sivuston vuorovaikutteisuutta. Syötteen viive tarkoittaa sitä aikaa, joka kuluu käyttäjän vuorovaikutuksesta siihen, että selain ehtii aloittaa syötteeseen vastaamisen. Käytännössä syöteviive syntyy siitä, että selain on ehtinyt piirtää elementin, mutta ei ole valmis käsittelemään sen käpistelyä. Tavoiteaika on 0,1 sekuntia tai vähemmän.
Käytännössä poikkeuksetta kyse on siitä, että selaimella on kiire pureskella JavaScriptiä megatavuttain, eikä se siten ehdi reagoimaan käyttäjäsyötteeseen.
CLS on suure, joka mittaa sivuston visuaalista vakautta. Layout Shift eli ulkoasun siirtyminen syntyy siitä, että sivuston latautuessa ulkoasun elementit, kuten teksti, kuvat ja napit, siirtyvät alkuperäiseltä paikaltaan. Mitä enemmän elementit siirtyvät, sitä suurempi on CLS. Tavoite on 0,1 tai vähemmän. Koska CLS on ennalta-arvattava ja johdonmukainen, en koe mielekkääksi lähteä tässä avaamaan, miten CLS-suure lasketaan, mutta saatat haluta lukea Googlen kuvauksen siitä. Haaste on ennemminkin ottaa tavaksi huomioida CLS jo ennen kuin Google antaa siitä piiskaa.
Debuggaa CLS-suuretta Chromen kehittäjätyökaluilla.
Kun olet määrittänyt Chromen näyttämään ulkoasun elementtien siirtymät, ne välähtävät sivulatauksen aikana sinisenä.
FCP mittaa, kuinka kauan kuluu sivuston ensimmäisen elementin piirtämiseen näytölle. Tavoiteaika on alle 1,8 sekuntia. Yleisin sudenkuoppa tässä on 3. osapuolen palvelusta ladattavan fontin hidas latautuminen. Käytämällä CSS-sääntöä font-display: swap; kerrot selaimelle, että se saa käyttää järjestelmäfonttia odotellessaan lopullisen fontin latautumista.
Yleisellä tasolla fonttien tehokas tarjoilu ei ole kovin helppoa. Vinkkejä Google Fontsista ladattavan fontin latausnopeuden optimointiin.
TTI mittaa, kuinka nopeasti syöteviive on alle 0,05 sekuntia. Tavoiteaika on alle 3,8 sekuntia. Sitä mukaa kun suoritettava JavaScript vähenee, TTI kohenee.
Nopeuden suhdeluku mittaa sitä, kuinka nopeasti sisältö on näkyvissä. Optimoimalla FCP:n ja TTI:n olet optimoinut nopeuden suhdeluvun. Tavoiteaika on alle 3,4 sekuntia.
TBT mittaa sitä, kuinka pitkään aikaan sivusto ei yhteensä pysty vastaanottamaan käyttäjäsyötteitä. Tähän suureeseen ynnätään kaikki aika, jonka sivusto käyttää yli 0,05 s. kestävän syötteen käsittelyyn. Tavoite on alle 0,2 sekuntia. TBT on jälleen yksi niistä suureista, joita parannat optimoimalla ja vähentämällä JavaScriptiä.
Kuten olen aiemmin maininnut, PageSpeed Insight on vain osa laajempaa Lighthouse-testausta. Lighthouse ottaa kantaa sivuston suoriutumiskyvyn lisäksi myös saavutettavuuteen, parhaisiin käytäntöihin eli käytännössä tietoturvaan ja virheettömyyteen ja hakukoneystävällisyyteen. Sivuston suoriutumiskyvyn optimointi voikin olla luontevaa paketoida osaksi laajempaa hakukonenäkökulmasta tehtävään päivitystyöhön.
Miksi sitten kaikki Crasmanin toteuttamat sivustot eivät saa Googlen suorituskykymittauksessa täysiä pisteitä? Yksinkertaisesti siksi, että se ei ole sitä, mitä asiakkaamme meiltä ostavat.
Yleiset verkkosivuston hallintajärjestelmät kuten Wordpress, Magento ja Hubspot sisällyttävät sivustolle JavaScriptiä, jolle emme toimittajana voi yhtään mitään. Crasman Stage ei sellaisenaan sisällytä sivustolle JavaScriptiä, vaan se on kokonaisuudessaan kehittäjän hallussa – lukuun ottamatta mahdollisia Tag Manager -lisäyksiä.
Nykyaikaisen verkkokehityksen sivuston suoriutumiskykyyn liittyvät helmasynnit eivät ole syntyneet itsestään, vaan pyrkimyksistä vastata verkkosivuston tilaajien ja loppukäyttäjien tarpeisiin.
Laajan sivustokokonaisuuden kehittämistyön budjetti pysyy ihmismielen käsityksen ja sietokyvyn rajoissa vain hyödyntämällä valmista open source -koodia. Chat-työkalut on nähty hyödylliseksi sekä asiakaspalvelu- että myyntityön tukena. Hyötyjen on koettu peittoavan haitat.
Verkkosivustojen visuaalinen vaikuttavuus on keino korostaa omaa brändiä ja tehdä myönteistä eroa kilpailijoihin. Sosiaalisessa mediassa tehtävä mainonta on äärimmäisen tehokasta, mutta vaatii toimiakseen yhtä sun toista seurantaskriptiä ja -pikseliä sivustollesi.
On siis hyvä pitää mielessä, että hakukonenäkyvyys on vain pieni osa verkkosivuston kokonaisuutta ja siitä taas sivuston suorituskyky niin ikään pieni osa.
Tärkeintä kaikessa verkossa tehtävässä liiketoiminnassa on loppupeleissä palvella asiakasta mahdollisimman hyvin tarjoamalla heille sisältöä, jota he haluavat. Ei ole myöskään mielekästä tehdä liiketoimintaa verkossa, mikäli sen kustannukset nousevat niin korkeiksi, ettei sen tuoma kauppa kata niitä.
PS: Jos haluat jutella oman verkkopalvelusi kehittämisestä, niin kliksuttele alla olevaa nappia!