Hoe verbeter je nu de snelheid van je mobiele website?

Dit is een gastblog van Ramon Fincken van Managed WP Hosting. Vanwege Googles Speed Update heb ik hem gevraagd uit de doeken te doen hoe je de snelheid van je mobiele WordPress website verbetert. Niet alleen de Speed Update is hierbij van belang. Op mobiel is het geduld van veel websitebezoekers beduidend lager dan op desktop. Want hoe snel ben jij weg als een website maar niet lijkt te laden?

Over naar Ramon dus.

Per juli 2018 speelt de snelheid van je mobiele website een rol in de ranking van jouw website in de mobiele zoekresultaten. Daarmee kan het dus zomaar gebeuren dat je site een hoge positie heeft in de desktop zoekresultaten, maar juist heel laag scoort in de mobiele zoekresultaten.

En daar kun je wat aan doen.

Snelheid laadtijd desktop versus mobiel

Grote kans dat jouw website voor mobiele apparaten dezelfde data binnenhaalt als op een computer. Een computer is meestal met snel bekabeld internet aangesloten. En anders wel via een goede WiFi-verbinding. Mobieltjes zitten vaak op WiFi, maar vaak ook niet. Daarmee is de kans groot dat de website op mobiel al minder snel laadt. Verder zijn er nog enkele andere zaken die anders zijn op je mobiel. Zo moet navigeren met 1 klik van je vinger kunnen en hoeven plaatjes vaak niet zo groot te zijn als op een desktopcomputer.

Deze website heeft een slechte score voor de snelheid van de mobiele website: 38/100. De desktopvariant heeft een score van 64/100. Voor mobiel moet deze website dus echt werken aan de laadtijd.

Houd je bezoekers -en Google- tevreden met een snelle mobiele website

Wat kun je doen om Google en je mobiele bezoekers blij te maken en blij te houden?

Ik zet het op een rijtje:

1. Alles op je site versnellen (altijd een goed idee).
2. Een apart mobiel thema gebruiken. Ook wel adaptive design genoemd.
3. Een apart (sub-)domein gebruiken voor je mobiele site. Eigenlijk achterhaald, maar het kan.

1. Website versnellen

Houd je hierbij aan de drie snelheidsgeboden:

1.  Zo weinig mogelijk (DNS) connecties
2. Zo weinig mogelijk data “over de lijn”
3. Als je al data moet versturen, zorg dat deze zo snel mogelijk aankomen

Als we inzoomen op de mobiele toepassing, kun je de meeste winst halen uit het volgende:

Moeilijk woord: caching

Zorg voor HTML/Page caching zodat je websitebezoekers niet hoeven te wachten op een trage webserver en je content snel op het scherm staat. Bij caching worden bestanden tijdelijk lokaal opgeslagen, waardoor de browser niet alle data telkens weer moet ophalen. Het zorgt daarmee voor sneller laden van je website. Wil je het in WordPress snel oplossen zonder technisch gedoe? Kies dan voor de plugin WP Fastest cache en zet dan HTML page cache aan, klaar.

Beperk het formaat van je afbeeldingen

Zorg dat je geen volledige grootte 10-megapixel plaatjes van je Canon spiegelreflexcamera of je nieuwste iPhone op de volledige desktopvullende grootte plaatst.  Zelfs al is je plaatje zoals je hem wilt tonen maar een paar centimeter lang. Gebruik de plugin Imsanity om ervoor te zorgen dat je plaatjes bij het uploaden naar bijvoorbeeld 1024 bij 1024 pixels worden gezet wanneer ze groter zijn.

Gebruik je Visual Composer of een andere visuele “what you see is what you get” plugin? Zorg er dan voor dat je bij het invoegen van plaatjes kiest voor ‘thumbnail’ of ‘medium’. En zoek een plugin die adaptive plaatjes gebruikt. Daarmee laad je op je computer een plaatje van bijvoorbeeld 660 bij 660 pixels terwijl op mobiel een plaatje van 220 bij 220 pixels ingeladen kan worden. Ben je een echte techneut (systeembeheerder), kijk dan eens naar de Nginx/apache mod_pagespeed module.

Meer over de technische optimalisatie van afbeeldingen lees je in dit artikel van Jason Thane Jeffers.

Kijk uit met fancy dingetjes op je website

Stop met het automatisch inladen van video’s of socialmedia zoals Facebook likeboxen of Youtube-videos. De Facebook app en website zijn heel snel, maar alle andere aanroepen -hoe mooi ze er ook uitzien- zijn traag. Soms kun je hier seconden winst in je laadtijd mee behalen.

Lees hier verder over de WordPress snelheidsgeboden.

2 Adaptive webdesign

Als je thema al een responsive design heeft, toont deze bijvoorbeeld een mobiel/hamburgermenu als je de website op mobiel bekijkt. Maar het kan ook dat je thema alsnog veel grote plaatjes inlaadt en dat de navigatie niet makkelijk te bedienen is. Je kunt dan zeker eens kijken naar een tweede thema, puur voor mobiel gebruik. In dit thema kun je alles verwijderen dat niet nodig is voor mobiel gebruik. Dus anders dan bij responsive design waarbij eigenlijk alles alsnog getoond wordt, kies je met adaptive design dat er blokken niet eens naar de telefoon worden gestuurd.

Responsive webdesign: de mobiele versie is hetzelfde als op desktop, maar dan anders geordend.

Je kunt met de plugin WPtouch instellen dat je de website inlaadt met een mobiel thema. Als je kiest voor de caching plugin W3TotalCache of WPFastestcache, zit je goed, want dan kun je instellen dat voor mobiele browsers je een ander thema inlaadt. De eerste is het beste, maar vraagt wat oefening en geduld om in te stellen.

Ken je AMP?

Ik wil ook AMP even aanstippen. Dit zou ook een keuze kunnen zijn voor adaptive design. AMP is een dienst van Google om puur de tekst-content te tonen, zonder opsmuk. Hiermee laad je enkel het belangrijkste van je site in. Bijkomend voordeel is dat Google nieuwe AMP pagina’s (naar eigen zeggen) razendsnel in haar zoekindex plaatst. Let wel op dat AMP goed werkt voor blogs, maar niet echt is toegespitst op webshops of statische/”visitekaartje” websites.

Nummer 2 en 3 in deze mobiele zoekresultaten zijn AMP: je herkent ze aan het icoontje voor de URL.

Er zijn niet heel veel AMP plugins. Je zou kunnen kijken naar https://wordpress.org/plugins/amp/ of https://wordpress.org/plugins/accelerated-mobile-pages/.

3 Apart (sub-)domein

Ik stip het even aan, maar raad het niet aan. Je kunt voor een apart mobiel (sub)domein kiezen als versnellen niet makkelijk of betaalbaar is, maar het heeft ook flinke nadelen. Je zult dan als je site.nl hebt ook een m.site.nl moeten gebruiken.

Dat betekent dat je twee keuzes hebt om die m.site.nl te voorzien van inhoud:

1. Een nieuwe site opzetten met eigen content in een eigen database
2. Een nieuwe site opzetten met gedeelde content in dezelfde database-opslag als de hoofdsite. Maar dan wel met een eigen thema.

Ik noemde net al dat er aan deze optie nadelen kleven. Je maakt de opzet namelijk technisch gecompliceerder en dus lastiger te onderhouden. Je hebt een plugin of server-setup nodig die mobiele browsers doorstuurt naar je tweede domein. Ook moet je dat onthouden in bijvoorbeeld een technisch cookie en moet je je bezoekers de keuze kunnen geven om alsnog de desktopvariant te tonen.. En ook dat weer in een cookie onthouden ..

Voorbeeld van een eigen mobiele website op een apart mobiel domein: m.ikea.com

Plus, wanneer je voor optie 2 kiest: Google is nooit blij met dezelfde content (ook wel duplicate content genoemd). Je moet dus zorgen dat op je mobiele variant er canonical URL’s wijzen naar de volledige desktopvariant.

Samenvattend:

• Zorg ten alle tijden dat je site snel inlaadt. https://blog.hubspot.com/marketing/page-load-time-conversion-rates
• Bedenk of je voor een eigen mobiel adaptive thema wil gaan of dat AMP beter bij je past
• Onthoud dat snelheid periodiek werk nodig heeft. Test je site zelf ook eens op een 3G/4G dataverbinding op je mobiel.

Meer weten over snelheid? Lees dan verder op https://www.managedwphosting.nl/category/the-quest-for-speed/

Heb je vragen, opmerkingen of aanvullingen? Laat het gerust weten.

Ramon Fincken

+ berichten

Deze auteur heeft geen more posts.