Toimivatko sivusi mobiilissa? Näin testaat ja korjaat yleisimmät ongelmat
Google arvioi ja indeksoi sivustosi nimenomaan mobiiliversion perusteella, ja useimmilla sivustoilla suuri osa kävijöistä saapuu puhelimella. Jos sivusi toimivat huonosti pienellä näytöllä, menetät samalla kertaa sekä kävijöitä että näkyvyyttä hakutuloksissa.
Moni muistaa Googlen Mobile-Friendly Testin, mutta se poistui käytöstä joulukuussa 2023. Mobiiliystävällisyys testataan nykyään toisin: Lighthousella, PageSpeed Insightsilla ja ihan tavallisella puhelimella.
Tarvitset:
- oman puhelimen
- Chrome-selaimen tietokoneella
- pääsyn WordPress-sivustosi hallintaan, jos korjattavaa löytyy
Miksi mobiiliystävällisyys ratkaisee
Google sai mobile-first-indeksoinnin valmiiksi lokakuussa 2023. Se tarkoittaa, että Googlen botti hakee ja arvioi sivusi ensisijaisesti mobiiliversiona. Jos jokin sisältö, kuvat tai linkit puuttuvat mobiiliversiosta, ne puuttuvat Googlen näkökulmasta kokonaan.
Toinen syy on yksinkertaisempi: kävijäsi. Kärsimätön puhelinkäyttäjä ei suurenna tekstiä sormilla eikä yritä osua nuppineulan kokoiseen linkkiin, vaan palaa hakutuloksiin ja valitsee kilpailijan.
Tarkista oman sivustosi mobiililiikenteen osuus Google Analyticsista: avaa GA4:ssä Raportit → Käyttäjä → Tekniikka ja katso laiteluokkien (mobile, desktop, tablet) jakauma. Osuus vaihtelee toimialoittain: kuluttajasivustoilla mobiili on yleensä selvästi suurin, B2B-sivustoilla työpöytäkoneiden osuus voi olla isompi. Oma data kertoo, kuinka paljon mobiilikäyttäjiä sivustollasi oikeasti on.
Google Mobile-Friendly Test on historiaa
Vuosia mobiiliystävällisyyden mittarina toiminut Google Mobile-Friendly Test poistettiin käytöstä 1.12.2023. Samalla poistuivat saman työkalun rajapinta sekä Google Search Consolen Mobiilikäytettävyys-raportti. Jos löydät vanhoja ohjeita, jotka neuvovat syöttämään osoitteen Googlen mobiilitestiin, ne ovat vanhentuneita.
Googlen oma perustelu oli, että korvaavia työkaluja on nykyään tarjolla runsaasti, eikä mobiiliystävällisyyden merkitys vähentynyt mihinkään. Käytännössä testaaminen hoituu nykyään kolmella tavalla, jotka käydään seuraavaksi läpi.
Näin testaat sivustosi mobiilissa
1. Selaa sivustoa oikealla puhelimella
Paras testi on edelleen se aidoin: ota puhelin käteen ja käy sivustosi tärkeimmät sivut läpi kuin ensikertalainen kävijä. Kiinnitä huomiota näihin:
- Latautuuko etusivu nopeasti myös mobiiliverkossa, ei vain kotisi wifissä?
- Onko teksti luettavaa ilman zoomaamista?
- Osutko linkkeihin ja painikkeisiin peukalolla ensimmäisellä yrityksellä?
- Löytyykö tärkein tieto (yhteystiedot, hinnat, ostonappi) muutamalla vierityksellä?
- Peittääkö jokin ponnahdusikkuna tai palkki sisällön?
Testaa mielellään sekä Androidilla että iPhonella, jos mahdollista. Pyydä vaikka tuttavaa kokeilemaan omalla puhelimellaan ja kerro, mitä hänen pitäisi sivustolla saada tehtyä.
2. Käytä selaimen responsiivista tilaa
Chromen kehittäjätyökaluilla näet nopeasti, miltä sivusto näyttää eri kokoisilla näytöillä:
- Avaa sivustosi Chromessa ja paina F12 (Macissa Cmd + Option + I).
- Paina Ctrl + Shift + M (Macissa Cmd + Shift + M) tai klikkaa laitekuvaketta työkalupalkissa.
- Valitse ylhäältä laitemalli, esimerkiksi iPhone 14 Pro Max, tai venytä näkymää vapaasti.
- Selaa sivuja ja tarkista, ettei mikään elementti valu ruudun ulkopuolelle eikä sivua tarvitse vierittää sivusuunnassa.
Responsiivinen tila ei korvaa oikeaa puhelinta (kosketus, verkon nopeus ja fonttien piirtyminen eroavat), mutta se on nopein tapa käydä koko sivusto läpi eri näyttöleveyksillä.
3. Aja Lighthouse- tai PageSpeed Insights -analyysi
Lighthouse on Chromeen sisäänrakennettu analyysityökalu, joka pisteyttää sivun suorituskyvyn, saavutettavuuden ja hakukoneoptimoinnin perusasiat mobiililaitteella:
- Avaa testattava sivu Chromessa ja paina F12.
- Siirry Lighthouse-välilehdelle.
- Valitse laitteeksi Mobile ja paina Analyze page load.
- Käy raportti läpi: se listaa muun muassa liian pienet kosketuskohteet, puuttuvan viewport-määrityksen ja liian pienen fonttikoon.
Sama analyysi onnistuu ilman asennuksia osoitteessa pagespeed.web.dev. PageSpeed Insights ajaa Lighthousen Googlen palvelimella ja näyttää lisäksi todellisten Chrome-käyttäjien nopeusdataa, jos sivustollasi on tarpeeksi liikennettä. Tulokset näytetään erikseen mobiilille ja työpöydälle: katso ensisijaisesti mobiilitulosta. Nopeuden parantamiseen löydät konkreettiset keinot oppaasta kotisivujen nopeuttaminen.
Yleisimmät mobiiliongelmat WordPress-sivustolla
Mobiiliystävälliset sivut syntyvät harvoin yhdellä isolla tempulla. Useimmiten kyse on muutamasta toistuvasta ongelmasta, jotka on helppo korjata.
Viewport-määritys puuttuu
Sivun head-osiossa pitää olla rivi <meta name="viewport" content="width=device-width, initial-scale=1">. Ilman sitä puhelin piirtää sivun työpöytäleveydellä ja kutistaa kaiken postimerkin kokoiseksi. Käytännössä kaikki nykyaikaiset WordPress-teemat lisäävät rivin automaattisesti, joten tämä ongelma koskee lähinnä hyvin vanhoja tai itse tehtyjä teemoja. Lighthouse varoittaa puuttuvasta viewportista erikseen.
Liian pienet painikkeet ja linkit
Googlen ohjeistus on, että kosketuskohteen pitäisi olla vähintään noin 48 pikseliä korkea ja leveä, ja kohteiden välissä pitäisi olla tyhjää tilaa. Tyypillisiä ongelmakohtia ovat alatunnisteen linkkilistat, some-kuvakkeet ja valikot, joissa linkit ovat kiinni toisissaan. Korjaus onnistuu teeman asetuksista tai lisäämällä väljyyttä (padding) painikkeiden ympärille.
Liian suuret kuvat
Raskaat kuvat ovat yleisin syy hitaaseen mobiilisivuun, koska puhelin lataa ne usein hitaamman verkon yli. WordPress luo kuvista automaattisesti eri kokoja ja tarjoilee pienemmän version pienelle näytölle, mutta vain jos alkuperäinen kuva on järkevän kokoinen ja teema toimii oikein. Pakkaa kuvat ennen lataamista tai käytä optimointilisäosaa: tarkat ohjeet löydät oppaasta kuvien tiedostokokojen optimointi.
Ponnahdusikkuna peittää sisällön
Google on linjannut, että heti sivulle saavuttaessa koko ruudun peittävät ponnahdusikkunat ja mainoskerrokset heikentävät käyttökokemusta ja voivat heikentää sivun menestystä haussa. Lakisääteiset ilmoitukset, kuten evästebanneri, ovat sallittuja, mutta uutiskirjeikkunan tai tarjouksen ei kannata peittää sisältöä heti. Käytä mieluummin pientä palkkia tai näytä ikkuna vasta, kun kävijä on vierittänyt sivua. Ponnahdusikkunoiden järkevästä käytöstä on oma opas: popup-ikkunan tekeminen fiksusti.
Teksti valuu näytön ulkopuolelle
Jos sivua pitää vierittää vaakasuunnassa, jokin elementti (usein taulukko, leveä kuva tai upotus) on leveämpi kuin näyttö. Etsi syyllinen responsiivisella tilalla kaventamalla näkymää, kunnes vaakavieritys ilmestyy. Taulukoille kannattaa sallia vieritys omassa laatikossaan, ja kuville määrittää enimmäisleveydeksi 100 %.
Yleiset virheet
- Testaat vain etusivun. Kävijät saapuvat haun kautta usein suoraan sisältösivuille. Testaa myös tärkeimmät alasivut, yhteydenottolomake ja verkkokaupan ostoprosessi.
- Testaat vain kerran. Uusi lisäosa, teemapäivitys tai iso kuva voi rikkoa mobiilinäkymän milloin tahansa. Ota tavaksi vilkaista sivusto puhelimella aina isompien muutosten jälkeen.
- Tuijotat pelkkää pistemäärää. Lighthousen pisteet ovat hyvä suunnannäyttäjä, mutta tärkeämpää on, että oikea ihminen saa asiansa hoidettua puhelimella vaivatta.
- Luotat teeman esittelysivuun. “Responsiivinen teema” ei takaa mitään, jos omat sisältösi (kuvat, taulukot, upotukset) rikkovat asettelun. Testaa aina omilla sisällöilläsi.