Structure de page sur mobile et sur ordinateur

Dernière révision : novembre 2026

Un lecteur décide vite si une page d'actualité mérite qu'il y reste. Le titre doit s'afficher rapidement, la page doit rester stable et chaque appui doit obtenir une réponse. Google indexe aussi la version mobile de vos pages : la mise en page sur téléphone est donc celle qui compte aussi pour la recherche.

Les chiffres à viser

Les Core Web Vitals de Google fournissent trois mesures, chacune avec un objectif clair.

Mesurez le 75e centile des chargements de page, en comptant séparément le mobile et l'ordinateur. Une page est validée lorsque les trois indicateurs atteignent l'objectif à ce centile.

Utilisez des données de terrain issues de vraies visites : le rapport Core Web Vitals de la Search Console, PageSpeed Insights ou le Chrome User Experience Report. Lighthouse est utile en laboratoire, mais il ne mesure pas l'INP et affiche à la place le Total Blocking Time.

Google indique qu'il n'existe pas de signal unique d'expérience de page. Il précise en revanche que ses systèmes de classement utilisent les Core Web Vitals, et que les autres aspects de l'expérience de page n'aident pas directement un site à se classer, même s'ils peuvent le rendre plus agréable à utiliser.

Une seule page pour les deux écrans

Google recommande le responsive design, le schéma le plus simple à mettre en place et à maintenir. Le même HTML sert tous les appareils, si bien que le contenu et les métadonnées coïncident sans effort supplémentaire. Si vous gérez des pages mobiles distinctes, gardez ces éléments identiques à ceux de la version ordinateur :

• Le contenu principal
• Les titres et intertitres
• Les données structurées
• Les balises meta robots (un noindex oublié peut exclure une page mobile de l'index)

Commencez par la balise viewport, puis vérifiez que la page se réorganise à 320 pixels CSS de large sans défilement horizontal.

<meta name="viewport" content="width=device-width, initial-scale=1">

Sur mobile

• Placez d'abord le titre, la signature et la date visible, puis l'image principale ou le premier paragraphe.
• Gardez le texte de l'article dans le HTML. Un bouton « Lire la suite » qui va chercher le reste au toucher peut masquer ce texte à Google, qui ne clique pas, ne fait pas glisser et ne saisit rien.
• Donnez aux cibles tactiles au moins 24 sur 24 pixels CSS, le minimum du niveau AA de WCAG 2.2. Pour les menus et les boutons de fermeture, visez 44 sur 44, le niveau AAA.
• Gardez un en-tête fixe peu haut et réglez scroll-padding-top sur sa hauteur, pour qu'un lien ciblé ne soit jamais caché derrière lui.

Sur ordinateur

• Limitez le texte courant à 80 caractères par ligne, ou 40 pour le chinois, le japonais et le coréen. C'est la recommandation AAA de WCAG, et elle aide tous les lecteurs.
• Réglez l'interligne à au moins 1,5 dans les paragraphes.
• Placez le contenu complémentaire dans une colonne latérale qui ne déplace pas l'article en se chargeant.

Un chargement plus rapide

Sur une page d'actualité, le plus grand élément est souvent l'image principale. Traitez-la comme la requête la plus importante de la page.

<img
  src="/images/lead-1200.jpg"
  srcset="/images/lead-800.jpg 800w, /images/lead-1200.jpg 1200w"
  sizes="(min-width: 768px) 720px, 100vw"
  width="1200"
  height="675"
  alt="Describe what the photo shows"
  fetchpriority="high">

• Ne chargez jamais en différé l'image du LCP.
• Placez-la dans le HTML initial, pour que le navigateur la trouve avant l'exécution de tout script.
• Utilisez fetchpriority="high" sur une ou deux images au maximum. Au-delà, l'effet disparaît.
• Réservez loading="lazy" aux images et aux iframes situées hors de la première fenêtre visible.
• Réduisez les redirections et gardez la page compatible avec le cache. Des paramètres d'URL uniques peuvent renvoyer les requêtes vers votre serveur d'origine plutôt que vers le CDN.

Une page qui ne bouge pas

• Définissez width et height sur chaque image et chaque vidéo, et gardez height: auto dans le CSS.
• Utilisez le même rapport largeur/hauteur pour toutes les images d'un srcset.
• Réservez l'espace des publicités, des contenus intégrés et des iframes avant leur chargement. Le chapitre sur les publicités détaille les tailles d'emplacement.
• Superposez les bandeaux de cookies et les invitations à s'inscrire, ou réservez-leur de la place, pour qu'ils ne repoussent pas l'article vers le bas.
• Utilisez font-display: optional, ou une police de repli ajustée aux métriques de votre police web.
• Animez avec transform. Animer top ou left provoque des décalages de mise en page.

Des réponses rapides

Le temps total d'interaction comporte trois parties : l'attente avant l'exécution de votre code, votre code, puis l'affichage qui suit. Toute tâche de plus de 50 millisecondes est une tâche longue.

• Faites le moins de choses possible dans les rappels d'événements. Mettez l'écran à jour d'abord, puis différez le reste.
• Découpez les longs traitements avec scheduler.yield(), et repliez-vous sur setTimeout dans les navigateurs qui ne le prennent pas en charge.
• Gardez un DOM léger. Les longues listes d'articles peuvent utiliser content-visibility pour afficher plus tard les éléments hors écran.
• N'oubliez pas que chaque iframe a son propre fil principal : vérifiez de quelle frame vient une interaction lente.

Pages longues et défilement infini

Si une page de rubrique défile sans fin, donnez à chaque tranche une URL permanente avec un numéro de page absolu, comme ?page=12, et reliez ces pages dans l'ordre. Mettez l'adresse à jour avec l'History API pendant que le lecteur avance. Google ne défile pas et ne clique pas : le contenu chargé en différé doit donc se charger dès qu'il entre dans la fenêtre visible, sans aucune action.

Liste de contrôle

• Vérifiez le LCP, l'INP et le CLS dans la Search Console, pour le mobile et l'ordinateur séparément.
• Ouvrez votre modèle d'article le plus visité sur un téléphone et confirmez que le titre et la date figurent sur le premier écran.
• Confirmez que le texte complet de l'article se trouve dans le HTML envoyé par le serveur.
• Comparez le mobile et l'ordinateur : contenu, titres, données structurées et balises robots doivent correspondre.
• Retirez loading="lazy" de l'image principale et ajoutez fetchpriority="high".
• Ajoutez width et height à chaque image et chaque vidéo.
• Réservez l'espace de chaque publicité, contenu intégré et bandeau.
• Réglez scroll-padding-top sur la hauteur de votre en-tête fixe.
• Testez la page à 320 pixels CSS de large.
• Donnez à chaque tranche d'une page à défilement infini sa propre URL.

Sources

• Understanding Google Page Experience, Google Search Central
• Understanding Core Web Vitals and Google search results, Google Search Central
• Mobile-first Indexing Best Practices, Google Search Central
• Fix Lazy-Loaded Website Content, Google Search Central
• Web Vitals, web.dev
• Optimize Largest Contentful Paint, web.dev
• Optimize Cumulative Layout Shift, web.dev
• Optimize Interaction to Next Paint, web.dev
• Optimize long tasks, web.dev
• Browser-level image lazy loading for the web, web.dev
• Web Content Accessibility Guidelines (WCAG) 2.2, W3C
• Understanding Target Size (Enhanced), W3C WAI
• Understanding Visual Presentation, W3C WAI