Comment corriger le JavaScript et le CSS bloquant le rendu dans WordPress

Rencontrer des problèmes avec le JavaScript et le CSS bloquant le rendu sur votre site WordPress peut être frustrant. Ces problèmes peuvent ralentir votre site Web et affecter ses performances. Un site lent peut éloigner les visiteurs et impacter votre classement dans les moteurs de recherche.

Lorsque vous vérifiez votre site Web sur Google PageSpeed Insights, vous pourriez voir une suggestion d'éliminer ces ressources bloquant le rendu. Malheureusement, l'outil ne fournit pas d'instructions claires sur la façon de résoudre ce problème dans WordPress.

La bonne nouvelle est qu'il existe des outils qui peuvent rendre la correction du JavaScript et du CSS bloquant le rendu moins compliquée qu'il n'y paraît. Vous pouvez utiliser un plugin de mise en cache comme WP Rocket ou Autoptimize pour optimiser votre site en minifiant et en différant les scripts, ce qui réduit les temps de chargement et améliore les scores PageSpeed.

Dans cet article, nous vous guiderons à travers les étapes pour résoudre ces problèmes sur votre site WordPress.

Qu'est-ce que le JavaScript et le CSS bloquant le rendu ?

Le JavaScript et le CSS bloquant le rendu sont des fichiers qui empêchent un site Web d'afficher une page Web avant de charger ces fichiers.

Chaque site Web WordPress a un thème et des plugins qui ajoutent des fichiers JavaScript et CSS à l'interface de votre site Web.

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 d'un utilisateur devra charger ces scripts et CSS avant de charger le reste du HTML de la page. Cela signifie que les utilisateurs ayant une connexion plus lente doivent 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 de site Web WordPress qui essaient d'obtenir un score Google PageSpeed de 100 devront résoudre ce problème pour atteindre ce score parfait.

Qu'est-ce qu'un score Google PageSpeed ?

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

Il vous donne un score basé sur le nombre d'audits que votre site réussit.

La plupart des sites Web obtiennent un score compris entre 50 et 70. Cependant, certains propriétaires de sites Web se sentent obligés d'atteindre 100 (le score le plus élevé qu'une page puisse obtenir).

Avez-vous vraiment besoin du score Google PageSpeed "100" parfait ?

L'objectif de Google PageSpeed Insights est de vous fournir des directives pour améliorer la vitesse et les performances de votre site. Cela dit, vous n'êtes pas obligé de suivre ces règles à la lettre.

N'oubliez pas que la vitesse n'est qu'une des nombreuses métriques d'optimisation pour les moteurs de recherche (SEO) de site Web qui aident Google à déterminer comment classer votre site. La vitesse est si importante car elle améliore l'expérience utilisateur sur votre site.

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

Ensuite, votre objectif devrait être de créer un site web rapide qui offre une excellente expérience utilisateur.

Nous vous recommandons d'utiliser les règles de Google PageSpeed comme suggestions. Si vous pouvez les mettre en œuvre facilement sans gâcher l'expérience utilisateur, c'est excellent. Sinon, vous devriez essayer de faire autant que possible, puis ne vous inquiétez pas du reste.

Dans cette optique, nous allons examiner ce que vous pouvez faire pour corriger le JavaScript et le CSS bloquant le rendu dans WordPress. Nous aborderons 2 méthodes qui élimineront les ressources bloquant le rendu dans WordPress. Vous pouvez choisir celle qui convient le mieux à votre site web :

• Méthode 1 : Corriger les scripts et le CSS bloquant le rendu avec WP Rocket
• Méthode 2 : Corriger les scripts et le CSS bloquant le rendu avec Autoptimize
• Que faire si le JavaScript et le CSS bloquant le rendu existent toujours

Plongeons et faisons fonctionner votre site sans problème !

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

Pour cette méthode, nous utiliserons le plugin WP Rocket.

C'est le meilleur plugin de mise en cache et d'optimisation WordPress du marché, et il vous permet d'améliorer rapidement les performances de votre site Web sans aucune compétence technique ni configuration compliquée.

Tout d'abord, vous devez installer et activer le plugin WP Rocket. Pour plus de détails, vous pouvez consulter notre guide étape par étape sur comment installer un plugin WordPress.

WP Rocket fonctionne dès sa sortie de la boîte : il activera la mise en cache avec des paramètres optimaux pour votre site Web. Vous pouvez en apprendre davantage à ce sujet dans notre guide complet sur la façon d'installer et de configurer correctement WP Rocket dans WordPress : comment installer et configurer correctement WP Rocket dans WordPress.

Par défaut, il n'active pas JavaScript et les options d'optimisation CSS. Ces optimisations peuvent potentiellement affecter l'apparence de votre site web ou certaines fonctionnalités, c'est pourquoi le plugin vous permet d'activer ces paramètres de manière optionnelle.

Pour ce faire, vous devez visiter la page Paramètres » WP Rocket et passer à l'onglet « Optimisation des fichiers ».

À partir de là, faites simplement défiler jusqu'à la section « Fichiers CSS » et cochez les cases à côté de « Minifier le CSS », « Combiner les fichiers CSS » et « Optimiser la livraison du CSS ».

Pour le paramètre « Optimiser la livraison du CSS », WP Rocket recommande de choisir la méthode « Supprimer le CSS inutilisé ».

En plus d'offrir les meilleures performances, cela peut aider à réduire la taille des pages et les requêtes HTTP.

Ensuite, vous devez faire 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 les fichiers JavaScript comme vous l'avez fait pour le CSS.

Vous pouvez également empêcher WordPress de charger le fichier jQuery Migrate. Ce script est chargé pour assurer la compatibilité des plugins et thèmes utilisant d'anciennes versions de jQuery.

La plupart des sites web n'ont pas besoin de ce fichier, mais vous voudrez quand même vérifier votre site pour vous assurer que sa suppression n'affecte pas votre thème ou vos plugins.

Ensuite, faisons défiler un peu plus bas et cochons les cases à côté des options « Charger le JavaScript en différé » et « Mode sécurisé pour 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 qui l'utilisent peut-être en ligne. Vous pouvez laisser cette option décochée si vous êtes certain que votre thème n'utilise pas jQuery en ligne quelque part.

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

Après cela, vous voudrez peut-être aussi vider le cache dans WP Rocket avant de tester à nouveau votre site web 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 : Corriger les scripts et le CSS bloquant le rendu avec Autoptimize

Pour cette méthode, nous utiliserons un plugin séparé, spécialement conçu pour améliorer la livraison des fichiers CSS et JS de votre site web. Bien que ce plugin fasse le travail, il ne possède pas les autres fonctionnalités puissantes que WP Rocket a.

La première chose à faire est d'installer et d'activer Autoptimize, un plugin gratuit pour accélérer les performances du site web. Si vous avez besoin d'aide, n'hésitez pas à consulter notre guide étape par étape sur comment installer un plugin WordPress.

Après l'activation, vous devez vous rendre dans Réglages » Autoptimize pour configurer les paramètres du plugin.

Tout d'abord, cochons la case à côté de 'Optimiser le code JavaScript' dans le bloc 'Options JavaScript'. Ici, vous devrez vous assurer que l'option 'Agrégation des fichiers JS' est décochée.

Ensuite, faites défiler jusqu'à la boîte 'Options CSS' et cochez l'option 'Optimiser le code CSS'.

Assurez-vous simplement que l'option 'Agrégation des fichiers CSS' est décochée.

Vous pouvez maintenant cliquer sur le bouton 'Enregistrer les modifications et vider le cache' pour sauvegarder vos paramètres.

Testez votre site web avec l'outil PageSpeed Insights. Avec ces réglages de base, nous avons résolu avec succès le problème de blocage du rendu sur notre site de démonstration.

S'il y a encore des scripts bloquant le rendu, vous pouvez revenir à la page des paramètres du plugin et examiner les options sous JavaScript et CSS.

Par exemple, vous pouvez autoriser le plugin à inclure du JS en ligne et supprimer les scripts exclus par défaut, tels que seal.js ou jquery.js. Ensuite, cliquez simplement sur le bouton 'Enregistrer les modifications et vider le cache' pour sauvegarder vos modifications et vider le cache du plugin.

Une fois que vous avez terminé, vérifiez à nouveau votre site web avec l'outil PageSpeed Insights.

Comment fonctionne Autoptimize ?

Autoptimize agrège tous les scripts et styles enqueued. Ensuite, il crée des fichiers CSS et JavaScript minifiés et sert des copies mises en cache à votre site web en mode asynchrone ou différé.

Cela vous permet de résoudre le problème des scripts et styles bloquant le rendu. Cependant, gardez à l'esprit que cela peut également affecter les performances ou l'apparence de votre site web.

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

Selon la manière dont les plugins et votre thème WordPress utilisent JavaScript et CSS, il peut être difficile de résoudre complètement tous les problèmes de scripts et de styles bloquant le rendu.

Bien que les outils ci-dessus puissent aider, vos plugins peuvent nécessiter certains scripts pour fonctionner correctement à un niveau de priorité différent. Dans ce cas, les solutions ci-dessus peuvent casser la fonctionnalité de tels plugins ou les faire se comporter de manière inattendue.

Au lieu d'éliminer complètement les problèmes de blocage du rendu, nous recommandons d'adopter des approches alternatives 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 corriger le JavaScript et le CSS bloquant le rendu dans WordPress. Vous voudrez peut-être aussi consulter notre article sur comment corriger facilement l'erreur « Ce site est inaccessible » et notre liste d'experts des erreurs WordPress les plus courantes et comment les corriger.

Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.