Comment corriger les JavaScript et CSS qui bloquent le rendu dans WordPress

Vous essayez d’éliminer les JavaScript et CSS qui bloquent le rendu dans WordPress ?

Si vous testez votre site sur Google PageSpeed insights, alors vous verrez probablement une suggestion d’éliminer les scripts et CSS bloquant le rendu. Cependant, il ne fournit pas de détails sur la façon de le faire sur votre site WordPress.

Dans cet article, nous allons vous afficher comment corriger facilement les JavaScript et CSS bloquant le rendu dans WordPress afin d’améliorer votre score Google PageSpeed.

Qu’est-ce que le JavaScript et le CSS qui bloquent le rendu ?

Les fichiers JavaScript et CSS bloquant le rendu sont des fichiers qui empêchent un site web d’afficher une page web avant le chargement de ces fichiers.

Chaque site WordPress possède un thème et des extensions qui ajoutent des fichiers JavaScript et CSS à l’interface publique de votre site.

Ces scripts peuvent augmenter le temps de chargement des pages de votre site, et ils peuvent également bloquer le rendu de la page.

Le navigateur de l’utilisateur devra charger ces scripts et CSS avant de charger le reste du HTML de la page. Cela signifie que les utilisateurs/utilisatrices ayant une connexion plus lente devront attendre quelques millisecondes de plus pour voir la page.

Ces scripts et feuilles de style sont appelés JavaScript et CSS bloquant le rendu.

Les propriétaires desites WordPress qui tentent d’obtenir un score Google PageSpeed de 100 devront corriger ce problème pour atteindre ce score parfait.

Qu’est-ce que la note Google PageSpeed ?

Google PageSpeed Insights est un outil de test de la vitesse des sites web créé par Google pour aider les propriétaires de sites web à optimiser et à tester leurs sites. Cet outil teste votre site par rapport aux directives de Google en matière de vitesse et propose des suggestions pour améliorer le temps de chargement de votre page.

Il vous affiche un score basé sur le nombre d’audits que votre site a passé avec succès. La plupart des sites obtiennent un score compris entre 50 et 70. Toutefois, certains propriétaires de sites se sentent obligés d’atteindre 100 (le score le plus élevé qu’une page puisse obtenir).

Avez-vous vraiment besoin de la note parfaite de « 100 » de Google PageSpeed ?

L’objectif de Google PageSpeed insights est de vous fournir des indications pour améliorer la vitesse et les performances de votre site. Vous n’êtes pas nécessaire de suivre ces règles à la lettre.

N’oubliez pas que la vitesse est uniquement l’une des nombreuses métriques d’optimisation pour les moteurs de recherche (SEO) qui aident Google à déterminer le classement de votre site. Si la vitesse est si importante, c’est parce qu’elle améliore l’expérience des utilisateurs/utilisatrices sur votre site.

Une meilleure expérience utilisateur nécessite bien plus que de la vitesse. Vous devez également proposer des informations utiles, une meilleure interface utilisateur et un contenu attrayant avec du texte, des images et des vidéos.

Votre objectif doit être de créer un site rapide qui offre une excellente expérience à l’utilisateur.

Nous vous recommandons d’utiliser les règles Google PageSpeed comme des suggestions. Si vous pouvez les mettre en œuvre facilement sans ruiner l’expérience des utilisateurs/utilisatrices, c’est parfait. Dans le cas contraire, essayez d’en faire le plus possible et ne vous préoccupez pas du reste.

Ceci étant dit, voyons ce que vous pouvez faire pour corriger les JavaScript et CSS bloquant le rendu dans WordPress.

Nous allons aborder deux méthodes qui permettent d’éliminer les ressources bloquant le rendu dans WordPress. Vous pouvez choisir celle qui fonctionne le mieux pour votre site :

Méthode 1 : Corriger les scripts et CSS bloquant le rendu avec WP Rocket

Pour cette méthode, nous allons utiliser l’extension WP Rocket. C’est la meilleure extension de mise en cache et d’amélioration WordPress du marché qui vous permet d’améliorer rapidement les performances de votre site sans aucune compétence technique ni configuration compliquée.

Tout d’abord, vous devez installer et activer l’extension WP Rocket. Pour plus de détails, consultez notre guide étape par étape sur l’installation d’une extension WordPress.

WP Rocket fonctionne dès sa sortie de la boîte, et il activera la mise en cache avec des réglages optimaux pour votre site. Vous pouvez en savoir plus dans notre guide terminé sur la façon d’installer et de configurer correctement WP Rocket dans WordPress.

Par défaut, il n’active pas les options d’optimisation JavaScript et CSS. Ces optimisations peuvent potentiellement affecter l’apparence de votre site ou certaines fonctionnalités, c’est pourquoi l’extension vous permet d’activer ces réglages de manière facultative.

Pour ce faire, vous devez vous rendre sur la page Réglages  » WP Rocket, puis basculer sur l’onglet  » Optimisation des fichiers « .

Défilez ensuite jusqu’à la section Fichiers CSS et cochez les cases situées à côté de « Minify CSS », « Combine CSS Files » et « Optimize CSS Delivery ».

Pour le paramètre ‘Optimize CSS Delivery’, WP Rocket recommande de choisir la méthode‘Remove Unused CSS‘.

En plus d’offrir les meilleures performances, il peut contribuer à réduire la taille des pages et les requêtes HTTP.

Ensuite, vous devez défiler jusqu’à la section Fichiers JavaScript. À partir de là, vous pouvez cocher toutes les options pour une amélioration maximale des performances.

Vous pouvez minifier et combiner des fichiers JavaScript comme vous l’avez fait pour CSS.

Vous pouvez également empêcher WordPress de charger le fichier jQuery Migrate. Il s’agit d’un script que WordPress charge pour assurer la compatibilité des extensions et des thèmes utilisant d’anciennes versions de jQuery.

La plupart des sites web n’ont pas besoin de ce fichier, mais vous devrez tout de même vérifier votre site pour vous assurer que le fait de le retirer n’affecte pas votre thème ou vos extensions.

Ensuite, défilez un peu plus bas et cochez les cases situées à côté des options « Load JavaScript Defered » et « Safe Mode for jQuery ».

Ces options retardent le chargement des JavaScripts non essentiels, et le mode sécurisé jQuery vous permet de charger jQuery pour les thèmes susceptibles de l’utiliser en ligne. Vous pouvez ne pas cocher cette option si vous êtes certain que votre thème n’utilise pas de jQuery en ligne.

N’oubliez pas de cliquer sur le bouton « Enregistrer les modifications » pour stocker vos réglages.

Après cela, vous pouvez également vouloir vider le cache dans WP Rocket avant de tester à nouveau votre site avec Google PageSpeed Insights.

Sur notre site de test, nous avons pu obtenir un score de 100 % sur les appareils de bureau, et le problème de blocage du rendu a été résolu dans les scores mobiles et de bureau.

Méthode 2 : Corrigez les scripts et CSS bloquant le rendu avec Autoptimize

Pour cette méthode, nous utiliserons une extension distincte conçue spécifiquement pour améliorer la distribution des fichiers CSS et JS de votre site. Bien que cette extension fasse le travail, elle n’a pas les autres fonctionnalités puissantes dont dispose WP Rocket.

La première chose à faire est d’installer et d’activer Autoptimize, une extension gratuite pour accélérer les performances du site. Pour plus de détails, consultez notre guide étape par étape sur l’installation d’une extension WordPress.

Une fois activé, vous devez vous rendre sur la page Réglages  » Autoptimiser pour configurer les paramètres de l’extension.

Tout d’abord, vous devez cocher la case située à côté de « Optimiser le code JavaScript » dans le bloc des options JavaScript. Confirmez que l’option « Agréger les fichiers JS » n’est pas cochée.

Ensuite, défilez vers le bas jusqu’à la boîte d’options CSS et cochez l’option « Optimiser le code CSS ».

Confirmez que l’option « Agréger les fichiers CSS » n’est pas cochée.

Vous pouvez maintenant cliquer sur le bouton « Enregistrer les modifications et vider le cache » pour stocker vos réglages.

Allez-y et testez votre site avec l’outil PageSpeed Insights. Sur notre site de démonstration, nous avons pu corriger le problème de blocage du rendu avec ces réglages de base.

Si des scripts bloquent encore le rendu, vous pouvez revenir à la page des paramètres du plugin et revoir les paramètres des options JavaScript et CSS.

Par exemple, vous pouvez autoriser l’extension à inclure des JS en ligne et retirer les scripts qui sont exclus par défaut, comme seal.js ou jquery.js. Ensuite, il vous suffit de cliquer sur le bouton  » Enregistrer les modifications et vider le cache  » pour enregistrer vos modifications et vider le cache de l’extension.

Une fois que vous avez terminé, allez-y et vérifiez à nouveau votre site avec l’outil PageSpeed Insights.

Comment fonctionne Autoptimize ?

Autoptimize regroupe tous les fichiers JavaScript et CSS en file d’attente. Ensuite, il crée des fichiers CSS et JavaScript minifiés et sert les copies mises en cache à votre site en mode asynchrone ou différé.

Cela vous permet de corriger le problème des scripts et des styles bloquant le rendu. Veuillez toutefois garder à l’esprit qu’elle peut également affecter les performances ou l’apparence de votre site.

Que faire si JavaScript et CSS bloquant le rendu existent toujours ?

Selon la manière dont les extensions et votre thème WordPress utilisent JavaScript et CSS, il peut être difficile de corriger complètement tous les problèmes de JavaScript et CSS bloquant le rendu.

Bien que les outils ci-dessus puissent vous aider, vos extensions peuvent avoir besoin de certains scripts à un niveau de priorité différent pour fonctionner correctement. Dans ce cas, les solutions ci-dessus peuvent briser la fonctionnalité de ces extensions, ou elles pourraient se comporter de manière inattendue.

Au lieu d’essayer d’éliminer complètement les problèmes de blocage du rendu, nous vous recommandons d’adopter d’autres approches pour accélérer votre site web. Par exemple, vous pouvez utiliser un service CDN pour servir vos fichiers JavaScript et CSS statiques et réduire le temps de chargement.

Vous pouvez lire notre guide ultime pour améliorer la vitesse et les performances de WordPress pour plus d’informations.

Nous espérons que cet article vous a aidé à apprendre comment réparer les JavaScript et CSS bloquant le rendu dans WordPress. Vous pouvez également consulter notre article sur la façon dont WPBeginner augmente la vitesse de chargement des pages avec 6 astuces et notre comparaison des meilleurs hébergeurs WordPress infogérés.

Si vous avez aimé cet article, veuillez alors vous abonner à notre chaîne YouTube pour obtenir des tutoriels vidéo sur WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.