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
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) :
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 :
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).
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.
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.