Un affichage mobile performant pour votre site Joomla responsive

Le trafic par appareil : mobile/ordinateur

Depuis 2018, plus de 50% des recherches sont désormais effectuées sur mobile. C'est une moyenne qui ne reflète pas forcément la réalité pour un certain nombre d'activités/de sites, mais la tendance continue d'être favorable aux mobiles. Et même si la part de trafic de votre site sur mobile est minoritaire par rapport aux ordinateurs, elle n'est pas à négliger car elle va forcément augmenter.
Outre les critères de référencement classiques sur Google similaires sur mobile, ce moteur de recherche a ajouté des critères de performance spécifiques. Donc il serait dommage de pénaliser la recherche de son site sur mobile pour des questions de performance (site trop lourd à charger) ou d’ergonomie inadaptée.

Pour avoir une idée de la répartition de votre trafic, au sein de Google Search Console, sélectionnez Performances dans le menu de gauche, puis "APPAREILS" dans le menu sous le graphique. Voici  deux exemples :

Site professionnel BtoB (activité formation, coaching) - cliquez qur l'image 

Site destiné aux particuliers (activité de gite/chambre d'hôtes) - cliquez qur l'image 

Votre objectif : améliorer les performances de votre site sur mobile

Un préalable : votre site performant sur ordinateur

Lorsqu'on crée un site, on envisage le visuel sur écran de type ordinateur. Il est rare, dans le monde des PME, d'avoir le réflexe de structurer son site pour mobile et ordinateur dès le départ. Cette démarche est particulièrement fondamentale pour la page d'accueil.

Donc pour disposer d'un site performant sur mobile, il va falloir d'abord l'optimiser sur ordinateur.

Voici quelques pistes peu techniques (accessibles à des non développeurs) :

• éliminer les styles dans le HTML et utiliser des classes css,
• identifier d'éventuels liens brisés (sur ce site https://www.brokenlinkcheck.com/) et les corriger,
• gérer les images (réduire leur taille si nécessaire, JPG uniquement, optimiser avec https://www.imagerecycle.com/),
• éviter de charger un Iframe sur la page d'accueil et d'un manière générale limiter au maximum le chargement de programmes externes au site,
• éviter de charger des polices de caractères (fonts) externes au site,
• pour Joomla, charger le plugin JCH Optimize, qui va vous permettre de fusionner et de compresser vos fichiers css et js,
• pour Joomla, vérifier que la compression Gzip est bien à OUI en Système/Configuration, onglet Serveur,
• optimiser la base de données (sous PhpMyadmin) et supprimer les extensions et les tables qui ne sont plus utilisées,
• et bien évidemment s'appuyer sur un hébergement performant, sans quoi tous vos efforts seront (presque) vains.
  
  

Un contenu adapté sur mobile

Maintenant que votre site est au mieux de ses performances (et au maximum de vos compétences), on peut réfléchir sur ce qui pourrait être amélioré en matière de performance sur mobile.

Pour orienter la réflexion, partons du constat simple : on ne communique pas de la même façon sur mobile que sur ordinateur.

Il en découle les pistes d'amélioration suivantes :

• les textes doivent courts et les titres encore plus synthétiques et accrocheurs,
• parfois certains contenus sont à sélectionner voire à éviter (Exemple : les documents à télécharger sont-ils pertinents sur mobile?),
• adapter le visuel des images (recadrer ou changer d'image),
• ne pas trop charger d'images et n'utiliser un diaporama que si celui-ci est essentiel (avec des images adaptées au format mobile),
• éviter de charger un programme ou un module non essentiels,
• remplacer un module par un autre plus adapté,
• bannir sous mobile la plupart des fenêtres pop-up,
• parfois ajouter des boutons spécifiques mobile (de type call-to-action tel que "Appelez-nous" - cf. ci-dessous)  

Vos actions sur Joomla pour améliorer les performances mobiles de votre site

1- Ne pas charger des programmes  sur la page d'accueil : utiliser le plugin gratuit JS CSS Control qui permet de ne pas charger des fichiers js et css sur certaines pages, notamment la page d'accueil.

Il faut identifier, dans le HTML (clic droit - "Afficher le code source de la page") les fichiers js et css non utiles. Puis les indiquer dans les paramètres du plugin pour les neutraliser sur la ou les pages concernées (documentation bien expliquée). Voici un exemple :

2- Afficher des contenus sur mobile uniquement ou sur ordinateur uniquement : il faut utiliser les classes css "visible-phone" ou "hidden-desktop" (vous trouverez toutes les classes possibles sur cette page)

Le principe est le suivant : 

Contenu à afficher sur ordinateur uniquement => classe "visible-desktop"
Contenu à afficher sur mobile uniquement => classe "visible-phone"
Contenu à cacher sur mobile, mais à afficher sur tablette et ordinateur => classe "hidden-phone"
etc...

Ce principe est particulièrement intéressant pour les modules sous Joomla. Ces classes sont à placer au niveau de l'onglet "Paramètres avancés" du module :

A noter que si vous avez plusieurs classes, celles-ci doivent être séparées par un espace.
Egalement il peut être utile de noter dans le titre du module, s'il n'est pas affiché sur le site, la classe d'affichage. Si le titre est affiché sur le site, le champ "Note" peut très bien stocker cette information.

Vous pouvez également insérer ces classes dans votre HTML au niveau de n'importe quel élément, par exemple :

<table style="visible-desktop"> détail de la table </table>
ainsi, cette table ne sera affichée que sur ordinateur, et vous pouvez la remplacer par un paragraphe plus suntéhtique qui sera , lui, caché sur ordinateur (calsse "hidden-desktop").

3- Afficher des contenus différemment sur mobile : il faut utiliser les media query en css : le principe est d'afficher des contenus avec des propriétés différentes selon le format d'écran.

Par exemple, écrire dans l'ordre les 2 css suivants dans votre fichier css, va signifier : "les titres h2 auront une taille de 30px, mais si l'écran est de taille inférieure à 767px alors la taille des h2 sera de 20px".

h2{font-size:30px}

@media(max-width:767px){
   h2{font-size:20px}
}

La taille maximum des mobiles est de 767px, on peut également affiner pour des tailles inférieures.

4- Aller encore plus loin pour les modules Joomla :

Le composant gratuit Avanced Module Manager permet non seulement de ne pas afficher des modules sur mobile, mais également de ne pas les charger.
Cette distinction est importante afin d'alléger le chargement global de la page sur mobile.

La sélection par appareil s'effectue sous ce composant dans l'onglet "Affectations" du module (et non plus en "Paramètres avancés" - standard Joomla).

Conseils graphiques pour affichage mobile :

Espacer les boutons afin de permettre une meilleure utilisation par les visiteurs. Ce type de contrôle est effectué par Google Search Console et peut faire l’objet d’un mail d’avertissement. En effet, sur mobile l’intéraction s’effectue avec le doigt et non avec la souris, l’espacement est donc utile pour le confort du visiteur.

Eviter d'indiquer des largeurs pour des contenus (table, div) : si une largeur a été spécifiée dans le HTML il est possible qu’un élément « dépasse » à droite et donc qu’une partie de cet élément ne puisse être visible sur écran mobile. Cette anomalie peut être également signalée par Google Search Console.

Vérifier la taille des caractères (trop petits ou à l’inverse des titres trop gros), ou le centrage de certains éléments (boutons).

Le formulaire de contact est également à vérifier (largeur des champs, présentation des labels, différentes marges …).

Les espacements haut et bas entre les modules est également à vérifier (ni trop collés, ni trop espacés).

Les onglets (appelés « Tabs ») insérés dans le contenu, sont souvent à revoir (affichage en liste plutôt qu’en block) pour une meilleur esthétique et compréhension par le visiteur.

L'exemple ci-dessous illustre un espacement plus important entre les boutons des langues sur mobile, par rapport à l'ordinateur.

Conclusion

Certaines notions évoquées dans cet article peuvent paraître un peu techniques, mais l'objectif est ici de faire passer l'idée que l'affichage mobile de votre site est certainement perfectible et mérite une véritable démarche.
Pour un site Joomla, je me tiens à votre disposition pour une analyse et un plan d'action pour optimiser l'affichage sur mobile.

Ce "plan d'action" n'est pas forcément une prestation considérable, mais ce sera à coup sûr un investissement pour améliorer votre trafic sur mobile et garder vos visiteurs plus longtemps sur votre site.