Site mobile friendly : pourquoi et comment l'adopter
Un site mobile friendly se lit et s'utilise sur un smartphone sans zoomer, sans viser un lien au millimètre et sans attendre. En France, plus de la moitié des visites d'un site d'entreprise se font depuis un téléphone, et Google explore et classe les pages d'après leur version mobile depuis 2023 pour la totalité des sites. Un site pensé pour l'ordinateur et subi sur mobile perd donc deux fois, en visiteurs qui repartent et en positions dans les résultats. Voici ce que « adapté au mobile » veut dire concrètement, comment le vérifier, et ce qu'il faut corriger en priorité.
Quatre critères se vérifient en cinq minutes sur un téléphone. Le texte se lit sans zoomer (16 pixels au moins pour le corps de texte). Les boutons et les liens se touchent sans erreur (44 pixels de côté environ). La page s'affiche en moins de 2,5 secondes sur une connexion 4G. Et rien ne dépasse de l'écran, ni tableau ni image qui oblige à faire défiler de côté.
Pourquoi Google ne voit plus que la version mobile
Depuis l'achèvement de l'indexation mobile-first, le robot de Google visite les sites comme le ferait un smartphone. Le contenu absent ou caché sur mobile est absent pour Google. Un site qui masque des paragraphes ou un menu sur petit écran pour faire de la place se prive de ce contenu dans le classement. Les Signaux Web essentiels, qui mesurent la vitesse d'affichage, la stabilité de la mise en page et la réactivité, sont eux aussi évalués sur les visites mobiles, et ils pèsent dans le classement à contenu équivalent. Enfin, une fenêtre publicitaire ou une demande d'inscription qui recouvre la page dès l'arrivée sur mobile est considérée comme une gêne et peut faire reculer la page dans les résultats depuis 2017.
| Critère | Seuil à viser | Comment le vérifier |
|---|---|---|
| Affichage de l'élément principal (LCP) | Moins de 2,5 secondes | PageSpeed Insights, onglet mobile |
| Réactivité aux interactions (INP) | Moins de 200 millisecondes | PageSpeed Insights, données terrain |
| Stabilité de la mise en page (CLS) | Moins de 0,1 | PageSpeed Insights |
| Taille du texte | 16 pixels et plus pour le corps | Lecture sur un téléphone sans zoom |
| Zones tactiles | Environ 44 pixels, espacées de 8 pixels | Audit Lighthouse dans Chrome |
| Défilement horizontal | Aucun | Faire glisser la page vers la gauche sur un téléphone |
Les six réglages qui font un site adapté
- Une mise en page responsive. Le même code HTML s'affiche différemment selon la largeur de l'écran, grâce aux feuilles de style. Les colonnes s'empilent, le menu se replie derrière un bouton, les images se réduisent. La balise viewport dans l'en-tête de page est indispensable, sans elle le téléphone affiche la version ordinateur en miniature. Tous les thèmes WordPress, Shopify ou Wix récents sont responsive, les sites faits sur mesure avant 2015 souvent pas.
- Des pages légères. Le premier poids est celui des images. Une photo de 3 Mo prise au téléphone se sert redimensionnée à la largeur affichée et compressée en WebP, ce qui la ramène sous 150 Ko. Les scripts de suivi, de chat et de réseaux sociaux s'additionnent aussi, et chacun retarde l'affichage sur une connexion mobile. Une page d'accueil sous 1,5 Mo au total est un bon objectif.
- Un texte lisible. Corps de texte à 16 pixels minimum, interligne d'environ 1,5, lignes courtes, contraste suffisant entre le texte et le fond. Le gris clair sur blanc, élégant sur un écran d'ordinateur, disparaît au soleil sur un téléphone.
- Des cibles tactiles assez grandes. Un doigt couvre environ 44 pixels. Les liens en liste serrée, les petites icônes de réseaux sociaux et les boutons collés les uns aux autres provoquent des erreurs de toucher. Le numéro de téléphone doit être un lien cliquable qui lance l'appel, et l'adresse un lien vers le plan.
- Des formulaires courts et bien typés. Chaque champ déclare son type (téléphone, e-mail, nombre) pour que le bon clavier s'ouvre, et accepte le remplissage automatique du navigateur. Trois champs suffisent pour une demande de contact. Chaque champ supplémentaire fait perdre des envois.
- Aucune fenêtre qui recouvre la page à l'arrivée. La demande d'inscription à la newsletter ou la promotion en surimpression se déclenche après un défilement ou à la sortie, jamais au chargement. La bannière de cookies reste discrète et fermable d'un geste.
Google a retiré son outil de test d'optimisation mobile et le rapport d'ergonomie mobile de la Search Console fin 2023. Les guides qui y renvoient sont périmés. Les deux outils actuels sont PageSpeed Insights, qui donne les Signaux Web essentiels mesurés sur les vrais visiteurs quand le site a assez de trafic, et l'audit Lighthouse intégré à Chrome, qui signale les textes trop petits, les cibles tactiles trop proches et les contenus qui dépassent de l'écran.
Tester sur un vrai téléphone
Le mode « appareil mobile » des outils de développement de Chrome donne un aperçu de la mise en page, mais il tourne sur le processeur et la connexion de l'ordinateur. Le test qui compte se fait sur un téléphone de milieu de gamme, en 4G et non en Wi-Fi, sur les cinq pages les plus visitées du site, avec un chronomètre. On y vérifie l'affichage, le menu, un formulaire jusqu'à l'envoi, et le paiement s'il y en a un. Faites-le faire aussi par quelqu'un qui ne connaît pas le site, en lui demandant d'accomplir une tâche précise, trouver les horaires ou demander un devis. Les blocages apparaissent en deux minutes.
Écrire pour l'écran de poche
Sur un écran de 6 pouces, un paragraphe de dix lignes sur ordinateur en fait vingt-cinq. Les textes gagnent à être découpés en paragraphes de trois ou quatre phrases, avec des intertitres qui permettent de sauter, et l'information principale placée en haut, avant que le visiteur ait à défiler. Les tableaux larges se remplacent par des listes ou se rendent défilables dans leur cadre. L'action attendue, appeler, réserver, demander un devis, reste visible en permanence, souvent sous la forme d'un bouton fixé en bas de l'écran, à portée du pouce.
Votre site passe-t-il le test du téléphone ?
Cochez chaque point vérifié sur un vrai smartphone en 4G.
Vos questions
Responsive ou site mobile séparé ?
Un site responsive est-il forcément rapide ?
Combien coûte l'adaptation d'un site existant ?
Le mobile décide aujourd'hui de la visibilité d'un site et de ses conversions. Les réglages ci-dessus se vérifient en une après-midi sur un téléphone, et la plupart se corrigent sans refonte. Pour aller plus loin sur le référencement, voyez notre guide pour améliorer son trafic avec le SEO et, pour un site WordPress, nos réglages pour l'optimiser pour le SEO.
