Comment Auditer la Version Mobile d’un Site?

L’audit de la version mobile.

Pourquoi ?

Parce qu’avoir une version mobile optimisée est crucial.

Pour l’expérience utilisateur. Et pour le SEO.

Google privilégie les sites mobile-friendly.

Si votre site n’est pas optimisé, vous perdez des visiteurs et des positions dans les SERP.

En effet, une mauvaise expérience mobile peut faire fuir les utilisateurs.

Et cela affecte directement le classement.

En optimisant votre site mobile, vous améliorez votre SEO et votre taux de conversion.

Dans ce guide je vais vous montrer comment auditer la version mobile de votre site.

C’est parti !

01Rappel des Fondamentaux du Mobile-Friendly

Pour qu’un site soit considéré comme mobile-friendly, il doit respecter plusieurs critères.

Critères pour qu’un site soit Mobile-Friendly

• Contenu bien présenté
  Le contenu doit être accessible sans nécessiter de zoom.
  Les utilisateurs doivent pouvoir lire les informations facilement.
• Lisibilité sur petits écrans
  La taille de police doit être adaptée pour une lecture confortable.
  Les textes doivent être clairs et lisibles.
• Navigation facile au doigt
  Les boutons et liens doivent être facilement cliquables.
  La navigation doit être intuitive et fluide.
• Utilité pour les mobinautes
  Le site doit répondre aux besoins spécifiques des utilisateurs mobiles.
  Les fonctionnalités doivent être accessibles et utiles.
• Bonne compréhension par Google
  Google doit pouvoir indexer correctement la version mobile du site.
  C’est crucial pour un bon classement dans les résultats de recherche.

Impact sur le Classement si Site Non Optimisé pour Mobile

Un site non optimisé pour mobile peut avoir des conséquences négatives :

• Baisse du Classement dans les SERP
  Google privilégie les sites mobile-friendly.
  Si votre site n’est pas optimisé, il descendra dans les résultats de recherche.
• Mauvaise Expérience Utilisateur
  Les utilisateurs quittent rapidement un site difficile à naviguer.
  Cela augmente le taux de rebond et diminue les conversions.
• Diminution du Trafic
  Moins de visibilité signifie moins de visiteurs.
  Moins de visiteurs signifie moins de conversions et de ventes.

Les 4 Façons de Rendre un Site Mobile-Friendly

• Responsive Design
  Le design s’adapte à toutes les tailles d’écran.
  C’est la méthode recommandée par Google.
  Même URL et même HTML pour tous les appareils.
• Format AMP (Accelerated Mobile Pages)
  Version simplifiée du site pour un chargement ultra-rapide.
  Utilise un HTML spécifique et exclut les scripts JavaScript.
  Moins adapté aux sites e-commerce.
• Diffusion Dynamique (Dynamic Serving)
  Le serveur envoie un code HTML différent selon l’appareil.
  Utilise la même URL pour tous les appareils.
  Nécessite un serveur bien configuré.
• Version Mobile sur URL Séparée
  Utilise une URL différente pour la version mobile.
  Par exemple, « m.example.com ».
  Mauvais pour le SEO car dilue l’autorité du site.

Responsive Design: La Meilleure Option pour le SEO Mobile

Le responsive design est la méthode idéale pour plusieurs raisons :

• Recommandé par Google
  C’est la méthode préférée du moteur de recherche.
• Aucun Risque pour le SEO
  La même URL et le même HTML pour tous les appareils.
• Facile à Implémenter
  De nombreux templates et thèmes responsive sont disponibles.
• Compatible avec Toutes les Autres Méthodes
  Vous pouvez facilement intégrer des fonctionnalités spécifiques.

Pour un site web performant sur mobile, le responsive design est la solution à privilégier.

02Éléments Cruciaux à Auditer sur Mobile

Pour garantir que votre site est optimisé pour les appareils mobiles, il est essentiel de vérifier certains éléments clés.

Ergonomie

L’ergonomie joue un rôle crucial dans l’expérience utilisateur sur mobile.

Voici les points à vérifier :

Utilisation de la balise viewport

La balise viewport aide à contrôler la mise en page sur les appareils mobiles.
Elle doit être correctement configurée pour assurer un affichage optimal.
Voici un exemple de balise viewport correctement configurée :

Absence de publicités intrusives

Les publicités intrusives, comme les pop-ups, peuvent gêner l’utilisateur.
Elles doivent être minimisées ou éliminées.
Google recommande l’utilisation de bannières discrètes plutôt que de pop-ups.

Taille de police adaptée

La taille de police doit être suffisamment grande pour être lisible sans zoom.

Voici un exemple de CSS pour définir une taille de police adaptée :

Redirections Mobiles Sans Ralentissement

Les redirections doivent être rapides pour ne pas ralentir le site.

Utilisez des redirections 301 plutôt que des redirections JavaScript.

Voici un exemple de redirection 301 dans un fichier .htaccess :

Visibilité des Fichiers CSS, JS et Images pour Googlebot

Googlebot doit avoir accès à tous les fichiers nécessaires pour rendre correctement la page.

Vérifiez le fichier robots.txt pour vous assurer que rien n’est bloqué.

Voici un exemple de fichier robots.txt bien configuré :

Vitesse de Chargement Suffisante

La vitesse de chargement est cruciale pour l’expérience utilisateur et le SEO.

Utilisez des outils comme Google PageSpeed Insights pour évaluer et améliorer la vitesse de votre site.

Comparaison des Disparités entre Versions Mobile et Ordinateur

Il est essentiel de comparer les versions mobile et ordinateur pour détecter les disparités.

Voici ce qu’il faut vérifier :

Balises title et description

Assurez-vous que les balises title et description sont cohérentes entre les deux versions.
Voici un exemple de balise title et description :

<title>Exemple de titre</title>

<meta name= « description » content= « Exemple de description »>

Directives meta-robots

Les directives meta-robots doivent être identiques sur les deux versions.

Exemple de directive meta-robots :

Balises rel canonical, prev, next

Assurez-vous que les balises rel canonical, prev et next sont correctement configurées.

Exemple de balise rel canonical :

Auditer ces éléments clés garantit que votre site mobile offre une excellente expérience utilisateur et est bien perçu par Google.

03Sélection des Pages à Tester

Pour un audit complet, il est crucial de tester différents types de pages.

Voici comment identifier et tester les modèles de pages clés.

Identifier les Templates de Pages Clés

Commencez par identifier les types de pages les plus importants de votre site.

Voici quelques exemples :

• Page d’accueil : C’est souvent la page la plus visitée. Assurez-vous qu’elle est bien optimisée pour mobile.
• Pages de niveau 1 : Ces pages incluent des sections cruciales comme les prestations, le blog et la page de contact. Elles jouent un rôle clé dans l’expérience utilisateur.
• Template d’articles de blog : Les articles de blog attirent souvent du trafic organique. Vérifiez que leur mise en page est adaptée pour mobile.

Reporter les URL Importantes et Templates dans le Modèle d’Audit

Une fois les modèles de pages identifiés, reportez-les dans votre modèle d’audit technique.

Voici comment procéder :

1. Ouvrez le modèle d’audit : Utilisez une feuille de calcul pour organiser les URL et templates.
2. Listez les URL des pages importantes et des templates de page : Copiez et collez les URL des pages que vous avez identifiées.

Par exemple, voici les URL importantes de mon site drujokweb.fr :

1. Page d’accueil : https://www.drujokweb.fr
2. Prestations : https://www.drujokweb.fr/prestation-seo
3. Blog : https://www.drujokweb.fr/blog
4. Contact : https://www.drujokweb.fr/contact
5. Guide Semrush : https://www.drujokweb.fr/blog/semrush
6. Guide Audit SEO : https://www.drujokweb.fr/blog/audit-seo

Pourquoi cette Étape est Cruciale

Identifier les modèles de pages et les URL clés permet de :

• Garantir une couverture complète de l’audit.
• Détecter des problèmes spécifiques à certains types de pages.
• Prioriser les corrections en fonction de l’importance des pages.

En répertoriant les URL importantes et les templates, vous assurez une couverture complète de votre audit.

Cela permet de prioriser les correctifs et d’optimiser efficacement votre site mobile.

04Effectuer les Tests avec les Outils

Pour un audit mobile complet, nous allons utiliser des outils spécifiques.

Voici comment procéder étape par étape.

Utilisation de Screaming Frog et Google PageSpeed Insights

Commençons par configurer Screaming Frog pour l’audit mobile.

Connexion à l’API PageSpeed Insights dans Screaming Frog

1. Ouvrez Screaming Frog
   
   @@IMG:https://www.drujokweb.fr/wp-content/uploads/2024/09/word-image-11638-4.jpeg|1365|@@
2. Accédez aux paramètres d’APICliquez sur « Configuration » > « API Access » > « PageSpeed Insights » @@IMG:https://www.drujokweb.fr/wp-content/uploads/2024/09/word-image-11638-5.jpeg|562|@@
3. Configurez l’APIVous avez deux options : Local ou Remote. Local : Lighthouse tourne sur votre machine, pas besoin de clé API.
4. Remote : Lighthouse tourne sur un serveur distant, nécessite une clé API. @@IMG:https://www.drujokweb.fr/wp-content/uploads/2024/09/word-image-11638-6.jpeg|802|@@
5. Pour la démonstration, nous allons utiliser la méthode Remote. @@IMG:https://www.drujokweb.fr/wp-content/uploads/2024/09/word-image-11638-7.jpeg|795|@@
6. Obtenez une clé APICliquez sur le lien fourni pour obtenir une clé API.Suivez les étapes pour créer un projet et obtenir votre clé. @@IMG:https://www.drujokweb.fr/wp-content/uploads/2024/09/word-image-11638-8.jpeg|913|@@
7. Entrez la clé APICollez la clé API dans Screaming Frog.Cliquez sur « Se connecter ».

Configuration du Crawl (User-Agent, Taille d’Écran, Métriques à Récupérer)

1. Configurez le User-AgentAllez dans « Configuration » > « User-Agent » > « Googlebot Smartphone ». @@IMG:https://www.drujokweb.fr/wp-content/uploads/2024/09/word-image-11638-10.jpeg|791|@@
2. Définissez la Taille d’ÉcranAllez dans « Configuration » > « Spider » > « Rendu » > « Google Mobile-Friendly ». @@IMG:https://www.drujokweb.fr/wp-content/uploads/2024/09/word-image-11638-11.jpeg|796|@@
3. Sélectionnez les Métriques à RécupérerAllez dans « Configuration » > « Accès à l’API » > « PageSpeed Insights » > « Métriques ».

Cochez les métriques suivantes :

• « Viewport »
• « Tactile Elements »
• « Content Size »
• « Font Size »

Lancer l’Analyse sur les URL Sélectionnées

1. Chargez les URLCliquez sur « Mode » > « Liste ». @@IMG:https://www.drujokweb.fr/wp-content/uploads/2024/09/word-image-11638-13.jpeg|438|@@
2. Importez les URLCliquez sur « Charger » > « Paste List ».Collez les URL importantes. @@IMG:https://www.drujokweb.fr/wp-content/uploads/2024/09/word-image-11638-14.jpeg|376|@@
3. Lancez le CrawlCliquez sur « Commencer ».

Examiner les Résultats

1. Consultez les RésultatsAllez dans l’onglet « PageSpeed ». @@IMG:https://www.drujokweb.fr/wp-content/uploads/2024/09/word-image-11638-16.jpeg|794|@@
2. Vérifiez les MétriquesConsultez les colonnes pour les métriques sélectionnées.Un score de 100 signifie que tout va bien, un score de 0 indique un problème.

Tests Manuels avec l’Outil d’Inspection de Google Chrome

Pour compléter l’audit, utilisez l’outil d’inspection de Google Chrome.

Basculer en Mode Mobile

1. Ouvrez l’outil d’inspectionFaites un clic droit sur la page > « Inspecter ». @@IMG:https://www.drujokweb.fr/wp-content/uploads/2024/09/word-image-11638-18.jpeg|1366|@@
2. Activez le Mode MobileCliquez sur l’icône de basculement en mode appareil. @@IMG:https://www.drujokweb.fr/wp-content/uploads/2024/09/word-image-11638-19.jpeg|517|@@
3. Sélectionnez un AppareilDans la barre supérieure, choisissez un modèle de smartphone.

Vérifier le Rendu et l’Absence de Problèmes d’Affichage

1. Vérifiez le RenduNaviguez sur la page pour vérifier l’affichage. @@IMG:https://www.drujokweb.fr/wp-content/uploads/2024/09/word-image-11638-21.jpeg|704|@@
2. Recherchez des Problèmes d’AffichageVérifiez que les éléments ne débordent pas de l’écran.Assurez-vous que les polices sont lisibles et que les boutons sont cliquables.

Contrôler la Présence Éventuelle de Publicités Gênantes

1. Surveillez les Pop-upsAssurez-vous qu’aucune publicité intrusive ne bloque le contenu. @@IMG:https://www.drujokweb.fr/wp-content/uploads/2024/09/word-image-11638-23.jpeg|467|@@
2. Relevez les Problèmes SpécifiquesNotez tout problème d’affichage ou de performance.

Audit de Parité Mobile vs Ordinateur

Pour finir, comparez les versions mobile et ordinateur.

Configurer Screaming Frog en User-Agent Ordinateur puis Mobile

1. Crawl en Mode OrdinateurConfigurez Screaming Frog avec le User-Agent « Googlebot Desktop ».Lancez le crawl. @@IMG:https://www.drujokweb.fr/wp-content/uploads/2024/09/word-image-11638-25.jpeg|790|@@
   @@IMG:https://www.drujokweb.fr/wp-content/uploads/2024/09/word-image-11638-26.jpeg|792|@@
2. Crawl en Mode MobileChangez le User-Agent pour « Googlebot Smartphone ».Lancez un nouveau crawl.

Exporter les Données des Deux Crawls

1. Exporter les DonnéesAllez dans « File » > « Exporter ».Exportez les résultats des deux crawls.

Comparer les Balises et Directives entre les Versions

1. Ouvrez les Fichiers ExportésUtilisez un tableur pour comparer les résultats. @@IMG:https://www.drujokweb.fr/wp-content/uploads/2024/09/word-image-11638-31.jpeg|1148|@@
2. Comparez les BalisesVérifiez les balises title, description, canonical, etc.Notez les différences. @@IMG:https://www.drujokweb.fr/wp-content/uploads/2024/09/word-image-11638-32.jpeg|827|@@
3. Rapportez les DifférencesIndiquez les différences dans votre modèle d’audit.

En utilisant Screaming Frog, Google PageSpeed Insights et l’outil d’inspection de Google Chrome, vous pouvez effectuer un audit mobile complet.

Cela vous permet d’identifier et de corriger les problèmes pour optimiser votre site mobile.

05Analyse des Résultats et Recommandations

Une fois les tests effectués, il est temps d’analyser les résultats et de formuler des recommandations.

Voici comment procéder étape par étape.

Synthétiser les Résultats de l’Audit Mobile dans le Modèle

1. Ouvrez votre modèle d’auditUtilisez votre feuille de calcul pour organiser les résultats des tests.

Regroupez les Données

Classez les résultats par catégories : ergonomie, vitesse, parité mobile vs ordinateur, etc.

Mettre en Avant les Problèmes Identifiés

Temps de Chargement Trop Longs

Identifiez les pages avec des temps de chargement élevés.

Exemple :

Éléments Non Optimisés (Images, CSS, JS…)

Relevez les éléments non optimisés.

Exemple :

Problèmes d’Affichage et d’Ergonomie

Notez les problèmes d’affichage et d’ergonomie.

Exemple :

Disparités entre Versions Mobile et Ordinateur

Comparez les balises et directives entre les versions.

Exemple :

Proposer des Recommandations Correctives

• Optimisation de la Vitesse Compression des Images : Utilisez des outils comme TinyPNG ou ImageOptim.
• Minification du CSS et JavaScript : Utilisez des outils comme CSSNano et UglifyJS.
• Activation de la mise en cache : Configurez le cache dans votre serveur web.

Exemple de configuration de cache dans Apache :

<IfModule mod_expires.c>ExpiresActive On

ExpiresByType image/jpg « access plus 1 year »

ExpiresByType image/jpeg « access plus 1 year »

ExpiresByType image/gif « access plus 1 year »

ExpiresByType image/png « access plus 1 year »

</IfModule>

• Correction des Problèmes d’Affichage et d’Ergonomie

Augmenter la Taille de la Police : Assurez-vous que le texte est lisible sur tous les appareils.

Exemple de CSS :

Agrandir les Zones Cliquables : Les boutons et liens doivent être facilement cliquables.
Exemple de CSS :

• Suppression des Différences de Balises et Directives Aligner les Balises Title : Assurez-vous que les balises title sont cohérentes entre les versions.
• Vérifier les Balises Canonical : Les balises rel= »canonical » doivent pointer vers la bonne URL.

Exemple de balise canonical :

• Passage au Responsive Design le Cas Échéant

Si votre site utilise une URL distincte pour mobile, envisagez de passer au responsive design.

Voici les étapes de base :

• Choisir un Framework Responsive : Utilisez Bootstrap ou Foundation.

Adapter le CSS : Utilisez des media queries pour ajuster le design.

Exemple de media query :

En suivant ces étapes, vous pouvez transformer les résultats de votre audit en actions concrètes.

Cela améliorera l’expérience utilisateur sur mobile et optimisera votre site pour le SEO.

06Résumé des Étapes de l’Audit Mobile

1. Sélection des Pages à TesterIdentifiez les pages et templates clés de votre site à auditer.
2. Utilisation des Outils Screaming Frog, PageSpeed Insights et ChromeConfigurez Screaming Frog pour utiliser l’API de PageSpeed Insights.Utilisez l’outil d’inspection de Google Chrome pour des tests manuels.
3. Comparaison des Versions Mobile et DesktopComparez les balises et directives des deux versions pour détecter des disparités.
4. Synthèse des Résultats et RecommandationsRegroupez les résultats dans votre modèle d’audit.Formulez des recommandations correctives pour optimiser votre site.

07Conclusion

Auditer la version mobile de votre site web est un investissement essentiel pour garantir une expérience utilisateur optimale et améliorer votre SEO.

En suivant ces étapes, vous serez en mesure d’identifier et de corriger les points faibles de votre site.

N’oubliez pas que l’optimisation mobile est un processus continu.

N’attendez plus, lancez-vous dans l’audit mobile et partagez vos expériences et questions dans les commentaires ci-dessous! 🚀

Pour approfondir votre analyse et faciliter vos audits, téléchargez mon modèle d’audit technique incluant une liste de 207 tests.

Un autre guide pourrait vous intéresser:

• Comment auditer la navigation d’un site