Hoe zorg ik ervoor dat mijn WordPress-website goed werkt op mobiele apparaten?

1Stap 1: Bekijk je website op je telefoon

Open je website op je telefoon en loop de belangrijkste pagina’s door. Moet je zijwaarts scrollen, is tekst te klein om te lezen of staan knoppen te dicht op elkaar, noteer dan op welke pagina dat is. Zo weet je wat je moet verbeteren.

2Stap 2: Controleer of je thema responsive is

Log in op jouwdomein.nl/wp-admin (vervang jouwdomein.nl door je eigen domeinnaam) en ga naar Weergave > Thema’s. Klik op je actieve thema en lees de beschrijving. Een modern thema noemt daarin dat het responsive of mobielvriendelijk is. Maak daarna op je computer het browservenster smaller: past de website zich aan, dan is je thema responsive.

3Stap 3: Kies zo nodig een responsive thema

Past je website zich niet aan, kies dan een ander thema. Ga naar Weergave > Thema’s, klik op Thema toevoegen en bekijk een thema met Live voorbeeld voordat je het activeert. Let op: een ander thema verandert het uiterlijk van je hele website. Maak eerst een back-up en test het thema bij voorkeur op een kopie van je website. Lees hoe je een geschikt WordPress-thema kiest.

4Stap 4: Verklein en comprimeer je afbeeldingen

Grote afbeeldingen zijn de belangrijkste oorzaak van trage mobiele pagina’s. Installeer een compressieplugin zoals Smush of ShortPixel via Plugins > Plugin toevoegen. De plugin verkleint nieuwe en bestaande afbeeldingen zonder zichtbaar kwaliteitsverlies. Upload afbeeldingen daarnaast niet groter dan nodig en gebruik waar mogelijk het bestandsformaat WebP.

5Stap 5: Maak tekst en knoppen groot genoeg

Gebruik voor lopende tekst een lettergrootte van minimaal 16 pixels en zorg dat knoppen en links ruim genoeg zijn om met een duim aan te tikken. Bij een blokthema pas je dit aan onder Weergave > Editor bij Stijlen, bij een klassiek thema onder Weergave > Customizer, en bij een paginabouwer in de mobiele weergave van die paginabouwer.

6Stap 6: Controleer de mobiele weergave in de editor

Open een pagina via Pagina’s, klik rechtsboven op Voorbeeld en kies Mobiel. Je ziet de pagina dan op de breedte van een telefoon. Controleer of afbeeldingen, tabellen en video’s binnen het scherm blijven. Een onderdeel met een vaste breedte, zoals een brede tabel of een ingesloten kaart, laat je meeschalen of verberg je op mobiel.

7Stap 7: Houd pop-ups van het scherm

Een pop-up die op een telefoon het hele scherm bedekt, is hinderlijk voor bezoekers en kan je positie in Google kosten. Toon pop-ups op mobiel niet of klein, en pas na een paar seconden. Een cookiemelding die wettelijk nodig is mag wel; houd die zo klein mogelijk.

8Stap 8: Test met Google PageSpeed Insights

Ga naar pagespeed.web.dev, vul het adres van een pagina in en klik op Analyseren. Open het tabblad Mobiel. Je ziet de snelheidsscore en bij SEO en Toegankelijkheid ook punten over leesbare tekst en tikbare knoppen.

De losse Mobile-Friendly Test van Google uit oudere handleidingen bestaat niet meer. PageSpeed Insights, of Lighthouse in de browser Chrome, neemt die controle over. Lees hoe je Google PageSpeed Insights gebruikt.

9Stap 9: Maak je website sneller met caching

Een telefoon heeft vaak een tragere verbinding dan een computer. Installeer een cachingplugin, die kant-en-klare kopieën van je pagina’s bewaart, en zet lazy loading aan voor video’s. Lees hoe je je WordPress-website sneller maakt.

10Stap 10: Test opnieuw op je telefoon

Loop de pagina’s die je in het begin hebt genoteerd opnieuw door op je telefoon. Controleer ook het menu, de formulieren en bij een webshop het winkelmandje en het afrekenen. Herhaal de test na elke grote wijziging, zoals een nieuw thema of een nieuwe plugin.