Comment améliorer le score du First Content Painting (FCP) de votre site WordPress et accélérer le chargement des pages ?

Le First Content Painting (ou FCP en abrégé) est un indicateur clé utilisé par Google pour mesurer la vitesse de chargement d'une page web, c'est-à-dire le temps écoulé entre le moment où l'utilisateur commence à charger une page et celui où le premier élément de contenu de la page apparaît.

Pour les propriétaires de sites web WordPress, le FCP indique le niveau de fonctionnement d'un site web et l'impact qu'il peut avoir sur l'expérience utilisateur et l'optimisation des moteurs de recherche (SEO). Un FCP rapide signifie que les visiteurs n'ont pas à regarder un écran vide pendant de longues périodes, ce qui peut rendre leur expérience du site web plus agréable et donc augmenter l'engagement des utilisateurs.

Google accorde beaucoup d'importance à l'expérience utilisateur, de sorte que le score FCP de votre site aura un impact direct sur son classement dans les résultats de recherche. Un bon score FCP (idéalement dans les 25% premiers de tous les sites web) signifie que le temps FCP doit être inférieur ou égal à 1,8 seconde.

Meilleures stratégies pour améliorer WordPress FCP

Réduction du temps de réponse du serveur

L'une des actions clés pour améliorer les performances du First Content Painting (FCP) d'un site WordPress est de réduire le temps de réponse du serveur, que nous mesurons comme le Time to First Byte (TTFB).

TTFB est le temps nécessaire au navigateur de l'utilisateur pour recevoir le premier octet de données du serveur. Si le TTFB est lent, cela peut être dû à ce qui suit :

• Problèmes de connectivité du réseau.
• Les paramètres du serveur ne sont pas optimisés pour la vitesse.
• Trop de visiteurs en ligne en même temps pour que le serveur puisse les gérer.

Pour accélérer votre TTFB, voici ce que vous pouvez faire :

• Choisissez un service d'hébergement fiable qui dispose de bonnes installations et de l'expertise nécessaire pour gérer un trafic important.
• L'utilisation d'un réseau de diffusion de contenu (CDN), qui peut héberger des copies de votre site web à plusieurs endroits dans le monde, permet aux utilisateurs de charger le site à partir de l'endroit le plus proche d'eux, ce qui peut réduire considérablement les temps de chargement.
• Activez la mise en cache pour que, lorsque les visiteurs reviennent, le site s'affiche rapidement sans devoir tout recharger à chaque fois.

Éliminer les ressources qui bloquent le rendu

Ressources bloquant le rendu, principalement des fichiers JavaScript et CSS. Ces fichiers doivent être entièrement chargés et exécutés avant que le navigateur puisse commencer à afficher le contenu de la page. Si ces fichiers sont trop volumineux ou trop complexes, le temps de chargement de votre site jusqu'à l'apparition du premier élément de contenu (FCP) sera plus long.

Pour accélérer le chargement de votre site WordPress, vous devez optimiser la façon dont votre site gère les fichiers JavaScript et CSS. Pour ce faire, procédez comme suit :

Pour les fichiers JavaScript

La chose la plus raisonnable à faire est deUtilisation des attributs async et defer sur les fichiers JavaScript. 

Lorsque vous utilisez le "chargement asynchrone", vous laissez en fait le navigateur continuer à construire la page pendant que les fichiers JavaScript se chargent silencieusement en arrière-plan. Une fois ces scripts téléchargés, le navigateur interrompt brièvement la construction de la page, exécute les scripts, puis poursuit son travail. Il est judicieux d'utiliser le chargement asynchrone lorsque ces fichiers JavaScript ne doivent pas être exécutés dans un ordre particulier.

L'avantage de "différer" est qu'il permet au navigateur d'attendre que la page soit entièrement affichée avant d'exécuter le JavaScript, ce qui garantit que lorsque votre script doit interagir avec les éléments HTML de la page, ceux-ci sont déjà prêts.

💡 Le choix du chargement asynchrone ou différé dépend en grande partie du type de script que vous avez :

• Si l'ordre d'exécution de vos scripts est important, ou si les scripts doivent être exécutés après l'affichage complet de la page, le chargement différé peut être plus approprié.
• Si votre script n'a pas grand-chose à voir avec les éléments HTML de la page et que l'ordre d'exécution n'a pas d'importance, le chargement asynchrone peut être une meilleure option.

Pour les fichiers CSS

Envisagez d'écrire les styles CSS nécessaires au chargement de la page directement dans le code HTML. Cela signifie que les styles de base nécessaires pour rendre le contenu visible à l'utilisateur sont insérés directement dans le code de la page web. Cela permet au navigateur d'afficher la page plus rapidement, sans avoir à attendre un fichier CSS externe lors du chargement de la page.

En outre, la suppression des codes CSS et JavaScript non désirés ou inutilisés peut aider les pages à s'afficher plus rapidement, ce qui accélère le FCP (First Time Content Painting).

Compression des feuilles de style CSS

La compression des feuilles de style CSS consiste à supprimer les éléments indésirables du fichier, tels que les espaces supplémentaires, les commentaires et les délimiteurs, sans que cela n'affecte le fonctionnement de la page.

Cette méthode réduit considérablement la taille des fichiers CSS, ce qui leur permet de se charger plus rapidement, et donc d'accélérer le premier affichage du contenu de votre site web. Il existe de nombreux outils et plugins qui peuvent vous aider à automatiser ce processus de compression.WP Rocketest l'un des choix les plus populaires - non seulement il compresse les feuilles de style CSS, mais il offre également des fonctionnalités telles que la mise en cache et le chargement différé de JavaScript pour aider à rendre votre site WordPress plus rapide.

Si vous avez besoin d'autres options, vous pouvez également essayerAutoptimiserrépondre en chantantW3 Total Cacheet d'autres plugins. Ces outils compressent automatiquement les feuilles de style CSS afin que vous n'ayez pas à les modifier manuellement, ce qui vous permet d'économiser du temps et de la frustration.

Évitez de placer des éléments dépendant de JavaScript au-dessus du premier écran.

Si le contenu de votre site web qui est affiché en premier aux visiteurs repose fortement sur JavaScript, cela peut ralentir le premier affichage du contenu (FCP) de votre site web. En effet, le navigateur doit télécharger, analyser et exécuter le code JavaScript avant de pouvoir afficher le contenu.

Pour que le PCF soit rapide, il est préférable de s'appuyer principalement sur HTML et CSS pour le contenu du premier écran de votre site, plutôt que sur JavaScript. Cela signifie que vous devez organiser la mise en page de votre site et les éléments visuels de base de manière à ne pas avoir à attendre le chargement de JavaScript pour les afficher rapidement.

La méthode pour effectuer cette opération est la suivante :

1. Évaluez les parties du site qui nécessitent JavaScript et celles qui n'en nécessitent pas.Par exemple, les éléments de conception simples et le contenu de base ne doivent pas êtrebesoinJavaScript. vous pouvez alors construire le code HTML de manière à charger ces éléments en premier. Utilisez CSS pour styliser autant que possible, en particulier le premier écran. CSS se charge plus rapidement que JavaScript et permet souvent d'obtenir des effets visuels similaires.
2. Chargement différé ou asynchrone des fichiers JavaScriptsurtout les fichiers qui ne sont pas importants pour le rendu initial de la page. De cette manière, votre site peut afficher son contenu principal sans avoir à attendre le chargement et l'exécution de tout le JavaScript.

En donnant la priorité au chargement du HTML et du CSS pour le contenu du premier écran et en réduisant votre dépendance initiale à l'égard du JavaScript, vous pouvez accélérer le PCF et créer une expérience plus fluide et plus réactive pour les visiteurs lorsqu'ils arrivent sur votre site WordPress.

Optimiser les images et éviter les retards de chargement du premier écran

Si les images en haut de votre site web sont trop grandes, elles se chargeront lentement, en particulier les images importantes placées en haut de la page, ce qui ralentira la première impression (FCP) de l'affichage du site web.

Par exemple, si la grande image de fond de la page d'accueil (souvent appelée "image héroïque") n'est pas optimisée, elle ralentira la page comme un embouteillage.

Pour éviter ce problème, voici ce que vous pouvez faire :

• Images compresséesCette méthode permet de réduire la taille du fichier image sans pour autant détériorer l'aspect de l'image.
• Choisir le bon format d'imageLes photos au format JPEG, par exemple, sont généralement plus petites et se chargent plus rapidement que les photos au format PNG.
• Utilisation d'images réactivesFournir des images de différentes tailles en fonction de l'appareil qui accède au site. Par exemple, les utilisateurs de téléphones portables reçoivent des fichiers d'images plus petits que les utilisateurs d'ordinateurs de bureau, de sorte que les images se chargent plus rapidement sur les petits écrans.
• Mise en œuvre du chargement différéChargement des images : Ne chargez les images que lorsqu'elles vont apparaître à l'écran. Cette méthode fonctionne pour les images situées sous le premier écran, mais il est préférable de ne pas l'utiliser pour les images situées sur le premier écran afin de ne pas affecter la vitesse de chargement.
• Simplifier le processus grâce aux plug-insSmush : Smush est un outil formidable qui compresse et optimise automatiquement les images pour vous.

Ces méthodes permettent d'améliorer la vitesse de chargement de votre site web afin que les visiteurs puissent voir rapidement le contenu dès qu'ils ouvrent le site.

Mise en place de la mise en cache au niveau du serveur

La mise en cache au niveau du serveur consiste à conserver une copie de la page d'un site web sur le serveur. Ainsi, lorsque quelqu'un visite à nouveau le site, le serveur peut simplement afficher cette page mise en cache sans avoir à recharger la page entière à chaque fois.

Cette méthode est géniale parce qu'elle fait ce que la mise en cache du navigateur ne peut pas faire. La mise en cache du navigateur consiste à enregistrer les informations d'un site web sur l'ordinateur ou le téléphone portable d'un visiteur afin qu'il se charge plus rapidement lors de sa prochaine visite. Mais pour les personnes qui visitent le site pour la première fois, la mise en cache du navigateur n'est d'aucune utilité. La mise en cache au niveau du serveur, en revanche, accélère l'expérience pour tous les visiteurs, qu'il s'agisse d'une première visite ou non.

De nos jours, de nombreux services d'hébergement WordPress incluent la mise en cache au niveau du serveur, ce qui facilite grandement les choses. Vous pouvez également utiliser des plugins comme WP Rocket ou W3 Total Cache, qui offrent un certain nombre d'options de mise en cache, y compris la mise en cache au niveau du serveur.

Réduire la taille du DOM

Dans le domaine du développement web, il existe ce que l'on appelle le modèle d'objet de document, ou DOM en abrégé. Imaginez qu'il s'agit du plan d'une page web, qui aide le navigateur à savoir comment présenter chaque partie de la page, qu'il s'agisse de texte, d'images ou d'en-têtes.

Le DOM transforme une page web en un grand arbre généalogique composé de nombreuses petites parties. Chaque fois que vous faites quelque chose sur une page web (comme cliquer sur un bouton), le navigateur se réfère à cet arbre généalogique et met à jour la page web en fonction de votre action.

Si l'arbre généalogique est plus simple, le navigateur rendra la page web plus rapidement, ce qui signifie que la page web s'affichera plus vite. En revanche, si l'arbre généalogique est trop complexe, le navigateur doit passer plus de temps à le comprendre, ce qui ralentit l'affichage de la page web et vous oblige à attendre plus longtemps avant de voir le contenu. En d'autres termes, le fait de conserver un DOM allégé permet aux pages web de se charger plus rapidement, ce qui vous offre une meilleure expérience de navigation.

Essentiellement, un DOM allégé permet des interactions plus rapides et une expérience utilisateur plus réactive.

Voici quelques conseils utiles pour réduire la taille du DOM :

• Réduire au minimum lesdivÉléments :L'utilisation excessive d'éléments HTML div peut conduire à un DOM trop volumineux. Simplifiez la structure de la page en supprimant les éléments div qui ne sont pas utilisés dans un but spécifique.
• Utiliser plus efficacement les CSS :Les CSS sont plus rapides à traiter par les navigateurs et permettent souvent d'obtenir les résultats visuels et fonctionnels souhaités avec une structure DOM plus rationalisée. Cette approche permet de mettre de l'ordre dans le DOM et de réduire les temps de chargement des pages.
• HTML sémantique :Dans la mesure du possible, utilisez les éléments sémantiques HTML5 tels que
  ,

  ,

  ,
• Optimiser le code HTML généré par JavaScript :Si votre site utilise JavaScript pour générer du HTML de manière dynamique, assurez-vous que le processus est efficace. Évitez l'imbrication inutile d'éléments et examinez la structure du code HTML généré pour trouver des possibilités de simplification.
• Révisez et remaniez votre code :Des outils tels que DevTools de Chrome peuvent aider à identifier les parties du DOM qui sont trop grandes ou trop complexes. Le remaniement de votre code peut consister à combiner des éléments, à simplifier les sélecteurs CSS ou à remanier certaines parties de la page.
• Utilisez CSS Grid et Flexbox :Les techniques modernes de mise en page CSS, telles que Grid et Flexbox, réduisent considérablement le besoin de divs supplémentaires et de structures imbriquées. Elles constituent un moyen plus efficace de créer des mises en page complexes en utilisant moins de HTML.
• Limiter l'utilisation de scripts tiers :Les scripts tiers peuvent ajouter des éléments supplémentaires au DOM. Limitez leur utilisation et choisissez des alternatives légères dans la mesure du possible.

Utilisation d'un réseau de diffusion de contenu (CDN)

Un réseau de diffusion de contenu, ou CDN en abrégé, est comparable à un service de messagerie, mais il distribue du contenu web. Pour ce faire, il place une série de serveurs (que l'on peut comparer à des stations de messagerie) dans le monde entier afin de garantir la rapidité d'accès aux pages web, quel que soit l'endroit où l'on se trouve.

Imaginez qu'à chaque fois que vous naviguez sur un site web, le service CDN vous livre le contenu rapidement à partir de la "station de livraison" (c'est-à-dire le serveur) la plus proche. L'avantage de ce service est qu'il réduit la distance que les données doivent parcourir et que la page se charge beaucoup plus rapidement.

Cette rapidité ne permet pas seulement aux pages web de s'ouvrir plus rapidement, elle permet également à votre site web d'être mieux classé dans les moteurs de recherche. Une page web à chargement rapide étant plus populaire, les moteurs de recherche l'apprécient davantage. En d'autres termes, l'utilisation d'un CDN revient à doter votre site web d'un super booster qui lui permet de voler au devant des utilisateurs.

Un CDN fiable compatible avec WordPress est inclus :

• Cloudflare: : Cloudflare est largement reconnu pour ses fonctionnalités web et de sécurité étendues. Il propose un plan gratuit très puissant et est connu pour son intégration facile avec WordPress, ce qui en fait un choix populaire pour les propriétaires de sites web WordPress.
• Akamai: : Akamai est l'un des services CDN les plus anciens et les plus complets, connu pour son vaste réseau de serveurs et ses fonctions de sécurité avancées, bien qu'il soit probablement mieux adapté aux sites des grandes entreprises.
• MaxCDN (maintenant StackPath): : StackPath propose des services CDN à haut débit et est particulièrement connu pour son interface conviviale et son intégration efficace avec les plugins de mise en cache WordPress, ce qui en fait un choix populaire pour les sites web de petite et moyenne taille.
• KeyCDN: : KeyCDN est un fournisseur de CDN abordable et efficace, facile à configurer avec WordPress et proposant une tarification à la carte, ce qui est intéressant pour les sites web dont le trafic est variable.
• Amazon CloudFrontCloudFront, qui fait partie d'Amazon Web Services (AWS), est un service CDN puissant qui s'intègre bien aux autres services AWS. C'est un bon choix pour les sites qui nécessitent un haut degré de personnalisation et qui font déjà partie de l'écosystème AWS.
• Fastly: :Grâce à un CDN en temps réel doté de capacités de calcul en périphérie, Fastly ne se contente pas de fournir du contenu, mais exécute également un code personnalisé très proche de l'utilisateur, offrant ainsi des fonctions uniques de personnalisation et d'optimisation.
• Sucuri: : Connu principalement pour ses solutions de sécurité, Sucuri propose également un service CDN qui intègre sécurité et performance, ce qui en fait un excellent choix pour les sites WordPress soucieux de rapidité et de sécurité.

Éviter les redirections de pages multiples

Les redirections sont comme des tremplins pour les pages web, et parfois elles nous guident, nous ou les moteurs de recherche, vers la bonne URL. Mais ce processus ralentit l'ouverture des pages web. Imaginez que le navigateur doive faire un tour supplémentaire de "demander son chemin - se faire indiquer la nouvelle direction - recommencer" chaque fois qu'il rencontre un endroit où il doit se rendre.

C'est comme si vous demandiez votre chemin et qu'on vous dise que votre destination a changé et que vous devez prendre un autre chemin. Chaque fois que vous demandez votre chemin, vous mettez plus de temps à arriver et le navigateur est plus lent à afficher le contenu.

Si une page web comporte un trop grand nombre de ces points de départ (également appelés redirections), le trajet des données est plus long, ce qui augmente le temps de chargement de la page web et peut rendre l'utilisateur impatient. Les redirections ne devraient donc être utilisées que lorsqu'elles sont vraiment nécessaires pour éviter les retards inutiles, afin que tout le monde soit plus heureux et plus serein lorsqu'il visite des pages web.

Vous pouvez prendre les mesures suivantes pour gérer efficacement les redirections et optimiser les performances et le référencement de votre site web :

• Vérifiez les redirections de votre site : utilisezPageSpeed Insights de GoogleetGTmetrixpeut-êtreWebPageTestet d'autres outils pour analyser votre site web et rendre compte du nombre et de l'impact des redirections. Ils peuvent vous aider à identifier les redirections indésirables.
• Vérifier la configuration du serveur :Vérifiez le fichier de configuration du serveur (par exemple, sur le serveur Apache) pour l'option.htaccess) pour les règles de redirection. Il arrive que des redirections soient mises en place et oubliées, il est donc important de vérifier régulièrement ces configurations.
• Simplifier la structure des URL :L'objectif est d'obtenir une structure URL simple. Cela réduit le besoin de redirections, en particulier si le modèle d'URL change au fil du temps.
• Vérifier les liens internes :Veillez à ce que tous les liens internes pointent directement vers l'URL de destination finale, plutôt que de rediriger vers une URL intermédiaire.
• Mettre à jour les liens externes :Si vous avez le contrôle sur les liens externes (par exemple, les backlinks d'autres sites), essayez de vous assurer qu'ils pointent directement vers l'URL actuelle afin d'éviter les redirections inutiles.
• Chaîne de redirection :Évitez les chaînes où une redirection mène à une autre. Si une redirection est nécessaire, assurez-vous qu'elle mène directement à l'URL de destination finale.
• Utilisez les redirections 301 pour effectuer des changements permanents :Utilisez les redirections 301 lorsque des redirections sont nécessaires (par exemple, lorsque vous déplacez une page de manière permanente). Elles sont plus efficaces que les redirections temporaires (telles que 302) et sont meilleures pour le référencement.

Il existe un certain nombre de plugins et d'outils qui peuvent aider à résoudre ce problème :

• redirectionsest un plugin populaire qui permet de gérer et de suivre les redirections 301, facilitant ainsi la gestion des redirections dans WordPress.
• Screaming Frog SEO Spiderest un outil puissant qui explore votre site web, identifie les redirections et les chaînes de redirections, et vous aide à comprendre et à optimiser la structure de redirection de votre site web.

En contrôlant et en ajustant régulièrement ces éléments, votre site WordPress fonctionnera de manière fluide et efficace, offrant aux visiteurs une excellente expérience et maintenant une forte présence en ligne.

Outils de mesure des scores du PCF

Vérifier régulièrement la vitesse de chargement de vos pages (processus appelé surveillance FCP) revient à faire un bilan de santé de votre site web, en vous aidant à trouver ce qui ralentit les choses et à trouver des moyens d'accélérer le chargement. Ainsi, tous les visiteurs de votre site bénéficient d'une expérience de navigation fluide et rapide.

Si vous négligez de surveiller cette vitesse de chargement, vous risquez de mécontenter les visiteurs et de les inciter à ne plus se rendre sur votre site. Dans l'environnement concurrentiel qu'est l'internet, la rapidité de chargement de votre site web ne rendra pas seulement les utilisateurs heureux, elle permettra aussi à votre site de se démarquer.

Utilisation :

1. Visitez le site Web PageSpeed Insights.
2. Saisissez votre adresse web.
3. cliquer (à l'aide d'une souris ou d'un autre dispositif de pointage)analyséLaissez l'outil évaluer votre page.

PageSpeed Insights fournit des rapports détaillés, y compris les scores FCP. Il classe les performances en différentes catégories, les scores supérieurs à 90 étant considérés comme bons. L'outil suggère également des améliorations possibles pour améliorer la vitesse de chargement et les performances globales du site.

Phare

Phareest un autre outil gratuit de Google qui s'intègre à Chrome et fournit des informations sur le PCF dans le cadre de son évaluation des performances. 

Pour en savoir plus, consultez le site Chrome DevTools'.PhareLighthouse fournit des données de laboratoire (dans des conditions contrôlées) et des données de terrain (reflétant l'expérience réelle de l'utilisateur) afin d'offrir une vue d'ensemble des performances FCP d'un site.

WebPageTest

WebPageTestest un outil polyvalent pour les mesures FCP qui fournit des informations détaillées sur les performances. Il vous permet d'effectuer des tests à partir de différents emplacements et navigateurs afin d'obtenir une vision plus nuancée des performances de votre site web dans diverses conditions.

GTmetrix

GTmetrixCombine la puissance de Google Lighthouse et d'autres outils pour fournir des rapports détaillés sur les performances des sites web, y compris le FCP. Son interface conviviale et ses analyses complètes en font un choix populaire pour les propriétaires et les développeurs de sites web.

En utilisant ces outils, il est possible de rester au fait des performances de votre site web et de prendre des décisions éclairées afin d'améliorer et de maintenir une expérience utilisateur de haute qualité.

résumés

Il est important de présenter rapidement le contenu de votre site web aux visiteurs (un processus appelé "cartographie de contenu de premier passage"). Cela permet non seulement d'améliorer l'expérience de l'utilisateur, mais aussi le classement de votre site dans les moteurs de recherche. Cela vaut donc vraiment la peine de prendre le temps d'optimiser ce domaine.

Cependant, l'exécution de cette optimisation peut s'avérer un peu difficile et nécessite que vous soyez suffisamment patient pour déboguer et optimiser étape par étape. C'est comme résoudre un puzzle complexe, et bien que le processus puisse être un peu fastidieux, il rendra finalement votre site web plus rapide et offrira à vos utilisateurs une meilleure expérience de navigation.

Contactez nous
Vous n'arrivez pas à lire le tutoriel ? Contactez-nous pour une réponse gratuite ! Aide gratuite pour les sites personnels et les sites de petites entreprises !	Service clientèle WeChat
① Tel : 020-2206-9892
② QQ咨询：1025174874
(iii) Courriel : info@361sale.com
④ Horaires de travail : du lundi au vendredi, de 9h30 à 18h30, jours fériés.