Comment éliminer les ressources WordPress bloquant le rendu

L’un des problèmes les plus courants rencontrés par les propriétaires de sites Web lors de l’optimisation de la vitesse de chargement de leur site est celui des ressources bloquant le rendu.

Le problème est mis en évidence par des outils de test de vitesse de page tels que Google PageSpeed Insights.

Cela laisse les webmasters ignorants sur la façon de le réparer.

Puisque vous lisez ce guide, vous avez peut-être aussi vu ce problème dans PageSpeed Insights ou tout autre outil de ce type.

Ne vous inquiétez pas, à la fin de ce guide, vous éliminerez les ressources WordPress bloquant le rendu de votre site web.

C’est parti !

☰ Table des matières

Ce dont vous aurez besoin pour éliminer les ressources WordPress bloquant le rendu

Vous aurez besoin de l’un des plugins suivants pour éliminer les ressources bloquant le rendu de votre site WordPress:

Le plugin WP Rocket (option premium)
Plugin Autoptimize et plugin JavaScript Async (options gratuites).

Comment éliminer les ressources WordPress bloquant le rendu : instructions étape par étape

Méthode #1: Éliminer les ressources WordPress bloquant le rendu avec le plugin WP Rocket

Les plugins WordPress de performance tels que WP Rocket offrent une solution globale pour augmenter la vitesse de chargement de votre site web WordPress.

Par conséquent, il n’est pas surprenant que WP Rocket inclue également une fonctionnalité permettant d’éliminer les ressources WordPress bloquant le rendu.

Voici comment l’utiliser :

Tout d’abord, allez sur le site officiel du plugin WP Rocket et achetez le plugin.

Il est disponible en trois versions, la version la moins chère ne coûtant que 49$.

Une fois que vous l’achetez, le lien de téléchargement du plugin sera envoyé à votre adresse e-mail à partir de laquelle vous pourrez télécharger le plugin WP Rocket.

Maintenant, allez dans Plugins > Ajouter Nouveau et cliquez sur le bouton « Télécharger le plugin ».

Parcourez vos fichiers en cliquant sur le bouton « Choisir un fichier » et sélectionnez votre fichier .zip téléchargé de WP Rocket.

Cliquez sur « Installer maintenant » pour commencer l’installation du plugin.

Une fois que vous avez installé le plugin, vous recevrez un message de réussite à l’écran avec un lien pour activer le plugin.

Cliquez sur ce lien pour activer le plugin.

Maintenant, dans votre tableau de bord, sélectionnez WP Rocket dans le panneau de gauche de votre tableau de bord WordPress.

Accédez à l’onglet « File Optimization ».

Dans cet onglet, activez l’option « Optimize CSS delivery ».

Ensuite, activez l’option « Load JavaScript defferred».

Comment éliminer les ressources WordPress bloquant le rendu

Cliquez sur « Save Changes ».

Testez maintenant votre site dans l’outil Google PageSpeed Insights. Vous n’obtiendrez plus cette erreur.

Méthode #2: Éliminer les ressources WordPress bloquant le rendu à l’aide du plugin Autoptimize

Bien que WP Rocket soit une solution parfaite pour corriger l’erreur de blocage du rendu sur WordPress, il s’agit d’un plugin premium.

Nous comprenons que certains d’entre vous n’ont peut-être pas le budget ou la volonté de dépenser quelque chose sur un plugin à cette fin.

Voici donc une autre solution: en utilisant le plugin Autoptimize, vous pouvez éliminer les ressources WordPress bloquant le rendu gratuitement.

Suivez simplement les étapes ci-dessous:

Accédez à Plugins >> Ajouter un nouveau.

Recherchez « Autoptimize Async » et installez les plugins suivants à partir des résultats de la recherche.

Une fois les deux installés, activez-les en cliquant sur leurs propres boutons « Activer ».

Ensuite, accédez à Réglages> Async Javascript et cochez la case « Activer Async Javascript » en haut.

Choisissez maintenant entre les options « Apply Async» et « Apply Defer ».

Vous devriez d’abord essayer l’option Async, mais si cela pose problème, vous pouvez essayer l’option Defer.

Et si vous rencontrez toujours des problèmes, vous pouvez également essayer les deux options restantes, qui activent toutes deux les modes Async ou Defer avec jQuery exclu.

Ensuite, accédez à Réglages>Autoptimize et cochez les cases« Optimiser le code Javascript? » et « Optimiser le code CSS ».

Enfin, faites défiler vers le bas et cliquez sur le bouton « Enregistrer les modifications ».

Vous pouvez maintenant consulter votre site dans Google PageSpeed Insights.

L’erreur de blocage du rendu aura disparu.

Le problème avec cette méthode, comme vous l’avez vu, est que vous devez installer deux plugins distincts et travailler avec un ensemble d’options légèrement plus complexe que WP Rocket.

Mais encore une fois, vous obtenez cette fonctionnalité gratuitement, vous ne pouvez donc pas vous plaindre!

FAQ

Que signifie « Éliminer les ressources bloquant le rendu »?

Les ressources bloquant le rendu sont des fichiers CSS ou JS inclus dans le contenu de votre page qui empêchent le navigateur de restituer le reste de votre page Web tant qu’ils n’ont pas été chargés.

Si ces ressources se trouvent près du haut de votre page Web (c’est-à-dire dans l’en-tête), elles peuvent rendre votre page entière assez lente à charger.

Comment savoir si j’ai bloqué les ressources ?

Si vous utilisez l’outil PageSpeed Insights de Google, il peut facilement vous dire si vous avez des ressources bloquant le rendu sur votre page ou non.

Ensuite, vous pouvez commencer le processus pour les éliminer.

Autres ressources sur Elementor

Conclusion

C’est ainsi que vous éliminez les ressources bloquant le rendu de votre site WordPress.

L’une des méthodes est gratuite, tandis que l’autre nécessite un plugin premium (mais pas trop coûteux).

Vous pouvez maintenant choisir la méthode de votre choix. Faites-nous savoir dans les commentaires quelle méthode vous préférez et pourquoi.

Et aussi, encouragez-nous à produire plus de tutoriels utiles en partageant celui-ci sur les médias sociaux.

Partager cet Article :

Mikhos Gartner

Mikhos Gartner est un expert en outils numériques qui achète, teste et examine les outils SAAS pour les petites entreprises. S'appuyant sur plusieurs années d'expérience dans le domaine de la technologie, il fournit des critiques perspicaces. Son contenu est largement consommé, servant des millions d'utilisateurs chaque mois.