Menu Fermer

Infos SEO

Définition de « Mobile-first »

Evolution des moteurs de recherche sur la planète

Depuis septembre 2017, Google a constaté que les requêtes effectuées depuis un terminal mobile étaient devenues nettement plus nombreuses que celles effectuées depuis un ordinateur.

En conséquence, dès les années 2018 et 2019, le moteur de recherche a décidé de privilégier les pages web dont le contenu pouvait s’afficher correctement et rapidement sur les terminaux mobiles.

Cet article va vous montrer quels sont les critères importants pour que Google considère qu’une page est compatible avec le « mobile-first« , mais surtout il va vous expliquer comment faire pour corriger et optimiser le contenu de vos pages pour qu’elles soient toutes optimisées pour les mobiles.

1. L’affichage doit d’abord être optimal pour un mobile

C’est la traduction de « Mobile-first ». Autrement dit, pour vérifier le rendu de vos pages web, vous devez commencer par les afficher sur un écran de mobile et vous assurer qu’elles sont parfaitement affichées, avant même de vous intéresser à leur affichage sur un écran d’ordinateur !

La plupart des navigateurs web ont maintenant une fonctionnalité qui permet de simuler un affichage sur mobile. C’est très pratique quand vous concevez votre site web, la création de pages n’étant pas encore optimale à partir d’un terminal mobile.

Simulation d’affichage mobile sur les principaux navigateurs

Affichage mobile sur Firefox :

vue adaptative sur Firefox pour les mobiles

Dans le menu de Firefox, descendez jusqu’au choix « Développement web », puis choisissez « Vue adaptative ». L’inspecteur s’ouvre et vous propose de basculer entre une vue ordinateur et une vue mobile (en cliquant sur le petit ou le grand cadre).

Affichage mobile sur Internet Explorer :

Appuyez sur la touche F12 ou bien allez dans le menu « Outils » et choisissez « Outils de développement F12 », puis sélectionnez l’onglet « Émulation » et sélectionnez un profil de navigateur « Windows phone ». Le résultat n’est pas terrible, terrible… Peut mieux faire, IE !

Affichage mobile sur Chrome :

vue adaptative des outils de développement de Chrome

dans le menu de Chrome, descendez sur le choix « Plus d’outils », choisissez « outils de développement », puis cliquez sur les deux rectangles petit et grand pour basculer d’une vue à l’autre.

Adaptation de la feuille de styles CSS :

C’est principalement grâce aux styles que vous allez pouvoir adapter l’affichage du contenu des pages. Je pense vous rédiger un article complet à ce sujet car il y a beaucoup de choses à dire. Voici les principales règles que vous devez respecter (si vous ne le faites pas, Google ne manquera pas de vous signaler ces erreurs. Voyez mon article sur la Search Console de Google à ce sujet) :

  • vos textes et vos images ne doivent pas déborder du cadre de l’écran
  • le texte ne doit pas être trop petit ou avec un contraste trop faible pouvant gêner la lecture
  • Les éléments cliquables ne doivent pas être trop proches
  • Pas de défilement latéral du contenu

2. L’affichage sur un mobile doit être rapide

l'affichage sur un mobile doit être le plus rapide possible

L’internaute étant encore plus impatient quand il consulte le web depuis un mobile (il est habitué à la vitesse d’affichage des applications mobiles et surveille parfois son temps de connexion), un contenu « mobile friendly » doit s’afficher rapidement, en moins de 3 secondes. La vitesse d’affichage est un critère important en SEO. Au delà, de plus en plus d’internautes décrochent et passent à autre chose. Or, n’oubliez pas que Google vit de ses requêtes : il fait payer les emplacements sur les requêtes les plus utilisées. Il a donc tout particulièrement intérêt à ce que ses « clients » ne désertent pas ses pages de recherche !

3. Le contenu doit être intéressant

L’écran d’un mobile n’est pas le plus confortable pour y lire de longues phrases de textes, ou alors l’information doit être importante. Le nouvel internaute privilégie la vidéo, le son, les images au détriment du texte. On ne fait pas de la recherche universitaire, on consomme du contenu !

Tout contenu peut être considéré comme intéressant, cela dépend de ce que l’internaute est venu chercher. L’internaute commence par entrer des mots clés dans la zone de recherche de Google, puis il parcourt rapidement le titre de la page, sa description, parfois même son url, afin d’y trouver quelques termes qui le conforteront dans son idée que la page doit avoir le contenu qu’il cherche, enfin il cliquera sur le lien pour afficher la page et lire (souvent en diagonale) les titres et sous-titres. Google comptabilise le nombre de secondes durant lesquelles l’internaute est resté sur la page pour déterminer si celui-ci a jugé l’information proposée suffisamment intéressante pour qu’il prenne le temps pour la lire. Le pire c’est lorsque l’internaute retourne en arrière vers la recherche ou qu’il ferme totalement la page qu’il vient d’ouvrir.

Vous avez donc tout intérêt à ce que les mots clés présents dans votre titre de page, dans sa description, dans les titres et les sous-titres mis en valeur dans le contenu soient parfaitement représentatifs de l’information présentée dans votre page.

Selon Google, un contenu est jugé intéressant pour les mots-clés utilisés dans une recherche lorsque l’internaute prend le temps de rester sur une page, d’y lire son contenu et de cliquer sur les liens qu’elle contient pour poursuivre son exploration.

Si vous tapez « mobile-first » dans Google, il vous proposera en bas de page (après la liste des 10 premiers résultats qu’il a trouvé pour ce terme), une liste de propositions prises parmi les termes les plus souvent recherchés par les internautes, comme ceci :

recherches google associées à Mobile-first

Cette liste vous donne de précieuses indications sur ce que les internautes recherchent en général. On voit que la définition de ce terme est importante. C’est pourquoi j’ai nommé ainsi un des titres de cet article : « Définition de Mobile-first« . On voit aussi qu’ils entrent souvent l’année dans leurs termes de recherche. J’ai donc ajouté l’année dans mes titres.
Le terme ‘SEO’ est également utilisé et je l’ai donc incorporé dans mon texte, en le mettant en gras pour souligner son importance.

Tout cela est un ensemble de petites astuces, mais elles ne sont pas artificielles : mon article parle réellement de vitesse d’affichage, de la définition de « mobile-first » et de son importance dans les règles de référencement naturel qui constituent le SEO.

(Oups, j’ai encore mis en gras ces termes importants 😉

Le contenu doit être facile à trouver

Navigation sur mobile avec le pouce

La navigation sur un mobile se fait souvent à l’aide du pouce. Exit donc les menus et sous-menus déroulants difficiles à manipuler. De plus en plus de sites privilégient l’affichage linéaire, toute l’information défilant dans une seule longue page, comme ici.

Un site adapté au « mobile-first » doit donc permettre une navigation simple et rapide d’une page à l’autre, en privilégiant les liens internes mis directement sur des portions de contenus plutôt que des menus compliqués.

4. Le contenu doit être utile

Google perfectionne en permanence ses outils d’intelligence artificielle afin de parvenir à comprendre la sémantique d’un texte. Il devient donc totalement inutile de chercher à bourrer ses pages de mots-clés. (Voir mon article sur l’intelligence artificielle et le rédactionnel SEO).

Si vous décidez de traiter d’un sujet, alors il faudra que vous maitrisiez ce sujet. Vous devrez non seulement le traiter en profondeur, mais aussi apporter des informations introuvables ailleurs, précises, pertinentes, utiles à ceux qui en prendront connaissance, à tel point que vos visiteurs ne manqueront pas d’envoyer le lien de vos pages vers leurs connaissances.

C’est cela qui fera monter vos pages en tête des classements et non les astuces fumeuses et empiriques des apprentis gourous du SEO !

Un contenu est jugé utile lorsqu’il apporte des solutions, lorsqu’il propose une aide ou une information pouvant être utilisée par l’internaute et lorsqu’elle est partagée à d’autres internautes. Il ne faut donc pas se contenter de parler d’un sujet. Il faut également apporter des solutions aux problèmes évoqués ou tout simplement des liens menant vers un complément sur cette information.

Cet article, par exemple, risquerait de ne pas être considéré comme suffisamment intéressant et utile s’il se contentait de faire un constat sans apporter de solutions. Voyons quelles techniques et quels outils utiliser pour qu’une page web réponde à ces trois critères :

  1. être rapide pour un affichage sur mobile
  2. avoir un contenu intéressant
  3. être utile

Comment accélérer l’affichage d’une page web ?

Optimiser les images

Si vous ajoutez des images à une page web, elles doivent être enregistrées à une résolution de 72 dpi. Au format JPG si elles contiennent plus de 256 couleurs (par exemple une image avec des dégradés riches en nuances) ou au format PNG pour des pictos ou des schémas. Les dimensions du fichier contenant l’image doivent être les mêmes que celles de l’affichage. Autrement dit : ne pas créer une image très grande si vous désirez l’afficher en plus petit : cela créerait un fichier plus gros que nécessaire.

Limiter et compresser les feuilles de style

Les CMS tels que WordPress font appel à des plugins et des constructeurs de pages qui ont la mauvaise habitude de générer chacun sa feuille de style. Chaque nouvelle feuille de style doit être chargée par le navigateur avant d’afficher le contenu de la page. Pour limiter les dégâts, vous devez installer un outil (certains sont des plugins eux aussi !) qui va compresser les feuilles de style et parfois les mettre en cache mémoire. De cette façon, l’appel à ces feuilles de style sera limité et plus rapide. Mais la meilleure méthode reste de ne créer qu’une seule feuille de style comportant toutes les déclarations de style.
A proscrire absolument : l’écriture de style au sein même du code HTML, par exemple :

<p style="color:#ccc">paragraphe de couleur grise</p>

Limiter l’utilisation des polices

De plus en plus d’outils vous proposent des panoplies de polices de caractères très originales. L’idéal, pensez-vous, pour personnaliser votre site web. Le souci c’est que les navigateurs web ont un nombre très limité de polices de caractères en mémoire. Quand ils détectent une police inconnue, ils partent à la recherche du fichier qui contient le dessin de chacune des lettres de cette police inconnue. Avant de pouvoir les afficher, ils doivent donc télécharger et conserver en mémoire l’ensemble des caractères constituant la police. De quoi alourdir très rapidement le chargement de votre page web !

Google propose par exemple un ensemble de polices appelé ‘Google fonts‘.
Dans WordPress, c’est très simple à utiliser : on ajoute un plugin, lequel va vous permettre de choisir les polices qui vous plaisent dans une large bibliothèque de choix.

Une autre méthode consiste à placer le fichier contenant la liste des caractères et leurs dessins (communément appelé « fichier de fonte ») dans un dossier (ex : /fonts/), puis d’appeler ce fichier dans la feuille de styles, comme ceci :

@font-face {  font-family: "Ma fonte";  src: url("/fonts/mafonte.ttf") format("ttf"); }

Sachez que chaque police utilisée peut ajouter à elle seule 2 à 3 secondes au temps de chargement global de votre page…

La solution : privilégier les polices standards et limiter au maximum l’utilisation de polices supplémentaires. Après tout, n’est-ce pas surtout ce que vous allez dire qui a de l’importance, plutôt que la façon d’afficher ce contenu ?

Vérifier la vitesse d’affichage d’une page

Une fois que vous aurez travaillé l’optimisation de votre contenu, vous pouvez utiliser un outil gratuit en ligne qui testera la vitesse d’affichage de votre page et vous indiquera les points perfectibles : Google Page Insights.

Installer un cache côté serveur

j’ai gardé cet outil pour la fin car il ne peut remplacer le travail d’optimisation que vous devez faire sur une page. Un cache est un mécanisme qui permet de garder localement un contenu afin de ne pas retourner le télécharger plusieurs fois alors qu’il a déjà été vu par un internaute.

Votre navigateur contient un cache, mais un serveur de pages web peut aussi proposer un cache. Le plus connu, car il est performant et surtout gratuit, est CloudFlare. Il permet non seulement de mettre en cache vos page avant même leur envoi vers votre navigateur, mais il propose en plus des fonctions de sécurisation très performantes (et un peu intrusives). Revers de la médaille : il vous faudra modifier les DNS de votre domaine. C’est une opération un peu technique qu’il vaut mieux faire réaliser par votre webmaster.

Cet article est maintenant terminé. Il vous a exposé un sujet : le « mobile first« . Il l’a présenté, en a détaillé les différents aspects et vous a apporté des pistes de solutions. Il est certainement perfectible. C’est là qu’entre en jeu l’aspect le plus important d’Internet : l’interactivité.

Vous avez le pouvoir d’intervenir, de proposer vos critiques et vos suggestions et donc de faire vivre cet article. Car c’est surtout grâce à vous, à vos interventions, vos ajouts, grâce au partage du lien que vous ferez peut-être avec d’autres internautes que cet article prouvera à Google son utilité et donc l’intérêt de le placer en tête des résultats de recherche 😉

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Haut de la page