Määrittele ensin, mikä tuntuu hitaalta
Tyhjä ruutu ennen sisällön näkymistä on eri ongelma kuin valikko, joka avautuu viiveellä. Myös sivun hyppiminen latauksen aikana voi tuntua hitaudelta, vaikka teksti tulisi nopeasti näkyviin. Kirjaa siksi havainto konkreettisesti: millä sivulla, millä laitteella ja minkä toiminnon yhteydessä ongelma ilmenee.
Vertaa ensimmäistä käyntiä ja palaavaa käyntiä. Selaimen välimuisti voi tehdä omasta testistäsi huomattavasti uuden asiakkaan kokemusta nopeamman. Tarkista myös sivutyypit erikseen. Kevyt yhteystietosivu ei kerro, miten suuri referenssikaruselli tai verkkokaupan tuotelista toimii. Mittauksen tarkoitus on paikantaa pullonkaula, ei valita sivua, joka antaa parhaat pisteet.
Kuvat, fontit ja ulkoiset palvelut
Suuri herokuva voi hidastaa tärkeimmän sisällön näkymistä, mutta tiedostokoko on vain yksi osa ongelmaa. Jos selain löytää kuvan vasta muiden tiedostojen lataamisen jälkeen, pieni kuva voi silti tulla myöhään. Googlen LCP-optimoinnin ohje käsittelee muun muassa resurssin löytymistä ja latauksen viiveitä. Näkyvän pääkuvan viivästetty lataus voi siirtää sen näkymistä tarpeettomasti.
Fonttien määrä ja ulkopuoliset skriptit vaikuttavat myös kokonaisuuteen. Arvostelut, analytiikka, keskusteluikkunat ja varauspalvelut voivat kaikki olla hyödyllisiä, mutta jokaisella pitää olla tehtävä. Tarkista, latautuuko sama palvelu kahdesti tai alkaako sivun raskain toiminto heti, vaikka käyttäjä ei vielä tarvitse sitä. Poistaminen ei ole ainoa vaihtoehto; myös latausajankohtaa voi muuttaa.
Palvelimen vaste ja välimuisti
Jos palvelimen vastausta odotetaan pitkään, kuvien pakkaaminen ei korjaa koko viivettä. Taustalla voi olla hidas tietokantakysely, raskas lisäosa tai sivu, jota ei voida palvella välimuistista. Mittaa siksi ensimmäisen vastauksen odotus erikseen sisällön latautumisesta. Muutoin optimointi kohdistuu helposti näkyvimpään mutta vähiten vaikuttavaan osaan.
Välimuisti voi nopeuttaa usein katsottuja sivuja, mutta sen säännöt pitää sovittaa toimintoihin. Ostoskoria, kirjautuneen käyttäjän tietoja tai muuta henkilökohtaista sisältöä ei saa näyttää väärälle kävijälle. Myös sisältömuutosten pitää tulla näkyviin hallitusti. Nopeusratkaisun onnistumiseen kuuluu siis sekä latauksen että sisällön oikeellisuuden tarkistus.
Laboratoriotesti ja oikeiden kävijöiden kokemus
Laboratoriotesti toistaa sivun latauksen määritellyllä laitteella ja yhteysasetuksella. Se auttaa löytämään ongelmia ja vertaamaan korjauksia. Kenttätieto puolestaan kuvaa oikeiden käyttäjien kokemuksia saatavilla olevassa aineistossa. Näitä ei pidä käsitellä toistensa suorina korvikkeina. Yksittäinen testiajo voi vaihdella, eikä kaikista pienistä sivuista ole riittävästi kenttätietoa.
Core Web Vitals tarkastelee latautumista, vuorovaikutusta ja näkymän vakautta. Mittarit auttavat jäsentämään kokemusta, mutta asiakkaan varaus tai tarjouspyyntö voi silti epäonnistua aivan muusta syystä. Siksi suorituskykymittaus yhdistetään tärkeimpien toimintojen käyttötestiin. Hyvä pistemäärä ei itsessään todista toimivaa myyntipolkua.
Korjaa vaikuttavin kohta ja mittaa uudelleen
Aloita ongelmasta, joka estää sisällön näkymisen tai asioinnin. Tee rajattu muutos ja vertaa samaa sivua samoilla asetuksilla. Jos vaihdat kerralla palvelimen, kuvat, teeman ja kaikki lisäosat, et tiedä, mikä muutos auttoi tai rikkoi toiminnon. Kirjaa testissä käytetty näkymä, välimuistitila ja testikertojen vaihtelu.
Tarkista korjauksen jälkeen myös visuaalinen laatu. Liian voimakas kuvapakkaus voi tuhota työnäytteen yksityiskohdat, ja tekstin liian myöhäinen lataus voi aiheuttaa hyppimistä. Hyvä optimointi säilyttää sivun tarkoituksen. Kuvien optimoinnin artikkelissa käsittelemme erikseen kuvan rajauksen, koon ja vaihtoehtoisen tekstin valintoja.
Esimerkki: miksi sama kuva voi latautua eri aikaan?
Ajatellaan kahta muuten samanlaista sivua. Ensimmäisessä pääkuva on heti sivun rakenteessa. Toisessa ulkoinen ohjelma lisää sen vasta käynnistyttyään. Vaikka kuvatiedostot olisivat yhtä suuret, toisella sivulla selain voi aloittaa latauksen myöhemmin. Tiedostokoon pienentäminen auttaa molempia, mutta se ei poista jälkimmäisen sivun löytämisviivettä.
Tämä on havainnollistava tekninen esimerkki, ei mitattu asiakastulos. Todellisessa tutkimuksessa verrataan resurssien latausjärjestystä ja pääsisällön ilmestymistä ennen muutosta ja sen jälkeen. Vertailusta pitää käydä ilmi myös, käytettiinkö samaa yhteysnopeutta ja tyhjää välimuistia. Näin tulos voidaan toistaa eikä parannus perustu yhteen poikkeuksellisen nopeaan ajoon.
Animaatiot ja ulkoiset palvelut osaksi nopeuspäätöksiä
Näyttävä sivu voi olla nopea, mutta jokaisen liikkuvan elementin ei tarvitse käynnistyä heti. Etusivun video, automaattinen kuvakaruselli ja arvostelu-upotus voivat kilpailla samoista laiteresursseista. Päätä ensin, mikä niistä auttaa kävijää ensimmäisessä näkymässä. Muut sisällöt voidaan usein käynnistää vasta lähempänä niiden omaa kohtaa ilman, että niiden hyöty katoaa.
Animaation sujuvuutta arvioidaan myös tavallisella puhelimella. Työpöytäkoneella kevyt efekti voi rasittaa heikompaa laitetta, etenkin jos samanaikaisesti liikkuu monta pintaa. Tekstin ja painikkeiden pitää pysyä käytettävissä, vaikka animaatio olisi kesken tai käyttäjä olisi valinnut vähennetyn liikkeen. Liike ei saa olla ehtona tärkeän sisällön lukemiselle.
Ulkoiselle palvelulle tarvitaan myös epäonnistumisen toimintatapa. Jos arvosteluwidget ei lataudu, sivun muun sisällön pitäisi edelleen toimia. Jos ajanvarausupotus jää odottamaan, asiakkaalle tarvitaan toimiva vaihtoehtoinen asiointireitti. Nopeus ja luotettavuus liittyvät tässä suoraan toisiinsa: sivu ei saa jäädä kokonaan yhden ulkoisen vastauksen varaan.
Mitä nopeustyön valmistuminen tarkoittaa?
Ennen muutosta kirjataan tarkasteltava sivu, laite, yhteys ja käyttäjän toiminto. Muuten ennen ja jälkeen tehdyt mittaukset voivat koskea eri tilanteita. Ensimmäinen vierailu ilman selaimen välimuistia kertoo eri asian kuin saman sivun avaaminen uudelleen. Molemmat voivat olla hyödyllisiä, kun niiden ero huomioidaan tulkinnassa.
Teknisen mittauksen rinnalla tehdään käytännön koe: avaa sivu, lue palvelun pääasia ja siirry yhteydenottoon. Nopeuspisteen paraneminen ei riitä, jos samalla tärkeä kuva katoaa tai lomake ei enää toimi. Korjauksen hyväksyntä sisältää siksi sekä suorituskyvyn että toiminnan tarkistuksen.
Nopeutta ylläpidetään myös sisällöntuotannossa. Uusi suuri kuva, videoupotus tai seurantatyökalu voi muuttaa tilannetta myöhemmin. Sopikaa, kuka tarkistaa tällaisen lisäyksen vaikutuksen ja missä tilanteessa havainto johtaa korjaukseen. Kerran tehty optimointi ei ole pysyvä ominaisuus riippumatta siitä, mitä sivulle myöhemmin lisätään.