Verkkosivun nopeus ja myynti: kolme yleisintä hidastetta ja miten mittaat oman hyötysi

Hitauden syy on lähes aina kuvissa, fonteissa tai lisäosissa. Tässä mittaustapa, jonka teet itse kymmenessä minuutissa, korjausohje kullekin kolmesta, ja laskukaava jolla lasket nopeuden arvon omilla luvuillasi ilman lainattuja prosentteja.

Lyhyt vastaus: Suomalaisen pienyrityssivun hitaus johtuu lähes aina kolmesta asiasta: liian isoista kuvista, verkosta ladattavista fonteista ja lisäosien kasautumisesta. Kaikki kolme korjataan ilman sivuston uusimista. Mittaa ensin, korjaa yksi kerrallaan ja mittaa uudelleen — silloin tiedät oman sekuntisäästösi etkä kenenkään muun.

Nopeudesta puhutaan usein prosenteilla, jotka on lainattu jostain suuresta verkkokaupasta. Ne luvut eivät kerro sinun sivustostasi mitään. Sinulle merkityksellinen kysymys on toinen: kuinka moni kävijä poistuu ennen kuin sivu näkyy, ja mitä yksi menetetty yhteydenotto maksaa sinulle.

Tämä sivu antaa kolme asiaa: mittaustavan, jonka teet itse kymmenessä minuutissa, kolme yleisintä hidastetta korjausohjeineen, ja laskukaavan, jolla lasket nopeuden arvon omilla luvuillasi ilman että kenenkään tarvitsee keksiä tilastoja.

Mitä nopeus tarkoittaa mitattuna?

Sivuston nopeus tarkoittaa mitattuna kolmea lukua, joilla on julkiset raja-arvot. Google on määritellyt mittarit LCP, INP ja CLS, ja koska raja-arvot ovat julkisia, niitä voi käyttää tavoitteina ilman että kukaan arvailee. LCP kertoo, milloin sivun suurin sisältö on näkyvissä, ja se on käytännössä tärkein: se vastaa siihen kysymykseen, jonka kävijä tekee alitajuisesti eli näkyykö tässä jotain vai onko tämä rikki. INP kertoo, kuinka nopeasti sivu vastaa klikkaukseen. CLS kertoo, kuinka paljon sisältö hyppii latautuessa, ja se on myynnin kannalta aliarvostettu, koska hyppivällä sivulla kävijä klikkaa väärää kohtaa. Taulukko antaa jokaiselle hyvän ja korjausta vaativan rajan.

Käytännössä tärkein on LCP. Se vastaa siihen kysymykseen, jonka kävijä tekee alitajuisesti: näkyykö tässä jotain vai onko tämä rikki. Suurin sisältö on yleensä yläosan kuva tai otsikko.

CLS on aliarvostettu myynnin kannalta. Kun sivu hyppii, kävijä klikkaa väärää kohtaa — ja puhelimella se tarkoittaa usein, että hän päätyy väärälle sivulle ja poistuu. Tämä on halvin korjattava kolmesta.

Mittaa ensin, kymmenessä minuutissa

Sivuston nopeus mitataan itse kymmenessä minuutissa, ja mittaus tehdään ennen yhtään korjausta. Aja mittaus kolmelle sivulle — etusivulle, tärkeimmälle palvelusivulle ja yhteystiedoille — koska kävijät tulevat hakukoneesta usein muualle kuin etusivulle. Katso mobiilituloksia äläkä työpöytää, sillä työpöytäluku antaa väärän turvallisuudentunteen. Erota kenttädata eli se, mitä oikeat kävijäsi kokivat, laboratoriodatasta eli simulaatiosta. Kirjaa lähtötilanne ylös: kolme lukua kolmelta sivulta, päivämäärä ja mittaustapa. Ilman lähtötilannetta et voi todentaa yhtään korjausta jälkikäteen. Avaa lopuksi sivusi omalla puhelimella mobiiliverkossa, koska se on kokemus, jonka asiakkaasi saa.

1. Aja mittaus kolmelle sivulleEtusivu, tärkein palvelusivu ja yhteystiedot. Älä mittaa vain etusivua: kävijät tulevat hakukoneesta usein muualle.
2. Katso mobiilituloksia, ei työpöytääSuurin osa liikenteestä tulee puhelimella ja mobiilitulos on aina heikompi. Työpöytäluku antaa väärän turvallisuudentunteen.
3. Erota kenttädata ja laboratoriodataKenttädata kertoo mitä oikeat kävijäsi kokivat, laboratoriodata on simulaatio. Jos kenttädataa ei ole, sivustolla on liian vähän liikennettä — käytä silloin laboratoriolukua ja pysy samassa mittaustavassa.
4. Kirjaa lähtötilanne ylösKolme lukua kolmelta sivulta, päivämäärä ja mittaustapa. Ilman lähtötilannetta et voi todentaa yhtään korjausta.
5. Testaa myös oikealla puhelimellaAvaa sivusi omalla puhelimella mobiiliverkossa, ei kotiwifissä. Se on kokemus, jonka asiakkaasi saa.

Hidaste 1: kuvat

Tämä on ylivoimaisesti yleisin ja samalla helpoin. Puhelimella otettu kuva on tyypillisesti noin 4000 kuvapistettä leveä ja painaa muutamia megatavuja. Verkkosivun leveimmällä paikalla tarvitaan tyypillisesti 1600–2000 kuvapistettä, ja hyvin pakattuna se painaa satoja kilotavuja tai vähemmän. Kokoero on siis moninkertainen, usein kymmenkertainen tai enemmän — ja kertoimen näet omista kuvistasi laskemalla, ei arvaamalla.

Korjaus on kolmiosainen. Skaalaa kuva siihen leveyteen, jossa se näytetään. Tallenna nykyaikaisessa muodossa, käytännössä WebP. Ja lataa näkymän ulkopuoliset kuvat vasta kun niitä lähestytään.

Neljäs osa liittyy CLS-lukuun: määritä jokaiselle kuvalle leveys ja korkeus, jotta selain varaa sille tilan etukäteen eikä sisältö hyppää. Tämä on yhden rivin muutos jokaista kuvaa kohti ja se korjaa hyppimisen lähes aina. Yksityiskohtainen ohje kokoineen on artikkelissa kuvien optimointi verkkosivuille.

Hidaste 2: fontit

Fontit ovat toiseksi yleisin hidaste suomalaisella pienyrityssivulla. Verkkosivun fontti ladataan usein ulkoiselta palvelimelta, ja siihen liittyy kaksi ongelmaa. Ensimmäinen on ylimääräinen yhteys toiseen palvelimeen ennen kuin tekstiä voi näyttää lainkaan. Toinen on se, että sivustolle on ladattu neljä tai kuusi leikkausta, joista käytetään kahta. Korjaus on suoraviivainen ja kolmiosainen: siirrä fonttitiedostot omalle palvelimelle, karsi leikkaukset kahteen tai kolmeen ja rajaa merkistö niihin merkkeihin, joita oikeasti tarvitset. Aseta lisäksi lataustapa sellaiseksi, että teksti näkyy heti järjestelmäfontilla ja vaihtuu oikeaan fonttiin kun se on valmis.

Korjaus on suoraviivainen. Siirrä fonttitiedostot omalle palvelimelle, jolloin ylimääräinen yhteys jää pois. Karsi leikkaukset kahteen tai kolmeen: tavallinen, lihavoitu ja tarvittaessa kursiivi. Rajaa merkistö latinalaisiin merkkeihin, jos et tarvitse muita. Ja aseta fontin lataustavaksi sellainen, joka näyttää tekstin heti järjestelmäfontilla ja vaihtaa oikeaan fonttiin kun se on valmis.

Viimeinen kohta on tärkeä myös CLS:n kannalta: väärin asetettuna tekstin vaihtuminen siirtää koko sivun sisältöä. Valitse varafontti, joka on mitoiltaan lähellä varsinaista.

Hidaste 3: lisäosat ja skriptit

Kolmas hidaste on kasautuva eikä siksi näy yhtenä syyllisenä. Sivustolle lisätään vuosien varrella yhteydenottolomake, karttaupotus, some-syöte, chat, kaksi analytiikkatyökalua, evästebanneri ja kuvakaruselli. Jokainen on yksinään pieni, mutta yhdessä ne muodostavat suurimman osan latausajasta. Löydät ne tekemällä listan: avaa kehittäjätyökalujen verkkovälilehti, lataa sivu ja järjestä pyynnöt koon mukaan. Ylimmät rivit ovat kolme suurinta korjausmahdollisuuttasi. Käy ne läpi kahdella kysymyksellä: käytetäänkö tätä oikeasti, ja pitääkö sen latautua joka sivulla. Tyypilliset löydökset ovat käyttämätön karttaupotus, raskas some-syöte ja vanha lisäosa, joka on jäänyt poistetun ominaisuuden jäljiltä.

Tee tästä lista. Avaa kehittäjätyökalujen verkkovälilehti, lataa sivu, ja järjestä pyynnöt koon mukaan. Ylimmät rivit ovat sinun kolme suurinta korjausmahdollisuuttasi. Käy ne läpi kysymyksellä: käytetäänkö tätä oikeasti, ja pitääkö sen latautua joka sivulla.

Kolme tyypillistä löydöstä. Karttaupotus etusivulla, jota kukaan ei käytä — korvaa staattisella kuvalla ja linkillä. Some-syöte, joka lataa kymmeniä kilotavuja skriptiä näyttääkseen kolme kuvaa. Ja vanha lisäosa, joka on jäänyt käyttämättömän ominaisuuden jäljiltä. WordPress-sivuston ylläpidon näkökulma löytyy sivulta WordPress-ylläpito.

Neljäs hidaste, josta puhutaan vähän: uudelleenohjaukset

Neljäs hidaste on uudelleenohjausten ketju, ja siitä puhutaan vähän, koska se ei näy sivun sisällössä mitenkään. Kun kävijä kirjoittaa osoitteen ilman etuliitettä, selain tekee ensin pyynnön, joka ohjataan salattuun osoitteeseen, ja joskus vielä toisen kerran www-muotoon tai päinvastoin. Jokainen ohjaus on oma kierroksensa verkossa ennen kuin mitään sisältöä alkaa latautua, ja mobiiliverkossa se maksaa mitattavan hetken. Tarkista ketju avaamalla sivustosi osoite ilman etuliitettä ja katsomalla kehittäjätyökaluista, montako ohjausta siihen kuuluu. Yksi on normaali, kaksi siedettävä, kolme tai enemmän kannattaa korjata. Sama koskee sivuston omia sisäisiä linkkejä.

Tarkista tämä avaamalla sivustosi osoite ilman etuliitettä ja katsomalla kehittäjätyökaluista, montako ohjausta ketjussa on. Yksi on normaali, kaksi on siedettävä, kolme tai enemmän kannattaa korjata. Korjaus tehdään palvelimen tai palveluntarjoajan asetuksissa: ohjaa suoraan lopulliseen osoitteeseen yhdellä askeleella.

Sama koskee sivuston sisäisiä linkkejä. Jos linkität vanhaan osoitteeseen, joka ohjataan uuteen, jokainen klikkaus maksaa ylimääräisen kierroksen. Päivitä sisäiset linkit osoittamaan suoraan oikeaan paikkaan — se on tylsä työ, mutta se on kertaluontoinen ja auttaa myös hakukoneita.

Miten lasket, mitä nopeus on sinulle arvoinen?

Nopeuden arvo lasketaan omilla luvuilla, ei lainatuilla prosenteilla. Ota kolme lukua: kuukauden kävijämäärä sivustolla, kuinka moni heistä ottaa yhteyttä ja kuinka moni yhteydenotto johtaa kauppaan sekä mikä on kaupan keskimääräinen kate. Näistä syntyy yhden kävijän arvo, eli kate kerrottuna kaupaksi muuttuvien osuudella ja edelleen yhteyttä ottavien osuudella. Vaikutusta ei arvata vaan mitataan: korjaa nopeus ja seuraa yhteydenottojen määrää kolme kuukautta ennen ja kolme jälkeen muiden asioiden pysyessä ennallaan. Erotus kerrottuna yhden yhteydenoton arvolla on sinun oikea lukusi. Ennakkoon riittää herkkyyslaskelma pienimmällä uskottavalla kasvulla.

Ota kolme lukua: kuukauden kävijämäärä sivustolla, kuinka moni heistä ottaa yhteyttä, ja kuinka moni yhteydenotto johtaa kauppaan sekä mikä on kaupan keskimääräinen kate. Näistä syntyy yhden kävijän arvo: kate kerrottuna kaupaksi muuttuvien osuudella kerrottuna yhteydenottavien osuudella.

Sitten arvioi vaikutus. Älä arvaa prosenttia ilmasta, vaan mittaa se: korjaa nopeus ja seuraa yhteydenottojen määrää kolme kuukautta ennen ja kolme jälkeen, muut asiat ennallaan. Erotus kerrottuna yhden yhteydenoton arvolla on sinun oikea lukusi. Se on ainoa luku, joka kestää tarkastelun — ja se on myös ainoa, jolla voit perustella seuraavan investoinnin.

Jos haluat arvion ennen työtä, tee se herkkyyslaskelmana: laske paljonko korjaus tuottaisi, jos yhteydenotot kasvaisivat yhden prosentin, kolme prosenttia tai viisi. Jos pienin luku riittää kattamaan työn kustannuksen vuodessa, päätös on helppo eikä tarkempaa arviota tarvita.

Mitä toimittajalta kannattaa vaatia?

Jos et tee nopeuskorjauksia itse, kirjoita tilaukseen mitattavat ehdot. Neljä riviä riittää eikä niistä tarvitse neuvotella. Ensimmäinen: LCP alle 2,5 sekuntia mobiilimittauksessa kolmella nimetyllä sivulla. Toinen: CLS alle 0,1. Kolmas: kuvien toimitus nykyaikaisessa muodossa ja siinä koossa, jossa ne näytetään. Neljäs: mittausraportti ennen ja jälkeen samalla työkalulla. Näin sovittuna nopeus lakkaa olemasta makuasia. Se on joko mitattu tai ei, ja molemmat osapuolet näkevät saman luvun samasta lähteestä. Ilman näitä rivejä keskustelu päätyy siihen, että sivu tuntuu nopealta sillä koneella, jolla sitä on kehitetty.

Näin sovittuna nopeus lakkaa olemasta makuasia. Se on joko mitattu tai ei, ja molemmat osapuolet näkevät saman luvun samasta työkalusta. Ilman tätä keskustelu päätyy siihen, että sivu "tuntuu nopealta" sillä koneella, jolla sitä on kehitetty.

Milloin nopeutta ei kannata optimoida

Nopeutta ei kannata optimoida kolmessa tilanteessa, ja niissä raha kannattaa laittaa muualle. Ensimmäinen: sivustollasi käy kymmenen ihmistä kuukaudessa. Silloin ongelma ei ole nopeus vaan se, ettei sinua löydetä, eikä nopea sivu ilman kävijöitä tuota mitään. Toinen: mittaustuloksesi on jo hyvällä alueella. Jos LCP on kaksi sekuntia mobiilissa, sen puristaminen alaspäin on työtä, jonka vaikutusta et pysty erottamaan mistään muusta. Kolmas: sivusto on muutenkin uusittavana, jolloin vanhan optimointi heitetään pois muutaman kuukauden päästä. Kolmannessa tapauksessa oikea siirto on vaatia mittarit uuden sivuston hyväksymisen ehdoksi.

Sivustollasi käy kymmenen ihmistä kuukaudessa. Silloin ongelma ei ole nopeus vaan se, ettei sinua löydetä. Nopea sivu, jolle ei tule ketään, ei tuota mitään. Aloita näkyvyydestä: sivun hakukoneoptimointi ja yritysprofiili tuottavat tässä tilanteessa enemmän.

Mittaustuloksesi on jo hyvällä alueella. Jos LCP on 2,0 sekuntia mobiilissa, sen puristaminen 1,6 sekuntiin on työtä, jonka vaikutusta et pysty erottamaan mistään muusta. Korjaa sen sijaan sivun sisältö tai yhteydenoton helppous.

Sivusto on uusittavana muutenkin. Vanhan sivuston optimointi juuri ennen uusimista on työtä, joka heitetään pois. Tee nopeus osaksi uutta toteutusta ja vaadi mittarit hyväksymisen ehdoksi. Uuden sivuston kokonaisuus on kuvattu sivulla verkkosivut yritykselle, ja hinnat lukevat hinnastossa.

Nopeus on myös käytettävyyttä

Latausajan rinnalla kannattaa korjata kolme asiaa, jotka vaikuttavat samaan lopputulokseen mutta eivät näy nopeusmittarissa lainkaan. Ne ovat halpoja korjata ja niiden vaikutus yhteydenottoihin on suora. Ensimmäinen on puhelinnumero, joka ei ole klikattava: puhelimella katsottuna numeron pitää soittaa yhdellä painalluksella. Toinen on yhteydenottolomake, jossa on kahdeksan kenttää, kun nimi, yhteystieto ja viesti riittäisivät. Kolmas on tärkeimmän toiminnon sijainti — jos kävijän pitää vierittää kolme ruudullista löytääkseen sen, moni ei löydä. Kaikkia kolmea mitataan samalla mittarilla kuin nopeutta: kuinka moni kävijä päätyy yhteydenottoon.

Ensimmäinen on puhelinnumero, joka ei ole klikattava. Puhelimella katsottuna numeron pitää soittaa yhdellä painalluksella. Toinen on yhteydenottolomake, jossa on kahdeksan kenttää, kun kolme riittäisi: nimi, yhteystieto ja viesti. Kolmas on tärkeimmän toiminnon sijainti — jos kävijän pitää vierittää kolme ruudullista löytääkseen sen, moni ei löydä.

Näiden yhteinen piirre on, että ne kaikki mitataan samalla mittarilla kuin nopeus: kuinka moni kävijä päätyy yhteydenottoon. Siksi ne kannattaa korjata samalla kierroksella kuin kuvat ja fontit, ja mitata lopputulos yhdessä.

Kirjaa lopuksi mittaustulokset samaan tiedostoon kuukausittain. Kolmen kuukauden jälkeen näet, pysyikö nopeus paikallaan vai valuiko se takaisin — ja valuminen on tavallista, koska jokainen uusi kuva, lisäosa ja upotus lisää painoa. Mittaus kerran kuussa maksaa viisi minuuttia ja estää sen, että sama työ tehdään ensi vuonna uudestaan alusta.

Usein kysyttyä

Lue seuraavaksi

• Yrityssovelluksen kehittämisen hinta
• WordPress-ylläpidon hinta ja mitä siihen oikeasti kuuluu
• WordPressin hakukoneoptimointi: neljä asetusta, jotka ratkaisevat teknisen puolen
• Webhotellin vaihto ilman katkoa: testaa uusi palvelin ennen kuin kukaan asiakas näkee mitään
• Ilmainen verkkotunnus: milloin se on oikeasti ilmainen ja mitä se sitoo

Lue myös: kanta-asiakasohjelma pienyritykselle · digitaalinen leimakortti · ajanvarausjärjestelmien hinnat · verkkosivut yritykselle · sovelluskehitys iOS ja Android · ohjelmistokehitys · CRM-järjestelmä · IT-palvelut yrityksille