L'un des phénomènes suivants vous semble-t-il familier : votre site Web semble toujours lent, les pages se chargent au hasard avec des éléments qui rebondissent sur la page, ou vous ne semblez pas générer (et conserver) le trafic organique que vous attendez ?
N’importe lequel de ces symptômes peut être le signe que vous devez vérifier les éléments essentiels du Web de votre site WordPress.
Core Web Vitals est une initiative de Google de 2020 visant à aider les propriétaires de sites Web et les moteurs de recherche à être sur la même longueur d'onde sur la manière d'améliorer l'expérience utilisateur.
En tant que tel, les scores de votre site Web sur ces mesures n’affectent pas seulement directement votre classement dans les moteurs de recherche, mais peuvent également vous donner un aperçu de si les visiteurs trouveront votre site Web agréable ou frustrant à utiliser.
Mais que sont exactement les éléments essentiels du Web ? Pourquoi sont-ils importants ? Et comment pouvez-vous vous assurer que les éléments essentiels du Web de vos sites Web sont à jour ?
Dans ce guide définitif, nous couvrirons tout ce que vous devez savoir sur la façon d’améliorer les éléments essentiels du Web de votre site WordPress, maintenant et à l’avenir.
Voici un résumé pour vous aider à naviguer dans l’article :
Que sont les éléments essentiels du Web ?
Comme on peut s’y attendre, il est difficile de résumer quelque chose d’aussi subjectif que l’expérience utilisateur à des mesures objectives qui peuvent être mesurées et comparées.
Cependant, c’est exactement ce que Google essaie de faire, du moins en ce qui concerne la manière dont les performances du site Web affectent l’expérience utilisateur.
Dans leur propre mots: "Web Vitals est une initiative de Google visant à fournir des conseils unifiés pour les signaux de qualité essentiels pour offrir une expérience utilisateur exceptionnelle sur le Web."
Google a développé ses principales mesures vitales pour le Web pour se concentrer sur trois facettes distinctes de l'expérience utilisateur :
- Temps/vitesse de chargement : Il s’agit de l’aspect le plus simple qui fait directement référence à la vitesse/lenteur de chargement d’une page et de son contenu. Plus de la moitié des mobinautes abandonnent une page dont le chargement prend plus de 3 secondes. Dans ce monde en évolution rapide, les utilisateurs deviennent de plus en plus impatients, ce qui fait de la lenteur du chargement des sites Web une source de frustration majeure.
- Interactivité: Les éléments interactifs, tels que les boutons, ont souvent des temps de réponse retardés lorsque le contenu se charge en arrière-plan. Plus tôt vous pourrez interagir avec les éléments de votre page, meilleure sera l’expérience utilisateur globale.
- Stabilité visuelle : Parfois, lors du chargement d'une page Web lente ou non optimisée, des éléments sautent sur l'écran parce qu'ils sont chargés dans le mauvais ordre ou simplement parce que certains éléments prennent beaucoup plus de temps à charger que d'autres. Cela peut amener les utilisateurs à prendre des mesures incorrectes et cela semble tout simplement mauvais.
Google a établi trois éléments essentiels du Web liés à chacun de ces facteurs. L’ensemble actuel des éléments essentiels du Web qui ont été introduits début 2020 est le suivant :
La plus grande peinture contentieuse (LCP)
Il s'agit du plus grand élément qui se charge dans la zone visible de la page du site Web (tout ce que vous voyez avant de faire défiler vers le bas). LCP affecte directement la vitesse à laquelle votre page Web apparaît charge.
Google recommande un LCP de 2.5 s, ce qui signifie que le plus gros élément devrait se charger en moins de ce temps.
Par exemple, dans l’image ci-dessous, l’image de fond violacée sera le LCP :
Dans de nombreuses pages de sites Web modernes, le LCP a tendance à être une image pleine largeur qui accompagne une page ou un article de blog.
Parce qu’il s’agit d’une pratique très populaire maintenant, il s’agit d’un élément essentiel du site Web WordPress courant qui doit être amélioré. Ainsi, le LCP est principalement affecté par l'utilisation de serveurs lents ou d'éléments avec des fichiers volumineux et longs à charger.
Google lui-même répertorie les facteurs clés suivants qui affectent le LCP :
- Temps de réponse du serveur lents
- JavaScript et CSS bloquant le rendu
- Temps de chargement des ressources
- Rendu côté client
Premier délai d'entrée (FID)
En termes simples, cela mesure le temps nécessaire avant que les éléments interactifs puissent exécuter des événements. Par exemple, combien de temps faut-il la première fois qu'un utilisateur clique sur un lien ou un bouton avant que l'action puisse être effectuée ?
Il peut y avoir un retard car le navigateur est occupé à charger du contenu (tel que des éléments de page ou JavaScript ou à exécuter du code au moment où un utilisateur clique sur un bouton ou un lien).
Google ne mesure que le premier délai de saisie, car les problèmes d'interactivité ont tendance à se produire lors du chargement initial d'une page.
Google recommande un temps inférieur à 100 ms (ou 0.1 s). FID couvre le interactivité aspect des éléments essentiels du Web.
Le FID est principalement affecté par le JavaScript ou le CSS de votre page, en particulier lors du chargement lors de l'exécution du code au moment même du chargement de la page.
Décalage de mise en page cumulatif (CLS)
CLS tente de mesurer les changements inattendus dans la mise en page lors du chargement de la page. Un bon exemple est une page avec deux boutons l’un en dessous de l’autre.
Juste au moment où vous souhaitez appuyer sur le bouton du bas, un autre élément se charge en haut de l'écran, vous obligeant à appuyer accidentellement sur le premier bouton.
Nous avons tous rencontré ce problème et la frustration qui accompagne le fait de prendre une mauvaise action ou de naviguer vers le mauvais lien.
Voici un exemple de Google. Dans ce cas, le bouton se charge entre les sections grise et verte déjà chargées, déplaçant la section verte vers le bas :
Même si le concept est simple, les calculs peuvent devenir un peu compliqués. Pour chaque élément, CLS calcule la taille de l'élément et la distance parcourue en fraction de la taille globale de l'écran.
Ces deux valeurs sont ensuite multipliées pour obtenir un score d'impact global pour chaque élément. Ces scores d'impact sont ensuite additionnés pour obtenir un CLS total pour la page qui est une valeur comprise entre 0 et 1.
Google recommande aux sites Web de viser un CLS de 0.1 ou moins.
Pourquoi vos éléments essentiels du Web sont-ils importants pour votre site Web WordPress ?
Il existe un certain nombre de raisons pour lesquelles les éléments essentiels du Web de votre site WordPress peuvent être synonymes de succès ou d’échec. C'est pourquoi ils les appellent des mesures de performances centrées sur l'utilisateur.
En améliorant vos principaux éléments essentiels du Web, vous offrirez de meilleures expériences utilisateur et rendrez votre site Web plus convivial.
Cela seul est important pour plusieurs raisons :
- Réduisez votre taux de rebond en gardant plus d'utilisateurs sur votre site Web
- Créez de meilleures impressions initiales et durables sur vos utilisateurs
- Construisez une image fiable et digne de confiance de votre site Web
- Convertissez plus de visiteurs en clients
- Offrez des expériences plus agréables à vos utilisateurs nouveaux et existants
Si le chargement de votre site Web prend du temps, les utilisateurs ont tendance à l’abandonner et à passer au suivant. En fait, 53% d'utilisateurs mobiles abandonner un site Web qui prend plus de 3 secondes à charger.
Cependant, il existe une autre raison pour laquelle les éléments essentiels du Web sont essentiels au succès de votre site Web : Google les utilise désormais également comme signal de classement lors du classement des pages Web pour les résultats de ses moteurs de recherche.
Cela signifie que le score Web Vitals de votre site Web WordPress affectera directement votre classement sur les SERP de Google.
Comme vous le savez probablement, un bon classement sur Google (et surtout sur la première page) est l’un des meilleurs moyens d’obtenir plus de trafic organique.
Comment tester les éléments essentiels du Web de votre site WordPress
Maintenant que vous avez une bonne idée de ce que sont les éléments essentiels du Web et pourquoi ils sont importants, examinons rapidement les outils que vous pouvez utiliser pour découvrir les performances de votre site Web à cet égard.
En utilisant ces outils, vous serez en mesure de découvrir tous les problèmes actuels ainsi que les opportunités d'améliorer votre score.
Nous nous concentrerons sur les outils facilement accessibles et utilisables par la plupart des propriétaires de sites Web afin que vous puissiez commencer à les utiliser dès aujourd'hui pour améliorer votre site Web.
phare
LightHouse est un outil de développement Web intégré à Chrome que vous pouvez utiliser pour tester les éléments essentiels du Web de votre site WordPress.
Vous pouvez accéder à LightHouse sur n’importe quel site Web en appuyant sur «F12». Cela ouvrira une page comme celle-ci avec un aperçu du site Web à gauche et de la console LightHouse à droite :
Vous pouvez ouvrir l'outil d'audit de performance LightHouse en cliquant sur le bouton ">>" dans la barre supérieure, puis "Phare." Cela vous amènera à la page ci-dessous.
Pour tester vos mesures de performances pour les éléments essentiels du Web, vous devez vérifier les "Performance" puis choisissez si vous souhaitez tester la page pour mobile ou ordinateur. Cliquez sur "Générer un rapport" pour obtenir les résultats:
Voici à quoi ressemblera votre score et vous pouvez voir une répartition des mesures individuelles ci-dessous :
Utile, en dessous de votre score, LightHouse mettra également en évidence les opportunités où vous pouvez améliorer les performances de votre page :
Vous trouverez ci-dessous d’autres résultats de diagnostic. Ces facteurs peuvent vous aider à optimiser davantage les éléments essentiels du Web de votre site Web WordPress en améliorant vos performances et votre optimisation globales :
Lighthouse n’évalue pas directement le FID. Cependant, le temps de blocage total (TBT) et le temps d'interactivité (TTI) sont très étroitement liés au FID. L'amélioration de ces mesures devrait également améliorer votre FID.
Par exemple, il indique quel était votre plus grand élément LCP, la taille globale de votre page, les changements de mise en page importants et les tâches du fil principal qui peuvent entraver l'interactivité.
PageSpeed Insights
PageSpeed Insights est un autre outil facile à utiliser. Tout ce que vous avez à faire est d'aller à PageSpeed Insights et collez le lien vers la page Web que vous souhaitez analyser :
Les résultats sont très similaires à ceux de LightHouse. La principale différence est que PageSpeed Insights fournit également des résultats réels pour les sites Web ayant suffisamment de trafic :
Comme vous pouvez le constater, PageSpeed Insights mesure directement votre FID et vous montre réellement dans quel centile se situe votre site Web.
Il vous indique également si votre site Web a réussi ou non l'évaluation globale de Web Vitals au cours des 28 derniers jours en utilisant des données réelles.
Google considère les sites Web qui se situent au moins dans le 75e centile pour tous les paramètres comme réussissant l'évaluation.
Ci-dessous, vous pouvez trouver les mêmes résultats en laboratoire que ceux fournis par LightHouse, ainsi que des opportunités d'amélioration et de diagnostic :
En plus d’examiner les scores individuels, vous devez également viser un score global de 75+.
Google Search Console
Vous pouvez également utiliser Google Search Console pour générer des rapports de performances pour votre site Web. Cependant, vous devrez d’abord créer un compte et suivre le processus d’enregistrement de votre site Web auprès de la console.
Lecture connexe: Comment utiliser GTmetrix pour tester la vitesse de votre site Web ?
Comment améliorer les éléments essentiels du Web pour votre site Web WordPress
Il est important de réaliser que bon nombre de ces correctifs contribueront à améliorer plusieurs métriques CWV. C'est pourquoi il est important d'adopter une approche globale pour optimiser votre CWV afin d'obtenir les meilleurs résultats et d'offrir la meilleure expérience utilisateur.
Cela étant dit, nous indiquerons où une optimisation particulière s’applique directement à un CWV spécifique :
Améliorer les temps de réponse lents du serveur
C’est le premier et principal problème que vous devez résoudre lorsque vous essayez d’améliorer les performances de votre site Web. Peu importe la façon dont vous optimisez vos pages, si votre site Web est hébergé sur un serveur lent, il fonctionnera toujours mal.
L'amélioration des temps de réponse des serveurs aura peut-être le plus grand effet sur le LCP. Plus les éléments se chargent rapidement depuis le serveur, plus votre LCP est susceptible de se charger également rapidement.
Cependant, cela bénéficiera également indirectement à toutes les autres métriques en réduisant simplement le temps total de chargement.
Vous pouvez généralement savoir si votre serveur est lent si la plupart des pages de votre site Web se chargent lentement, si les performances sont constamment lentes sur le front ou le back-end.
Si vous utilisez l’un des outils ci-dessus pour auditer vos performances, c’est également un bon indicateur si le « Temps de réponse initial du serveur était court » tombe dans le rouge :
Surutilisation des ressources d'hébergement
Vous pouvez également vérifier votre utilisation des ressources dans votre tableau de bord d'hébergement pour voir si vous surutilisez les ressources, telles que le processeur, la RAM, les opérations d'E/S, le budget de visite unique ou la bande passante.
Opérer à proximité de ces seuils entraînera inévitablement un ralentissement des performances. Si vous atteignez ou dépassez ces seuils, votre hébergeur pourrait intentionnellement limiter votre compte. Cela est particulièrement susceptible de se produire sur les services d’hébergement partagé.
Par exemple, voici une capture d'écran de l'utilisation des ressources sur un Bluehost compte:
Beaucoup de meilleurs fournisseurs d'hébergement WordPress proposent un certain nombre d'hébergements mutualisés ainsi que des forfaits VPS, tels que A2Hébergement, Bluehost, GoDaddyet HostGator.
Vous pouvez également opter pour un fournisseur spécifique à WordPress hautes performances tel que WPEngine or Kinsta qui sont un peu plus chers mais proposent des packages WordPress beaucoup plus évolutifs.
Vous pouvez constater que la plupart des pourcentages se situent encore dans des fourchettes relativement saines.
Vous pouvez essayer de résoudre ce problème de deux manières :
- Réduisez l’empreinte de votre site Web : Si vous rencontrez des difficultés avec les ressources informatiques, vous constaterez peut-être une amélioration en optimisant votre site Web à l'aide de certains des autres correctifs répertoriés ici. Cela signifie supprimer le code, les plugins, les thèmes inutiles ou tout autre élément susceptible de gêner l'utilisation de vos ressources. L’exécution de plusieurs sites Web sur un seul compte d’hébergement partagé peut avoir un impact considérable, et vous devrez peut-être en mettre hors service ou les déplacer vers un autre compte/serveur.
- Ameliorez votre compte: Des ressources surutilisées pourraient être le signe que vous avez dépassé les limites de votre compte courant. C'est peut-être le bon moment pour mettre à niveau votre forfait ou envisager de passer à un hébergement avec des ressources dédiées, comme un VPS ou un serveur dédié. Bien que ces deux dernières options soient plus coûteuses, cela vaut la peine d’investir si vous développez une entreprise en ligne.
Utiliser un CDN
Un CDN (Content Delivery Network) est un réseau mondial de serveurs. Lorsque vous enregistrez votre site Web auprès d'un CDN, celui-ci distribuera le contenu de votre site Web sur plusieurs serveurs dans différentes régions.
Si un utilisateur de cette région visite votre site Web, il chargera le contenu à partir du serveur le plus proche, améliorant ainsi les temps de chargement des pages.
La bonne nouvelle est que la plupart des services d’hébergement proposent aujourd’hui un CDN gratuit. Le plus courant est le niveau gratuit du CDN populaire. CloudFlare.
Alors, tout d’abord, vérifiez si votre compte est livré avec un CDN et qu’il est configuré. Le support devrait pouvoir vous aider avec cela.
Vous pouvez ensuite également facilement passer à un compte CDN premium pour une disponibilité de bande passante encore plus élevée, de meilleures vitesses et une sécurité accrue.
Lecture connexe: Comment accélérer un site WordPress ?
Cachez vos actifs
La mise en cache signifie enregistrer le contenu de votre site Web (tel que les fichiers HTML) sur des serveurs périphériques où les visiteurs y accèdent généralement.
Cela évite de devoir recréer le site Web à partir de zéro à chaque fois. L'enregistrement de votre site Web auprès d'un CDN devrait déjà améliorer votre mise en cache.
L’astuce est que vous voulez que les visiteurs obtiennent la version en cache de votre site Web tant que rien n’est mis à jour sur votre site Web, mais vous voulez qu’ils obtiennent la nouvelle version dès que vous apportez des modifications à votre site.
Cela peut être difficile à faire manuellement, surtout si vous souhaitez tirer parti de la mise en cache dans le navigateur.
Si vous avez un site WordPress, le mieux est de utiliser un plugin de mise en cache tels que WP Rocket, Cache Enabler, Comète Cache, etc.
Prélecture du contenu tiers
Si vous chargez du contenu à partir de sites Web tiers avant votre LCP (ou même en tant que LCP), vous souhaiterez que cela soit réglé le plus rapidement possible.
Tout d'abord, vous pouvez détecter si du contenu tiers affecte vos pages si le problème suivant est mis en évidence par PageSpeed Insights :
Dans ce cas, nous chargeons uniquement des polices tierces, donc tout va bien.
Dans WordPress, ce problème est généralement provoqué par des plugins tiers, tels que Google Analytics, WooCommerce, etc.
La solution évidente serait de simplement supprimer le plugin ou le code tiers si cela n’est pas nécessaire. En règle générale, vous ne devez jamais laisser de plugins inutilisés installés sur votre installation WordPress.
Cependant, vous pouvez également ajouter le balisage personnalisé suivant aux pages de votre site Web :
<link rel="preconnect" href="https://example.com" />
Ou:
<link rel="dns-prefetch" href="https://example.com" />
Vous pouvez simplement remplacer le domaine href par le domaine du service que vous utilisez, vous pouvez alerter le navigateur de votre intention.
Pour précharger des vidéos de YouTube, par exemple, vous pouvez simplement échanger "https://youtube.com.» Vous pouvez trouver des domaines de prélecture plus couramment utilisés ici.
Certains plugins de mise en cache, comme WP Rocket, vous permettent également de pré-extraire du contenu tiers à partir d'un tableau de bord facile à utiliser.
Optimisez votre JavaScript et CSS
Le chargement de fichiers JavaScript ou CSS peut également retarder le temps nécessaire au chargement et au rendu de l'élément LCP sur votre page.
Le navigateur retardera le rendu de la page HTML s'il rencontre des feuilles de style externes ou JavaScript balises avant le contenu.
Il existe un certain nombre de solutions que vous pouvez utiliser pour limiter l'impact de JavaScript et CSS sur vos pages Web :
- Éliminez les ressources bloquant le rendu
- Minifier CSS et JavaScript
- Combinez des fichiers CSS et des fichiers JavaScript
- Optimiser la livraison des fichiers CSS et JavaScript
L'optimisation de JavaScript et CSS bénéficiera principalement à votre FID en éliminant le code qui s'exécute sur le thread principal, empêchant ainsi votre site Web d'être interactif.
Cependant, cela jouera également un rôle dans la réduction des temps de chargement du LCP, car vous pourrez éliminer en premier les éléments bloquant le chargement du LCP.
Encore une fois, PageSpeed Insights vous indiquera utilement si vous pouvez améliorer à cet égard, les fichiers/requêtes exacts à l'origine du problème ainsi que les économies potentielles :
Par exemple, nous voyons ici un certain nombre de fichiers CSS et JavaScript qui empêchent la page de restituer le contenu.
Vous pouvez également voir ces invites pour minimiser CSS et JavaScript :
Ou, ces opportunités pour supprimer les CSS et JavaScript inutilisés :
Si vous utilisez Lighthouse comme outil d’audit de performance, vous pourriez également voir : "Supprimer inutilisé Javascript":
Pour certaines des opportunités présentées dans les images ci-dessus, vous constaterez des économies potentielles en termes de millisecondes.
Ceci est important car cela indique la durée pendant laquelle le code en cours d'exécution peut bloquer le thread principal qui rend la page de votre site Web et contribue directement au FID.
En tant que propriétaire de site Web WordPress, votre meilleur pari est de demander à un plugin de faire le travail acharné pour vous afin d’optimiser les éléments essentiels du Web de votre site Web WordPress.
À moins que vous n'ayez de l'expérience en développement Web, vous pouvez avoir un impact sérieux sur les fonctionnalités ou l'apparence de votre site Web en modifiant manuellement le code sous-jacent.
Encore une fois, un plugin comme WP Rocket (payé) ou Autoptimize (gratuit) est livré avec cette fonctionnalité intégrée.
Cela vous donnera des options pour :
- Réduire les fichiers CSS et JavaScript
- Combinez des fichiers CSS et combinez des fichiers JavaScript
- Exclure les fichiers CSS inutiles/inutilisés
- Différer les fichiers afin qu'ils ne bloquent plus le rendu
Voici un exemple de l'interface Autoptimize avec les paramètres disponibles. Il existe des options similaires pour CSS et HTML :
Il est possible que l’utilisation de ces fonctionnalités perturbe l’apparence de votre page. Donc, vérifiez toujours quel est l’effet, puis activez/désactivez les paramètres en conséquence.
Vous pouvez également effectuer la plupart de ces opérations manuellement en modifiant le balisage, même si vous devrez savoir ce que vous faites pour éviter de gâcher le rendu de vos pages.
Il existe également des correctifs plus avancés qui sont moins susceptibles de provoquer des problèmes majeurs tels que « évitez de diffuser du JavaScript hérité sur les navigateurs modernes » ainsi que "supprimer les doublons dans les bundles JavaScript" mais vous devez simplement garder un œil sur ces problèmes potentiels lors de l'exécution du test de performances.
Comment améliorer votre score CLS
CLS est un élément essentiel du Web WordPress relativement unique car il ne repose pas sur les temps de chargement réels ou améliorer la vitesse de votre site Web. Au lieu de cela, il s'appuie davantage sur l'utilisation de bonnes pratiques pour garantir que les éléments de votre page se chargent dans le bon ordre.
Cependant, l’accélération générale des temps de chargement du contenu de votre site Web peut réduire le CLS perçu. En effet, si vos pages se chargent très rapidement, les utilisateurs seront moins susceptibles de remarquer une instabilité et cela sera moins susceptible de les gêner lors de l’utilisation de votre site Web.
Ci-dessous, nous décrivons quelques moyens concrets de réduire le CLS sur vos pages WordPress. Cependant, vous devriez lire l'intégralité du livre blanc de Google sur l'optimisation de CLS pour avoir un aperçu de tous les autres aspects.
Donnez des attributs de taille à vos images et éléments vidéo
Avant que les images et les vidéos ne soient réellement chargées sur la page pour que les visiteurs puissent les voir, le navigateur essaiera de leur allouer de l'espace.
Cependant, il a besoin des valeurs de hauteur et de largeur de l'élément afin d'attribuer une boîte de la bonne taille. Si le navigateur peut créer la boîte de taille correcte pour chaque élément, ils se chargeront au même endroit et maintiendront la vue stable.
WordPress devrait automatiquement fournir des attributs de hauteur et de largeur pour toutes vos images. Cependant, vous devriez vérifier cela pour être sûr.
Pour ce faire, visualisez simplement une page que vous avez publiée avec quelques images dessus. Cliquez avec le bouton droit sur n'importe quelle image, puis cliquez sur "Inspecter:"
Cela ouvrira une fenêtre avec le HTML sous-jacent avec le balisage spécifique à l'image en surbrillance. Vous verrez que cette image a largeur = "1024" ainsi que hauteur = "683" spécifié:
Limitez les endroits où vous utilisez le contenu dynamique
Bien que les images et les vidéos soient les contrevenants les plus courants ici, vous devez également faire attention aux intégrations (telles que les widgets ou les intégrations de vidéos), aux iframes, aux publicités et à tout autre contenu dynamique.
Les publicités qui apparaissent en haut de l’écran, déplaçant tous les autres contenus de la page vers le bas, sont particulièrement ennuyeuses. Si vous devez les utiliser, vous devez vous assurer qu'ils sont chargés en premier ou qu'un espace est créé pour eux dès le début.
Google est connu pour punir le contenu dynamique qui empêche l'utilisateur d'utiliser ou de visualiser le contenu de la page. Ceux-ci sont souvent appelés «Interstitiels intrusifs».
Un bon exemple aujourd'hui est une fenêtre contextuelle d'abonnement qui couvre toute la page et doit être fermée avant que vous puissiez afficher le contenu.
Si vous souhaitez utiliser ces types d’éléments, il est préférable de le configurer sous forme de slide-in ou de barre latérale qui ne couvre qu’une partie de la page et ne s’insère pas entre d’autres éléments.
Il y a un beaucoup de popup et des plugins publicitaires pour WordPress qui permettent de configurer ce genre d'éléments. Par exemple, JetPopup, OptinMonster, Bloom, ou même le intégré Générateur de popups Elementor.
Malheureusement, il n'existe pas de méthode étape par étape pour vous montrer comment procéder. Il vous suffira de prendre des décisions de bon sens basées sur Lignes directrices CLS fourni par Google.
Précharger les polices pour éviter FOIT et FOUT
Comme nous l'avons fait pour le contenu tiers, vous devez également précharger les polices facultatives pour éviter qu'elles n'interfèrent avec la séquence de chargement fluide des pages.
Le problème est que parfois le navigateur commence à charger des éléments prêts et reporte le chargement des fichiers de polices à plus tard. Cela conduit à des situations où le texte est prêt à être rendu mais la police n'est pas encore chargée.
Cela provoque ce qu'on appelle le Flash of Invisible Text (FOIT). Ou bien, cela peut également conduire à un FOUT, ou Flash of Unstyled Text (FOUT).
Le premier signifie qu'il y aura un espace vide sans aucun texte tandis que le second signifie qu'une police système sans style sera chargée à la place. Cela peut être au pire choquant ou, au mieux, tout simplement paraître mauvais.
Vous pouvez le faire manuellement, mais l'implémentation peut être spécifique au navigateur, ce qui signifie que vous devrez peut-être le faire de plusieurs manières différentes et continuer à la mettre à jour à mesure que les navigateurs changent de techniques.
En tant qu'utilisateur de WordPress, il existe des plugins disponibles qui peuvent également le faire pour vous en quelques clics. Voici toutes les façons dont vous pouvez précharger des polices pour votre site Web :
En-tête.php :
- Accédez à Apparence >>Éditeur de thème depuis votre tableau de bord WordPress.
- Cliquez sur le fichier « header.php » dans la liste des fichiers de droite.
- Copiez et collez ce texte :
<link rel="preload" href="https://fonts.google.com/specimen/Roboto" as="font" type="font/woff2" crossorigin="anonymous">
au fichier et remplacez l'URL par la police que vous souhaitez utiliser.
Il existe également d'autres plugins premium, comme WP Rocket qui peut faire la même chose afin que vous n’ayez pas à vous soucier du code de votre site Web.
Dans ce cas, il vous suffit de copier le même lien vers la police, puis de l'ajouter au champ approprié depuis le tableau de bord du plugin.
Nous vous recommandons plutôt d’investir dans un plugin qui fait cela pour vous, car supprimer ou modifier accidentellement un peu de code dans les fichiers de votre site WordPress peut sérieusement endommager son apparence et ses fonctionnalités.
Conseils bonus pour optimiser les éléments essentiels du Web pour votre site Web WordPress
Maintenant que vous savez quelles actions entreprendre pour optimiser directement les éléments essentiels du Web de votre site WordPress, examinons quelques autres bonnes pratiques :
Optimisez vos ressources d'image
C’est très amusant et ludique d’utiliser des tonnes d’images sur votre site, mais rares sont ceux qui considèrent l’impact de l’utilisation d’images lorsqu’ils tentent d’optimiser les éléments essentiels du Web de leur site WordPress.
Alors, quel est le problème?
Eh bien, lors d'une conférence en 2018, Google lui-même a identifié les images comme l'un des principaux facteurs qui ralentissent les pages d'un site Web. Google affirme également que l'optimisation des images est l'un des moyens les plus susceptibles d'améliorer les performances de votre site Web.
Selon les données de HTTPArchive, les données d'image ont augmenté de plus de 50 % sur les sites Web de bureau mobiles et de plus de 150 % sur les sites Web mobiles.
De plus, les images affectent presque toujours directement deux éléments essentiels du Web :
- LCP : Généralement, l’élément le plus grand dans la zone visible de la page est une image.
- CLS: Si elles ne sont pas utilisées correctement, les images peuvent avoir un impact considérable sur la stabilité de la page, comme vous pouvez le voir dans le « Comment améliorer votre score CLS » section ci-dessus.
Cela étant dit, les images sont un élément très nécessaire à la création de pages de sites Web attrayantes, attrayantes et modernes, vous ne voudrez donc probablement pas vous en débarrasser complètement.
Au lieu de cela, vous devez les utiliser à bon escient et vous assurer de les optimiser pour les éléments essentiels du Web lorsque cela est possible. Vous pouvez procéder de plusieurs manières :
- Images réactives : Les images réactives signifient que vous redimensionnez les images si nécessaire pour différentes tailles d'écran, telles que les ordinateurs de bureau, les tablettes et les mobiles. Vous avez besoin d’images de bien moindre qualité pour s’afficher correctement sur des écrans plus petits sans perte visuelle de qualité, ce qui réduit l’impact sur les temps de chargement. De nos jours, WordPress intègre des images réactives. Cependant, vous voudrez vous assurer que vos thèmes/plugins les prennent en charge et ne brisent pas le design réactif. Si vous souhaitez des galeries sur vos pages, mais gardez vos images réactives, utilisez les meilleurs plugins comme Prochaine génération, Modulaet environnement.
- Chargement paresseux: Le chargement différé garantit que les images situées au-dessus de la ligne de flottaison sont chargées en premier et que les images inférieures ne sont chargées que lorsqu'elles défilent. Cela améliore le LCP et l’expérience utilisateur. Aujourd’hui, la plupart des navigateurs intègrent un chargement paresseux et WordPress le prend également en charge. Encore une fois, vous devez simplement vous assurer que rien sur votre installation WordPress n'interfère avec cela ou n'utilise JavaScript pour un chargement paresseux. Vous pouvez également le vérifier via Lighthouse.
- Diffusez des images dans des formats de nouvelle génération : Certains formats plus récents, comme WebP et JPEG-200, sont plus efficaces pour encoder les images, réduisant ainsi les charges utiles et les rendant plus rapides à charger. Vous pouvez convertir manuellement des images dans ces formats à l'aide de logiciels comme PhotoShop, d'outils Web ou même de plugins WordPress.
- Utilisez un plugin d'image ou un CDN : Nous avons présenté les CDN ci-dessus, mais il existe également des CDN spécifiques aux images. Ces CDN peuvent avoir une réactivité intégrée, une compression d'image intelligente (qui réduit la taille tout en conservant la qualité), un chargement paresseux, une mise en cache, une conversion de format, etc., ainsi qu'une autre couche de CDN pour fournir les images plus rapidement. ShortPixel, Image, Imigifieret Cloudinary ne sont que quelques-unes des options proposées par les plugins spécifiques à WordPress.
Comme vous pouvez le voir sur la même capture d'écran que ci-dessus, nous avons un chargement paresseux, une largeur et une hauteur, et "srcset" avec toutes les tailles d'images responsives :
Concentrez-vous sur les mobiles
Une autre chose que vous devriez considérer est de concentrer votre optimisation de base Web Vitals sur les visiteurs de sites Web mobiles. La raison est simple : trafic internet mobile a officiellement dépassé le trafic sur ordinateur.
Cela signifie qu’il est plus important de s’adresser à une clientèle mobile plutôt qu’à une clientèle de bureau. Cette tendance devrait également se poursuivre en faveur du mobile dans un avenir prévisible.
Google lui-même a reconnu l'importance du mobile en passant à indexation mobile en premier. Cela signifie que Google donnera la priorité au classement des pages pour les résultats de recherche en fonction de la version mobile du site Web.
Heureusement, Lighthouse et PageSpeed Insights ont également la possibilité de fonctionner sur mobile.
La bonne nouvelle est que la plupart des correctifs amélioreront le score à la fois sur ordinateur et sur mobile. Cependant, il peut arriver qu’un thème ou un plugin spécifique pose des problèmes spécifiquement sur ordinateur ou mobile.
Dans ce cas, vous devrez essayer d'aller au fond du problème et de le résoudre à l'aide des outils Lighthouse ou PageSpeed Insight.
Créez un site Web WordPress plus sain et meilleur grâce à l'optimisation Core Web Vital
Nous venons de parcourir beaucoup de terrain et vous vous sentirez peut-être un peu dépassé. Cependant, la clé est de prendre une profonde respiration et de travailler étape par étape sur ces optimisations essentielles au Web de WordPress.
Une fois que vous aurez compris, cela deviendra simplement une autre partie de la routine de maintenance de votre site Web.
Commencez par tester la santé actuelle de votre site Web via PageSpeed Insights ou Lighthouse. Apportez quelques améliorations et testez à nouveau pour voir si cela a eu un effet. Rincer et répéter.
Rappelez-vous pourquoi vous faites cela : vous préparez votre site Web au succès en rendant vos visiteurs plus heureux et en vous classant plus haut dans les moteurs de recherche.
Cela crée un effet boule de neige non seulement pour attirer plus de visiteurs, mais aussi pour les retenir.
Heureusement, en utilisant WordPress avec des plugins fantastiques, comme WP Rocket, Imigifier, Elementor, etc., vous vous faciliterez grandement la vie.
Avez-vous essayé d’optimiser les éléments essentiels du Web de votre site WordPress ? Avez-vous réussi à augmenter votre score ou à améliorer les performances globales de votre site Web ?
Quels aspects avez-vous trouvé plus difficiles/plus faciles à réaliser ? Faites-le-nous savoir dans les commentaires ci-dessous.
Autres articles liés au guide :
- accès
- Compte
- Action
- Ad
- annonces
- Réservé
- autour
- article
- sur notre blog
- audit
- disponibilité
- LES MEILLEURS
- les meilleures pratiques
- Le plus grand
- Bit
- BLOG
- Box
- navigateur
- la performance des entreprises
- Appelez-nous
- cas
- Causes
- causé
- Change
- Chrome
- fonds à capital fermé
- code
- commentaires
- Commun
- informatique
- considère
- contenu
- contenu
- continuer
- Conversion
- Couples
- La création
- Courant
- tableau de bord
- données
- dc
- affaire
- retarder
- livrer
- page de livraison.
- Conception
- Développeur
- Développement
- DID
- distance
- domaines
- "Early Bird"
- Edge
- éditeur
- etc
- événements
- exécutif
- Expériences
- œil
- Échec
- RAPIDE
- en vedette
- Fonctionnalités:
- Prénom
- première fois
- Flash
- Focus
- le format
- Test d'anglais
- plein
- amusement
- avenir
- Games
- GitHub
- Global
- Bien
- Recherche Google
- l'
- Vert
- Croissance
- guide
- Santé
- ici
- Haute
- Souligner
- Surbrillance
- hébergement
- Comment
- How To
- HTTPS
- idée
- image
- Impact
- d'information
- initiative
- idées.
- intention
- Interactif
- Internet
- sueñortiendo
- vous aider à faire face aux problèmes qui vous perturbent
- IT
- JavaScript
- saut
- en gardant
- ACTIVITES
- gros
- conduire
- conduisant
- Levier
- LINK
- Liste
- charge
- Location
- majeur
- Fabrication
- math
- mesurer
- Métrique
- Breeze Mobile
- Bougez
- réseau et
- nouvelles
- code
- en ligne
- D'affaires en ligne
- ouvert
- Opérations
- Opportunités
- Option
- Options
- de commander
- trafic organique
- Autre
- Autres
- propriétaire
- propriétaires
- peindre
- performant
- photoshop
- plug-in
- plugins
- Populaire
- Premium
- prévention
- Aperçu
- qualité
- augmenter
- RAM
- en cours
- Les raisons
- réduire
- rapport
- Rapports
- ressource
- Ressources
- réponse
- Résultats
- pour le running
- économie
- pour écran
- Rechercher
- moteur de recherche
- Les moteurs de recherche
- sécurité
- Services
- service
- set
- mise
- commun
- décalage
- étapes
- Taille
- So
- Logiciels
- Solutions
- RÉSOUDRE
- Space
- vitesse
- Spot
- Stabilité
- Commencer
- succès
- Support
- Les soutiens
- combustion propre
- Tablette
- Exploiter
- raconte
- tester
- Essais
- El futuro
- thème
- fiable
- conseils
- top
- circulation
- Voyage
- devoiler
- us
- utilisateurs
- Plus-value
- Vidéo
- Vidéos
- Voir
- Montres
- web
- Site Web
- sites Internet
- Whitepaper
- dans les
- Outils de gestion
- Activités principales
- world
- vaut
- XML
- Youtube