Optimisez votre site pour les appareils mobiles

Puisqu'il y a plus en plus d'internautes visualisant des sites Joomla sur téléphones mobiles (ou tablettes) vous devez vous assurer que votre site se charge rapidement aussi sur ces plateformes. Alors que la plupart des internautes, dans les pays développés, ont une connexion internet haut débit, ce n'est pas forcément le cas lorsqu'il sont en déplacement et qu'ils utilisent la 3G.

Si vous utilisez un template Joomla responsive, même si la visualisation de votre site s' adaptera bien aux différentes tailles d'écrans, ce seront les mêmes ressources qui seront chargées que celles des internautes utilisant un PC.

C'est une remarque très importante. Toutefois pour bien gérer cette problématique il vous faut être un utilisateur de Joomla avancé, et ce type de tutoriel n'est pas l'objet du site Joomlaseo.com.

Plugin de détection d' user-agent

Il y a une extension que je trouve très utile User Agent Detection plugin qui a été développé par un hollandais: Rene Kreijveld. Il détecte si vous utilisez un PC, un téléphone mobile ou une tablette. Cette fonctionalité est basée sur la détection le l'user-agent. Même si ce n'est pas une méthode complétement infaillible elle est fiable pour la détection de téléphone mobile. Avec un peu de connaissance PHP vous pourrez prévenir le chargement de modules ou d'images. Ce plugin ne CACHE pas seulement un module, comme le fait la class bootstrap hidden-phone, mais il empêche son chargement et son exécution.

Un exemple de code pour montrer seulement un module si le user-agent indique que vous n'êtes PAS sur un téléphone mobile :

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

Un plugin similaire a été développé par Conflate : Joomla Simple Mobile Detection.

Ce Plugin détecte les user-agent et ses paramétrages de configuration vous permettent aussi de définir : si tous les appareils sous Android ou Ipad doivent être traités ou non, des redirections d'URL etc. Une autre fonctionnalité qui peut être très utile est la possibilité  d'insérer des balises spécifiques dans le contenu de vos articles Joomla afin de définir du contenu spécifique pour des appareils spécifiques comme ceci  (activez le Content Switch préalablement) :

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

Vous pouvez aussi utiliser des balises plus avancées.

Advanced Module Manager

Une autre solution est d'utiliser l'extension Regular Labs : Advance Module Manager, qui permet aussi la détection des user-agent. Cette extension a beaucoup de paramétrages possibles dont celui de charger ou non des modules pour les navigateurs de mobile.

Plus d'extensions mobiles 

Il existe aussi d'autres solutions pour servir différentes images des articles Joomla selon les appareils mobiles utilisés. Un bon exemple est le plugin adaptive images plugin by Extly.com. Ce plugin détecte le type d'appareils & sur cette base fournit une taille maximum d'images. Par exemple les téléphones portables ne devraient pas charger d’images plus large que 480px ou tout autre largeur que vous choisirez.

D'autres exemples/solutions sont listées dans le Joomla Extension Directory, dans la catégorie Mobile Display.

Cet article est une traduction libre du tutoriel de Simon Kloostra : Optimize for mobile devices