Comment éliminerate Ressources bloquant le rendu dans WordPress [Plugins ou Manually]

Dans le paysage numérique concurrentiel d'aujourd'hui, la vitesse du site Web compte beaucoup pour le succès d'une entreprise en ligne. Les géants des moteurs de recherche comme Google donnent la priorité aux sites à chargement rapide, reconnaissant la nécessité de fournir une expérience utilisateur transparente. 

Selon des études, des chargements de pages plus rapides stimulent l'engagement des utilisateurs et la conversion.ates. En fait, un délai d'une seconde dans le temps de chargement d'une page peut entraîner une baisse de 7 % des conversions client. Compte tenu de cela, il est évident que les propriétaires de sites Web doivent accorder une grande importance aux performances de leur site Web.

Google prend les performances des sites Web au sérieux et en tient compte lors de la détermination des résultats de recherche. Par conséquent, les sites Web qui se chargent rapidement sont plus susceptibles d'apparaître en premier dans les résultats de recherche, attirant ainsi plus de visiteurs et, éventuellement,ally, générant davantage revenue. Mais comment répondre aux exigences de Google et charger rapidement votre site Web ?

Vous vous débarrassez des ressources qui pourraient bloquer le rendu d'un temps de chargement du site, tels que les fichiers CSS et JavaScript.

Cependant, la suppression de ces ressources peut s'avérer difficile et prendre beaucoup de temps, en particulierally pour les personnes manquant de compétences techniques.

Dans cet article, nous expliquerons les ressources bloquant le rendu et comment elles impact performances du site Web et fournissez un guide étape par étape pour les éliminer de votre Outils de gestion placer. Alors, commençons à optimiser votre site Web pour plus de rapidité et de succès !

Ressources de blocage de rendu

Toute ressource qui doit être chargée avant qu'une page Web puisse être affichée est considérée comme une ressource bloquant le rendu. Ces ressources influencent une la performance du site Web & efficacité et prolonger le temps de chargement d'une page.

Un fichier CSS ou JavaScript peut être considéré comme une ressource bloquant le rendu si ce fichier bloque le rendu d'une page Web. Cependant, l'importance du chargement de la page peut varier en fonction de leur impact immédiat.ate nécessité.

Lorsqu'un utilisateur accède à une page, le browseuh d'abord processes le code HTML pour afficher son contenu au-dessus de la ligne de flottaison. Quand le browsSi vous rencontrez des fichiers CSS et JavaScript, il télécharge et processes eux aussi. Si les fichiers de ressources contiennent des codes supplémentaires ou des parties inutilisées, le chargement de la page Web prend plus de temps.

Types de ressources de blocage de rendu 

Générerally, les fichiers de ressources tels que CSS et JavaScript sont considérés comme des ressources bloquant le rendu dans WordPress. Le browser considère ces ressources comme critiques et doivent être chargées avant que la page puisse être affichée. Mais ce n'est pas ça ; il existe davantage de fichiers de ressources qui bloquent le rendu d'une page Web.

Voici une liste de ressources bloquant le rendu : 

Feuilles de style CSS

La conception et la présentation d'une page Web sont déterminées par les feuilles de style CSS. UN Fichier CSS sera considérée comme une ressource bloquant le rendu si elle est placée dans le section d'une page HTML.

Fichiers JavaScript dans le Section

JavaScript est un langage de script qui peuvent être utilisés pour fournir une page Web avec un comportement et une interaction dynamiques. Un fichier JavaScript sera considéré comme une ressource bloquant le rendu s'il est placé dans une page HTML section.

Polices

Les textes d'une page Web sont affichés à l'aide de différentes polices. Les polices sont également considérées comme une ressource bloquant le rendu si elles sont incluses dans une page HTML. section et chargé à partir d'un serveur local ou d'un CAN. 

Importations HTML

Il s'agit de l'ancienne fonctionnalité HTML qui permet aux pages Web d'inclure des éléments d'autres documents HTML. Même si les importations HTML ne sont plus utilisées aussi souvent, elles peuvent toujours être vues sur certains sites plus anciens. Les importations HTML sont également considérées comme des ressources bloquant le rendu. 

Pourquoi les ressources bloquant le rendu sont-elles terribles pour les pages Web 

Si votre site WordPress inclut des ressources bloquant le rendu, vous prendrez du retard dans les résultats de recherche. Même si vous êtes actuellement en première ligne, des sites plus performants finiront par arriver.ally vous dominer. 

Les sites dotés de ressources bloquant le rendu se chargeront extra fichiers lors du rendu du site. Avant de consulter le site Web, les utilisateurs doivent attendre que les fichiers soient processéd. Les indicateurs de performance suivants pour les sites Web obtiendront impacted par ces ressources:

• La plus grande peinture de contenu : Cela détermine le temps qu'il faudrait pour charger le contenu principal de la page. 
• Première peinture contente : Le temps qu'il faut pour abrowser pour produire le premier contenu de modèle objet de document (DOM) sur votre site Web.  
• Temps de blocage total : Cette évaluationateC'est le temps qu'il faut entre le premier Contentful Pianto et le temps qu'il faut pour qu'une page devienne entièrement interactive.

Bien que les ressources bloquant le rendu ne soient pas nécessaires au chargement, elles peuvent gêner le rendu d'un site Web ou d'une page Web. Il est donc essentiel de supprimer ces ressources pour prevent rendant la navigation difficile pour les utilisateursate votre site web.

Examinons de plus près pourquoi le blocage du rendu est un problème sérieux pour les pages Web : 

Temps de chargement de page lent 

Les ressources bloquant le rendu entraîneront un chargement plus lent du site Web, ce qui est l'un de ses principaux inconvénients. Une page Web se charge lentement lorsqu'elle contient des fichiers de ressources contenant des éléments inutiles. Par conséquent, cela affectera l'apparence des résultats de recherche, diminuera l'engagement des utilisateurs et augmentera le rebond.ate. 

Rendu bloqué 

Souvent abrowser arrête le rendu d'une page Web lorsqu'il rencontre des ressources bloquant le rendu, car il souhaite que les ressources bloquant le rendu soient récupérées et processed. 

UltimeateEn fait, les utilisateurs seront ennuyés et quitteront votre site en raison du manque de réponse de la page ou d'un rendu lent. 

De plus, si une ressource se charge lentement, le browser peut également abandonner et arrêter d’essayer de le charger. Cela peut entraîner des pages cassées ou des informations manquantes. 

Diminution de l'engagement des utilisateurs 

Lorsque des retards de rendu se produisent, le expérience utilisateur descend avec ça. Les utilisateurs s'attendent toujours à des temps de chargement rapides, et ilsally quitter un site à chargement lent. Ainsi, ils se retrouvent sur un site qui se charge plus rapidement. 

Les sites à chargement lent ont un effet néfaste sur la satisfaction des consommateurs et la réputation de la marque. Avec ça, le trafic sur le site et la conversion rate aussi drastiqueally diminution. 

Il existe différentes approches pour supprimer les ressources bloquant le rendu de WordPress. Cependant, nous vous présenterons des méthodes manuelles pour éliminerate ressources bloquant le rendu. Ensuite, nous montrerons comment vous pouvez le faire en utilisant certains des plugins renommés de WordPress. 

Éliminerate Ressources bloquant le rendu Manually

Vous pouvez éviter de le faire manuellementally, alors ne sois pas frustréated. Mais parcourir cette section vous aidera sûrement à apprendre quelques Optimisation des performances de WordPress techniques. Mais d'abord, regardez cette vidéo pour familiariser votreself avec les termes discutés.  

# 1. Identifier les ressources bloquant le rendu

Vous devez d'abord découvrir les ressources bloquant le rendu avant de les supprimer de votre site Web. Suivez simplement ces étapes pour découvrir les ressources bloquant le rendu sur votre site WordPress : 

• Accédez à Google PageSpeed ​​Insights.
• Entrez l'URL de votre site dans la barre de recherche.
• Cliquez sur le bouton "Analyser" pour obtenir des informations sur votre site Web.

• Faites défiler vers le bas et vérifiez le Carrière Section.  
• Si votre page contient des ressources bloquant le rendu, elles seront répertoriées.

# 2. Utiliser « Différer » et « Async" Attributs pour JS 

Après avoir identifié les ressources bloquant le rendu, il est temps d'éliminerate pour de meilleures performances du site Web. A partir de diverses méthodes, utilisant le « différer » ou « unsyncLa méthode " pour les fichiers JavaScript est une approche pour y parvenir. 

En ce qui concerne l'attribut « defer », il permet d'activer le browsheu pour télécharger le fichier JS puis l’exécuter. Mais cela se produit lorsque la page a fini de se charger et est prête à afficher son contenu.

Ainsi, le reste des éléments de la page peut se charger en parallèle avec le fichier JavaScript. En conséquence, le temps nécessaire pour charger la page diminue.

Une autre approche est le « unsync" attribut qui permet au browsheu de télécharger le fichier JS chaque fois qu’il est disponible. Cela se produit sans bloquer aucun autre élément de la page. Par conséquent, le fichier JS peut se charger en parallèle avec d'autres éléments, accélérant ainsi le chargement. process.

Vous pouvez vous débarrasser des ressources bloquant le rendu et augmenter la vitesse de votre site Web en utilisant soit le « différer », soit « unsync" attribut.

# 3. Utilisation de l'attribut "Media" pour le CSS conditionnel

L'utilisation des attributs « média » pour le CSS conditionnel est une autre approche pour éliminer les ressources bloquant le rendu. Avec cet attribut, vous pouvez définir des fichiers CSS uniques pour les ordinateurs de bureau et mobiles.rowsers.

Par exemple, vous pouvez inclure un fichier CSS dédiéated aux appareils de bureau et un autre fichier CSS adapté aux appareils mobiles. Vous pouvez indiquerate au browser que le fichier CSS du bureau se chargera lorsqu'il sera accessible via un appareil de bureau. 

De même, le CSS mobile ne doit être chargé que lorsqu'il est accessible via des appareils mobiles. En chargeant du CSS spécifique à l'appareil pour la conceptionated’appareils, vous pouvez réduire les ressources bloquant le rendu et augmenter le temps de chargement de votre site. 

# 4. Différer les CSS non critiques

En plus d'utiliser l'attribut "media" pour le CSS conditionnel, essayez de différer le CSS non critique. Pour cette approche, vous devez charger principalement le CSS essentiel. Ensuite, vous chargez le reste du CSS au fur et à mesure que la page se charge. 

Par exemple, vous pouvez avoir un énorme fichier CSS qui inclut tous les styles de votre site Web. Mais seule une petite partie de ce fichier CSS est nécessaire pour afficher le contenu dans la région au-dessus de la ligne de flottaison de votre site. Le contenu au-dessus de la ligne de flottaison peut être affiché rapidement en retardant le CSS non critique, et le CSS restant peut être chargé lors du chargement de la page.

# 5. Suppression des CSS et JS inutilisés

La suppression des fichiers CSS et JavaScript inutiles est une autre technique pour supprimer les ressources bloquant le rendu. Ces fichiers peuvent alourdir votre page et augmenter le temps de chargement.

En supprimant tous les fichiers CSS et JS inutilisés, vous pouvez réduire le nombre de ressources bloquant le rendu. Vous pouvez facilement utiliser des outils tels que PurifyCSS ou UnusedCSS pour supprimer tout fichier CSS inutilisé de votre site Web. 

# 6. Locally Chargement de polices personnalisées

Les polices personnalisées peuvent également inclure des ressources qui restreignent le rendu. Au lieu de dépendre de sources extérieures comme Google Fonts, vous devriez rechercherally chargez vos propres polices personnalisées pour éviter d’avoir besoin de ces ressources.

Vous pouvez garantir que vos polices personnalisées se chargent rapidement et efficacement sans ralentir les performances de votre site Web.ally les charger. Cela peut conduire à un site Web plus rapide et plus réactif et améliorer l'expérience utilisateur.

# 7. Minification JS & CSS

Enfin, la minimisation de vos fichiers CSS et JavaScript peut aider votre site Web à mieux fonctionner. La minification supprime les caractères inutiles, tels que les espaces blancs et les commentaires, de votre code. Ainsi, la taille de vos fichiers est réduite, ce qui accélère le chargement.

Pour minifier vos fichiers, vous pouvez utiliser des outils tels que MinifyJS ou CSSNano. Conservez une copie de vos fichiers originaux au cas où vous auriez besoin d'y apporter des modifications.

Éliminerate Ressources bloquant le rendu avec plugin 

Dans cette section, nous allons vous montrer comment éliminerate ressources bloquant le rendu à l’aide de plugins WordPress. Ces plugins sont réputés sur WordPress et peuvent rapidement supprimer les ressources bloquant le rendu. Le meilleur, c’est que vous pouvez même améliorer les performances de votre site Web sans aucune expertise spécialisée.  

# 1. W3 Total Cache 

W3 Total Cache (W3TC) améliore toute l’expérience utilisateur d’un site Web WordPress. Il élimineates ressources bloquant le rendu et améliore le référencement, Core Web Vitals, et plus. Le plugin utilise des fonctionnalités telles que l'intégration du réseau de diffusion de contenu pour mettre en œuvre les meilleures pratiques.  

Pour éliminerate ressources bloquant le rendu, installation et activationate le plugin W3 Total Cache et suivez ces étapes :

• Allez à Performance section dans le tableau de bord WordPress et cliquez sur Réglages généraux. 
• En vertu des Normes sur l’information et les communications, les organismes doivent rendre leurs sites et applications Web accessibles. Ils y parviennent en conformant leurs sites Web au niveau AA des Web Content Accessibility Guidelines (WCAG). Rapetisser en-tête, activer Rapetisser et sélectionnez Manuel comme mode de minification.
• Maintenant, cliquez sur Enregistrer tous les paramètres.

• Ensuite, collectez tous les fichiers Javascript et CSS bloquant le rendu via Google PageSpeed ​​Insights. 
• Suivi d'un retour à Performances > Minifier.
• Maintenant, dans le js section, cliquez d'abord sur Activer pour le Paramètres de minification JS. Ensuite sous le Opérations dans les zones section, sélectionnez Non bloquant à l'aide du "différer" tapez pour le Avant  Étiquette. 
• Maintenant dirigez-vous vers Gestion des fichiers JS, sélectionnez le thème que vous avez activéated, puis cliquez sur le Ajouter un scénario bouton. Collectez maintenant les URL Javascript présentant des problèmes analysés par Google PageSpeed ​​Insights. Collez les URL sur le designatechamp d comme stated dans l'image.

• Maintenant, faites défiler vers le bas un bit à la section CSS. Sélectionnez votre thème dans le menu déroulant de la section de gestion des fichiers CSS et cliquez sur Ajouter une feuille de style. Maintenant, suivez simplement le prevétape délicate et copiez-collez les URL collectées à partir de PageSpeed ​​Insight qui présentent des problèmes.

• Puisque tous les paramètres sont configurés, cliquez sur le Enregistrer les paramètres et purger bouton à exécuter. 

# 2. Optimiser JCH 

Optimiser JCH améliore les performances du site Web WordPress mesurées par Google PageSpeed ​​Insight. Le plugin améliore la première peinture de contenu (FCP), la plus grande peinture de contenu (LCP), l'indice de vitesse (SI), le décalage de mise en page cumulé (CLS), le temps d'interaction (TTI), et plus encore.

Ainsi, l'expérience utilisateur globale et les performances du site Web s'améliorent considérablement. 

Après avoir installé et activé JCH Optimize, suivez ces processes pour éliminerate ressources bloquant le rendu :

• Cliquez sur Paramètres> Optimiser JCH, faire défiler vers le bas un bit, puis accédez aux paramètres des fonctionnalités de base.  

• Activez la Optimiser la diffusion CSS éliminerate Blocage du rendu CSS. Cette fonctionnalité automatiqueally détermine le CSS essentiel requis pour afficher le contenu au-dessus de la ligne de flottaison sur chaque page Web. Ajoutally, il l'intègre dans le section du contenu HTML de chaque page. 

• Le pré-charge le lien est ensuite utilisé pour charger le concatenated Fichiers CSS asynchroneusement.
• Pour supprimer les ressources bloquant le rendu Javascript, vous devez inclure le async ou reporter attributs à la étiqueter. Le javascript peut échouer s'il y a des dépendances sur eux car cela pourrait changer l'ordre dans lequel ils se chargent. 
• Sur le tableau de bord JCH Optimize, accédez au Combiner les fichiers Paramètres automatiques . 
• Maintenant, cliquez sur le Optimum, quel automatiqueally permet le Différer/Async Javascript.    

• Activation Réglage optimal reporte ou charge JavaScript asynchroneusement. 
• Si les fichiers Javascript sont chargés dynamiquementally, ils ne peuvent être différés. 

# 3. Pack accélérateur de vitesse 

Pour améliorer les performances et la convivialité globale de votre site, Pack accélérateur de vitesse est un autre excellent plugin WordPress. Votre site sera mieux classé dans les principaux moteurs de recherche tels que Google. Vous obtiendrez un trafic accru et une vitesse massive avec ce plugin. 

Après avoir installé et activé le Speed ​​Booster, suivez simplement les étapes suivantes : 

• Cliquez sur Pack accélérateur de vitesse sur votre tableau de bord WordPress. 
• Pour supprimer les ressources de blocage de rendu javascript, cliquez sur le Outils et faites défiler vers le bas. Aller à Optimiser Javascript option. En cliquant sur tout, vous pouvez différer tous les fichiers JS et JS en ligne, ou vous pouvez sélectionner personnaliser pour inclure vos scripts JS sélectionnés.  
• Activez ensuite Déplacer JavaScript vers le pied de page. Cela déplace tous les fichiers JS et JS en ligne vers le bas de vos sources de page. 

• Maintenant, cliquez sur le Optimiser CSS option pour supprimer les ressources CSS bloquant le rendu. 

• Vous obtiendrez des options pour activer CSS critique, qui optimise la livraison CSS en fonction de Les recommandations de Google. Cette option différera tous les fichiers CSS et alignera le style de votre contenu au-dessus du pli. 

Vous pouvez activer Inline tout CSS pour incorporer tous les fichiers CSS dans la sortie HTML. Il existe également une option pour réduire tous les CSS intégrés pour réduire le CSS déjà intégré.

• Après avoir configuré le plugin, enregistrez tous les paramètres pour les supprimer.ate ressources bloquant le rendu. 

# 4. Autoptimize 

Autoptimize est encore un autre plugin pour optimiser et éliminerate ressources bloquant le rendu facilement. Le plugin rationalise les scripts JS et les styles CSS en les déplaçant vers le pied de page, en les regroupant, en les réduisant et en les mettant en cache.

Il optimise le CSS en l'injectant dans l'en-tête de la page, en inline le CSS critique et en faisant référence à l'agrégat complet.ated CSS. Ajoutally, c'est automatiqueally réduit le code HTML pour une meilleure optimisation. 

Installer et activerate le plugin Autoptimize puis suivez ces processes pour supprimer les ressources bloquant le rendu : 

• Tout d'abord, aller à Paramètres> Optimisation automatique depuis votre tableau de bord WordPress. 
• Dans la section Options Javascript, cochez la case "Optimiser le code JavaScript ? »
• Dans la section des options CSS, cochez la case "Optimiser le code CSS ? » 
• Cliquez maintenant sur enregistrer Modifications et cache vide. 

C'est d'habitudeally suffit à resolve les ressources bloquant le rendu. Cependant, le résultat peut changer en fonction du thème et du plugin installés sur votre site WordPress. Pour vérifier que les problèmes sont résolus, exécutez à nouveau votre site via PageSpeed ​​Insights. Pour une optimisation plus poussée, suivez ces étapes : 

• Après le prevÉtape ingénieuse, de nombreuses options sont disponibles sous les options Javascript et CSS. 
• Vous pouvez maintenant activer le Aussi agrégéate CSS et de Agrégatate Fichiers JS 
• finallycliquez Enregistrer les modifications. 

# 5. WP Rocket 

WP Rocket est un plugin WordPress renommé et premium pour l'optimisation des performances de mise en cache. Mais c'est plus qu'un simple plugin de chasse, y compris la suppression des ressources bloquant le rendu de votre site. En conséquence, les performances de base de Web Vitals et le score PageSpeed ​​​​insight sont considérablement améliorés. 

Après avoir installé et activé le plugin WP Rocket, supprimezate ressources bloquant le rendu en procédant comme suit : 

• Cliquez sur WP Rocket, allez dans le Optimisation des fichiers et accédez à l'onglet Fichier CSS .
• Activez la Optimiser la diffusion CSS

• Accédez maintenant à la section Fichier JavaScript et sélectionnez Charger JavaScript différé. Vous pouvez également essayer l'option Mode sans échec pour Jaquery. Mais si cela brise la conception frontale de votre site Web, vous pouvez revert-le. 
• Enregistrez toutes vos modifications en cliquant sur le Enregistrer les modifications bouton (dans la fenêtre de contrôle qui apparaît maintenant).   

Avantages de la suppression des ressources bloquant le rendu d'un site Web

Un temps de chargement des pages plus rapide peut grandement impact le SEO d'un site web. Étant donné que Google préfère toujours les sites qui se chargent plus rapidement et fonctionnent bien. Par conséquent, les pages dont le score est supérieur à 90 auront toujours une priorité plus élevée en ce qui concerne les résultats de recherche. En utilisant les plugins mentionnés ci-dessus, vous pouvez réaliser ce qui suit PageSpeed score: 

Des temps de chargement de page plus rapides peuvent entraîner un engagement accru des utilisateurs, car les utilisateurs sont plus susceptibles de rester sur un site qui se charge rapidement. Ainsi, les utilisateurs peuvent naviguer confortablementate le site ou effectuer un achat rapidement. 

Additionally, la suppression des ressources bloquant le rendu peut améliorer considérablement l'expérience des utilisateurs mobiles, car les utilisateurs mobiles sont plus susceptibles d'utiliser des réseaux plus lents avec des données limitées. 

Réflexions finales 

Nous avons mentionné à la fois le manuel et l'automatiqueated (Plugin) processes de suppression des ressources bloquant le rendu. Si vous souhaitez optimiser tous les angles des performances de votre site Web, vous pouvez le faire manuellement.ally. Mais si vous souhaitez minimiser vos tracas et obtenir immédiatement un meilleur score PageSpeed, essayez les plugins que nous avons mentionnés. 

Nous avons déjà assisté à des pratiques étonnantes en matière de scores de performance.ally sur plusieurs sites Internet. Maintenant, c'est à votre tour d'optimiser davantage votre site WordPress avec un minimum de connaissances techniques et offrent une expérience de site Web exceptionnelle.    

Vous pouvez également explorer des astuces pour rendre votre chargement du site Web à la vitesse de l'éclair.