Comprendre les messages de Google Search Console

Vous avez enregistré votre site sous Google Search Console et vous avez peut-être reçu ce message :

En effet Google intègre de plus en plus de contrôles et augmente la sensibilité de ces derniers, afin d'inciter les webmasters à améliorer sans relâche l'affichage de leurs sites sous mobile.

Vous retrouvez la liste de ces alertes sous Google Search Console en "Ergonomie mobile" dans le menu de gauche :

Pour chaque critère, le nombre de pages concerné est indiqué, le graphique au-dessus indique la tendance journalière.

Si vous cliquez sur l'un des critères vous obtenez le graphique spécifique de la tendance de ce critère. Ce sont souvent les mêmes pages qui sont concernées par tous les critères.
Mais surtout ce qui est intéressant est que Google Search Console fournit le détail des pages incriminées (cf ci-dessous pour "Texte illisible, car trop petit") :

En survol d'une url, on fait apparaître 2 icônes pour ouvrir la page incriminée dans le navigateur (1) et lancer un test d'inspection de l'url avec les outils Google (2). Cette inspection est technique et peu visuelle, nous conseillons de visualiser l'url au format mobile dans la console du navigateur (voir ci-après).

Soit ces urls sont valides et effectivement il faut corriger l'anomalie d'affichage, soit ce sont des anciennes urls indexées par Google et il convient de les supprimer via le lien dans le menu de gauche en "Anciens outils et rapports" :

Visualiser en mobile et corriger les anomalies

Sur la documentation Google, page https://support.google.com/webmasters/answer/9063469  vous trouverez une xeplication assez claire des différentes alertes.
Par exemple pour "Texte illisible, car trop petit" : "Ce rapport signale les pages dont la taille de police est trop petite pour être lisible et sur lesquelles les mobinautes devraient "pincer pour zoomer" afin de lire le contenu. Après avoir spécifié une fenêtre d'affichage, définissez les tailles de police afin qu'elles s'adaptent correctement dans la fenêtre d'affichage".
Par exemple pour "Contenu plus large que l'écran" : "Ce rapport indique les pages qu'il est nécessaire de faire défiler horizontalement pour voir les mots et les images qu'elles contiennent. Cela se produit lorsque des pages utilisent des valeurs absolues dans des déclarations CSS, ou des images conçues pour avoir une meilleure apparence avec une largeur de navigateur particulière (980 px, par exemple). Pour corriger cette erreur, assurez-vous que les pages utilisent des valeurs relatives de largeur et de position pour les éléments CSS, et vérifiez que la taille des images est également évolutive."

Pour se rendre compte rapidement de l'affichage mobile :

1- afficher l'url incriminée dans le navigateur
2- faire un click-droit et choisir "Inspecter" (sous Chrome)
3- cliquer sur l'icône  en haut à droite de la fenêtre (cf ci-dessous en 1), pour afficher la page sous un format d'écran mobile

On constate dans l'exemple ci-dessous que le texte est effectivement trop petit, car il n'occupe que la moitié de l'écran mobile en portrait (cf 2).

L'origine du problème d'affichage provient de l'élément 3 qui occupe une largeur fixe et que nous devons corriger. 

Sur l'image ci-dessous, on visualise précisément l'erreur de paramétrage dans le HTML : il s'agit d'un élément HTML de type "table" auquel on a associé une largeur de 730px. Or cette largeur, directement intégrée au HTML sera prise en compte par tous les navigateurs sur tous les appareils, y compris sur mobile en portrait. Ce dernier format est large d'environ 450px, il ne peut donc pas afficher un élément de largeur fixe de 730px, ni s'adapter en responsive car le style "width:730px" est inséré dans le HTML.

La solution consiste à supprimer le style "width:730px" dans le HTML, mais est-ce suffisant ?

En effet, cela va rétablir un affichage correct sur l'ensemble de la page (ce qui est notre objectif) mais il faut réaliser que cet élément de type table sera affiché de façon très resserrée (on compresse 730px dans un espace de 450px). Il est possible, voire probable, que cet élément sera signalé ultérieurement par Google Search Console comme source d'affichage d'un texte trop petit.

Deux possibilités s'offrent à vous pour une solution pérenne :

1- de revoir le principe de la table et trouver une autre solution de présentation quel que soit le type d'appareil

2- créer 2 modules sous Joomla : 1 pour l'affichage ordinateur/tablette, et 1 pour l'afficage mobile (voir notre article Un affichage mobile performant pour votre site Joomla).

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.