Outil de test d'optimisation mobile

Disposer d'un site Web adapté aux mobiles est essentiel pour votre présence en ligne. Dans de nombreux pays, les mobinautes sont désormais plus nombreux que les internautes. Si vous n'avez pas encore adapté votre site Web aux mobiles, nous vous conseillons de le faire. L'outil de test d'optimisation mobile de la Search Console permet de savoir rapidement et facilement si une page de votre site est adaptée aux mobiles ou non.

Ouvrir l'outil de test d'optimisation mobile

 

Utiliser l'outil

L'outil de test d'optimisation mobile est très facile à utiliser. Il vous suffit de saisir l'URL complète de la page Web que vous voulez tester. Toutes les redirections implémentées par la page seront suivies lors du test. Il dure généralement moins d'une minute.

Les résultats du test incluent une capture d'écran de la page telle que Google la voit sur un appareil mobile, ainsi qu'une liste de tous les problèmes d'ergonomie mobile détectés. Ces problèmes peuvent concerner les utilisateurs qui consultent la page sur un appareil mobile avec un petit écran. Il peut s'agir d'une taille de police trop petite (difficile à lire sur un petit écran) ou de l'utilisation de Flash (que la plupart des appareils mobiles n'acceptent pas).

Si la page est inaccessible

Si, pour une raison quelconque, l'outil ne peut pas accéder à la page, il affiche une erreur décrivant le problème. Les difficultés d'accès peuvent être liées à la connectivité réseau ou à l'indisponibilité du site.

Cet outil accède à la page en tant que Googlebot (c'est-à-dire, en tant que Google, sans utiliser vos identifiants). Cela signifie qu'il peut être bloqué par un fichier robots.txt.
Si la page contient des ressources impossibles à charger

S'il est impossible lors d'un test de charger toutes les ressources utilisées par une page, vous recevrez un avertissement. Les ressources sont des éléments externes, comme des fichiers image, CSS ou de script, qui sont inclus dans une page. Cela peut être dû à plusieurs raisons :

  • La ressource n'a pas pu être chargée dans un délai raisonnable. Dans ce cas, essayez d'exécuter de nouveau le test. Si ce problème persiste, envisagez d'héberger la ressource ailleurs ou essayez de découvrir le motif de l'absence de réponse de l'hôte et de résoudre le problème.
  • La ressource n'existe pas à l'emplacement indiqué (erreur 404). Corrigez l'URL de la ressource.
  • La ressource est inaccessible aux utilisateurs qui ne sont pas connectés. Le test accède à la page en tant qu'utilisateur anonyme : assurez-vous que toutes les ressources sont accessibles aux utilisateurs anonymes.
  • Un fichier robots.txt empêche Googlebot d'accéder à la ressource. Si cette ressource est importante (voir ci-dessous) et qu'elle se trouve sur votre propre site, vous pouvez autoriser Googlebot à y accéder. Si elle se trouve sur un autre site, vous pouvez contacter le webmaster du site en question pour lui demander de la débloquer.

Débloquer les ressources importantes

Si une ressource bloquée est importante, cela peut avoir des conséquences majeures sur l'interprétation de la page par Google. Par exemple, si une grande image est bloquée, une page peut sembler adaptée aux mobiles alors qu'elle ne l'est pas. Un fichier CSS bloqué peut provoquer l'application de mauvais styles de police (par exemple, trop petits pour un appareil). Cela a des conséquences aussi bien sur l'évaluation de l'ergonomie mobile que sur la capacité de Google à explorer votre page. Assurez-vous que le fichier robots.txt n'empêche pas Googlebot d'accéder à des ressources importantes, et que ces dernières sont globalement accessibles.

Résultats de test incohérents/Problèmes de chargement de page

Si vous avez des ressources impossibles à charger ou d'autres problèmes de chargement de page, les résultats peuvent varier légèrement d'un test à l'autre, car l'ensemble de ressources chargées n'est pas le même pour tous les tests. Si le rendu de la page change chaque fois que vous réalisez le test alors que vous n'avez apporté aucune modification, recherchez la présence d'un message d'avertissement confirmant le problème de chargement. Cliquez dessus pour voir ce qui a pu empêcher le rendu cohérent et correct de la page.

Erreurs d'ergonomie mobile

L'outil de test d'optimisation mobile permet d'identifier les problèmes d'ergonomie mobile suivants :

Liste d'erreurs

Utilise des plug-ins incompatibles

La page contient des plug-ins, tels que Flash, qui ne sont pas compatibles avec la plupart des navigateurs mobiles. Nous vous recommandons de revoir la conception de votre page en faisant usage des technologies Web de pointe, compatibles avec la majorité des appareils, par exemple le format HTML5. En savoir plus sur les consignes relatives aux animations sur le Web

Fenêtre d'affichage non configurée

Votre page ne définit pas de propriété pour la fenêtre d'affichage, la balise qui indique aux navigateurs comment ajuster les dimensions de la page et les modifier pour qu'elles s'adaptent à la taille de l'écran. Étant donné que les visiteurs de votre site utilisent différents appareils dont la taille d'écran varie (des grands moniteurs d'ordinateur aux tablettes, en passant par les petits smartphones), vos pages doivent spécifier une fenêtre d'affichage à l'aide de la balise meta viewport. Pour en savoir plus, consultez la page Principes de base du Responsive Web Design.

Fenêtre d'affichage non configurée sur "device-width"

Votre page définit une propriété pour la fenêtre d'affichage dont la largeur est fixe, ce qui signifie que la fenêtre ne peut pas s'adapter à différentes tailles d'écran. Pour corriger cette erreur, adoptez un responsive design pour les pages de votre site, et configurez la fenêtre d'affichage de sorte qu'elle corresponde à la largeur de l'appareil et s'adapte en conséquence. Découvrez comment correctement définir la fenêtre d'affichage.

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 en savoir plus, consultez la page Adapter la taille du contenu à la fenêtre d'affichage.

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. Pour en savoir plus sur les bonnes pratiques relatives à la taille de la police, consultez la page Utiliser des tailles de police lisibles.

Éléments cliquables trop rapprochés

Ce rapport présente des URL de sites sur lesquels des éléments tactiles, tels que des boutons ou des liens de navigation, sont si proches les uns des autres qu'il est difficile pour un mobinaute de toucher avec un doigt l'élément de son choix sans atteindre un élément à proximité. Pour corriger ces erreurs, assurez-vous de dimensionner et d'espacer correctement les boutons, ainsi que les liens de navigation afin qu'ils soient adaptés pour les mobinautes. Pour en savoir plus, consultez la page Dimensionner les éléments tactiles de manière appropriée.

Liens associés

Ces informations vous-ont elles été utiles ?
Comment pouvons-nous l'améliorer ?