Verkkosivujen mobiilioptimointi: pieni ruutu, iso liikevaihtovaikutus
Miksi mobiili on nyt siellä missä raha on
Jos katsot tyypillisen suomalaisen pk-yrityksen sivuston Google Analyticsiä, mobiili on 60–80 prosenttia istunnoista. Kuluttajille suunnatuilla yrityksillä (ravintolat, kauppa, palvelut) se on usein 85 prosenttia. Jos mobiilikokemus on huono, suurin osa liiketoiminnastasi on huonoa.
Google on tiennyt tämän vuosia. Vuodesta 2019 se on käyttänyt mobile-first-indeksointia — se katsoo sivustosi mobiiliversion ensin kun päättää sijoituksista. Työpöytäoptimoitu sivusto muodollisella responsiivisella kerroksella on nyt aktiivisesti sanktioitu.
Responsiivisuus on lattia, ei katto
"Responsiivinen design" — jossa asettelu mukautuu ruudun leveyteen — on peruslähtökohta. Jokaisella modernilla sivustolla pitäisi jo olla se. Oikea mobiilioptimointi on neljä erillistä asiaa:
1. Nopeus mobiiliverkoissa. Sivusto joka latautuu sekunnissa toimiston wifissä voi ottaa 8 sekuntia junassa. Testaa hitaalla 4G-yhteydellä, ei työpöydältä.
2. Lukumukavuus. Leipäteksti vähintään 16px. Rivinkorkeus vähintään 1,5. Väljät marginaalit ettei mikään paina reunaa. Napit ja linkit riittävän kaukana toisistaan ettei peukalo osu vahingossa kahteen.
3. Napautusystävällisyys. Jokainen klikattava elementti vähintään 44×44 pikseliä (Applen ohje; Googlen on 48). Ei hover-riippuvaisia valikoita. Lomakkeet oikealla näppäimistötyypillä — numeerinen puhelinkentille, sähköposti sähköpostikentille.
4. Ei mobiilivihamielisiä kuvioita. Ei tunkeutuvia ponnahdusikkunoita (Google pudottaa suoraan tästä). Ei vaakarullausta. Ei "lue lisää" -klikin taakse piilotettua tekstiä joka mahtuisi hyvin. Ei automaattisesti käynnistyvää videota äänellä.
Kolme korjausta joilla suurin liikevaihtovaikutus
Jos voit tehdä vain kolme asiaa tässä kuussa, tee nämä:
Korjaus 1: Pakkaa ja muunna kuvat WebP:hen. Kuvat ovat yleensä 60–80 prosenttia sivun painosta. WebP-tiedostot ovat 25–35 prosenttia pienempiä kuin JPEG samalla laadulla. Jokainen moderni selain tukee sitä. Tarjoile oikean kokoisia versioita mobiilille (älä lähetä 2000px-hero-kuvaa 400px-ruudulle). Yksin tämä usein puolittaa latausajan.
Korjaus 2: Poista tai viivytä estäviä skriptejä. Kolmannen osapuolen skriptit (analytiikka, chat-widgetit, tag managerit, markkinointipikselit) ovat toiseksi suurin syy hitaalle mobiililataukselle. Auditoi mitä oikeasti käytät, poista mitä et, ja viivytä loput "defer"- tai "async"-attribuutilla.
Korjaus 3: Suurenna napautuskohteet ja välistä ne. Puhelinkäyttäjä ei voi napauttaa kahta vierekkäistä linkkiä. Jokaisen interaktiivisen elementin pitäisi olla vähintään 44px korkea ja vähintään 8px tyhjää tilaa ympärillä. Tämä yksi muutos usein nostaa mobiilikonversiota 10–25 prosenttia.
Miten mitata oikeasti
Kaksi ilmaista työkalua, viisi minuuttia:
- Google Lighthouse (Chrome DevToolsissa → Lighthouse-välilehti). Aja mobiilitilassa, kuristettuna Slow 4G:hen. Katso Performance- ja Accessibility-pisteet. Alle 70 mobiilissa on oikea ongelma.
- PageSpeed Insights (pagespeed.web.dev). Sama testi, helpompi jakaa. Näyttää myös oikean maailman Core Web Vitals -datan oikeilta kävijöiltä.
Molemmat antavat priorisoidun korjauslistan. Työskentele ylhäältä alas.
Miltä hyvin optimoitu mobiilisivu tuntuu
Tunnistat sen kun käytät sellaista. Se latautuu ennen kuin huomaat odottavasi. Teksti on mukava lukea ilman nipistämistä. Jokainen nappi osuu ensimmäisellä napautuksella. Mikään ei liiku latautuessa. Näppäimistö joka aukeaa kun napautat kenttää vastaa sitä mitä olet kirjoittamassa. Yhteystiedot ja puhelinlinkit avaavat oikean sovelluksen.
Mikään tästä ei ole glamouria. Mikään ei voita design-palkintoja. Kaikki liikuttaa suoraan konversioastetta, hakusijoitusta ja liikevaihtoa.
Milloin hakea apua
Useimmille pk-yrityssivustoille mobiilioptimointi on 1–3 päivää keskitettyä työtä joltain jolla on kokemusta. Merkkejä että kannattaa ulkoistaa: Lighthouse-mobiilipisteet alle 50 etkä osaa sanoa miksi, ulkoasu liikkuu tai komponentit rikkoutuvat etkä pysty toistamaan, tai sivusto on WordPressissä 30 lisäosalla jotka taistelevat keskenään.
Hintahaarukka Suomessa: 400–1500 euroa keskitetystä mobiilioptimointikierroksesta pk-yrityssivustolla. Se maksaa itsensä takaisin viikoissa jos sivustolla on oikeaa liikennettä.
Usein kysyttyä
Eikö responsiivinen teema riitä mobiilille?
Se on lähtöpiste, ei maali. Responsiivisuus hoitaa asettelun. Se ei korjaa hidasta latausta, pieniä napautuskohteita, estäviä skriptejä tai ylisuuria kuvia. Useimmat WordPress-teemat näyttävät responsiivisilta mutta suoriutuvat huonosti oikeissa mobiiliverkoissa.
Miten testaan sivustoni oikealla mobiiliyhteydellä?
Chrome DevToolsissa avaa Network-välilehti ja aseta kuristus 'Slow 4G':hen. Se simuloi yhteysnopeutta jota useimmat suomalaiset mobiilikäyttäjät näkevät suurten kaupunkien ulkopuolella. Tai käytä PageSpeed Insightsia, joka raportoi oikean maailman Core Web Vitalsit oikeilta Chrome-käyttäjiltä.
Tarvitsenko erillisen mobiilisivun (m.sivustoni.fi)?
Et, ja se olisi nykyään haitallista. Google suosii yhtä responsiivista sivustoa jolla on sama URL ja sisältö sekä mobiilissa että työpöydällä. Erilliset mobiilisivustot jakavat sijoitussignaalit ja ovat ylläpitotaakka.
Muuttaako mobiilin korjaaminen oikeasti Google-sijoitustani?
Kyllä, koska Google käyttää Core Web Vitalsia (mobiilin suorituskykymittarit) suorana sijoitustekijänä. Huonosta hyvään pisteeseen paraneminen liikuttaa yleensä sijoituksia ylöspäin kilpailluissa hauissa 4–8 viikossa.
Mitä ammattimainen mobiilioptimointi maksaa?
Pk-yrityssivustolle 400–1500 euroa keskitetystä optimointikierroksesta. Se sisältää kuvien muunnoksen, skriptiauditoinnin, napautuskohdekorjaukset ja Lighthouse-pisteiden noston. Täydet mobile-first-uudistukset maksavat enemmän mutta ovat harvoin tarpeen jos sivusto on rakennettu viimeisen 3 vuoden aikana.
Julkaistu · Kaspar Eevald
Bluefour – Digitoimisto Helsinki | hello@bluefour.fi | +358 45 850 4236