Stratégies de croissance pour les éditeurs en période électorale | WEBINAIRE
Stratégies de croissance pour les éditeurs en période électorale | WEBINAIRE
À la fin de ce module, vous devriez avoir une compréhension claire des différents composants qui contribuent à l'expérience utilisateur sur la page, de leur importance et de la manière dont chacun peut être optimisé pour améliorer à la fois l'expérience utilisateur de votre site et son référencement.
Durée de la vidéo
17:09
Répondre au quiz
Répondez au questionnaire du module actuel
Matériels
Modèles prêts à l'emploi
Ressources
Rapports et ressources
2.3.1 Qu'est-ce que l'expérience de page ?
L'expérience utilisateur sur une page est un ensemble de signaux — notamment les Core Web Vitals (CWV), la compatibilité mobile, le HTTPS et les directives relatives aux publicités interstitielles intrusives — que Google utilise pour extrapoler l'expérience utilisateur sur un site web.
L'expérience utilisateur sur une page évalue la performance d'un site plutôt que son contenu. Bien que Google privilégie toujours la pertinence du contenu pour répondre aux requêtes des utilisateurs, l'expérience utilisateur sur la page permet de départager les sites offrant un niveau de couverture similaire.
Les signaux d'expérience des quatre pages sont les suivants :
Les indicateurs de performance des pages (CWV) mesurent l'expérience utilisateur en se concentrant sur la vitesse de chargement d'une page, sa réactivité aux interactions de l'utilisateur et sa stabilité visuelle. Trois métriques sont utilisées à cet effet :
La mise à jour d'avril 2015 de Google a introduit la métrique « adaptée aux mobiles » du géant de la recherche, qui améliore le classement des pages optimisées pour les mobiles dans les SERP mobiles.
Concrètement, Google privilégiera les sites qui veillent à ce que leur contenu soit facilement lisible sur les appareils mobiles — c'est-à-dire qu'il n'est pas nécessaire de zoomer, que les zones tactiles telles que les boutons de connexion ne sont pas trop rapprochées, qu'il n'y a pas de défilement horizontal et que le contenu illisible est évité.
Cette mise à jour concerne des pages individuelles, et non des sites web entiers, et n'affecte pas non plus le contenu consulté sur les navigateurs de bureau/portables.
HTTPS, ou protocole de transfert hypertexte sécurisé, est une version sécurisée du protocole de communication Internet HTTP.
HTTPS, ou HTTP, constitue la première partie de chaque URL, appelée « schéma ». Celle-ci précède le nom de domaine, qui est la partie de l'URL appelée « autorité ».
La différence entre HTTPS et HTTP réside dans le fait que le premier est sécurisé, contrairement au second. Concrètement, cela signifie que les utilisateurs qui se connectent à un site via une connexion HTTP envoient leurs données personnelles en clair, sans chiffrement.
Le protocole HTTPS sécurise cette connexion, ce qui signifie que toutes les données échangées entre le navigateur de l'utilisateur et le serveur du site web sont chiffrées de bout en bout. Les sites qui exigent des connexions sécurisées ont besoin d'un certificat SSL, que le navigateur de l'utilisateur vérifie et authentifie.
Les interstitiels sont un format publicitaire exclusivement mobile qui n'apparaît que lors des interruptions naturelles du contenu — par exemple lorsqu'un utilisateur passe d'un article à l'autre — couvrant ainsi l'écran.
Les publicités interstitielles sont considérées comme intrusives lorsqu'elles bloquent ou masquent partiellement la vue du contenu par l'utilisateur. Les boîtes de dialogue sur les sites web mobiles qui se comportent de la même manière entrent également dans cette catégorie.
Les compétences les plus solides de la plupart des éditeurs résident généralement dans la création de contenu, la publication et le marketing, ce qui leur laisse peu de place pour comprendre et optimiser les différents piliers de l'expérience utilisateur.
Les ressources limitées signifient que les éditeurs auront du mal à justifier le temps et l'argent nécessaires pour explorer le code source des pages web individuelles, sans parler de celui d'un site web entier.
Même si les éditeurs sont en mesure de consacrer du temps à résoudre le problème, comme nous pouvons le constater ci-dessus, l'expérience utilisateur sur les pages est un problème complexe qui nécessite une approche globale pour obtenir des gains de performance significatifs.
Savoir sur lequel des quatre signaux d'expérience de page commencer à travailler peut être un véritable casse-tête en soi.
L'expérience utilisateur sur la page est extrêmement importante pour le référencement des éditeurs, car un contenu de qualité ne suffit pas à garantir un positionnement optimal dans les SERP.
Google privilégie toujours la qualité de l'information avant tout ; ainsi, un contenu unique ou des exclusivités seront bien référencés même si l' expérience utilisateur sur la page est médiocre . Cependant, lorsque plusieurs éditeurs proposent une excellente couverture du sujet, l'expérience utilisateur sur la page devient un facteur déterminant pour le classement dans les SERP.
Chacun des quatre piliers de l'expérience utilisateur a un impact différent sur le référencement naturel d'un site web. L'impact le plus immédiat provient de l'optimisation des pages vues, qui se traduit par un site web plus rapide à charger.
De nombreuses études ont démontré que plus le chargement d'un site web est long, plus l'intérêt du public diminue rapidement et plus le taux de rebond augmente.
Par exemple, une étude Google de 2018 a révélé que la probabilité de rebond augmentait de 32 % lorsque le temps de chargement des pages passait de 1 seconde à 3 secondes.
Une autre étude Google de 2020 a révélé que les sites d'actualités ayant réussi le test CWV affichaient un taux d'abandon inférieur de 22 % à celui des sites ayant échoué. Yahoo! JAPAN, quant à lui, a amélioré son score CLS de 0,2 et a constaté une hausse de 15,1 % du nombre de pages vues par session et une augmentation de 13,3 % de la durée des sessions.
Bien que Google ait explicitement déclaré qu'il n'utilise pas les taux de rebond comme signal de classement , un taux de rebond élevé témoigne de facteurs qui importent à Google, à savoir la vitesse de chargement d'une page, sa réactivité et sa stabilité visuelle.
Les éditeurs qui ciblent les utilisateurs d'appareils mobiles doivent s'assurer que leur site envoie des signaux d'optimisation mobile que Google et Bing peuvent détecter. Ces deux moteurs de recherche privilégient les sites web adaptés aux mobiles lors de l'affichage des résultats de recherche aux utilisateurs mobiles.
Comparativement aux CWV et à l'optimisation mobile, la mise en œuvre du HTTPS aura un impact bien moindre sur le référencement naturel d'un éditeur. Google a annoncé en 2014 qu'il l'utiliserait comme critère de classement et a commencé à signaler tous les sites HTTP comme « non sécurisés » dans Chrome en 2018. Toutefois, le principal avantage réside dans une sécurité des données renforcée, notamment si votre modèle économique repose sur les abonnements.
Les publicités interstitielles ou les boîtes de dialogue intrusives, quant à elles, peuvent limiter la capacité des robots d'exploration du Web à explorer et à indexer une page, empêchant ainsi les moteurs de recherche de la classer, et encore moins de la faire apparaître en haut des résultats de recherche.
La première étape pour améliorer l'expérience utilisateur de votre site web consiste à évaluer son efficacité actuelle.
Il existe un large éventail d'outils internes et tiers pour y parvenir, mais dans ce guide, nous nous concentrerons sur les outils internes de Google.
Nous savons désormais que le CWV est un facteur de classement important. Mais comment le mesure-t-on ? Le tableau ci-dessous répertorie les paramètres dans lesquels les valeurs optimales du CWV devraient se situer pour une expérience utilisateur optimale.
Maintenant que nous savons ce que nous devons mesurer et dans quelle mesure, nous pouvons examiner comment procéder pour mesurer l'expérience utilisateur sur les pages web.
Vous trouverez ci-dessous une liste de quelques-unes des méthodes les plus couramment utilisées.
La première option offerte aux éditeurs est de loin la plus complexe sur le plan technique et nous ne recommandons même pas de l'envisager à moins de disposer d'un bon développeur pour vous aider à la mettre en œuvre.
Nous parlons ici de la collecte de données utilisateur sur votre site, un processus appelé suivi des utilisateurs réels (RUM), puis de l'analyse des résultats dans Google Analytics 4 (GA4). Google propose d'autres outils, comme PageSpeed Insights (PSI), qui utilisent un échantillonnage de données pour évaluer votre site. Toutefois, si votre objectif est d'obtenir une vision complète de l'expérience utilisateur sur votre site web, vous avez besoin de données réelles collectées directement sur celui-ci.
Nous conseillons d'utiliser GA4 pour cette tâche pour la simple raison que Google a l'intention de commencer à « mettre hors service » la génération précédente de Google Analytics, Universal Analytics (UA), à partir de mi-2023.
En tant qu'éditeur, vous auriez dû configurer un compte Google Analytics 4 en prévision de la migration. Si ce n'est pas le cas, veuillez suivre les instructions de Google pour le configurer ou l'ajouter à un site disposant déjà d'un compte Google Analytics .
Une fois cette étape terminée, l'étape suivante consiste à connecter l'entrepôt de données BigQuery de Google à GA4 depuis l'interface d'administration d'Analytics. La connexion de BigQuery vous permettra d'interroger vos données à l'aide de SQL. Voici un guide expliquant comment procéder .
Ces étapes étant maintenant terminées, nous pouvons ajouter la bibliothèque web-vitals à votre site.
Cette bibliothèque, qui est une bibliothèque JavaScript modulaire extrêmement petite pour la collecte de données, est disponible sur GitHub.
La bibliothèque peut être installée soit depuis le dépôt en ligne open-source npm en exécutant « npm install web-vitals » dans votre terminal, soit via<script> tags on a content distribution network (CDN).
Voici un exemple de ce type de script :
Une fois la bibliothèque web-vitals installée, les données utilisateur peuvent alors être envoyées à Google Tag Manager (GTM), en utilisant une balise de modèle personnalisée recommandée par Google, créée et maintenue par Simo Ahava.
Une fois la balise installée, les métriques CWV et les données d'attribution associées peuvent alors être transmises à GA4.
Une fois l'analyse configurée pour le suivi des données GTM, vous pourrez consulter les données d'événements dans l'interface BigQuery. Ces données pourront ensuite être interrogées comme suit :
Une fois la requête renvoyée, le rapport devrait ressembler à ceci :
Il est important de souligner une fois de plus qu'il s'agit d'une solution destinée aux développeurs et qu'elle est, en réalité, bien plus complexe. Cependant, son adoption vous permettra d'obtenir une analyse très précise des performances de votre site web.
Pour une explication plus détaillée de ce processus, consultez le guide de Google sur l'affichage des CWV dans GA4 .
Bien que cette méthode soit la plus précise pour surveiller les CWV, il existe des approches plus simples pour résoudre ce problème.
L'indice PSI est moins précis que l'approche GA/RUM, cependant, il est fréquemment cité comme l'un des outils les plus importants pour mesurer les CWV, grâce à sa facilité d'utilisation.
Bien qu'il n'utilise que des échantillons d'expériences utilisateur réelles extraits du rapport Chrome sur l'expérience utilisateur (CrUX) des 28 derniers jours, PSI propose une interface utilisateur simple et intuitive . L'interprétation des données s'en trouve grandement facilitée.
Comme vous pouvez le constater dans notre exemple ci-dessous, l'examen du site de Forbes fournit immédiatement une mine d'informations sur la version de bureau et la version mobile du site web de l'éditeur.
PSI utilise les catégories verte, orange et rouge mentionnées ci-dessus pour attribuer les notes de performance « Bon », « À améliorer » et « Mauvais ».
L'approche d'échantillonnage de CrUX signifie que, même si l'évaluation de Forbes ci-dessus a pris en compte certaines expériences réelles des utilisateurs du site, elle ne peut pas intégrer toutes les données des utilisateurs du site.
Cette méthode d'échantillonnage devient problématique pour les sites plus petits, dont beaucoup ne figurent pas dans les données de terrain de CrUX.
Toutefois, PSI peut toujours proposer un diagnostic virtuel de votre site web à l'aide des données de laboratoire extraites de l'outil open source Lighthouse . Voir l'exemple ci-dessous :
Le problème de cette approche est que Lighthouse collecte ses données à partir de paramètres prédéfinis pour les appareils et le réseau, qui ne correspondent pas à ceux de vos utilisateurs. En d'autres termes, c'est un piètre substitut à l'original.
GSC est un outil conçu pour offrir aux éditeurs une vue d'ensemble des problèmes CWV de leur site web, ouvrant ainsi la voie à une approche globale pour améliorer les performances du site.
Il procède en regroupant ses rapports de performance d'URL selon leur statut, le type de métrique ou la similarité thématique. Il n'identifie pas les problèmes des pages individuelles, empêchant ainsi la mise en œuvre de correctifs précis.
C’est là qu’intervient PSI. Il convient toutefois de noter que le rapport de page individuel de PSI peut différer sensiblement des résultats agrégés de GSC. En effet, la page individuelle ne représente qu’un élément des résultats agrégés de GSC.
En se connectant au tableau de bord de GSC, les utilisateurs verront l'onglet Core Web Vitals dans le menu de gauche. Un clic sur cet onglet affichera des rapports CWV distincts pour mobile et ordinateur, classés par groupes d'URL.
Bien qu'il existe trois indicateurs CWV (LCP, FID et CLS), les URL recevront une note globale basée sur leur indicateur le moins performant pour un appareil spécifique, ce qui affectera également les rapports de groupe.
Par exemple, si une URL sur mobile reçoit un FID médiocre et un LCP bon, elle sera étiquetée comme médiocre sur mobile.
Il est important de rappeler que Google Search Console n'est pas conçu pour des corrections précises. En revanche, il est très utile pour les éditeurs qui publient de nombreuses pages similaires. Par exemple, les sites d'actualités peuvent avoir une mise en page relativement standardisée pour leurs articles, avec une image comme élément principal visible sans défilement. Dans ce cas, Google Search Console peut aider à identifier rapidement les problèmes de LCP (Least Page Compliance) sur un grand nombre d'URL.
Le dernier outil de la suite Google dédiée à la mesure des performances est Lighthouse . Cet outil se distingue nettement des précédents par sa capacité à simuler les performances des utilisateurs en fonction d'un ensemble de paramètres prédéfinis.
Il n'utilise pas de données de terrain et ses applications pratiques sont donc plus limitées. Par exemple, les données de terrain dépendent de la connexion réseau de l'utilisateur et de sa distance par rapport aux serveurs du site, tandis que Lighthouse émule un appareil de milieu de gamme pour collecter des données dans un environnement contrôlé.
Il est également important de comprendre que le score de Lighthouse ne se résume pas à une simple somme des scores CWV. Il exclut le FID, car les données de laboratoire excluent par nature les interactions avec l'utilisateur final, tout en intégrant le temps de blocage total (TBT), l'indice de vitesse (SI) et le délai d'interaction (TTI). Pour ceux qui souhaitent simuler une expérience FID en laboratoire, le TBT peut servir d'indicateur.
Nous déconseillons toutefois d'utiliser Lighthouse comme outil de mesure principal. Il est plutôt recommandé de l'utiliser en complément de PSI pour résoudre des problèmes spécifiques liés aux pages.
Les éditeurs qui souhaitent utiliser Lighthouse dans leurs tests peuvent le faire via les outils de développement Chrome intégrés directement au navigateur Chrome, une extension pour ce navigateur ou sur web.dev/measure .
Lighthouse analysera votre page web et vous attribuera une note sur 100 dans quatre domaines :
Voici à quoi cela ressemble lorsque nous soumettons notre page d'accueil via l'option web.dev.
La conception web mobile diffère de la conception web traditionnelle pour ordinateurs de bureau en ce que les appareils mobiles ont des écrans plus petits, disposent généralement d'un matériel moins puissant et reposent exclusivement sur des entrées tactiles.
Les sites optimisés pour mobiles privilégient l'expérience utilisateur en suivant un ensemble de bonnes pratiques que nous aborderons plus loin. Pour l'instant, le meilleur moyen de vérifier si vos pages sont optimisées pour les mobiles est d'utiliser l'outil de test d'optimisation mobile .
La saisie de l'URL d'une page Web adaptée aux mobiles renvoie le résultat suivant :
Les pages qui échouent à ce test afficheront plusieurs options de correction. Nous y reviendrons plus tard.
Vérifier si votre site web dispose d'une connexion sécurisée est un processus extrêmement simple qui consiste à ouvrir votre navigateur et à regarder le symbole situé à gauche de l'URL dans la barre d'adresse.
Dans Chrome, une connexion sécurisée sera indiquée par un symbole de cadenas fermé comme ceci :
Une connexion non sécurisée affichera un symbole d'information comme celui-ci :
Déterminer si vos publicités interstitielles sont intrusives ou non n'est pas aussi simple que d'entrer l'adresse de votre site Web dans un outil en ligne et d'attendre qu'il renvoie une coche ou non.
Cela nécessite d'étudier les publicités interstitielles et les boîtes de dialogue présentes sur votre site et de déterminer si elles répondent à certains critères.
Considérez ces paramètres comme des questions, par exemple :
Si vous répondez oui à l'une de ces questions, cela indique probablement que la publicité ou la boîte de dialogue est intrusive.
Maintenant que nous maîtrisons les différents éléments des quatre composantes qui contribuent à l'expérience utilisateur, ainsi que les moyens de suivre leurs performances, voyons comment améliorer concrètement le référencement de nos sites
Nous allons commencer par examiner les CWV, car le débogage et l'optimisation des LCP, CLS et FID auront le plus grand impact sur votre capacité à rivaliser pour les premières places dans les classements SERP très disputés.
Bien que l'optimisation pour les mobiles soit extrêmement importante pour les sites ciblant les utilisateurs mobiles, l'amélioration des CWV (coefficients de conversion de largeur de page) optimisera les performances des pages, qu'elles soient consultées sur des appareils mobiles ou des ordinateurs de bureau.
La lutte contre le HTTPS et les interstitiels intrusifs a été laissée pour la fin car ce sont des tâches plus faciles et les victoires moins gratifiantes.
Il existe plusieurs options pour améliorer les performances du CWV, que nous avons classées par ordre d'importance selon ce que nous estimons.
L'optimisation des indicateurs clés de performance web (EIC) de n'importe quelle page englobe un ensemble d'actions, et il est important de savoir par où commencer pour optimiser vos ressources.
Comme nous l'avons déjà noté ci-dessus, le plus grand contenu peint (LCP) mesure le temps nécessaire pour charger entièrement le plus grand élément de texte ou d'image visible au-dessus de la ligne de flottaison.
Utilisez PSI pour identifier le contenu de la page qui déclenche le test LCP. Pour cela, accédez à la section « Diagnostic » du rapport et cliquez sur « Élément Largest Contentful Paint ». Voici ce que nous avons constaté sur la page d'accueil de SODP :
Un mauvais score LCP peut généralement être attribué à des temps de réponse serveur lents, à des scripts JavaScript et CSS bloquant le rendu, à des temps de chargement des ressources ou au rendu côté client, voire à une combinaison de ces quatre facteurs.
L'optimisation de votre page implique en réalité l'optimisation de quatre sous-parties différentes du processus de chargement LCP :
Pour que votre score LCP s'améliore, toutes ces étapes doivent être optimisées. Cependant, cela ne signifie pas que toutes les sous-parties ont la même importance.
Google suggère que le temps LCP total soit décomposé en TTFB et temps de chargement des ressources représentant chacun environ 40 %, tandis que les délais de chargement des ressources et de rendu des éléments devraient chacun représenter moins de 10 %.
Idéalement, ces deux dernières valeurs devraient être aussi proches de zéro que possible et avoir la priorité sur les deux autres phases.
Il existe deux façons de réduire au minimum le délai de chargement des ressources :
Nous tenons à le préciser d'emblée : nous vous recommandons de consulter votre développeur web avant d'entreprendre ces modifications. Il s'agit d'une opération côté serveur qui requiert l'expertise d'un développeur expérimenté pour un résultat optimal.
Découverte des ressources
Chaque navigateur web est livré avec un scanner de préchargement, dont le rôle est d'aider l'analyseur HTML principal du navigateur à détecter le contenu de la page.
Alors que l'analyseur HTML principal traite le balisage brut jusqu'à ce qu'il rencontre une ressource bloquante (comme un script qui ne contient pas d' async ou defer) , l'analyseur de préchargement occupe un rôle plus spéculatif.
Autrement dit, le scanner de préchargement recherche les ressources à récupérer avant que l'analyseur HTML principal ne les atteigne et continue de fonctionner même si ce dernier est bloqué. Le scanner de préchargement peut être utilisé pour trouver et charger le LCP au plus près de la requête de page initiale.
Pour garantir que la ressource LCP soit détectable à partir du code source HTML, les développeurs disposent d'options spécifiques à la ressource.
Par exemple, si le LCP est une image, ses src ou srcset doivent être présents dans le code source. Les images d'arrière-plan CSS, quant à elles, peuvent être préchargées en incluant dans le balisage HTML ou dans l'en-tête. Enfin, les polices peuvent être chargées de la même manière via .
Il convient toutefois de noter que le préchargement, utilisé pour réduire les temps de chargement LCP, peut engendrer de nouveaux problèmes, comme la dépriorisation asynchrones . C'est pourquoi nous recommandons d'en discuter avec votre développeur.
Pour plus d'informations sur ce sujet, consultez les analyses approfondies de Google concernant l'optimisation LCP et le scanner de préchargement .
Priorité des ressources
Les navigateurs tentent de télécharger les fichiers CSS, les polices, les scripts, les images et les iframes de manière optimale en leur attribuant des priorités. Ils sont très performants pour déterminer ces priorités, mais cela ne signifie pas qu'ils sont infaillibles.
Pour optimiser la priorisation des ressources, les développeurs peuvent utiliser des indications de priorité basées sur le balisage afin de signaler aux navigateurs les ressources prioritaires. Par exemple, un développeur peut utiliser JavaScript et l'API Fetch pour associer à l'image LCP l' `fetchpriority="high"` , ce qui accélère le chargement de cette image (métrique CWV).
Il convient de noter que les indications de priorité ne fonctionnent que sur les navigateurs basés sur Chromium , tels que Google Chrome et Microsoft Edge.
Votre développeur a peut-être déjà implémenté le chargement différé pour les ressources situées en dessous de la ligne de flottaison ; vérifiez auprès de lui pour en être sûr, mais il est également judicieux de lui demander d’utiliser les indications de priorité pour les ressources situées au-dessus de la ligne de flottaison.
Pour plus d'informations sur le chargement prioritaire, nous vous recommandons vivement de consulter le guide de Google sur le chargement des ressources .
L'équipe de développement du géant de la recherche a pu utiliser les indications de priorité pour améliorer le LCP de 2,6 secondes à 1,9 seconde lors d'un test de Google Flights.
FID mesure le temps nécessaire au navigateur de l'utilisateur pour commencer à traiter la première entrée, à l'exclusion du défilement et du zoom.
Cette mesure vise à évaluer l'expérience utilisateur lors de l'interaction avec une page web ; les pages web lentes obtiendront donc un mauvais score. L'objectif est de maintenir le score FID en dessous de 100 millisecondes.
Une faible réactivité est généralement due à une utilisation excessive de JavaScript, que les navigateurs traitent avant les entrées.
Le code qui monopolise le focus du navigateur pendant 50 millisecondes ou plus est qualifié de tâche longue et est considéré comme un signe de surcharge JavaScript. Découper ces tâches longues en morceaux de code plus petits peut améliorer les performances et optimiser le FID (Fast ID).
Mais ce n'est pas le seul point à aborder avec votre développeur. Il est important de discuter de la manière dont l'exécution des scripts internes et tiers peut ralentir votre site. Le chargement progressif du code et des fonctionnalités peut contribuer à résoudre les problèmes liés aux premiers, tandis que le chargement à la demande et la priorisation du chargement peuvent aider à résoudre les problèmes liés aux seconds.
Une autre option consisterait à utiliser des web workers pour exécuter du JavaScript en arrière-plan et éviter que votre navigateur ne soit ralenti par le traitement des scripts.
Le CLS mesure la stabilité visuelle de votre site web. Si vos visiteurs perdent le fil de leur navigation parce que le contenu se déplace pour laisser place aux publicités et aux images, votre site obtiendra un mauvais score.
Plus la mise en page de votre page est stable, meilleur est votre score CLS. Google évalue les sites web en tenant compte des perturbations au sein de la fenêtre d'affichage, ainsi que de l'amplitude des déplacements des éléments par rapport à celle-ci.
Minimiser les changements de mise en page inattendus consiste essentiellement à réserver de l'espace aux publicités, aux images et aux vidéos intégrées.
Vous vous souvenez des src ou srcset que nous avons examinés lors de notre discussion sur la découverte des ressources ? Eh bien, ils sont essentiels pour améliorer les scores CLS.
Pour les images statiques, définissez la largeur et la hauteur à l'aide des src pour indiquer au navigateur de réserver de l'espace pour les ressources plus lentes à charger, évitant ainsi les décalages de mise en page.
Voici un exemple de code fourni par Google :
Les images adaptatives nécessitent un attribut srcset pour définir les limites maximales de largeur et de hauteur que le navigateur peut sélectionner. Veillez à utiliser des images ayant le même rapport hauteur/largeur.
Voici un autre exemple :
Pour gérer les publicités, vous pouvez suivre quelques étapes :
Il est également conseillé de réserver de l'espace statique si vous prévoyez d'utiliser des iFrames, du contenu intégré et du contenu dynamique, comme des appels à l'action (CTA).
Lors du téléchargement et de l'affichage des polices web par les navigateurs, il peut arriver qu'un bref affichage de texte non stylisé (FOUT) ou un bref affichage de texte invisible (FOIT) se produise. Le premier survient lorsqu'une police de secours est remplacée par une nouvelle police, tandis que le second résulte d'un délai dans l'affichage de la nouvelle police.
Vous pouvez résoudre les deux problèmes en utilisant Pour indiquer au scanner de préchargement de récupérer les polices web plus tôt. Les polices préchargées ont ainsi plus de chances d'être affichées dès le premier rendu.
D'autres solutions sont proposées dans le guide de dépannage CLS , ainsi que dans son analyse approfondie de l' utilisation du préchargement pour éviter les erreurs FOIT .
Si vous recherchez des améliorations de la vitesse de votre site et que vous utilisez encore une option d'hébergement traditionnelle sur un seul serveur, il est probablement temps d'envisager de passer à un réseau de diffusion de contenu (CDN).
Un CDN est un réseau de serveurs répartis dans différents centres de données à travers le monde, qui distribuent le contenu d'un site web afin d'en améliorer les performances. Si l'hébergement local (via un serveur unique) et le CDN permettent tous deux de diffuser le contenu d'un site web aux visiteurs, seul un CDN peut prendre en compte la localisation géographique de l'utilisateur et sélectionner le serveur le plus proche pour réduire les temps de chargement.
La géographie n'est toutefois pas le seul avantage, car les CDN sont également mieux équipés pour gérer les pics de trafic soudains ainsi que les ressources du serveur racine telles que la bande passante.
En définitive, une navigation plus rapide envoie un signal fort à Google concernant le respect des règles de confidentialité. Bien que Cloudflare soit l'un des fournisseurs de CDN les plus connus du marché, il existe plusieurs concurrents sérieux à prendre en compte .
Quel que soit le fournisseur d'hébergement que vous utilisez, ses serveurs seront soumis à certaines contraintes matérielles.
Les serveurs contiennent généralement les mêmes composants essentiels que votre ordinateur portable ou de bureau : un processeur et de la mémoire vive (RAM). Ces éléments gèrent toutes les tâches de votre compte. Vous pouvez utiliser le tableau de bord de votre hébergeur pour vérifier le processeur et la RAM installés sur votre serveur et même demander des ressources supplémentaires afin d'améliorer les performances de votre site.
Si vous examinez le processeur de votre serveur, il est important de comprendre qu'un seul cœur est utilisé pour traiter la requête d'un visiteur pour une page web. Cela signifie que des fréquences d'horloge monocœur plus élevées sont toujours un avantage. Les processeurs multicœurs sont capables de traiter plusieurs pages vues et d'autres services serveur.
Voici une autre question pour votre développeur.
Vérifiez régulièrement votre base de données pour vous assurer qu'elle n'est pas encombrée de photos et de fichiers inutilisés. Supprimer les fichiers inutiles permettra de la désencombrer et d'accélérer le temps de chargement moyen des pages.
L'utilisation d'images très volumineuses peut ralentir votre site web. Quelle taille ? Au-delà de 1 Mo, c'est tout simplement trop lourd.
Et comme nous le savons déjà, des temps de chargement plus longs entraîneront des taux de rebond plus élevés et enverront des signaux indésirables à Google.
Pour les utilisateurs de WordPress, il existe de nombreux plugins d'optimisation d'images permettant de simplifier une tâche manuelle fastidieuse. De plus, beaucoup proposent des fonctionnalités supplémentaires comme le chargement différé et le redimensionnement automatique.
La compatibilité mobile d'un site dépend de sa simplification et de son optimisation pour une expérience de navigation mobile optimale.
Les utilisateurs mobiles interagissent différemment avec les pages et sont beaucoup moins patients face à des temps de chargement lents et des sites difficiles à naviguer. Si votre site n'a pas réussi le test d'optimisation mobile décrit ci-dessus, ou même s'il l'a réussi mais que vous souhaitez l'optimiser davantage, examinons quelques bonnes pratiques.
Cela devrait être la préoccupation première de tout éditeur. Un moyen simple d'améliorer la facilité d'utilisation consiste à se poser des questions telles que :
Ces réponses nous aideront grandement à identifier les difficultés rencontrées par les utilisateurs. Par exemple, vous ne souhaitez pas les obliger à ajuster leur écran pour visualiser votre contenu. L'exemple ci-dessous illustre ce point.
Pour optimiser votre contenu pour les appareils mobiles, trois options de développement s'offrent à vous :
Nous les avons classés par ordre de facilité de mise en œuvre et nous recommandons d'adopter une conception réactive, car c'est l'option la moins exigeante des trois.
Les développeurs ajoutent simplement la meta name="viewport" au code existant d'une page Web
L'avantage ici est que vous n'avez qu'un seul site web à gérer, qui peut être facilement affiché sur n'importe quel type d'écran.
À l'inverse, les designs dynamiques fonctionnent en affichant un code HTML différent selon l'appareil de l'utilisateur. Les pages doivent utiliser l'en-tête HTTP Vary pour éviter d'afficher le mauvais code sur le mauvais appareil.
Enfin, il existe les sous-domaines mobiles, que nous déconseillons compte tenu des ressources nécessaires à leur mise en œuvre efficace. Les sous-domaines mobiles sont des sites totalement distincts, nécessitant des besoins d'hébergement différents. Pour que les robots d'exploration comprennent la relation entre le domaine et le sous-domaine, vous devrez inclure la rel="canonical" .
Le design adaptatif étant l'option la plus simple, nous le recommandons aux éditeurs. Pour en savoir plus sur le design adaptatif, consultez le guide d'implémentation de Google .
Voici une liste rapide des considérations techniques à prendre en compte pour toute conception :
Cette dernière étape est la manière la plus simple d'améliorer l'expérience utilisateur sur la page, mais elle contribue également grandement à rassurer vos utilisateurs.
Passer au protocole HTTPS protège et chiffre les informations de vos utilisateurs et contribue à prévenir les attaques de type « homme du milieu » (MitM). De plus, un certificat SSL élimine les avertissements du navigateur concernant les failles de sécurité.
Votre hébergeur devrait vous proposer la sécurité HTTPS. Si ce n'est pas le cas, il serait judicieux d'envisager d'en changer. Plusieurs hébergeurs réputés offrent déjà le HTTPS gratuitement . De plus, ceux qui fournissent des certificats SSL utilisent leur propre service, ce qui simplifie et accélère la mise en place.
Si vous souhaitez demander et installer un certificat SSL auprès d'une autorité de certification (AC), vous devez suivre quatre étapes :
Lors de la migration de votre site vers HTTPS, il est important de veiller à ce que cela n'ait pas d'impact sur votre stratégie de revenus publicitaires. Le problème est qu'un protocole HTTP peut être affecté.Ne fonctionnera pas sur un site utilisant HTTPS.
Nous vous conseillons de consulter vos partenaires technologiques publicitaires avant d'apporter toute modification à votre site.
Pour plus de détails, consultez le guide complet de Google sur le sujet.
Les publicités interstitielles et les boîtes de dialogue intrusives rendent difficile pour les moteurs de recherche la compréhension du contenu d'une page Web, ce qui peut nuire aux performances dans les SERP.
Il serait idéal de pouvoir créer des interstitiels sans perturber l'expérience utilisateur, mais c'est précisément le but de ces publicités : occuper tout l'écran lors des interruptions de contenu afin de capter l'attention de l'utilisateur.
De ce fait, les éditeurs auraient intérêt à privilégier les bannières publicitaires aux publicités interstitielles, car elles n'occupent qu'une petite partie de l'écran. Mieux vaut risquer la cécité aux bannières que la frustration des utilisateurs.
Les éditeurs peuvent utiliser des bannières compatibles avec les navigateurs ou de simples bannières HTML qui renvoient vers la page de destination de l'appel à l'action.
Les boîtes de dialogue peuvent également servir aux campagnes promotionnelles, à condition d'être discrètes. Il est essentiel de garantir un accès au contenu sans interruption.
Il n'existe pas de solution miracle pour optimiser l'expérience utilisateur de vos pages et il est essentiel de corriger les points mentionnés ci-dessus. Cela étant dit, il convient de préciser que même si WordPress est de loin la plateforme de publication la plus populaire au monde, cela ne signifie pas nécessairement qu'il s'agit du meilleur CMS pour améliorer les performances de CWV.
L'analyse du rapport technologique CWV montre qu'environ 29 % seulement des sites WordPress possèdent un bon score CWV, tandis que 41 % des sites Wix obtiennent la certification.
Il convient d'évaluer si le passage à un CMS spécialisé pourrait améliorer nativement vos CWV.
L'optimisation de l'expérience utilisateur sur les pages web est un vaste sujet, et se lancer peut paraître intimidant. Cependant, il est important de se rappeler qu'on ne peut pas tout faire d'un coup.
Viser un score « Bon » pour tous vos indicateurs CWV n'est pas indispensable pour améliorer le positionnement de votre site dans les SERP. De plus, se fixer des objectifs aussi ambitieux peut s'avérer contre-productif et démotivant.
Privilégiez plutôt les petites victoires concernant vos évaluations de performance, en vous concentrant sur l'amélioration des résultats « insuffisants » sans trop vous préoccuper des points à améliorer. Vous pourrez vous en occuper plus tard, lorsque vous disposerez de plus de temps et de ressources à consacrer au processus.
Nous avons déjà évoqué l'amélioration du score CLS de Yahoo! JAPAN ; examinons maintenant deux autres sites dont nous pouvons tirer des enseignements.
Le quotidien indien The Economic Times, qui compte plus de 45 millions d'utilisateurs actifs mensuels, a réduit son score CLS de 250 %, passant de 0,25 à 0,09, et son temps LCP de 80 %, passant de 4,5 secondes à 2,5 secondes.
Entre octobre 2020 et juillet 2021, l'éditeur a réduit de 33 % les scores LCP de la catégorie « Faible », tandis que les valeurs CLS de cette même catégorie ont chuté de 65 %. Ces progrès ont permis à The Economic Times de franchir les seuils CWV sur l'ensemble de son réseau d'origine, tout en diminuant son taux de rebond global de 43 %.
L'éditeur a atteint cet objectif de plusieurs manières, notamment en priorisant le téléchargement des ressources grâce aux indications de priorité. Il s'est également attaqué aux tâches longues en les découpant en blocs de code afin de garantir le chargement en premier des ressources essentielles à l'affichage de la partie visible de la page.
Le site d'information britannique a amélioré son score CLS de 0,25 à 0,1 , tout en augmentant le nombre d'URL ayant obtenu une note de passage de 57 % à 72 %.
Le Telegraph a utilisé les outils de développement Chrome pour identifier les cas individuels de changement de mise en page.
Avant cela, utilisez WebPageTest pour déterminer à quel moment de la chronologie le changement de mise en page s'est produit.
Grâce à ces données, l'équipe s'est concentrée sur la réduction des modifications d'aménagement en s'attaquant à ces domaines
Pour ses publicités, le Telegraphed a commencé à leur réserver des espaces et a utilisé le format publicitaire le plus courant pour en préciser les dimensions. Cela a également permis d'éviter que les publicités ne se replient sur elles-mêmes lors de leur consultation sur une tablette.
L'équipe s'est attaquée à un problème similaire concernant les images intégrées en haut des articles, qui n'avaient pas de dimensions spécifiées.
Le Telegraph a apporté d'autres modifications, comme le déplacement de l'en-tête en haut du balisage et l'utilisation d'espaces réservés pour les vidéos intégrées, mais a finalement décrit le processus comme « assez facile » tout en ayant un impact significatif.
Améliorer l'expérience utilisateur sur vos pages web ne doit pas être une tâche insurmontable. Mesurez les quatre piliers de cette expérience et déterminez ensuite les ressources à consacrer à l'amélioration de vos résultats.
Si vous êtes un petit éditeur, l'équilibre des ressources sera crucial et nous vous recommandons d'identifier les opportunités les plus faciles à saisir pour votre premier projet.
L'approche du Telegraph, qui s'est concentré sur un seul aspect des CWV plutôt que sur les trois, a permis d'obtenir des améliorations significatives. L'Economic Times, quant à lui, s'est concentré sur deux des trois aspects, aboutissant à des résultats impressionnants.
Actif maintenant
Voir plus
