Dwenola
Chapitre 2 : SEO technique

Vitesse, Core Web Vitals et mobile-first (le trio technique)

Par Billy Rousseau9 min de lectureLeçon 5 · Chapitre 2

La vitesse de chargement, les Core Web Vitals et l'optimisation mobile forment un trio technique incontournable pour le SEO. Google mesure l'expérience utilisateur de votre site à travers trois métriques clés (LCP, INP, CLS) et indexe en priorité la version mobile de votre site. Un site lent ou mal adapté au mobile perd des positions, des visiteurs et des conversions.

Pourquoi la performance est un facteur de classement

Google veut offrir la meilleure expérience possible à ses utilisateurs. Un résultat de recherche qui mène vers un site qui met 8 secondes à charger, c'est une mauvaise expérience. C'est pourquoi Google intègre la performance comme facteur de classement depuis 2018 (Speed Update) et a renforcé ce signal avec les Core Web Vitals en 2021.

Les chiffres sont clairs :

  • 53 % des visiteurs mobiles quittent un site qui met plus de 3 secondes à charger
  • Chaque seconde de retard supplémentaire fait baisser les conversions de 7 %
  • Un site qui passe de 1 à 3 secondes de chargement voit son taux de rebond augmenter de 32 %

Les Core Web Vitals expliqués simplement

Les Core Web Vitals sont trois métriques que Google utilise pour évaluer l'expérience utilisateur de votre site. Voici ce qu'elles mesurent et les seuils à respecter.

LCP : Largest Contentful Paint

Ce que ça mesure : le temps nécessaire pour afficher le plus grand élément visible de la page (généralement une image ou un bloc de texte).

En langage courant : combien de temps votre visiteur attend avant de voir le contenu principal de la page.

Seuil Évaluation
Moins de 2,5 secondes Bon (vert)
Entre 2,5 et 4 secondes À améliorer (orange)
Plus de 4 secondes Mauvais (rouge)

Comment l'améliorer :

  • Optimisez vos images (compression, format WebP, taille adaptée) -- voir notre leçon sur l'optimisation des images
  • Utilisez un hébergement rapide avec un bon temps de réponse serveur (TTFB inférieur à 800 ms)
  • Mettez en place un CDN (Content Delivery Network) pour servir les ressources depuis des serveurs proches de vos visiteurs
  • Préchargez les ressources critiques avec <link rel="preload">
  • Éliminez les scripts bloquant le rendu

INP : Interaction to Next Paint

Ce que ça mesure : le temps de réaction de votre site quand un visiteur interagit avec lui (clic sur un bouton, saisie dans un champ, etc.). INP a remplacé FID (First Input Delay) en mars 2024.

En langage courant : est-ce que votre site réagit instantanément quand on clique quelque part, ou est-ce qu'il y a un décalage perceptible ?

Seuil Évaluation
Moins de 200 ms Bon (vert)
Entre 200 et 500 ms À améliorer (orange)
Plus de 500 ms Mauvais (rouge)

Comment l'améliorer :

  • Réduisez la quantité de JavaScript exécuté sur la page
  • Divisez les tâches JavaScript longues en tâches plus petites
  • Évitez les scripts tiers non essentiels (widgets, trackeurs multiples)
  • Utilisez le chargement différé (lazy loading) pour les éléments non critiques

CLS : Cumulative Layout Shift

Ce que ça mesure : la stabilité visuelle de votre page. Un CLS élevé signifie que des éléments bougent pendant le chargement (une image qui se charge et décale le texte, une bannière publicitaire qui apparaît et pousse le contenu vers le bas).

En langage courant : est-ce que la page "saute" pendant le chargement, vous faisant cliquer sur le mauvais élément ?

Seuil Évaluation
Moins de 0,1 Bon (vert)
Entre 0,1 et 0,25 À améliorer (orange)
Plus de 0,25 Mauvais (rouge)

Comment l'améliorer :

  • Définissez toujours les dimensions (width et height) de vos images et vidéos
  • Réservez l'espace pour les publicités et les éléments chargés dynamiquement
  • Évitez d'injecter du contenu au-dessus du contenu existant
  • Utilisez la propriété CSS aspect-ratio pour les conteneurs médias
  • Préchargez les polices web pour éviter le FOUT (Flash of Unstyled Text)

L'indexation mobile-first : ce que ça change pour vous

Le principe

Depuis 2019, Google utilise la version mobile de votre site (et non la version desktop) pour explorer, indexer et classer vos pages. Cela signifie que si votre site est magnifique sur ordinateur mais dégradé sur mobile, c'est la version dégradée que Google évalue.

Les implications concrètes

Le contenu doit être identique sur mobile et desktop. Si vous masquez du texte, des images ou des sections entières sur mobile (avec display: none par exemple), Google risque de ne pas les prendre en compte pour le classement.

La navigation doit être fonctionnelle sur mobile. Les menus hamburger sont acceptables, mais le contenu des menus doit être accessible et les liens doivent fonctionner.

Les éléments interactifs doivent être adaptés au tactile. Les boutons trop petits, les liens trop proches les uns des autres et les formulaires difficiles à remplir sur mobile dégradent l'expérience et votre classement.

Les interstitiels intrusifs sont pénalisés. Les pop-ups qui couvrent tout l'écran sur mobile (en dehors des obligations légales comme les bannières de cookies) sont pénalisées par Google depuis 2017.

Comment mesurer vos performances

Google PageSpeed Insights

L'outil le plus accessible. Entrez votre URL et obtenez un score de performance (0 à 100) et le détail de vos Core Web Vitals. L'outil fournit à la fois des données de laboratoire (simulées) et des données de terrain (mesurées sur de vrais utilisateurs via le rapport CrUX).

Google Search Console

La section "Expérience de la page" dans Google Search Console montre l'état de vos Core Web Vitals pour l'ensemble de votre site, avec un classement page par page. C'est votre tableau de bord de référence.

GTmetrix et WebPageTest

Ces outils fournissent des analyses plus détaillées : waterfall des requêtes, identification des ressources bloquantes, comparaison entre différentes connexions réseau et localisations géographiques.

Lighthouse (dans Chrome DevTools)

Intégré directement dans le navigateur Chrome (F12 > onglet Lighthouse), cet outil réalise un audit complet de performance, accessibilité, bonnes pratiques et SEO. Idéal pour les tests rapides pendant le développement.

Plan d'action : optimiser la performance de votre site

Étape 1 : Mesurez l'état actuel

Passez vos 5 pages les plus importantes dans PageSpeed Insights. Notez les scores et identifiez les métriques dans le rouge ou l'orange.

Étape 2 : Optimisez les images

C'est presque toujours le levier le plus impactant. Convertissez vos images en WebP, compressez-les et servez-les en taille adaptée à l'affichage. Détails dans notre leçon sur l'optimisation des images.

Étape 3 : Réduisez le JavaScript

Identifiez les scripts tiers non essentiels (chatbots, widgets sociaux, trackeurs multiples) et supprimez ceux qui n'apportent pas de valeur. Pour les scripts nécessaires, utilisez le chargement différé (defer ou async).

Étape 4 : Améliorez le temps de réponse serveur

Si votre TTFB (Time to First Byte) dépasse 800 ms, envisagez de changer d'hébergeur ou de mettre en place un système de cache côté serveur. Un CDN peut également aider si vos visiteurs sont géographiquement dispersés.

Étape 5 : Testez sur mobile

Utilisez le mode responsive de Chrome DevTools pour vérifier l'affichage sur différentes tailles d'écran. Testez la navigation, les formulaires et les boutons d'appel à l'action sur un vrai smartphone.

Étape 6 : Mesurez à nouveau

Après chaque optimisation, repassez dans PageSpeed Insights pour vérifier l'impact. Le suivi dans Google Search Console prendra quelques jours à refléter les améliorations, car il se base sur les données de terrain.

L'expérience Dwenola : la performance comme fondation

Chez Dwenola, chaque site que nous créons est conçu avec la performance comme priorité dès le départ. Nous utilisons Next.js, un framework qui intègre nativement l'optimisation des images, le code splitting et le rendu côté serveur. Cette approche "performance-first" est bien plus efficace que d'essayer de corriger un site lent après coup.

C'est cette philosophie que nous appliquons dans notre service de création de sites internet et dans notre accompagnement SEO.

FAQ

Mon score PageSpeed est de 50/100 : est-ce grave ?

Un score de 50 n'est pas catastrophique, mais il y a clairement une marge d'amélioration. L'important est de regarder les Core Web Vitals individuellement plutôt que le score global. Si vos trois métriques (LCP, INP, CLS) sont dans le vert, votre SEO ne sera pas pénalisé même si le score global n'est pas parfait. Le score englobe des recommandations de bonnes pratiques qui n'ont pas toutes un impact direct sur le classement.

AMP est-il encore nécessaire pour le mobile ?

Non. Google a abandonné l'exigence AMP pour les Top Stories en 2021. Aujourd'hui, un site responsive avec de bons Core Web Vitals offre la même expérience et le même traitement SEO qu'un site AMP, sans les contraintes techniques de ce format.

Les Core Web Vitals sont-ils vraiment un facteur de classement important ?

Ils sont un facteur de classement confirmé, mais leur poids est modéré par rapport au contenu et aux backlinks. Google l'a dit : à pertinence de contenu égale, le site avec les meilleurs Core Web Vitals sera favorisé. En pratique, cela fait souvent la différence sur les requêtes compétitives où plusieurs pages offrent un contenu de qualité similaire.

Comment optimiser un site WordPress lent ?

Les principaux leviers pour WordPress sont : un thème léger et optimisé (évitez les thèmes "tout-en-un" surchargés), un plugin de cache (WP Rocket, W3 Total Cache), la compression des images (ShortPixel, Imagify), la désactivation des plugins inutiles et un hébergeur de qualité. Si malgré ces optimisations votre site reste lent, il peut être temps d'envisager une refonte sur un framework plus performant.

Votre site est invisible sur Google ? On fait un diagnostic gratuit en 30 minutes. On en discute ?

Résumer l'article avec