La Duck Conf 2025 - CR - SEO : Des millisecondes contre des millions

La Duck Conf est la conférence de l’architecture de SI by Octo. L’édition 2025 s'est tenue le 19 mars. Léo Jacquemin nous y a présenté l’impact de l’expérience utilisateur (UX) sur le SEO : pourquoi et comment l'optimiser.

Le référencement (SEO) naturel ou payant est impacté par l’UX et peut vous coûter des millions si vous n’en prenez pas soin.

L’UX joue donc désormais un rôle crucial dans le référencement naturel (SEO).

Voici les éléments essentiels à comprendre et à optimiser.

La famille des signaux vitaux du web : CLS, LCP, INP

Ces trois indicateurs font partie des Core Web Vitals et sont essentiels pour le SEO.

Les Core Web Vitals s'appliquent à toutes les pages web. Ils doivent être mesurés par tous les propriétaires de sites et seront affichés dans tous les outils Google. Chacun de ces Core Web Vitals représente une facette distincte de l'expérience utilisateur, est mesurable sur le terrain et reflète l'expérience concrète d'un résultat essentiel centré sur l'utilisateur.

• Cumulative Layout Shift (CLS) : Mesure la stabilité visuelle.
• Largest Contentful Paint (LCP) : Mesure le temps de chargement ressenti, souvent le plus difficile à optimiser.
• Interaction to Next Paint (INP) : Mesure la réactivité des interactions.

📌 À noter : Ce talk n’aborde pas le LCP car il se concentre sur l’optimisation de l’interaction utilisateur et de la stabilité visuelle, laissant de côté le chargement des ressources. En effet, ce dernier nécessiterait à lui seul un talk entier.

Google privilégie les pages offrant une expérience utilisateur fluide. Un mauvais indicateur peut donc impacter négativement le référencement, dans la mesure où les pages ayant des web vitals optimisées vont être favorisées dans le score final.

Quelques statistiques clés :

• 52 % des clics vont aux trois premiers résultats de recherche.
• Le premier lien capte 28 % des clics, le deuxième 16 %, et le troisième 11%.
• 90 % du trafic web provenant de moteurs de recherche vient de Google.

Source: We analyzed 4 million Google Search Results Here's What We Learned About Organic Click Through Rate, https://backlinko.com/google-ctr-stats.

Google collecte et analyse les interactions réelles des utilisateurs avec une application web ou mobile via une technique appelée real User Monitoring (RUM). Elle utilise ces données pour générer le chrome User Experience Report (CRUX), un indicateur d’expérience utilisateur. Ces données sont collectées à partir de navigateurs réels du monde entier. Elles permettent de générer des rapports tel que cet exemple:

Comment peut-on avoir une page qui soit la plus stable visuellement pour apparaître haut dans les résultats de recherche?

CLS (Cumulative Layout Shift) : La stabilité visuelle

Le CLS mesure la stabilité visuelle d'une page web.

Exemple de mauvaise pratique : ne pas définir de taille fixe pour ses images.

<!-- Mauvais exemple -->
<img style="max-width: 100%; height: auto;" /> <!-- Risque de clipping -->

La solution est simple : définir une taille fixe pour ses images. En effet, le navigateur va utiliser cette information uniquement pour déduire la propriété aspect-ratio, et pouvoir ainsi allouer de l’espace sur la page.

<!-- Bon exemple -->
<img width="800" height="400"/>

Gérer le contenu dynamique : Réserver de l’espace en amont pour éviter les décalages, en utilisant des tailles fixes. On peut utiliser des techniques de pré-remplissage tel que le Skeleton Loading et le BlurHash.

Position absolute : Cette technique limite l’impact sur le layout en mettant l’élément à une position fixe. L’élément est donc placé à la position voulue et ne bouge pas une fois le contenu affiché. À utiliser avec précaution pour garantir une bonne stabilité.

Polices web : Utiliser le css pour aligner la police de remplacement avec la police finale avec des propriétés tel que ascent-override.

@font-face {
	font-family: “fallback for DuckFont”;
	…
	ascent-override: 105%;
	descent-override: 35%;
	line-gap-override: 10%;
}

Apprenez en plus sur les polices sur notre post “Face à face avec les webs fonts”.

INP (Interaction to Next Paint) : La réactivité de la page

L’INP mesure le temps de réponse des interactions utilisateur. Ce critère est crucial, car tout le monde ne dispose pas d’un smartphone puissant.

Les performances doivent être optimales pour la majorité des utilisateurs et sont mesuré au 75e percentile (P75).

Bonnes pratiques pour améliorer l’INP: minimiser les scripts bloquants.

JavaScript est un langage mono-threadé. Par conséquent, il est stricto-sensu impossible d’exécuter deux instructions en parallèle, du point de vue de l’API proposées tout du moins. La seule façon de ne pas bloquer le thread principal est de programmer localement certaines instructions pour s’exécuter plus tard.

On reporte les tâches lourdes : Délaisser les traitements non urgents (ex. : envoi d’analytics). Pour ce faire, on utilise la fonction setTimeout qui va lancer le code contenu dans la callback dans une nouvelle tâche.

function onClick() {
  setTimeout(() => {
    envoyerAnalytic()
 }, 0)
  rediriger()
}

Tester sur des appareils standards, pas seulement sur des machines puissantes

De nombreux tests sont effectués sur des appareils haut de gamme, alors que la majorité des utilisateurs disposent de configurations moins performantes. Il est crucial d’optimiser pour tous les profils d’utilisateurs.

Conclusion

Comme on a pu le voir, les optimisations sont souvent simples à mettre en place. En plus d’améliorer l’expérience utilisateur de notre site, elles permettent également d’optimiser notre SEO, apportant un avantage concurrentiel important.

Léo Jacquemin nous invite à commencer par fixer les problèmes les plus simples que sont le CLS et d’INP, avant de se concentrer sur le LCP.

Au-delà du SEO, la question de la performance est également une question d’inclusivité. Nous sommes biaisés, car nous oublions que ce que nous expérimentons au quotidien sur nos appareils mobiles et fixes n’est qu’une illusion de l'expérience réelle des utilisateurs. Ces derniers utilisent nos services dans des conditions réelles bien différentes : sur des réseaux instables, avec des terminaux souvent moins performants que les nôtres.

La performance web est aussi une question d’inclusivité numérique.