Optimaliseer voor mobiele apparaten

logo pdb
Backups, updates & easy restores for Joomla & Wordpress (read the review). Use coupon JOOMLASEO for €25 in free credits to try it out.

Performance is voor mobiele apparaten nog veel belangrijker dan het normaal gesproken al is, zeker met de recente nadruk van Google op mobiele bruikbaarheid. Het kan dus ook SEO consequenties hebben als je een langzame (mobiele) site hebt. Op veel mobiele apparaten laden websites vaak langzamer. De redenen hiervoor zijn o.a. gebrekkige of lichtere hardware en gebrekkige connectiviteit (wifi, 3G, 4G). In landelijke gebieden of landen is dit soms nog weer slechter.

Sommige mensen denken dat met een responsive template dit issue minder speelt, maar de resources die benodigd zijn zijn vaak dezelfde op zowel mobiel als op desktop. Ook het verbergen van zaken (met bijvoorbeeld display: none in je CSS) voor sliders en grote plaatjes voorkomt alleen dat ze worden getoond, niet dat ze worden geladen. Gelukkig zijn er technieken om toch te zorgen dat bepaalde zaken niet worden geladen op mobiele apparaten. Dit zijn al snel vrij technische oplossingen, maar gelukkig zijn  er slimme ontwikkelaars die hierop zijn ingesprongen, en er handige Joomla extensies voor gemaakt hebben. Opvallend genoeg zijn dat vaak Nederlandse ontwikkelaars.

logo 500

User Agent Detection plugin

Een erg handige plugin is de User Agent Detection plugin die ontwikkeld is door Rene Kreijveld. De plugin werkt niet op basis van viewport (breedte van het scherm), maar kijkt daadwerkelijk naar het soort apparaat waarop de website bekeken wordt: desktop, tablet of smartphone. Dit mecahnisme werkt op basis van zogenaamde User Agent Detection. Op basis van het apparaat kun je dan kijken of je bepaalde zaken wel of niet laadt (dus niet gewoon verbergt). Rene heeft 2 soorten plugins gemaakt. De eerste werkt vooral handig binnen je template code als je zelf templates bouwt. Met een beetje PHP kun je dan checken op wat voor apparaat je zit, en wat je dan aan code wel of niet laat uitvoeren, bijvoorbeeld iets als dit. Deze code wordt dus alleen geactiveerd als je niet op een mobiel apparaat zit:

<?php if($ualayout != "mobile") {?
<jdoc:include type="modules" name="big-slider-module-x" style="xhtml" />
<?php } ?>

Recent heeft Rene nog een pluging gemaakt: de een content-plugin met user-agent detection waarmee je dezelfde doen, maar dan met tags gewoon in je Joomla artikelen:

{ifmobile} This only shows if browser is mobile {/ifmobile}
{!ifmobile} This shows everywhere except if browser is mobile {/ifmobile}

Ook handig: zijn User Agent Template Switcher.

Simple Mobile Detection

joomla simple mobile detection

Een vergelijkbare plugin is gemaakt door Conflate, de Joomla Simple Mobile Detection plugin. Deze plugin werkt min of meer vergelijkbaar als de content plugin van Rene Kreijveld, maar dan met een iets andere selectie, namelijk mobiel, of niet-mobiel, waarbij je dan binnen de plugin nog kunt instellen of een bepaalde tablet wel of niet als mobiel apparaat gedefinieerd moet worden. Als je in de plugin de Content Switch aan zet kun je ook hier weer met tags in Joomla werken:

{IfMobile}
   This is mobile content, only displayed on mobile devices
{ElseMobile}
   This is non mobile content, and displayed on i.e. desktops
{EndIfMobile}

Dit is een simpel voorbeeld, op de Conflate website vind je ook meer geavanaceerde voorbeelden.

DSC - Device Specific Content

Recent heeft Kubik-Rubic extensies van Victor Vogel ook een plugin gepubliceerd voor het toevoegen van content gebaseerd op device detectie, vergelijkbaar me de vorige extensies: DSC - Device Specific Content. Ook hiermee kun je content toevoegen met tags voor Desktop, Tablet and Mobile.

Advanced Module Manager

Als je al werkt met de Advanced Module Manager van Nonumber heb je eigenlijk al de beschikking over een User Agent Detection plugin. Je kunt dan op basis van de browser instellen of je bepaalde modules wel of niet laadt. Door gewoon alle mobiele browsers te includen of excluden kun je ze wel of niet laten laden:

 nonumber-advanced-module-manager-mobile-browsers-2

Meer mobiele extensies

Er zijn nog veel meer modules voor mobiel gebruik in Joomla. Een leuk voorbeeld is deAdaptive Images plugin van Extly.com. Op basis van het device wordt een plaatje getoond wat bij de breedte van het device past. Je zet je plaatjes op de gewone manier in Joomla, en Extly maakt dan meerdere versies in een soort cache-folder, elk voor een bepaald device. Zo zijn plaatjes voor mobiele apparaten bijvoorbeeld nooit groter dan 480px. Andere extensies vind je gewoon op de Joomla Extensions Directory, categorie Mobile Display. Bekijk voor meer geavanceerde tips over mobiele performance dit artikel op het Moz.com blog.

Cache issues

Als je cache aanstaat kan dit some problemen veroorzaken met deze extenses: stel dat de eerste gebruiker na het opschonen van je cache een desktopgebruiker is. Er wordt dan een setje cache-bestanden aangemaakt op basis van deze gebruiker. dat wordt vervolgens als cache angeboden aan vervolg-gebruikers, ook de mobiele. Als je hier last van hebt kun je sinds Joomla 3.5 Platform Specifieke Cache aanzetten, die dit probleem enigszins ondervangt. Anders kun je Jotcache gebruiken, aangezien die heel specifiek per browser of platform cache kan onderscheiden.

Over deze site

Joomlaseo.com is volledig gebouwd en geschreven door Simon Kloostra, SEO Specialist en Webdesigner uit Utrecht. Ik heb ook een boek geschreven en blogs voor bedrijven als OStraining, TemplateMonster, SEMrush en dergelijke.