Tactiques de croissance des éditeurs pour la saison électorale | SÉMINAIRE EN LIGNE
Tactiques de croissance des éditeurs pour la saison électorale | SÉMINAIRE EN LIGNE
À la fin de ce module, vous devriez avoir une compréhension claire des différents composants qui contribuent à l'expérience de la page, pourquoi ils sont importants et comment 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épondez au questionnaire
Prenez le quiz sur le module actuel
Matériaux
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 de page est un ensemble de signaux - y compris Core Web Vitals (CWV), la convivialité mobile, HTTPS et les directives interstitielles intrusives - que Google utilise pour extrapoler l'expérience utilisateur sur un site Web.
L'expérience de la page est une évaluation des performances d'un site plutôt que de son contenu. Alors que Google donne toujours la priorité à la pertinence du contenu lorsqu'il répond aux requêtes des utilisateurs, l'expérience de la page est effectivement un facteur décisif lorsque plusieurs sites offrent un niveau de couverture similaire.
Les quatre signaux d'expérience de page sont :
Les CWV mesurent l'expérience utilisateur en se concentrant sur la rapidité de chargement d'une page, sa réactivité aux entrées de l'utilisateur et également sa stabilité visuelle. Il y a trois métriques pour cela :
La mise à jour d'avril 2015 de Google a introduit la métrique adaptée aux mobiles du géant de la recherche, ce qui stimule le classement des pages adaptées aux mobiles sur les serps mobiles.
En effet, Google hiérarchisera les sites qui garantissent que leur contenu est facilement lisible sur les appareils mobiles - ce qui signifie qu'il n'est pas nécessaire de zoomer, des cibles en contact telles que les boutons de connexion ne sont pas espacés trop près les uns des autres, il n'y a pas de défilement horizontal et de contenu injouable.
La mise à jour s'applique aux pages individuelles, pas à des sites Web entiers, et n'affecte pas non plus le contenu affiché sur les navigateurs de bureau / ordinateur portable.
HTTPS, ou Protocole de transfert Hypertext Secure, est une version sécurisée du protocole de communication Internet HTTP.
HTTPS, ou HTTP, forme la première partie de chaque URL connue sous le nom de «schéma». Cela porte le nom de domaine, qui est le segment de l'URL connu sous le nom de «l'autorité».
La différence entre HTTPS et HTTP est que le premier est sécurisé alors que le second ne l'est pas. Ce que cela signifie dans la pratique, c'est que les utilisateurs se connectent à un site via une connexion HTTP envoient leurs coordonnées personnelles en texte brut non crypté.
HTTPS sécurise cette connexion, ce qui signifie que toutes les données envoyées entre le navigateur de l'utilisateur et le serveur du site Web sont cryptées en cours de route. Les sites qui souhaitent des connexions sécurisés nécessitent un certificat SSL, que le navigateur de l'utilisateur vérifie et vérifie.
Les interstitiels sont un format d'annonce mobile uniquement qui n'apparaît que dans les ruptures naturelles du contenu - comme lorsqu'un utilisateur passe d'un article à l'autre - couvrant l'écran dans le processus.
Les interstitiels sont considérés comme intrusifs lorsqu'ils bloquent ou obscurcissent partiellement la vue des utilisateurs du contenu. Les boîtes de dialogue sur les sites Web mobiles qui se comportent de la même manière relèvent également de cette catégorie.
La plupart des compétences les plus fortes des éditeurs ont tendance à être la création, la publication et le marketing de contenu, laissant peu de place pour comprendre et optimiser les différentes piliers d'expérience de page.
Les ressources finies signifient que les éditeurs auront du mal à justifier le temps et l'argent nécessaires pour creuser dans le backend des pages Web individuelles, sans parler d'un site Web entier.
Même si les éditeurs sont en mesure de consacrer du temps pour résoudre le problème, comme nous pouvons le voir ci-dessus, Page Experience est un problème multiforme qui nécessite une approche holistique pour fournir des gains de performance significatifs.
Savoir sur lequel des signaux d'expérience à quatre pages commence à travailler peut être un mal de tête en soi.
L'expérience de page est incroyablement importante pour le référencement des éditeurs, car un excellent contenu ne suffit pas pour garantir le placement supérieur au sein des SERP.
Google valorise toujours les meilleures informations avant toute autre chose, ce qui signifie que un contenu ou des nouvelles uniques «Scoops» fonctionnera bien même si l' expérience de la page est «sous-Parc» . Cependant, dans les cas où plusieurs éditeurs offrent une excellente couverture d'actualité, l'expérience de la page devient un facteur décisif important qui influence les classements SERP.
Chacun des piliers d'expérience à quatre pages a un impact différent sur le référencement d'un site Web. L'impact le plus immédiat vient de se concentrer sur les CWV, ce qui se traduira par un site Web qui se charge plus rapidement.
De nombreuses études ont montré que plus un site Web prend du chargement, plus le public perd rapidement et plus le taux de rebond est élevé.
Par exemple, une étude Google de 2018 a révélé que la probabilité de rebond a bondi de 32% lorsque les temps de chargement de page sont passés de 1 seconde à 3 secondes.
Une autre étude Google de 2020 a révélé que les sites d'information qui ont réussi le test CWV ont vu un taux d'abandon de 22% plus faible que ceux qui ont échoué. Yahoo! Le Japon, quant à lui, a amélioré son score CLS de 0,2 et a vu une augmentation de 15,1% en pages vues par session et une augmentation de 13,3% de la durée de la session.
Bien que Google ait déclaré explicitement qu'il n'utilise pas les taux de rebond comme signal de classement , un taux de rebond élevé parle des facteurs dont Google se soucie - à savoir la vitesse de charge d'une page, la réactivité et la stabilité visuelle.
Les éditeurs ciblant les publics sur les appareils mobiles doivent s'assurer que leur site envoie des signaux conviviaux sur les mobiles que Google et Bing peuvent reprendre. Les deux moteurs de recherche hiérarchiseront les sites Web amicaux lors de la livraison des résultats de recherche aux utilisateurs mobiles.
Par rapport aux CWV et à la convivialité mobile, la mise en œuvre des HTTP aura un impact beaucoup plus faible sur le référencement d'un éditeur. Google a déclaré en 2014 qu'il l'utiliserait comme signal de classement et a commencé à marquer tous les sites HTTP comme «non sécurisés» dans Chrome en 2018. Cependant, le plus grand avantage ici est une sécurité des données améliorée, surtout si votre module d'entreprise est basé sur les revenus d'abonnement.
Des annonces ou des boîtes de dialogue interstitielles intrusives, quant à elles, peuvent limiter la capacité des robots de robots Web à ramper et à indexer une page, empêchant les moteurs de recherche de pouvoir le classer, laisser seul avec des résultats de recherche élevés.
La première étape vers l'amélioration de l'expérience de page commence par l'évaluation de l'efficacité actuelle de votre site Web.
Il y a un large éventail d'outils des premiers et tiers pour y parvenir, mais, pour ce guide, nous examinerons les premiers outils de Google.
Nous savons maintenant que les CWV sont un facteur de classement important. Mais comment sont-ils mesurés? Le tableau ci-dessous répertorie les paramètres dans lesquels les numéros CWV optimaux devraient tomber pour la meilleure expérience de page.
Maintenant que nous savons ce que nous devons mesurer et par combien, nous pouvons voir comment procéder à la mesure de l'expérience de la page.
Vous trouverez ci-dessous une liste de certaines des méthodes les plus couramment utilisées.
La première option ouverte aux éditeurs est de loin la plus difficile techniquement et n'est pas celle que nous recommandons même en considérant, sauf si vous avez un bon développeur pour aider à sa mise en œuvre.
Nous parlons de la collecte de données utilisateur de votre site, d'un processus connu sous le nom de véritable surveillance des utilisateurs (RUM), puis d'analyser les résultats au sein de Google Analytics 4 (GA4). Google a d'autres outils, tels que PageSpeed Insights (PSI), qui utilisent l'échantillonnage de données pour évaluer votre site. Mais si l'objectif est d'avoir une image complète de l'expérience utilisateur pour votre site Web, vous avez besoin de données réelles recueillies à partir de votre site.
Nous conseillons d'utiliser GA4 pour cette tâche pour la raison simple que Google a l'intention de commencer à «coucher du soleil» la génération précédente de Google Analytics, Universal Analytics (UA), à partir de la mi-2023.
En tant qu'éditeur, vous auriez déjà dû configurer un compte GA4 en prévision du commutateur. Si vous ne l'avez pas fait, veuillez suivre les guides de Google sur la façon de le configurer pour la première fois ou comment l'ajouter à un site qui a déjà UA .
Une fois que cela est fait, la prochaine étape consiste à relier BigQuery Data Warehouse de Google à GA4 de Analytics Admin. Linking BigQuery vous permettra d'interroger vos données à l'aide de SQL. Voici un guide sur la façon de lier les deux .
Avec ces étapes à l'écart, nous pouvons désormais ajouter la bibliothèque de visualités Web à votre site.
La 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 à partir du référentiel en ligne NPM open-source en exécutant «NPM Install WEB-Vitals» dans votre terminal de commande ou via<script> tags on a content distribution network (CDN).
Voici un exemple d'un tel script:
Une fois la bibliothèque Web-Vi-Bibliothèque installée, les données utilisateur peuvent ensuite être envoyées à Google Tag Manager (GTM), en utilisant une balise de modèle personnalisée recommandée par Google que Simo Ahava a créé et maintient.
Une fois la balise installée, les métriques CWV et les données d'attribution associées peuvent ensuite la transmettre à GA4.
Une fois que vous avez configuré des analyses pour suivre les données GTM, vous pourrez voir les données de l'événement dans l'interface BigQuery. Ces données peuvent ensuite être interrogées comme tel:
Une fois la requête retournée, le rapport devrait ressembler à ceci:
Nous devons vraiment souligner à nouveau qu'il s'agit d'une solution de développeur et est, en fait, beaucoup plus complexe que cela. Cependant, l'adoption de cette solution vous donnera la lecture la plus précise sur les performances de votre site Web.
Pour une explication plus détaillée de ce processus, consultez le guide de Google pour consulter les CWV dans GA4 .
Bien qu'il s'agisse de l'approche la plus précise pour surveiller les CWV, il existe des approches plus simples pour s'attaquer à ce problème.
Le PSI est moins précis que d'utiliser une approche GA / Rum, cependant, il est souvent cité comme l'un des outils les plus importants pour mesurer les CWV - grâce à la facilité d'utilisation de l'outil.
Bien qu'il ne puisse utiliser que des échantillons d'expériences utilisateur réelles tirées du rapport d'expérience utilisateur Chrome (CRUX) au cours de la période de 28 jours précédente, PSI fournit une interface utilisateur simple et facile à comprendre . Cela signifie que l'interprétation des données est un processus beaucoup plus simple.
Comme vous pouvez le voir dans notre exemple ci-dessous, l'examen du site de Forbes fournit immédiatement une multitude d'informations sur le bureau et le site Web mobile de l'éditeur.
PSI utilise les catégories vertes, ambre et rouges d'en haut lors de l'attribution de bonnes améliorations et de mauvaises notes de performance.
L'approche d'échantillonnage de Crux signifie que si l'évaluation ci-dessus de Forbes a adopté certaines expériences utilisateur du monde réel du site, elle ne peut pas prendre en compte toutes les données utilisateur du site.
Cette approche d'échantillonnage devient problématique pour les petits sites, dont beaucoup ne figurent pas dans les données sur le terrain de Crux.
Cependant, PSI peut toujours offrir un diagnostic virtuel de votre site Web à l'aide de données de laboratoire tirées de l'outil de phare open source . Voir l'exemple ci-dessous:
Le problème avec cette approche est que Lighthouse collecte ses données à l'aide de paramètres de périphérique et de réseau prédéterminés, qui ne reflétera pas les paramètres de vos utilisateurs. Cela signifie que c'est un mauvais substitut à la vraie chose.
GSC est un outil conçu pour offrir aux éditeurs une vue à vol d'oiseau des problèmes CWV de leur site Web, ouvrant la porte à une approche holistique pour améliorer les performances du site.
Il le fait en regroupant ses rapports de performances d'URL en fonction de l'état, du type métrique ou de la similitude topique. Il n'identifie pas les problèmes avec les pages individuelles, niant l'opportunité de mettre en œuvre des correctifs au niveau granulaire.
C'est là que PSI entre en jeu. Il convient de noter, cependant, que le rapport de page individuel de PSI peut différer considérablement des résultats du groupe du GSC. En effet, la page individuelle n'est qu'un composant des résultats de groupe agrégés de GSC.
En se connectant au tableau de bord de GSC, les utilisateurs verront l'onglet Core Web Vitals sur le côté gauche. Cliquer sur cet onglet affiche des rapports CWV mobiles et de bureau séparés pour les groupes d'URL.
Bien qu'il y ait trois mesures CWV - LCP, FID et CLS - les URL recevront une note globale basée sur leur mesure la moins performante pour un appareil spécifique qui affectera également les rapports de groupe.
Par exemple, si une URL sur mobile reçoit un mauvais fid et un bon LCP, il sera étiqueté comme pauvre sur mobile.
Encore une fois, il est important de noter que le GSC n'est pas destiné aux correctifs granulaires. Cependant, c'est génial pour les éditeurs qui ont beaucoup de pages similaires. Par exemple, les sites d'actualités peuvent avoir une conception et une disposition relativement standard pour leurs pages d'articles qui utilisent une image comme plus grand élément au-dessus du pli. Dans ce cas, GSC peut rapidement aider à identifier les problèmes de LCP sur une gamme d'URL.
L'outil final de la boîte à outils de mesure des performances Google est le phare . Cet outil est complètement différent de ceux qui ont été précédés en ce qu'il émule les performances de l'utilisateur en fonction d'un ensemble établi de paramètres.
Il n'utilise pas de données sur le terrain et est donc plus limité en termes d'utilisations pratiques. Par exemple, les données sur le terrain sont influencées par la connexion réseau d'un utilisateur et leur distance aux serveurs du site, tandis que le phare é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 n'est pas seulement une fusion des scores CWV. Il exclut le FID, car les données de laboratoire par sa nature excluent les interactions utilisateur final, tout en ajoutant du temps de blocage total (TBT), de l'indice de vitesse (SI) et du temps aux mesures interactives (TTI) dans le mélange. Pour ceux qui souhaitent simuler une expérience FID en laboratoire, le TBT peut être utilisé comme proxy.
Cependant, nous recommandons contre l'utilisation du phare comme ressource de mesure principale. Il doit plutôt être utilisé comme un outil compagnon aux côtés de PSI pour aider à résoudre les problèmes de page spécifiques.
Les éditeurs qui souhaitent utiliser le phare dans leurs tests peuvent le faire via Chrome Devtools qui sont cuits directement dans le navigateur Chrome, une extension pour ledit navigateur ou sur web.dev/Measure .
Lighthouse auditera votre page Web et fournira des scores sur 100 sur quatre domaines:
Voici à quoi cela ressemble lorsque nous mettons notre page d'accueil via l'option web.dev.
La conception Web mobile diffère de la conception Web traditionnelle de bureau en ce que les appareils mobiles ont des écrans plus petits, arborent généralement du matériel moins puissant et se fier uniquement aux entrées tactiles.
Les sites conviviaux pour les mobiles hiérarchisent l'expérience utilisateur en suivant un ensemble de meilleures pratiques que nous explorerons un peu plus tard. test adapté aux mobiles de Google .
La saisie d'une URL d'une page Web conviviale mobile renvoie le résultat suivant:
Les pages qui échouent ce test apparaîtront avec un certain nombre d'options de correctif à poursuivre. Nous y entrerons un peu plus tard.
Vérifier si votre site Web a une connexion sécurisée est un processus extrêmement simple, impliquant l'ouverture de votre navigateur et regarder le symbole à gauche de l'URL dans la barre d'adresse.
Dans Chrome, une connexion sécurisée sera indiquée via un symbole de cadenas fermé comme ceci:
Une connexion non sécurisée aura un symbole d'information comme tel:
Déterminer si vos annonces interstitielles sont intrusives ou non n'est pas aussi simple que de saisir votre site Web dans un outil en ligne et d'attendre qu'il retourne une tique ou non.
Il nécessite d'étudier les annonces et les boîtes de dialogue interstitielles sur votre site et décider s'ils transmettent certains paramètres.
Considérez ces paramètres comme des questions, par exemple:
Si vous répondez oui à l'une de ces questions, c'est probablement un indicateur que l'annonce ou la boîte de dialogue est intrusive.
Maintenant que nous avons une bonne compréhension des différentes composantes des quatre composants qui comptent pour l'expérience de la page, ainsi que les moyens de surveiller leurs performances, passons à l'exploration exactement de la façon dont nous pouvons augmenter les signaux de classement de nos sites
Nous allons d'abord examiner les CWV, car le débogage et l'optimisation de LCP, CLS et FID auront le plus grand impact sur votre capacité à concourir pour les meilleurs places dans les classements SERP fortement contestés.
Bien que la convivialité mobile soit incroyablement importante pour les sites ciblant les utilisateurs mobiles, l'amélioration des CWV augmentera les performances de la page pour les sites, qu'ils soient consultés sur les appareils mobiles ou le bureau.
La lutte contre les HTTP et les interstitiels intrusifs ont été laissés à la fin car ils sont plus faciles et moins gratifiants.
Il existe un certain nombre d'options en matière d'amélioration des performances de CWV, que nous avons décomposé en ordre de l'importance que nous pensons mériter.
L'optimisation des traits de base du Web de n'importe quelle page est un éventail d'actions et il est important de savoir par où commencer pour maximiser vos ressources.
Comme nous l'avons déjà noté ci-dessus, la plus grande peinture de contenu (LCP) mesure combien de temps il faut pour charger complètement le plus grand texte ou un atout d'image visible au-dessus du pli.
Utilisez PSI pour identifier le contenu de la page déclenche le test LCP, en vous dirigeant vers la section de diagnostic du rapport et en cliquant sur «le plus grand élément de peinture contenu». Voici ce que nous avons vu sur la page d'accueil de SODP:
Un mauvais score LCP peut généralement être réduit soit à des temps de réponse lente du serveur, à bloquer JavaScript et CSS, à des délais de chargement des ressources ou à un rendu côté client, ou même à une combinaison des quatre.
L'optimisation de votre page implique en fait l'optimisation de quatre sous-parties différentes du processus de charge LCP:
Toutes ces étapes doivent être optimisées pour que vous puissiez voir une amélioration de votre score LCP. Cependant, cela ne signifie pas que toutes les sous-parties sont tout aussi importantes.
Google a suggéré que le temps LCP total devrait être décomposé avec le TTFB et le temps de chargement des ressources qui représente environ 40% tandis que la charge des ressources et les retards de rendu d'élément devraient chaque compte de moins de 10%.
Idéalement, ces deux derniers devraient être aussi près de zéro que possible et prendre la priorité sur les deux autres phases.
Il existe deux façons d'aider à réduire le délai de charge des ressources aussi près que possible de zéro:
Nous le dirons tout de suite, nous vous recommandons de consulter votre développeur Web avant de plonger dans ces correctifs. Il s'agit d'une opération backend et nécessite une main expérimentée pour le faire fonctionner comme vous le souhaitez.
Découverte de ressources
Chaque navigateur Web est livré avec un scanner de précharge, dont le travail est d'aider l'analyseur HTML principal du navigateur à détecter le contenu de la page.
Bien que l'analyseur HTML principal traite le balisage brut jusqu'à ce qu'il se réalise en une ressource de blocage - comme un script qui ne contient pas d' asynchronisé ou de report , le scanner préchargement occupe un rôle plus spéculatif.
En d'autres termes, le scanner de précharge est à la recherche de ressources à récupérer avant que l'analyseur HTML principal les atteigne et continue de fonctionner même si l'analyseur est bloqué. Le scanner de précharge peut être utilisé pour trouver et charger le LCP aussi près que possible de la demande de page initiale.
Pour s'assurer que la ressource LCP est découverte à partir de la source HTML, les développeurs ont des options spécifiques à des actifs.
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 en balisage HTML ou dans l'en-tête. Enfin, les polices peuvent être chargées de la même manière via .
Il convient de noter, cependant, que l'utilisation de préchargement pour réduire les temps de chargement LCP peut introduire de nouveaux problèmes dans le mélange, tels que la dépréciation asynchrones . Il y a une raison pour laquelle nous préconisons d'en parler à votre développeur.
Pour plus d'informations sur ce sujet, consultez les plongées profondes de Google dans l'optimisation LCP et le scanner préchargement .
Priorité de ressource
Les navigateurs essaient de télécharger le CSS, la police, le script, l'image et les actifs IFRAME aussi optimalement que possible en attribuant la priorité. Les navigateurs sont excellents pour déterminer les priorités des actifs, mais cela ne signifie pas qu'ils sont impeccables.
Pour optimiser la hiérarchisation des actifs, les développeurs peuvent utiliser des conseils de priorité basés sur le balisage pour signaler aux navigateurs quels actifs ont une priorité plus élevée. Par exemple, un développeur peut utiliser JavaScript et l'API Fetch pour marquer l'image LCP avec l' FetchPriority = ”High” , accélérant cette métrique CWV particulière.
Il convient de noter que les conseils prioritaires ne fonctionnent que sur des navigateurs à base de chrome , tels que Google Chrome et Microsoft Edge.
Votre développeur a peut-être déjà implémenté le chargement paresseux pour les actifs de pli, vérifiez avec eux pour être sûr, mais il vaut également la peine de les faire utiliser des conseils de priorité pour les actifs au-dessus du pli.
Pour plus d'informations sur le chargement prioritaire, nous vous recommandons fortement 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 des conseils prioritaires pour améliorer la LCP de 2,6 secondes à 1,9 seconde dans un test de vols Google.
FID suit la durée de la durée du navigateur d'un utilisateur pour commencer à traiter la première entrée - à l'exclusion de défilement et de zoom.
Cette mesure vise à capturer l'expérience de l'utilisateur d'interagir avec une page Web, ce qui signifie que les pages Web lentes scorera mal. Garder ce score FID inférieur à 100 millisecondes est la cible.
Une mauvaise réactivité se résume généralement à une utilisation excessive de JavaScript, que les navigateurs traiteront avant les entrées.
Le code qui consomme un objectif d'un navigateur pour 50 millisecondes ou plus est surnommé une longue tâche et est considéré comme un signe de ballonnement JavaScript. La rupture de ces longues tâches en petits morceaux de code peut aborder des performances lent et améliorer le FID.
Mais ce n'est pas le seul domaine qui mérite d'être discuté avec votre développeur. Il est important de discuter de la façon dont l'exécution de scripts à la fois en première partie et en tiers peut ralentir votre site. Le chargement progressif du code et des fonctionnalités peut aider à relever les défis de la première, tandis que le chargement et la hiérarchisation du chargement à la demande peuvent aider avec le second.
Une autre option serait d'utiliser des travailleurs Web pour exécuter JavaScript en arrière-plan et d'empêcher votre navigateur de se faire enliser les scripts de traitement.
CLS est essentiellement une mesure de la stabilité visuelle de votre site Web. Si vos visiteurs perdent leur place sur une page grâce au fait que le contenu soit déplacé pour faire place aux annonces et aux images à charger, votre site va mal marquer.
Moins votre disposition de page rebondit, meilleure est votre score CLS. Google juge les sites Web en considérant la perturbation de la fenêtre, ainsi que dans quelle mesure les actifs y ont sauté par rapport.
La minimisation des déplacements de mise en page inattendue tourne essentiellement autour de la désignation d'espace pour les publicités, les images et les vidéos intégrées.
Rappelez-vous les SRC ou SRCSET que nous avons examinés lors de la parole de la découverte des ressources? Eh bien, cela est assez essentiel pour améliorer les scores CLS.
Pour les images statiques, définissez la largeur et la hauteur à l'aide des SRC pour dire au navigateur de réserver de l'espace pour des actifs de chargement plus lents, évitant ainsi les décalages de mise en page.
Voir l'exemple de code de Google ci-dessous:
Les images réactives nécessitent un srcset pour définir la largeur et les limites de hauteur maximales que le navigateur peut sélectionner. Assurez-vous d'utiliser des images avec le même rapport d'aspect.
Voici un autre exemple:
Lorsque vous traitez des publicités, vous pouvez prendre quelques étapes:
La réservation de l'espace statique est également conseillé si vous avez l'intention d'implémenter les IFRames, le contenu intégré et le contenu dynamique, tels que les appels à l'action (CTAS).
Lorsque les navigateurs téléchargent et rendent les polices Web, il y a une chance de se produire un flash de texte non style (FOT) ou un flash de texte invisible (FOIT). Le premier se produit car une police de secours est échangée avec une nouvelle police, tandis que la seconde est le résultat d'un retard dans une nouvelle police en cours.
Vous pouvez résoudre les deux problèmes en utilisant Pour dire au scanner de précharge de saisir les polices Web plus tôt. Les polices préchargées ont plus de chances de rencontrer la première peinture.
Il existe d'autres solutions dans le guide de dépannage CLS ainsi que sa plongée profonde dans l'utilisation de la précharge pour empêcher le POIT .
Si vous recherchez des améliorations de la vitesse du site et utilisez toujours une option d'hébergement à serveur unique traditionnel, il est probablement temps d'envisager de passer à un réseau de livraison de contenu (CDN).
Un CDN se compose d'un réseau de serveurs situés dans différents centres de données du monde entier qui distribuent le contenu du site Web pour améliorer les performances. Alors que à la fois une option de serveur unique - également connu sous le nom d'hébergement local - et CDN livre du contenu du site Web aux visiteurs, seul un CDN peut prendre en compte l'emplacement géographique de l'utilisateur, puis choisir le serveur le plus proche pour réduire les temps de chargement.
La géographie n'est cependant pas le seul avantage, car les CDN sont également mieux équipés pour gérer les pointes de trafic soudaines ainsi que les ressources du serveur racine telles que la bande passante.
En fin de compte, une expérience de navigation plus rapide envoie un fort signal CWV à Google. Bien que CloudFlare soit l'un des fournisseurs de CDN les plus connus du marché, il y a un certain nombre de concurrents sérieux à considérer .
Quel que soit le fournisseur d'hébergement que vous utilisez, leurs serveurs seront liés par certaines contraintes matérielles.
Les serveurs contiennent en grande partie les mêmes composants de clé qui permettent à votre ordinateur portable / bureau de fonctionner - à savoir un CPU et un RAM - qui gèrent toutes les tâches de votre compte. Vous devriez pouvoir utiliser le tableau de bord de votre fournisseur d'hébergement pour vérifier le CPU et la RAM installés sur votre serveur et même être en mesure de demander des ressources supplémentaires pour augmenter les performances de votre site.
Si vous regardez le processeur de votre serveur, il est important de comprendre qu'un seul noyau est utilisé pour répondre à la demande d'un visiteur pour une page Web. Cela signifie que les vitesses d'horloge monocœur plus rapides sont toujours un. Les processeurs multi-cores sont en mesure de traiter plusieurs pages vues et autres services de serveur.
Ceci est un autre pour votre développeur.
Passez en revue votre base de données sur une base semi-fréquente pour vous assurer qu'elle ne s'est pas gonflée avec des photos et des fichiers inutilisés. La suppression des fichiers inutiles le désencombrdra, accélérant les temps de chargement de page moyens.
L'utilisation de très grandes images peut ralentir votre site Web. Quelle est la taille? Tout ce qui dépasse 1 Mo est tout simplement trop grand.
Et comme nous le savons déjà, des temps de chargement plus lents entraîneront des taux de rebond plus élevés et enverront des signaux indésirables à Google.
Pour ceux sur WordPress, il existe un certain nombre de plugins d'optimisation d'image à choisir qui peuvent rationaliser une tâche manuelle par ailleurs fastidieuse. De plus, beaucoup sont également livrés avec d'autres fonctionnalités telles que le chargement paresseux et la résistance automatique.
Le fait qu'un site soit convivial ou non, si vous avez simplifié et rationalisé votre site pour l'expérience de navigation mobile.
Les utilisateurs mobiles interagissent avec les pages différemment et ont beaucoup moins de patience pour les temps de chargement lents et difficile de naviguer dans les sites. Si votre site a échoué le test convivial décrit ci-dessus, ou même s'il est passé, mais que vous êtes intéressé par une optimisation supplémentaire, passons en revue certaines des meilleures pratiques.
Cela devrait être la principale préoccupation de chaque éditeur. Un moyen simple de traiter la facilité d'utilisation est de vous poser des questions telles que:
Ces réponses contribueront grandement à identifier les points de douleur des utilisateurs. Par exemple, vous ne souhaitez pas faire ajuster vos utilisateurs à ajuster leurs écrans pour afficher votre contenu. Vous pouvez voir ce que nous voulons dire dans l'exemple ci-dessous.
Pour optimiser votre contenu pour les appareils mobiles, il existe trois options de développement:
Nous les avons commandés en termes de facilité de mise en œuvre et nous vous recommandons d'adopter une conception réactive, car c'est la moins exigeante des trois options.
Les développeurs ajoutent simplement la META NAME = «Vieille» au code existant d'une page Web
L'avantage ici est que vous n'avez qu'à maintenir un seul site Web, qui peut être affiché facilement sur n'importe quel type d'écran.
En revanche, les conceptions dynamiques fonctionnent en servant différents code HTML en fonction de l'appareil de l'utilisateur. Les pages doivent utiliser l'en-tête HTTP variable pour éviter que le mauvais code soit servi sur le mauvais appareil.
Enfin, il existe des sous-domaines mobiles, que nous ne conseillons pas compte tenu de la quantité de ressources nécessaires pour mettre en œuvre efficacement. Les sous-domaines mobiles sont des sites complètement séparés qui séparent les besoins d'hébergement. Pour vous assurer que les Crawlers comprennent la relation entre le domaine et le sous-domaine, vous devrez inclure la balise rel = ”Canonical”
Parce que les conceptions réactives sont l'option la plus simple, c'est celle que nous recommandons aux éditeurs. Pour un examen plus approfondi de la conception réactive, consultez le guide d'implémentation de Google .
Voici une liste rapide de considérations techniques pour toute conception:
Cette dernière étape est le moyen le plus simple d'améliorer l'expérience de la page, mais contribue également grandement à améliorer la tranquillité d'esprit de votre utilisateur.
Le passage à HTTPS protège et crypte les informations de vos utilisateurs, il aide également à empêcher l'homme des attaques du milieu (MITM). En plus de cela, le fait d'avoir un certificat SSL élimine les avertissements du navigateur sur un manque de sécurité.
Votre fournisseur d'hébergement devrait vraiment être en mesure de vous fournir une sécurité HTTPS, si ce n'est pas le cas, cela pourrait être utile d'envisager un passage à celui qui le fait. Il existe déjà plusieurs fournisseurs d'hébergement notables qui fournissent gratuitement HTTPS . De plus, les fournisseurs d'hébergement qui fournissent des certificats SSL utilisent leur propre service au lieu de celui externe, ce qui rend le processus encore plus facile et plus rapide à mettre en œuvre.
Si vous souhaitez demander et installer un certificat SSL des autorités de certificat (CAS), vous devez suivre quatre étapes. Ce sont:
Il est important de s'assurer que lorsque la migration de votre site vers HTTPS n'a pas d'impact sur votre stratégie de revenus publicitaires. Le problème est qu'un httpNe fonctionnera pas sur un site à l'aide de HTTPS.
Nous conseillons de consulter vos partenaires de technologie publicitaire avant d'apporter des modifications à votre site.
Pour plus de détails, consultez le guide complet de Google sur le sujet.
Les annonces et boîtes de dialogue interstitielles intrusives rendent difficile pour les moteurs de recherche de comprendre le contenu d'une page Web, ce qui peut saper les performances du SERP.
Ce serait formidable s'il y avait un moyen de créer des interstitiels qui ne perturbent pas l'expérience utilisateur, mais c'est l'intérêt de ces annonces. Ils prennent le contrôle de l'écran entier à des ruptures de contenu afin d'attirer l'attention de l'utilisateur.
En tant que tels, les éditeurs feraient mieux d'utiliser des bannières publicitaires au lieu des publicités interstitielles, car ils ne prennent qu'une petite partie de l'immobilier d'écran. Mieux risquer la cécité des bannières que la frustration des utilisateurs.
Les éditeurs peuvent utiliser des bannières soutenues par le navigateur ou des bannières HTML simples qui sont liées à la page de destination du CTA.
Les boîtes de dialogue peuvent également être utilisées pour des campagnes promotionnelles, mais celles-ci peuvent être conçues pour être sans intrusion. Vous devez vous assurer que les utilisateurs peuvent accéder au contenu sans interruption.
Il n'y a pas de réels raccourcis pour optimiser votre expérience de page et il est essentiel de corriger les points ci-dessus. Cela étant dit, il convient de souligner que si WordPress est facilement la plate-forme de publication la plus populaire au monde, cela ne signifie pas nécessairement que c'est le meilleur CMS lorsqu'il s'agit de stimuler les performances de CWV.
En regardant le rapport sur la technologie CWVS montre que seulement environ 29% des sites Web WordPress ont de bons CWV, tandis que 41% des sites WIX obtiennent le tic vert.
Il vaut la peine de peser si le passage à un CMS spécialisé pourrait améliorer nos CWV nativement.
Il y a beaucoup de terrain à couvrir en ce qui concerne l'optimisation de l'expérience de la page et le démarrage peut être un peu intimidant. Cependant, il est important de se rappeler que vous mangez l'éléphant en prenant une bouchée à la fois.
Viser un «bon» score dans toutes vos mesures CWV n'est pas nécessaire pour aider votre site à gravir les SERP. Plus que cela, cependant, la fixation de ces hauts objectifs peut être contre-productive car elle peut être une poursuite démoralisante.
Visez plutôt les petites victoires en ce qui concerne vos CWV, concentrez-vous sur la lutte contre les résultats «pauvres» sans trop vous soucier de la barre «Besoins en amélioration». Cela peut venir plus tard, lorsque vous avez plus de temps et de ressources à consacrer au processus.
Nous avons déjà parlé de Yahoo! Le score CLS amélioré du Japon, regardons un autre couple de sites dont nous pouvons apprendre des leçons.
Indian Daily the Economic Times, qui dessert plus de 45 millions d'utilisateurs actifs mensuels, a réduit son score CLS de 250% de 0,25 à 0,09 et son temps LCP 80% de 4,5 secondes à 2,5 secondes.
Entre octobre 2020 et juillet 2021, l'éditeur a réduit les scores LCP dans la gamme «pauvre» de 33%, tandis que les valeurs CLS dans la gamme «pauvre» ont chuté de 65%. Ces gains ont permis au temps économique de passer les seuils CWV sur toute son origine tout en réduisant les taux de rebond globaux de 43%.
L'éditeur l'a atteint de plusieurs façons, le premier étant de prioriser les priorités de téléchargement d'actifs en utilisant des conseils de priorité. Il a également abordé de longues tâches, rompant des morceaux de code pour garantir que les ressources qui sont essentielles au-dessus du rendu de la page de pli ont été chargées en premier.
Le site Web des nouvelles britanniques a amélioré son score CLS de 0,25 à 0,1 , tout en augmentant le nombre d'URL qui a reçu une note de passage de 57% à 72%.
Le Telegraph a utilisé Chrome Devtools pour identifier les instances individuelles de mise en page de décalage.
Avant, utilisez WebPageTest pour trouver où dans la chronologie, le décalage de disposition s'est produit.
Avec ces données en main, l'équipe s'est concentrée sur la réduction des changements de disposition en s'attaquant à ces zones
Pour les publicités, le télégraphed a commencé à réserver de l'espace pour eux et a utilisé la taille de l'annonce la plus courante pour spécifier les dimensions. Cela a également aidé à empêcher les annonces de s'effondrer lorsqu'elles sont vues sur une tablette.
L'équipe a abordé un problème similaire avec des images en ligne en haut des articles, qui n'avaient pas spécifié de dimensions.
Le télégraphe a effectué d'autres ajustements, tels que le déplacement de l'en-tête vers le haut du balisage et l'utilisation d'espaces réservés pour des 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 de page n'a pas besoin d'être écrasant. Mesurez les quatre piliers de l'expérience de la page, puis décidez quelles ressources vous pouvez consacrer à l'amélioration de vos résultats.
Si vous êtes un éditeur plus petit, l'équilibrage des ressources sera crucial et nous vous recommandons d'identifier des fruits suspendus raisonnablement bas pour votre premier projet.
En regardant l'approche du télégraphe, ils se sont concentrés sur un aspect des CWV plutôt que sur les trois et ont apporté des améliorations significatives. L'Economic Times s'est concentré sur deux des trois pour fournir des résultats impressionnants.
Actif maintenant
Voir plus
