Conseils pour un affichage mobile performant

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 ne cesse 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 un exemple:

 

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 au strict nécessaire, privilégier JPG plutôt que PNG, si possible utiliser des WEBP ou des SVG, optimiser les JPG  en ligne 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 (flux Facebook par exemple),
• éviter de charger des polices de caractères ou d'icônes externes au site si elles ne sont pas utiles,
• 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 globale, onglet Serveur,
• optimiser la base de données (sous PhpMyadmin),
• 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.

Pour aller plus loin, vous pouvez tester gratuitement les performances de votre site sur https://pagespeed.web.dev/?hl=fr.

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 être 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 et leurs légendes 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 le site https://www.lamaisondezelie.net/ en vue mobile)  

Simuler sur votre PC le visuel de votre site sur mobile

Il n'est pas nécessaire de visualiser votre site sur mobile. Pour des ajustements graphiques en css, il est beaucoup plus utile d'afficher le visuel mobile sur PC grâce à la console des navigateurs (Chrome ou Firefox), ce qui permet d'accéder au visuel de l'image ci-dessus. La démarche est la suivante :

• clic-droit sur le site,
• choisir "Inspecter" sous Chrome ou Firefox,
• dans la fenêtre de la console de Chrome cliquer sur l'icône à gauche
  ou dans la fenêtre de la console de Firefox cliquer sur l'icône à droite cf. image ci-dessous)
• rafraichir l'affichage par CTRL + F5

 

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

1- Ne pas charger des programmes inutiles sur la page d'accueil

Le plugin gratuit pour Joomla JS CSS Control 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 "Avancé" 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 sur mobile, par un paragraphe plus synthétique qui sera, lui, caché sur ordinateur (classe "hidden-desktop").

3- Aller encore plus loin pour les modules Joomla

Le composant gratuit Advanced 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 "Conditions" du module (1 sur l'image ci-dessous), et non plus en "Avancé" - standard Joomla.
Puis rechercher la sélection par périphérique (2).
Ensuite indiquer le périphérique souhaité, dans l'exemple ci-dessous "mobile" (3).
Enfin, effectuer d'autres sélection, par exemple par page (4).
Un résumé à droite de l'écran indique que ces conditions (2-3) et (4) sont cumulatives (cf "ET").

 

Conseils graphiques pour affichage sur mobile

Afficher des contenus différemment sur mobile

Par exemple, un titre est affiché en gros caractères sur desktop, mais sur le petit écran sous mobile cette taille sera disgracieuse, elle doit être réduite.

Pour ce type de paramétrage, il faut utiliser ce qu'on appelle 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, dans votre fichier css, on veut indiquer : "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".
Ci-dessous les css correspondant à cet objectif:

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.

A noter : ces 2 css doivent être paramétrés dans cet ordre, on écrit d'abord le cas général (30px) et ensuite le cas particulier pour écrans mobiles (20px). Sinon cela ne fonctionne pas et tous les titres h2 restent à 30px quelle que soit la taille des écrans.

Voir notre formation sur les css

 

Créer des visuels avec des outils performants

J'utilise le composant de diaporamas Smartslider (Joomla et Wordpress) qui permet de nombreuses adaptations en fonction de la taille des écrans:

• afficher ou non selon les périphériques,
• taille des polices avec la notion d'"Echelle de texte" adapté à chaque pérphérique (cf diaporama ci-dessous),
• padding et margin,
• position du texte sur l'image, adaptée selon le périphérique,
• hauteur et largeur des images du diaporama par périphérique, etc...

Autres conseils graphiques

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 (cf. ci-dessous). En effet, sur mobile l’interaction 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.