Comment éliminer les ressources bloquant le rendu dans WordPress [Plugins or Manually]

Dans l'environnement numérique actuel, où la concurrence est féroce, la vitesse d'un site web est primordiale pour la réussite d'une entreprise en ligne. Les moteurs de recherche majeurs, comme Google, accordent une grande importance aux sites web qui se chargent rapidement, car ils reconnaissent la nécessité d'offrir une expérience utilisateur fluide.

Des études ont démontré que des temps de chargement de page plus courts améliorent l'engagement des utilisateurs et augmentent les taux de conversion. En effet, un délai d'une seconde dans le chargement d'une page peut entraîner une diminution de 7 % des conversions clients. Il est donc clair que les propriétaires de sites web doivent absolument se soucier des performances de leurs plateformes.

Google prend très au sérieux les performances des sites web et en tient compte lorsqu'il établit ses résultats de recherche. Par conséquent, les sites web qui se chargent rapidement ont plus de chances d'apparaître en tête des résultats, d'attirer davantage de visiteurs et, potentiellement, de générer plus de revenus. Mais comment répondre aux exigences de Google et accélérer le chargement de votre site web ?

La réponse réside dans l'élimination des ressources qui peuvent entraver le chargement d'un site web, notamment les fichiers CSS et JavaScript.

Cependant, cette suppression peut s'avérer délicate et chronophage, surtout pour ceux qui n'ont pas de compétences techniques avancées.

Dans cet article, nous allons examiner ce que sont les ressources bloquant le rendu, leur impact sur les performances d'un site web, et nous fournirons un guide étape par étape pour les supprimer de votre site WordPress. Alors, mettons-nous au travail pour optimiser votre site web afin qu'il soit plus rapide et plus performant !

Les ressources bloquant le rendu

On considère comme ressource bloquant le rendu toute ressource qui doit être chargée avant qu'une page web puisse être affichée. Ces éléments peuvent affecter les performances et l'efficacité d'un site web, en allongeant le temps nécessaire au chargement d'une page.

Un fichier CSS ou JavaScript est considéré comme une ressource bloquant le rendu s'il empêche l'affichage d'une page web. Cependant, l'importance de son chargement peut varier en fonction de son utilité immédiate.

Lorsqu'un utilisateur accède à une page, le navigateur commence par traiter le code HTML pour afficher son contenu visible. Lorsqu'il rencontre des fichiers CSS et JavaScript, il les télécharge et les traite également. Si ces fichiers de ressources contiennent du code superflu ou des parties inutilisées, le chargement de la page web prendra plus de temps.

Les types de ressources bloquant le rendu

Les fichiers de ressources tels que les CSS et JavaScript sont généralement identifiés comme des ressources bloquant le rendu dans WordPress. Le navigateur considère ces ressources comme indispensables et nécessite leur chargement avant d'afficher la page. Mais ce n'est pas tout : d'autres types de fichiers peuvent également bloquer le rendu d'une page web.

Voici une liste des ressources bloquant le rendu :

Feuilles de style CSS

Les feuilles de style CSS définissent l'apparence et la mise en page d'une page web. Un fichier CSS sera considéré comme une ressource bloquant le rendu s'il est placé dans la section `

Fichiers JavaScript dans la section `

`

JavaScript est un langage de script qui permet d'ajouter du comportement et de l'interaction dynamiques à une page web. Un fichier JavaScript sera considéré comme une ressource bloquant le rendu s'il est placé dans la section `

` d'une page HTML.

Polices

Les textes d'une page web sont affichés en utilisant différentes polices. Les polices sont également considérées comme des ressources bloquant le rendu si elles sont incluses dans la section `

` d'une page HTML et chargées depuis un serveur local ou un CDN.

Importations HTML

Cette ancienne fonctionnalité HTML permettait d'inclure des éléments d'autres documents HTML dans une page web. Bien qu'elles soient moins utilisées aujourd'hui, on peut encore les retrouver 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 néfastes pour les pages web ?

Si votre site WordPress contient des ressources bloquant le rendu, cela affectera négativement votre positionnement dans les résultats de recherche. Même si vous êtes actuellement bien classé, les sites les plus performants finiront par vous dépasser.

Les sites avec des ressources bloquant le rendu chargent des fichiers additionnels lors de l'affichage du site. Les utilisateurs doivent donc attendre que ces fichiers soient traités avant de voir le site web. Cela a un impact négatif sur les indicateurs de performance suivants :

• Le Largest Contentful Paint (LCP) : il mesure le temps nécessaire pour charger le contenu principal de la page.
• Le First Contentful Paint (FCP) : il mesure le temps nécessaire pour qu'un navigateur affiche le premier élément du DOM sur votre site web.
• Le Total Blocking Time (TBT) : il mesure le temps qui s'écoule entre le FCP et le moment où une page devient entièrement interactive.

Bien que les ressources bloquant le rendu ne soient pas indispensables pour le chargement, elles peuvent nuire à l'affichage d'un site ou d'une page web. Il est donc essentiel de les supprimer pour ne pas perturber la navigation des utilisateurs sur votre site web.

Examinons plus en détail pourquoi le blocage du rendu est un problème important pour les pages web :

Temps de chargement de page lent

Les ressources bloquant le rendu ralentissent le chargement du site web, ce qui est l'un de leurs principaux inconvénients. Une page web se charge lentement lorsqu'elle contient des fichiers de ressources avec des éléments inutiles. Cela affecte donc les résultats de recherche, réduit l'engagement des utilisateurs et augmente le taux de rebond.

Blocage du rendu

Un navigateur arrête souvent l'affichage d'une page web lorsqu'il rencontre des ressources bloquant le rendu. Il attend en effet que ces ressources soient récupérées et traitées.

Cela frustre les utilisateurs qui peuvent quitter votre site web en raison de la lenteur ou du manque de réactivité de la page.

De plus, si une ressource met trop de temps à se charger, le navigateur peut abandonner et arrêter de la charger. Cela peut entraîner des pages cassées ou des informations manquantes.

Diminution de l'engagement des utilisateurs

Lorsque des délais de rendu se produisent, l'expérience utilisateur est affectée. Les utilisateurs s'attendent à des temps de chargement rapides et quittent généralement un site web lent pour en trouver un qui se charge plus rapidement.

Les sites web à chargement lent ont un impact négatif sur la satisfaction client et la réputation de la marque. Cela conduit à une diminution du trafic sur le site web et à des taux de conversion plus faibles.

Il existe différentes manières de supprimer les ressources bloquant le rendu de WordPress. Nous vous présenterons ici des méthodes manuelles, puis nous vous montrerons comment utiliser certains plugins WordPress réputés.

Supprimer manuellement les ressources bloquant le rendu

Ne soyez pas découragé si cette opération doit être faite manuellement. L'examen de cette section vous permettra d'acquérir des connaissances importantes sur l'optimisation des performances de WordPress. Mais commencez par regarder cette vidéo pour vous familiariser avec les termes abordés.

#1. Identifier les ressources bloquant le rendu

La première étape consiste à identifier les ressources bloquant le rendu avant de pouvoir les supprimer de votre site web. Suivez ces étapes simples pour découvrir les ressources bloquant le rendu sur votre site WordPress :

• Allez sur Google PageSpeed Insights.
• Saisissez l'URL de votre site web dans la barre de recherche.
• Cliquez sur le bouton « Analyser » pour obtenir des informations sur votre site web.

• Faites défiler vers le bas jusqu'à la section "Opportunités".
• Si votre page contient des ressources bloquant le rendu, elles y seront listées.

#2. Utiliser les attributs "defer" et "async" pour JS

Une fois que vous avez identifié les ressources bloquant le rendu, il est temps de les supprimer pour améliorer les performances de votre site web. Parmi les différentes méthodes disponibles, l'utilisation des attributs "defer" ou "async" pour les fichiers JavaScript est une option courante.

L'attribut "defer" indique au navigateur de télécharger le fichier JS, mais de ne l'exécuter qu'une fois que 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, ce qui réduit le temps nécessaire pour charger la page.

L'attribut "async" permet au navigateur de télécharger le fichier JS dès qu'il est disponible, sans bloquer d'autres éléments de la page. Cela permet de charger le fichier JS en parallèle avec d'autres éléments, ce qui accélère le processus de chargement.

En utilisant l'attribut "defer" ou "async", vous pouvez vous débarrasser des ressources bloquant le rendu et améliorer la vitesse de votre site web.

#3. Utiliser l'attribut "media" pour le CSS conditionnel

L'utilisation de l'attribut "media" pour le CSS conditionnel est une autre méthode pour supprimer les ressources bloquant le rendu. Cet attribut vous permet de définir des fichiers CSS différents pour les navigateurs de bureau et les navigateurs mobiles.

Par exemple, vous pouvez inclure un fichier CSS spécifique aux appareils de bureau et un autre fichier CSS pour les appareils mobiles. Vous pouvez ainsi indiquer au navigateur que le fichier CSS de bureau doit être chargé uniquement lorsque l'utilisateur accède au site web depuis un ordinateur de bureau.

De même, le fichier CSS mobile ne doit être chargé que lors d'un accès via un appareil mobile. En ne chargeant que les fichiers CSS spécifiques à l'appareil, vous pouvez réduire les ressources bloquant le rendu et accélérer le chargement de votre site web.

#4. Différer le CSS non essentiel

En plus d'utiliser l'attribut "media" pour le CSS conditionnel, vous pouvez différer le chargement du CSS non essentiel. Pour ce faire, vous devez d'abord charger le CSS indispensable. Puis vous chargez le reste du CSS au fur et à mesure que la page se charge.

Par exemple, vous pouvez avoir un fichier CSS volumineux qui inclut tous les styles de votre site web. Cependant, seule une petite partie de ce fichier est nécessaire pour afficher le contenu qui apparaît au-dessus de la ligne de flottaison sur votre site web. En retardant le chargement du CSS non essentiel, vous pouvez afficher rapidement le contenu au-dessus de la ligne de flottaison, et le reste du CSS se chargera ensuite.

#5. Supprimer les CSS et JS inutilisés

Supprimer les fichiers CSS et JavaScript inutiles est une autre façon d'éliminer 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 réduisez le nombre de ressources bloquant le rendu. Vous pouvez utiliser des outils tels que PurifyCSS ou UnusedCSS pour supprimer les fichiers CSS inutilisés de votre site web.

#6. Charger localement les polices personnalisées

Les polices personnalisées peuvent également inclure des ressources qui limitent le rendu. Au lieu de dépendre de sources externes telles que Google Fonts, vous devez charger localement vos propres polices personnalisées pour éviter d'avoir besoin de ces ressources.

En chargeant vos polices personnalisées localement, vous vous assurez qu'elles se chargent rapidement et efficacement sans ralentir les performances de votre site web. Cela peut contribuer à un site web plus rapide et plus réactif, améliorant ainsi l'expérience utilisateur.

#7. Minifier les JS et CSS

Enfin, minifier vos fichiers CSS et JavaScript peut améliorer les performances de votre site web. La minification consiste à supprimer les caractères inutiles de votre code, comme les espaces et les commentaires. Cela réduit la taille de vos fichiers, ce qui accélère leur chargement.

Vous pouvez utiliser des outils tels que MinifyJS ou CSSNano pour minifier vos fichiers. Conservez une copie de vos fichiers originaux au cas où vous devriez y apporter des modifications.

Supprimer les ressources bloquant le rendu à l'aide d'un plugin

Dans cette section, nous allons vous montrer comment supprimer les ressources bloquant le rendu en utilisant des plugins WordPress. Ces plugins sont très réputés dans WordPress et peuvent supprimer rapidement ces ressources. De plus, ils permettent d'améliorer les performances de votre site web sans nécessiter de compétences techniques spécialisées.

#1. W3 Total Cache

W3 Total Cache (W3TC) améliore l'expérience utilisateur globale d'un site web WordPress. Il élimine les ressources bloquant le rendu, améliore le référencement, les Core Web Vitals, etc. Ce plugin utilise des fonctionnalités telles que l'intégration d'un réseau de diffusion de contenu pour appliquer les meilleures pratiques.

Pour supprimer les ressources bloquant le rendu, installez et activez le plugin W3 Total Cache, puis suivez ces étapes :

• Allez dans la section "Performances" de votre tableau de bord WordPress et cliquez sur "Paramètres généraux".
• Dans l'en-tête "Minifier", activez l'option "Minifier" et sélectionnez "Manuel" comme mode de minification.
• Cliquez ensuite sur "Enregistrer tous les paramètres".

• Recueillez ensuite tous les fichiers JavaScript et CSS qui bloquent le rendu à l'aide de Google PageSpeed Insights.
• Revenez à "Performance" > "Minifier".
• Dans la section "JS", cliquez d'abord sur "Activer" pour les paramètres de minification JS. Ensuite, dans la section "Opérations", sélectionnez "Non bloquant" en utilisant le type "defer" pour la balise avant ``.
• Allez dans "Gestion des fichiers JS", sélectionnez le thème que vous avez activé et cliquez sur le bouton "Ajouter un script". Recueillez les URLs JavaScript qui posent problème selon l'analyse de Google PageSpeed Insights et collez-les dans le champ prévu à cet effet, comme indiqué dans l'image.

• Faites défiler vers le bas jusqu'à la section "CSS". Sélectionnez votre thème dans le menu déroulant de la section "Gestion des fichiers CSS" et cliquez sur "Ajouter une feuille de style". Répétez l'étape précédente en copiant et collant les URLs recueillies depuis PageSpeed Insights qui posent problème.

• Une fois tous les paramètres configurés, cliquez sur "Enregistrer les paramètres et purger" pour exécuter les changements.

#2. JCH Optimize

JCH Optimize améliore les performances du site web WordPress mesurées par Google PageSpeed Insights. Ce plugin améliore le First Contentful Paint (FCP), le Largest Contentful Paint (LCP), l'indice de vitesse (SI), le Cumulative Layout Shift (CLS), le Time to Interactive (TTI), etc.

Par conséquent, l'expérience utilisateur globale et les performances du site web sont améliorées de manière significative.

Après avoir installé et activé JCH Optimize, suivez ces étapes pour supprimer les ressources bloquant le rendu :

• Allez dans "Paramètres" > "JCH Optimize", faites défiler un peu vers le bas et accédez aux "Paramètres des fonctionnalités de base".

• Activez l'option "Optimiser la livraison des CSS" pour supprimer le blocage du rendu CSS. Cette fonctionnalité détermine automatiquement le CSS essentiel nécessaire pour afficher le contenu au-dessus de la ligne de flottaison sur chaque page web et l'intègre dans la section `` du contenu HTML de chaque page.

• Le lien de préchargement est ensuite utilisé pour charger les fichiers CSS concaténés de manière asynchrone.
• Pour supprimer les ressources bloquant le rendu JavaScript, vous devez inclure les attributs "async" ou "defer" dans la balise `