Vijf optimalisatie tips voor mobiele websites met WordPress

Rutger Hokke
Geplaatst op 17 januari 2014

Mobiele apparaten zoals smartphones en tablets zijn tegenwoordig niet meer weg te denken uit ons dagelijks bestaan. Deze devices worden ook veelvuldig gebruikt om het web mee te browsen.

Dit zie je overduidelijk terug in statistieken, waaruit blijkt dat het aantal mobiele bezoekers de laatste jaren enorm is toegenomen. Deze trend zet zich steeds verder voort.

Zorg ervoor dat jouw nieuwe website op mobiele devices goed wordt weergegeven en prettig is in gebruik. Maak hiervoor gebruik maken van responsive design.

- Rutger

Bij responsive design houdt het echter niet op. Naast een aangepaste weergave, is het van groot belang dat de website voor mobiel gebruik is geoptimaliseerd. Een website die veel gegevens moet ophalen, wordt op een mobiele telefoon of tablet al gauw traag. Uit onderzoek is gebleken dat een laadtijd van 5 seconden of langer een dramatisch gevolg heeft voor bezoekersaantallen en conversie. De meest voorkomende oorzaken zijn het aantal bestanden wat wordt ingeladen door de browser en de grootte van de pagina.

Met deze vijf optimalisatie tips voor mobiele websites, zorg je er voor dat de website optimaal presteert en aangenaam is in gebruik.

1. Maak de inhoud overzichtelijk en effectief

Overzichtelijke inhoud

Het surfgedrag van een mobiele bezoeker is anders. Verplaats jezelf in deze persoon. Je wilt niet eindeloos door gegevens bladeren, je bent op zoek naar informatie en wilt deze zo snel en eenvoudig mogelijk vinden. Bepaal welke tekst en website elementen essentieel zijn en welke overbodig. Wees hierbij niet te voorzichtig om keuzes te maken. Less is more! Zorg er met een responsive stylesheet vervolgens voor dat de overbodige elementen niet langer worden getoond.

2. Vertaal de muisklik naar een vingertap

Navigeren op deze apparaten doe je met je vinger. Houdt hier rekening mee, bij het maken van de aangepaste weergave. Een goede regel is om een klikbaar element minimaal 44 pixels hoog en breed te maken, zo blijkt uit onderzoek van Apple. Dit zijn de minimale afmetingen om probleemloos een element op het scherm te kunnen ‘tappen’ met je vinger. Maak belangrijke knoppen visueel, groot en zichtbaar. Voorzie de bezoeker van gebruiksgemak.

3. Optimaliseer afbeeldingen

Optimaliseer afbeeldingen

Probeer het aantal afbeeldingen dat  geladen wordt te beperken. Maak ook hier de keuze welke afbeeldingen essentieel zijn en welke overbodig.

Kies voor het gebruik van een sprite. Hierbij combineer je kleinere afbeeldingen tot één afbeelding, met als gevolg minder server requests. Twee goede diensten hiervoor zijn Spritecow en Spritepad.

Controleer of losse afbeeldingen gecomprimeerd kunnen worden met de tool Smush.it, ook als WordPress plugin beschikbaar. Eventueel kan je gebruik maken van een online tool om afbeeldingen te optimaliseren zoals TinyPNG of Websiteplanet, dit scheelt vaak wel 20% zonder dat je er echt iets van merkt in de kwaliteit van de afbeelding.

4. Verklein scripts en stylesheets

Naast de optimalisatie van afbeeldingen, is het mogelijk winst te behalen door het comprimeren van scripts en stylesheets. Hierdoor wordt de laadtijd verder teruggebracht. Een uitstekende plugin die je voor je WordPress website kan gebruiken is  WP Minify.

5. Test met PageSpeed

Pagespeed

Blijf testen op performance! Google heeft hiervoor een krachtige tool ontwikkeld, PageSpeed. Voer hiermee een analyse uit op de website, en PageSpeed toont welke verbeteringen je nog meer kan toepassen.

Blijf op de hoogte!

Rutger Hokke

Rutger staat altijd klaar om mee te denken voor een oplossing voor al je technische issues. Voor een interactieve kaart of een koppeling met een extern systeem ben je bij hem aan het juiste adres. Hij schrijft dan ook over internettechnieken die het leven mooier maken.

Meer over Rutger