Rendre votre site plus mobile-friendly avec PageSpeed Insights

Lundi 19 mai 2014

Pour aider les développeurs et les webmasters à rendre leurs pages mobile-friendly, nous avons récemment mis à jour PageSpeed Insights avec des recommandations supplémentaires sur l’ergonomie mobile.

Une mauvaise ergonomie peut réduire les avantages d’un chargement rapide de page. Nous savons que la page mobile moyenne
prend plus de 7 secondes à charger, et en utilisant
l’outil PageSpeed Insights
et en suivant ses recommandations de vitesse, vous pouvez rendre votre page
beaucoup plus rapide à charger. Mais supposons que votre site mobile rapide se charge en seulement 2 secondes au lieu de 7 secondes. Si les utilisateurs mobiles doivent toujours passer 5 secondes supplémentaires une fois la page chargée pour pincer, zoomer et faire défiler l’écran avant de pouvoir commencer à lire le texte et à interagir avec la page, alors ce site n’est finalement pas si rapide à utiliser. Les nouvelles règles d’expérience utilisateur de PageSpeed Insights peuvent vous aider à trouver et à corriger ces problèmes d’ergonomie.

Ces nouvelles recommandations couvrent actuellement les domaines suivants :

• Configurer la zone d’affichage (viewport) : Sans balise meta-viewport , les navigateurs mobiles modernes supposeront que votre site n’est pas mobile-friendly, se replieront sur une zone d’affichage de bureau et appliqueront éventuellement un renforcement de police, ce qui interférera avec la mise en page prévue de votre page.
  La configuration de la zone d’affichage
  à width=device-width devrait être votre première étape pour mobiliser votre site.
• Adapter le contenu à la zone d’affichage: Les utilisateurs s’attendent à ce que les sites mobiles défilent verticalement, et non horizontalement. Une fois que vous avez configuré votre zone d’affichage, assurez-vous que le contenu de votre page
  s’adapte à la largeur de cette zone d’affichage, en gardant à l’esprit que tous les appareils mobiles n’ont pas la même largeur.
• Utiliser des tailles de police lisibles: Si les utilisateurs doivent zoomer simplement pour pouvoir lire le texte de votre article sur l’écran de leur smartphone, alors votre site n’est pas mobile-friendly. PageSpeed Insights vérifie que
  le texte de votre site est suffisamment grand
  pour que la plupart des utilisateurs puissent le lire confortablement.
• Dimensionner correctement les cibles tactiles: Rien n’est plus frustrant que d’essayer d’appuyer sur un bouton ou un lien sur l’écran tactile d’un téléphone ou d’une tablette, et de toucher accidentellement le mauvais parce que la pulpe de votre doigt est beaucoup plus grande que le curseur de la souris d’un ordinateur. Assurez-vous que
  les cibles tactiles
  de l’écran tactile de votre site mobile sont suffisamment grandes pour être pressées facilement.
• Éviter les plugins: La plupart des smartphones ne prennent pas en charge Flash ou d’autres plugins de navigateur, alors assurez-vous que votre site mobile
  ne dépend pas de plugins.

Ces règles sont décrites plus en détail dans
nos pages d’aide. Lorsque vous êtes prêt, vous pouvez tester vos pages et les améliorations que vous apportez à l’aide de
l’outil PageSpeed Insights. Nous avons également mis à jour PageSpeed Insights pour utiliser un design mobile-friendly et nous avons traduit nos documents dans d’autres langues.

Comme toujours, si vous avez des questions ou des commentaires, veuillez les publier dans notre
groupe de discussion.

Publié par Matthew Steele et Doantam Phan, équipe PageSpeed Insights