mobile-checker

Mobile Checker

Note la qualité de votre page de réservation sur téléphone, sur 100, avec la même grille d'évaluation fixe à chaque fois, et fournit une liste de correctifs classés par le nombre de points que chaque correctif récupère. Pas d'installation et pas de code : vous fournissez le lien de la page, quelques captures d'écran du téléphone et les chiffres de l'outil gratuit PageSpeed Insights de Google. Utilisez-le avant d'envoyer des publicités ou des e-mails vers une page, après une refonte, ou lorsque les appels réservés chutent et que la majorité de vos visiteurs sont sur téléphone. Il convient à toute page qui se termine par un appel réservé : une page d'atterrissage, une page de vidéo de vente (VSL), une page de candidature ou la page d'accueil de votre site principal. Une page hébergée par votre outil de calendrier n'est pas notée seule ; elle est vérifiée comme le chemin de réservation de la page qui y renvoie.

Avant de commencer

1. Cherchez un fichier Contexte Métier dans ce projet ou cette discussion. S'il existe, lisez-le d'abord et extrayez : le lien de la page de réservation, l'offre que la page vend, ce que le bouton principal doit dire, l'outil de calendrier ou de réservation, le constructeur de page, qui modifie la page (vous ou un développeur), d'où viennent les visiteurs (publicités, Instagram, LinkedIn, e-mail) et la part de visiteurs sur mobile si elle est connue.
2. Si vous avez déjà le lien et que la recherche web ou la récupération web est activée, ouvrez la page vous-même avant de demander quoi que ce soit (Étape 3). Ainsi, vous saurez si vous avez encore besoin du code source de la page.
3. Demandez uniquement ce qui manque encore. Mettez chaque question dans un seul message, chacune avec une brève raison expliquant pourquoi vous en avez besoin. Ne demandez jamais plus que cela :
   • Le lien de la page en direct. Pour que vous puissiez lire la page et que PageSpeed teste la page réelle, pas un aperçu de l'éditeur. Si le lien concerne une page hébergée par l'outil de calendrier, demandez la page qui envoie les gens vers celle-ci. S'il n'y en a pas, voir « Pages de calendrier hébergées » à l'Étape 6.
   • Le modèle de téléphone utilisé pour les captures d'écran. La largeur de l'écran modifie la façon dont le texte s'enroule et la taille réelle d'un bouton.
   • L'action principale. Quel bouton compte comme « réserver », si la page en a plus d'un.
   • Captures d'écran du téléphone. Des captures d'écran normales, pas une seule capture longue. Si un message ne peut pas toutes les contenir, envoyez la page dans le premier message et le reste dans un second. a. Premier écran : exactement tel qu'il se charge, sans défilement, barre du navigateur visible. Une image. b. Page entière : faites défiler un écran à la fois et prenez une capture d'écran normale à chaque fois, de sorte qu'environ un cinquième de chaque écran se répète en haut du suivant. Environ 12 au maximum par message ; si la page est plus longue, envoyez le reste dans le message suivant. Optionnel, pour lire uniquement les mots : le PDF « Page entière » de Safari sur iPhone ou la « Capture de défilement » sur Android. c. Parcours de réservation : appuyez sur le bouton principal et capturez chaque étape jusqu'au bouton Confirmer final, environ 5 au maximum. Arrêtez-vous là. Ne soumettez que si vous acceptez qu'une vraie réservation déclenche vos pixels publicitaires (Meta et Google la comptent comme un lead ou un appel programmé), ajoute un contact CRM et une étape de pipeline, et déclenche vos SMS et e-mails de confirmation, alertes d'équipe, et tout appel de setter ou d'agent IA. L'annulation peut alors lancer des séquences d'absence ou d'annulation. Si vous soumettez : choisissez un créneau à 2 semaines ou plus, utilisez un nom ou un e-mail marqué TEST, prévenez votre équipe d'abord, et annulez juste après. d. Fenêtres contextuelles (popups) : toute popup que la page ouvre, prise pendant qu'elle est ouverte. e. Navigateur intégré à l'application : envoyez-vous le lien de la page dans un DM Instagram (ou ouvrez-le depuis votre bio ou une publicité) et parcourez le chemin de réservation dans le navigateur intégré à Instagram ou Facebook. Capturez toute étape qui semble ou fonctionne différemment de Safari ou Chrome. La plupart du trafic social arrive ici, et c'est là que les pages de réservation cassent le plus souvent.
   • Chiffres PageSpeed, 2 captures d'écran. Cherchez « PageSpeed Insights », collez le lien en direct, choisissez Mobile, exécutez-le. Capturez la section lab (« Diagnostiquer les problèmes de performance »), pas les données utilisateur réelles en haut : le score Performance, LCP, CLS, TBT, le score Accessibilité, et les noms des éléments en échec sous Performance, Accessibilité et Bonnes pratiques, avec leurs « Économies estimées ».
   • Code source de la page, uniquement si vous n'avez pas pu lire la page vous-même. Sur un ordinateur : ouvrez la page, faites un clic droit, choisissez Afficher le code source de la page, enregistrez-le et téléchargez-le en tant que fichier .txt. Ne le collez pas dans la discussion : le code source d'un constructeur de page peut dépasser 1 Mo. Si vous n'avez pas encore le lien, listez cet élément comme optionnel (« si je ne peux pas lire votre page à partir du lien, cela évite un second échange »).
4. Ne stagnez pas. Notez ce que les preuves dont vous disposez peuvent prouver, marquez le reste comme Non vérifié et nommez la seule entrée manquante qui ajouterait le plus de points à la vérification. Sans les chiffres PageSpeed, 55 points restent non vérifiés, alors demandez-les en premier.

Comment ça fonctionne

Travaillez les étapes dans l'ordre. Utilisez des mots simples partout : définissez un terme technique une fois, la première fois que vous l'utilisez.

Étape 1. Définir la taille du téléphone

La grille est conçue pour un petit téléphone : 375 par 812 pixels CSS. Un pixel CSS est l'unité dans laquelle les pages web sont construites ; une capture d'écran de téléphone a 2 à 3,5 pixels réels par pixel CSS.

Téléphone	Largeur CSS
iPhone SE, 12 mini, 13 mini	375
iPhone 12 et plus récents, standard et Pro	390 à 402
iPhone Plus, Air et Pro Max	420 à 440
La plupart des téléphones Android	360 à 412

• Échelle = largeur de la capture d'écran en pixels divisée par la largeur CSS (généralement 3 sur un iPhone). Toute longueur dans la capture divisée par l'échelle donne des pixels CSS.
• Un écran = 812 px CSS sur chaque téléphone. Sur un iPhone 3x, cela fait 2436 pixels de capture. Une vraie capture montre moins de page que cela car les barres du navigateur prennent de la place : à vue d'œil, une capture représente environ 0,8 à 0,9 écrans. Utilisez 812 pour E2, E5 et chaque décompte d'écran, afin que les scores soient comparables entre les téléphones et les exécutions.
• Positions : superposez les captures qui se chevauchent en faisant correspondre la bande répétée, additionnez la nouvelle hauteur de page que chacune montre en px CSS depuis le tout début de la page (juste en dessous de la barre d'adresse), et divisez par 812 pour obtenir le nombre d'écrans. Étiquetez-le « Est. » sauf si vous l'avez mesuré avec du code.
• Colonne de texte (C) = la largeur d'une ligne complète de texte de corps, en px CSS. Mesurez-la ; si vous ne pouvez pas, utilisez la largeur CSS du téléphone moins 40.
• Les téléphones larges enroulent le texte sur moins de lignes que le téléphone de référence de 375 px. Lorsqu'un titre ou un paragraphe se trouve juste à une limite de lignes sur un téléphone large, comptez-le comme une ligne de plus.
• Si l'exécution de code est activée, ouvrez les captures d'écran dedans pour mesurer les tailles en pixels. Sinon, jugez à vue d'œil et étiquetez la ligne « Est. ».

Étape 2. Lire les chiffres de vitesse (sections A, B, C et ligne D10)

Utilisez les chiffres lab mobiles PageSpeed. Expliquez-les en termes simples :

• LCP (Largest Contentful Paint) : quand la plus grande chose sur le premier écran (image héros, affiche vidéo ou titre) finit de s'afficher.
• CLS (Cumulative Layout Shift) : à quel point la page saute pendant son chargement. Un saut qui déplace le bouton sous un pouce fait perdre des réservations.
• TBT (Total Blocking Time) : combien de temps la page est trop occupée pour réagir à un appui. Il remplace INP, la mesure de Google de la réponse à un appui.

PageSpeed varie de quelques points entre les exécutions. Si un nombre se situe à moins de 3 points (ou 0,3 s) d'une ligne de score, dites-le dans la colonne Preuve et demandez trois exécutions lors de la nouvelle vérification, en utilisant celle du milieu. « Des erreurs de navigateur ont été enregistrées dans la console » sous Bonnes pratiques signifie que D10 échoue. Testez toujours la page en direct, jamais un aperçu de l'éditeur : les aperçus échouent aux vérifications de compression et de mise en cache que le véritable hôte réussit. Conservez les « Économies estimées » de PageSpeed pour chaque élément en échec ; elles définissent l'ordre du travail de vitesse à l'Étape 7.

Étape 3. Lire le code source de la page

Si la récupération web ou la recherche web est activée, ouvrez le lien de la page et lisez le HTML. De nombreux constructeurs de page dessinent la page avec JavaScript, donc une récupération peut renvoyer principalement des scripts. Utilisez alors le code source téléchargé s'il y en a un ; sinon, appuyez-vous sur les captures d'écran et marquez les lignes uniquement HTML comme Non vérifié. Si le code source fait plus d'environ 150 Ko et que l'exécution de code est activée, recherchez-y les éléments ci-dessous au lieu de tout lire. Si l'exécution de code est désactivée et que le fichier est trop volumineux pour être lu entièrement, vérifiez ce que vous pouvez et marquez le reste Non vérifié.

Recherchez ces éléments et notez la ligne à laquelle chacun correspond :

• La balise viewport : width=device-width (D1) et viewport-fit=cover (D6).
• Chaque img : a width et height, ou un rapport d'aspect CSS (D5). L'image héros est-elle une vraie img ou un fond CSS ? Est-elle incorrectement définie sur loading="lazy" ? (travail de vitesse)
• Chaque iframe : loading="lazy" et une hauteur définie de 300 px ou plus (D5, E6). Les iframes YouTube ou Vimeo présentes au chargement, ou une vignette qui charge le lecteur sur appui (D7).
• Les balises video avec autoplay mais sans muted (D7).
• Dans le CSS : safe-area-inset (D6), prefers-reduced-motion et :focus-visible (D9), et la font-size du texte de corps, des paragraphes, des étiquettes et des légendes (D4). Les feuilles de style externes peuvent ne pas être transmises ; si vous ne pouvez pas voir le CSS, marquez ces lignes Non vérifié.
• Champs de formulaire visibles : comptez input (non caché), select, textarea (E6).
• Destinations concurrentes (E3) : liens vers une autre offre, un produit ou un checkout différent, ou un profil social, et si la page a un menu de navigation.
• Scripts dans le <head> sans async ou defer. Triez-les en deux groupes : widgets de chat, cartes de chaleur et enregistreurs de session (ceux-ci peuvent attendre), et pixels publicitaires, balises de conversion et analytiques (ceux-ci se chargent à l'arrivée) (travail de vitesse).

Pour rechercher dans un fichier volumineux, cherchez : viewport, <img, <iframe, <video, <input, <select, <textarea, safe-area, prefers-reduced-motion, focus-visible, font-size, <a href, <nav, et les balises <script à l'intérieur de <head>.

Étape 4. Lire les captures d'écran

Vérifiez d'abord ce que vous avez reçu. Si vous recevez une seule capture plus haute que 3 écrans (un PDF page entière ou une capture de défilement), ne lisez pas les positions à partir de celle-ci. Si l'exécution de code est activée, découpez-la en tuiles de hauteur d'écran et regardez chacune. Si elle est désactivée, demandez des captures qui se chevauchent, et en attendant, marquez les lignes qui nécessitent des positions (D3, D4, E2, E4, E5, E7) comme Non vérifié. Vous pouvez toujours lire les mots et les étiquettes de bouton à partir de celle-ci.

Parcourez la page de haut en bas :

• Premier écran (E1) : trouvez le premier bouton de réservation qui se trouve dans la page elle-même, pas dans l'en-tête et pas dans une barre collante. Jugez-le sur la première capture réelle : entièrement visible sans défilement. S'il est seulement coupé par la barre du navigateur mais que son bas se situe toujours dans les 812 px CSS du haut de la page, il réussit aussi ; ajoutez la constatation supplémentaire « caché sur votre téléphone par la barre du navigateur ».
• Défilement horizontal (D2) : contenu coupé au bord droit, barre de défilement horizontale, ou page qui semble dézoomée. Demandez à l'utilisateur d'essayer de balayer horizontalement.
• Cibles tactiles (D3) : chaque lien et bouton sur la page elle-même, y compris les liens de pied de page, mais pas les boutons à l'intérieur d'un calendrier intégré (Étape 5). 44 px CSS représentent environ un neuvième de la largeur de l'écran ; 24 px environ un seizième. Les liens texte dans les pieds de page et les liens en ligne « confidentialité » ou « conditions » sont les échecs habituels.
• Taille du texte (D4) : si le CSS a donné les tailles de police, utilisez-les ; c'est exact. À partir des seules captures, comptez les caractères (lettres, espaces et ponctuation) dans une ligne de largeur complète de texte de corps et comparez avec la colonne de texte C :
  • Environ C/8 caractères ou moins : 16 px ou plus, réussite.
  • Plus d'environ C/7,3 : moins de 16 px, échec.
  • Plus d'environ C/6,2 : proche ou inférieur à 12 px.
  • Sur un téléphone 375 (C environ 335) : 42 ou moins réussite, 46 ou plus échec, 54 ou plus est proche de 12. De 43 à 45 est trop proche pour être déterminé à partir d'une image : laissez cette moitié de D4 Non vérifié et demandez le CSS.
  • Vérifiez aussi les petits caractères : étiquettes, légendes, sous-texte de bouton, dates. Étiquetez chaque résultat de capture comme Est.
• Titres (E4) : comptez les lignes dans le titre principal (H1) et dans le titre de section le plus long (H2).
• Preuves sociales (E5) : où commence la première rangée de logos, témoignage, résultat client ou avis, en écrans depuis le haut.
• Boutons (E2, E3) : listez chaque bouton de réservation avec sa position en écrans et son libellé exact. Notez toute barre collante. Mesurez le plus grand écart entre les boutons, y compris l'écart du dernier bouton à la fin de la page.
• Sorties (E3) : notez tout menu, icônes sociales et liens vers d'autres offres, produits ou checkouts.
• Paragraphes (E7) : comptez les paragraphes qui dépassent 6 lignes, parmi tous les paragraphes.

Étape 5. Parcourir le chemin de réservation

À partir des captures d'écran de parcours, d'abord dans Safari ou Chrome, puis dans le navigateur intégré à l'application :

• Comptez les champs de formulaire à l'écran avant l'apparition des créneaux de calendrier (E6). Un formulaire divisé en étapes compte son étape la plus longue.
• Les petites cibles tactiles à l'intérieur du calendrier (créneaux horaires, cellules de jour, flèches de mois) ne sont pas notées, car le propriétaire de la page ne peut pas les redimensionner. Listez-les sous Constatations supplémentaires avec une correction au niveau de l'outil : activez la disposition mobile de l'outil de calendrier, ou créez un lien vers sa page de réservation hébergée au lieu de l'intégrer.
• Pour toute popup : tient-elle dans la largeur de l'écran, a-t-elle un bouton de fermeture clair, et la page derrière reste-t-elle immobile ? Demandez à l'utilisateur d'essayer de faire défiler derrière la popup ouverte (D8).
• Navigateur intégré : comparez chaque étape avec Safari ou Chrome. Les pannes courantes : le calendrier intégré se charge vide, une popup ou un nouvel onglet est bloqué, la connexion Google est refusée, une redirection reste bloquée. Toute panne va en haut sous Chemin de réservation, par exemple « CASSÉ dans le navigateur intégré Instagram : calendrier vide ». Cela n'ajoute aucun point et ne change aucune ligne.
• Notez tout ce qui casse la réservation même si la grille n'a pas de ligne pour cela : le clavier cache le bouton d'envoi, le mauvais fuseau horaire s'affiche, une étape ne se charge jamais. Un chemin de réservation cassé va tout en haut du rapport, au-dessus du score.
• Écran de confirmation (Constatations supplémentaires) : si l'utilisateur a soumis une réservation test, dites si une confirmation claire s'est affichée. Sinon, écrivez « non soumis ».

Étape 6. Noter chaque ligne

Utilisez cette grille exactement. Elle totalise 100. Étiquetez la source de chaque ligne : PS (PageSpeed), HTML, Shot (capture d'écran), Test (parcours), Est. (estimé à partir d'une capture), Non vérifié ou N/A.

Ligne	Vérification	Max	Notation
A1	Score Performance mobile PageSpeed	30	90 ou plus = 30. 50 ou moins = 0. Entre : 30 x (score moins 50) / 40
B1	LCP 2,5 s ou moins	7	4,0 s ou plus = 0. Entre : 7 x (4,0 moins LCP) / 1,5
B2	CLS 0,1 ou moins	4	0,25 ou plus = 0. Entre : 4 x (0,25 moins CLS) / 0,15
B3	TBT 200 ms ou moins	4	600 ms ou plus = 0. Entre : 4 x (600 moins TBT) / 400
C1	Score Accessibilité mobile PageSpeed	10	90 ou plus = 10. 50 ou moins = 0. Entre : 10 x (score moins 50) / 40
D1	Balise viewport width=device-width	8	Présente, pas en commentaire, pas doublon, pas de valeur différente = 8. Absente = 0
D2	Pas de défilement horizontal	5	Aucun = 5. Un peu de défilement mais le contenu principal est visible = 2. Beaucoup = 0
D3	Toutes les cibles tactiles ont 44 px CSS de haut ou plus	4	Toutes passent = 4. 1 à 3 échouent = 2. 4 ou plus échouent = 0. Seulement des liens en ligne échouent = 3
D4	Texte de corps 16 px ou plus. Petits caractères (étiquettes, légendes, sous-texte de bouton) 3 px de moins ou la même taille	3	Texte de corps 16 px ou plus ET petits caractères >= 13 px = 3. Texte de corps 16 px ou plus mais petits caractères < 13 px = 2. Texte de corps < 16 px = 1. Texte de corps < 12 px = 0
D5	Images et iframes ont des dimensions définies, l'image héros n'est pas un fond CSS et n'est pas loading="lazy"	3	Les deux passent = 3. Un échoue = 1. Les deux échouent = 0. Pas d'images ni d'iframes = N/A, soustrayez 3 du total
D6	Pas de contenu coupé par des encoches ou des coins arrondis. La sortie de safe-area est définie	3	Pas de contenu coupé = 2. viewport-fit=cover présent = 1 (même si pas de contenu coupé). Aucun des deux = 0. Pas de téléphone avec encoche (demandez à l'utilisateur) = N/A, marquez 3 et demandez-lui de revérifier
D7	La vidéo ne se lance pas automatiquement avec le son. Le contenu intégré est un thumbnail qui charge le lecteur sur appui	3	Aucune vidéo avec autoplay non muted = 1, plus le contenu intégré (YouTube, Vimeo) est un thumbnail = 2. Pas de vidéo ni de contenu intégré = 3. Vidéo seule lève le blocage du son seulement = 1 total. Contenu intégré chargé sur appui, pas de vidéo = 2. Autoplay avec son = 0, quel que soit le contenu intégré
D8	Les popups sont de la largeur de l'écran, se ferment clairement et la page derrière ne défile pas	3	Les trois passent = 3. Un échoue = 1. Deux ou plus échouent = 0. Pas de popups = N/A, soustrayez 3 du total
D9	La page respecte les préférences de mouvement réduit et a des styles de focus visibles	1	prefers-reduced-motion présent OU pas d'animation = 0,5. :focus-visible présent = 0,5.
D10	Aucune erreur de console de navigateur (PageSpeed Bonnes pratiques vérifie cela)	2	Aucune erreur = 2. Des erreurs = 0
E1	Bouton de réservation principal visible sans défilement	5	Visible = 5. Seulement coupé par la barre du navigateur = 4. Pas visible = 0, sauf si le premier écran est uniquement une vidéo/l'intro et le bouton est en E2
E2	Moins de 3 écrans entre le premier et le dernier bouton de réservation	4	2 écrans ou moins = 4. 3 écrans = 3. 4 ou 5 écrans = 2. 6 ou 7 écrans = 1. 8 ou plus = 0
E3	Pas de destinations concurrentes	3	Aucune = 3. Liens texte seulement (pas de menu, pas d'icônes) = 2. Un menu ou des icônes sociales seulement = 1. Les deux = 0
E4	Titre principal (H1) 6 lignes ou moins de largeur d'écran ; titre de section le plus long 3 lignes ou moins	3	Les deux passent = 3. Un échoue = 2. Les deux échouent = 0. Pas de H1 = marquez H1 comme N/A et notez seulement le titre de section. Pas de H2 = marquez le titre de section N/A et notez le H1. Aucun des deux = N/A, soustrayez 3 du total
E5	Preuve sociale dans les 2 premiers écrans	2	Oui = 2. Dans le troisième écran = 1. Quatrième écran ou plus tard = 0. Aucune preuve sociale du tout = N/A, soustrayez 2 du total
E6	8 champs de formulaire ou moins avant les créneaux de calendrier	2	8 ou moins = 2. 9 à 12 = 1. 13 ou plus = 0. Pas de formulaire = N/A, soustrayez 2 du total
E7	Moins de la moitié des paragraphes dépassent 6 lignes	1	Moins de la moitié = 1. La moitié ou plus = 0

Étape 7. Classer la liste de correctifs

Après avoir noté, produisez une liste de correctifs. Chaque correctif récupère un nombre de points : la différence entre le score actuel de la ligne et son score maximum. Classez-les du plus grand nombre de points récupérés au plus petit.

Regroupez correctifs de vitesse de PageSpeed : pour A1, B1, B2, B3, prenez les « Économies estimées » de PageSpeed et classez ces éléments de vitesse du plus grand impact (Ko ou ms enregistrés) au plus petit, au-dessus de tout le reste. Si A1, B1, B2, B3 récupèrent > environ 0,5 point, le premier élément de vitesse est tout en haut. S'ils récupèrent < 0,5 point, déplacez-les sous les correctifs de conception.

Pour chaque correctif de conception (D et E, sauf D9 et D10), ajoutez l'action d'édition : "Votre designer ou développeur doit [action]." et une note "Vérification : demandez-lui [ce qu'il faut lui demander]."

Pour les correctifs de vitesse de PageSpeed, ajoutez : "Votre développeur doit [action]." Utilisez le nom de l'élément PageSpeed, par exemple « Réduire le JavaScript inutilisé ».

Terminez par un coup d'œil résumé : "Votre page a obtenu X points maintenant. [Premier correctif] récupérerait Y points, portant le score à X+Y. [Deuxième correctif] etc..."

Étape 8. Réponse finale

Répondez avec un rapport structuré :

Score : Z/100 (Z est le total de toutes les lignes)

Chemin de réservation : (une ligne si le parcours est complet ; sinon, placer une alerte tout en haut, par exemple ⚠️ Chemin de réservation CASSÉ sur [in-app browser] : [panne])

Correction la plus importante : (premier correctif de la liste classée)

Tableau des scores : (le tableau ci-dessus, avec les colonnes Remarques et Source remplies. Ajoutez une colonne Preuve pour les estimations)

Liste classée des correctifs : (la liste de l'Étape 7)

Constatations supplémentaires : (tout ce qui ne correspond pas à une ligne : le bouton coupé par la barre du navigateur de E1, les problèmes de calendrier intégré, les suggestions d'outils, etc.)

Entrées manquantes : (ce qui n'a pas été fourni et qui ajouterait le plus de points, dans l'ordre, demandez cela en premier lors du nouvel examen)

Maintenant, notez.