10 façons éprouvées d’améliorer le premier revêtement satisfaisant (FCP) dans WordPress

Considérez FCP comme le temps qu’il faut pour voir le contenu dans un navigateur. Ainsi, un FCP rapide permet aux utilisateurs de s’assurer de ce qui se passe et de le coller sur le site. Comment mesurer le PCF? Le PCF peut être mesuré au moyen d’essais en laboratoire et d’expériences pratiques (données sur le terrain). Voici quelques outils que vous pouvez utiliser pour mesurer votre PCF: Lighthouse webtest Chrome Development Tool page speed Insights Chrome User Experience Report firebase performance Monitor (beta) Google mesure 75% de la charge de page du site Web, divisée en appareils mobiles et de bureau. Cela garantit qu’il s’agit d’une représentation exacte de l’expérience utilisateur. Vous souhaitez en savoir plus sur Faro? Lisez notre article sur la façon d’améliorer les notes de rendement, y compris les notes du PCF!

L’équation ttfb – FCP n’est pas seulement dépendante de ttfb, c’est la première étape pour y parvenir. FCP = ttfb + temps de chargement du contenu + temps de rendu comme FCP dépend fortement de ttfb, c’est le facteur le plus important que vous devez optimiser pour améliorer FCP. Il y a plusieurs façons de réduire
Ttfb dans WordPress. Comme nous l’avons mentionné dans cet article, les trois façons les plus simples de réduire la ttfb sont les suivantes:
Choisissez un fournisseur d’hébergement rapide vous pouvez consulter l’article de WP Rocket sur l’hébergement Web pour connaître les facteurs à prendre en considération pour choisir une bonne solution d’hébergement Web. Idéalement, choisissez un serveur près de l’hôte de l’utilisateur. Utiliser un CDN de haute qualité un CDN de haute qualité aide à accélérer le déploiement des actifs statiques du site tels que les images, les vidéos et les scripts. Cela réduira considérablement la latence du réseau entre le serveur et l’utilisateur. Pour en savoir plus sur le choix du meilleur CDN pour votre site Web, consultez le Guide du CDN de WP Rocket.
Activer la mise en cache pour la mise en cache du site aide à réduire le ttfb en réduisant le temps de traitement du serveur. La plupart des principaux fournisseurs d’hôtes WordPress hébergés ont activé la mise en cache au niveau du serveur, alors contactez – les pour voir ce qu’ils offrent. Si vous souhaitez aller plus loin, WP Rocket s’intégrera à WordPress sur tous les types d’hôtes pour accélérer votre site. 2. Après avoir combiné de nombreux éléments tels que HTML, css style Sheet, Javascript et HTML Import, le navigateur affichera les actifs supprimés qui empêchent le rendu de la page Web.
Le document HTML lui – même contient diverses balises, mais la plupart des navigateurs les analysent rapidement. Mais ce n’est pas le cas pour les analyses CSS et JS. Habituellement, le navigateur tente d’abord de télécharger tous les éléments de la page, d’analyser tous les éléments et de rendre la page. La plupart du temps, les documents HTML sont beaucoup plus petits que les feuilles de style css et les scripts JS. Le nombre de ressources CSS et JS est généralement en haut. Par conséquent, lorsque l’utilisateur demande une page Web, le navigateur peut avoir reçu un con
Gardez le HTML, mais attendez que toutes les autres ressources soient chargées avant de rendre la page. Ils sont donc appelés ressources de blocage de rendu.
Ce comportement réduit considérablement le PCF. Par conséquent, pour améliorer le PCF, vous devez supprimer ces ressources de bloc de rendu. Tout d’abord, déterminez les scripts et les styles clés dont vous avez besoin pour créer votre page Web FCP. Voici un guide Google simple sur la façon d’identifier les actifs clés. Une fois que vous avez identifié un script critique, vous devez le supprimer de l’actif render Block et l’intégrer dans une page HTML marquée

Et

. De cette façon, vous vous assurerez que la page Web a tout ce dont elle a besoin pour gérer ses fonctions de base au moment du chargement.
Retarder les ressources non critiques pour les ressources non critiques, vous devez utiliser des attributs asynchrones ou des URL d’étiquettes de retard. Nous vous recommandons d’ajouter la propriété defer à l’URL du script non critique. Cela indique au navigateur que le fichier script ne peut être exécuté qu’après une analyse complète du document HTML. Voici comment retourner un fichier script: Pour les feuilles de style non critiques, il est recommandé d’ajouter des attributs asynchrones à leur URL. Cela indique au navigateur de charger les styles de façon asynchrone, tandis que les éléments de page restants continuent de charger sans interruption. Parce que les feuilles de style sont chargées avec des étiquettes , Il n’y a aucun moyen direct d’appliquer l’attribut async à eux. Mais il y a une solution de rechange, voici comment vous pouvez la mettre en œuvre: Lorsque vous identifiez des ressources clés, vous pouvez trouver du Code qui n’est pas utilisé sur la page Web. Supprimer tout code inutilisé, comme le javascript inutilisé, aidera à optimiser UL
Et seulement si le contenu de votre site est principalement statique. Optimiser le modèle d’objet de document de taille Dom (DOM) d’un site est une représentation de tous les objets qui composent une page Web. Graphiquement, il est représenté comme un arbre avec des noeuds et des objets ramifiés. La représentation structurée du Dom simplifie le processus d’édition de ses éléments dans des langages de script tels que JavaScript. Tous les éléments HTML de l’arbre Dom HTML et de son arbre Dom objet sont appelés noeuds. Les noeuds peuvent être ramifiés en plusieurs éléments, et chaque élément peut être ramifié plus loin, et ainsi de suite. La profondeur de leurs branches est appelée la profondeur du noeud. La profondeur du noeud pour l’ensemble de l’arbre DOM est appelée profondeur de l’arbre. Tous les éléments dont le noeud se ramifie immédiatement sont appelés éléments enfants. Avoir de grands arbres Dom peut avoir un impact négatif sur FCP pour de nombreuses raisons: les arbres Dom non modifiés comprennent de nombreux noeuds qui ne sont pas visibles par l’utilisateur au début du chargement de la page. Une plus grande taille de Dom signifie qu’il faut plus de temps de traitement pour calculer et définir le style de tous les noeuds, ce qui ralentit le rendu. Un grand arbre Dom peut également inonder les performances de mémoire de l’appareil utilisateur. Éviter les grandes tailles de Dom optimiser les pages Web FCP Google reports avec des arbres Dom: profondeur totale plus de 1500 noeuds plus de 32 noeuds parent avec plus de 60 noeuds enfants comment réduire la taille de Dom? En général, vous Créez simplement des noeuds Dom si nécessaire et détruisez les noeuds inutiles. Cependant, cette recommandation ne s’applique pas à la plupart des sites WordPress, car la création de DOM est souvent traitée par des thèmes, des plugins, des générateurs de page et le noyau WordPress lui – même. Voici quelques conseils pour vous aider à réduire la taille du Dom: diviser la grande page I
Alternativement, le navigateur peut ignorer cette option si le fichier demandé est trop grand ou si le réseau est lent. Par exemple, Firefox ne précharge les ressources que lorsque le navigateur est inactif. Prerender c’est le Conseil de ressources le plus puissant. L’ajout du paramètre prerender à un actif force le navigateur à charger tous ses actifs, à les analyser, à créer un arbre Dom, à appliquer des styles, à exécuter des scripts, à rendre des pages Web et à les rendre disponibles à tout moment. Si vous accédez plus tard à l’URL mentionnée dans href, la page sera chargée immédiatement. Voici comment pré – rendre une ressource: La pré – présentation de la page d’atterrissage principale est un bon moyen d’augmenter le taux de conversion. Le précharge est différent du précharge, qui est plus comme une invite de navigateur qui dit au navigateur de charger l’actif, peu importe ce qu’il pense. Le navigateur ne peut pas ignorer la directive preload. … … Plus tôt le navigateur commencera à demander un lien de précharge déclaré, plus la page sera chargée rapidement. Les conseils de ressources ne sont pas très utiles lorsque les utilisateurs visitent votre site pour la première fois. Mais chaque fois qu’ils visitent la page suivante, ils vont beaucoup plus vite. Étant donné que Google utilise des données réelles pour évaluer le classement de la vitesse du site, les conseils de ressources aideront à améliorer le PCF du site. Avec WP Rocket, vous pouvez facilement appliquer le précharge DNS et le précharge à n’importe quelle ressource sur une page Web. Alternativement, vous pouvez activer manuellement les conseils de ressources sur le site WordPress en utilisant un plugin gratuit, tel que les conseils de ressources pré * party. Évitez les redirections de pages multiples lorsque vous accédez à une URL qui a été redirigée vers une autre URL, le serveur renvoie une réponse de code s
Pour la performance web. Vous n’avez même pas à toucher les paramètres. Vous verrez immédiatement une augmentation instantanée de votre vitesse de page et de vos scores: Nous vous garantissons qu’aucune connaissance technique n’est nécessaire! Si vous avez encore des questions sur la façon d’améliorer le PCF du site, n’hésitez pas à faire part de vos commentaires!