Comment supprimer les ressources qui bloquent le rendu sur WordPress (CSS + JavaScript)

Appelé rendu de page.
Si votre navigateur détecte un appel à un fichier CSS ou JavaScript externe, vous devez arrêter de rendre la page et télécharger ces fichiers CSS et Javascript avant de pouvoir les traiter. Lorsque ces ressources arrêtent le processus de rendu de page, elles sont traitées comme des blocs de rendu. Rendre des ressources bloquées augmente le temps qu’il faut aux navigateurs pour afficher le contenu principal aux utilisateurs, un indicateur important de la performance et du classement des moteurs de recherche, ce que Google appelle le premier rendu significatif (FMP). Notez que le texte et les images ne bloquent pas le rendu et que tous les fichiers CSS et Javascript ne bloquent pas le rendu. Les grands fichiers CSS et Javascript ont tendance à ralentir le rendu de la page.
Comment identifier les ressources bloquées sur WordPress rendre les ressources bloquées sur WordPress peut être facilement identifié à l’aide d’outils de référence de performance. Tout ce que vous avez à faire est d’entrer l’URL de la page à tester. Google page speed Insights met en évidence le temps total que vous avez ajouté à la ressource render Block dans le premier dessin de la page. Vous verrez ci – dessous une analyse qui montre l’URL et la taille du fichier rendus par le blocage de chaque ressource. Il montre également la vitesse à laquelle la page se charge si vous supprimez un actif de blocage de rendu. Les ressources qui bloquent le rendu sont mises en évidence dans Google page speed. Gtmetrix énumère également toutes les ressources qui bloquent le rendu, la taille du fichier et le temps nécessaire pour télécharger le fichier.

Empêche la mise en évidence des actifs rendus dans gtmetrix. Bien que le test de vitesse du site pingdom ne mette pas en évidence une partie particulière du rendu de blocage des ressources, vous pouvez voir la raison du ralentissement de la page à partir de la zone de demande de fichier.
\

Demande le fichier affiché sur le test de vitesse du site pingdom. Comme WordPress appelle différents fichiers CSS et Javascript sur votre site, il est important d’effectuer des tests de performance sur plusieurs pages afin de détecter tous les actifs qui bloquent le rendu. Par exemple, vous pouvez effectuer des tests de performance sur des zones clés de votre site Web, comme la page d’accueil, l’index des blogs, les billets de blog, les pages d’information et les pages de contact. Identification de la ressource critique si vous devez afficher le premier dessin de la page Web, la ressource est considérée comme une ressource critique. Toutes les autres ressources sont considérées comme non essentielles.
L’une des façons les plus simples d’identifier les actifs clés est d’utiliser l’onglet couverture dans l’outil de développement Chrome. Mettre en évidence le pourcentage de fichiers nécessaires pour charger correctement la page d’accueil. Les styles clés s’affichent en vert, pas en rouge. Vous pouvez le voir sur WordPress dans la capture d’écran ci – dessous. Une grande partie du Code dans les fichiers CSS et Javascript n’utilise pas de rendu bloqué. Cette situation est encore plus grave sur de nombreux sites WordPress où le test de couverture met en évidence plusieurs fichiers, dont chacun est 100% inutilisé.

Les cartes de couverture chromées peuvent être utilisées pour identifier les ressources clés. Supprimer les appels en ligne de CSS Google qui bloquent le rendu dans WordPress en utilisant des appels en ligne recommande de déplacer tout le Code clé de la ressource de blocage de rendu à la page H
TML. Vous pouvez utiliser des blocs de style dans la section en – tête de page pour définir le style clé du premier dessin de la page, et vous pouvez utiliser des balises de script pour appeler les lignes en ligne des fonctions JavaScript clés dans la page.
Sur des plates – formes dynamiques comme WordPress, où le code CSS et JavaScript est ajouté au site via des thèmes et des plug – ins, il peut ne pas être réaliste de déplacer manuellement les styles clés. Par conséquent, de nombreux utilisateurs de WordPress utilisent des services tels que nitropack et Critical css pour extraire automatiquement les feuilles de style clés et les afficher en ligne dans la section principale.

Le nettoyage des actifs vous permet d’intégrer automatiquement de petits fichiers CSS. Supprimer le rendu de blocage JavaScript dans WordPress en utilisant async et defer vous pouvez supprimer les ressources Javascript qui bloquent le rendu dans WordPress en utilisant deux techniques appelées async et defer. Les deux méthodes permettent au navigateur de continuer à rendre la page, tandis que les fichiers CSS et Javascript qui bloquent le rendu au – dessus du contenu effondré dans WordPress sont téléchargés en arrière – plan. Il est préférable d’utiliser async ou defer sur une seule page, il est donc important de tester les deux technologies et de voir lesquelles donnent les meilleurs résultats. Cependant, quelle que soit la méthode utilisée, vous verrez une réduction du temps de chargement de la page.

	L’outil CSS critique automatique assure que les feuilles de style critique sont affichées en ligne. Si votre style de site se trouve dans un petit fichier CSS, vous pouvez utiliser le plug – in de performance de nettoyage d’actifs wordpress pour intégrer automatiquement des styles dans de petites feuilles de style.
Asynchrone	Téléchargez le fichier lorsque la page est rendue et lancez le fichier dès qu’il est disponible
Différenciation	Télécharger les fichiers lors du rendu de la page et exécuter les fichiers dans l’ordre Efer et asynchrone Les ressources de blocage de rendu dans WordPress augmentent considérablement le temps de chargement de la page. Elles affectent également l’expérience utilisateur du site, car les visiteurs verront une page blanche avant de télécharger et d’exécuter toutes les ressources de blocage de rendu. Insights et gtmetrix peuvent facilement identifier les actifs qui bloquent le rendu. Vous pouvez ensuite supprimer les ressources de blocage de rendu en utilisant des plug – ins WordPress comme asynchrone JavaScript et http \/ 2 Push preload. Merci pour la lecture. Kevin. Leave a Reply Cancel reply Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec * Enregistrer mon nom, mon e-mail et mon site dans le navigateur pour mon prochain commentaire. 6 conseils de marketing vidéo pour 2020: ce que vous devez savoir Comment gérer les révisions wordpress pour optimiser les performances du site 6 façons de créer et d’ajouter des listes de courriels en utilisant WordPress Comment améliorer votre site Web avec Google AMP (2 méthodes) 10 meilleurs modèles de site HTML pour les restaurants, cafés, boulangeries, etc. Copyright © 2024 Qoxag. All Right Reserved.