Voulez-vous éliminer le JavaScript et le CSS bloquant le rendu dans WordPress?
Si vous testez votre site Web sur Google PageSpeed insights, vous verrez probablement une suggestion pour éliminer les scripts de blocage de rendu et les CSS. Cependant, il ne fournit aucun détail sur la façon de le faire sur votre site WordPress.
Dans cet article, nous allons vous montrer comment résoudre facilement les problèmes JavaScript et CSS bloquant le rendu dans WordPress pour améliorer votre score Google PageSpeed.
Qu’est-ce que JavaScript et CSS bloquant 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 de charger ces fichiers.
Chaque site WordPress a un thème et des plugins qui ajoutent des fichiers JavaScript et CSS au front-end de votre site Web. Ces scripts peuvent augmenter le temps de chargement de la page 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 sur la page. Cela signifie que les utilisateurs sur 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 de sites Web qui tentent d’atteindre le score Google PageSpeed de 100 devront résoudre ce problème pour atteindre ce score parfait.
Qu’est-ce que le 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 Web. Cet outil teste votre site Web par rapport aux directives de Google en matière de vitesse et propose des suggestions pour améliorer le temps de chargement des pages de votre site.
Il vous montre un score basé sur le nombre de règles que votre site passe. La plupart des sites Web se situent 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 Web. Vous n’êtes pas obligé de suivre strictement ces règles.
N’oubliez pas que la vitesse n’est que l’une des nombreuses mesures de référencement de site Web qui aident Google à déterminer comment classer votre site. La raison pour laquelle la vitesse est si importante est qu’elle améliore l’expérience utilisateur 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 devrait être de créer un site Web rapide offrant une excellente expérience utilisateur.
Lors de la dernière refonte de WPBeginner, nous avons mis l’accent sur la vitesse et l’amélioration de l’expérience utilisateur.
Nous vous recommandons d’utiliser les règles Google Pagespeed comme suggestions, et si vous pouvez les mettre en œuvre facilement sans ruiner l’expérience utilisateur, alors c’est génial. Sinon, vous devriez vous efforcer de faire tout ce que vous pouvez, puis ne vous inquiétez pas du reste.
Cela dit, jetons un coup d’œil à ce que vous pouvez faire pour corriger le JavaScript et le CSS bloquant le rendu dans WordPress.
Nous allons couvrir deux méthodes qui corrigeront le JavaScript et le CSS bloquant le rendu dans WordPress. Vous pouvez choisir celui qui convient le mieux à votre site Web.
1. Correction des scripts de blocage de rendu et du CSS avec WP Rocket
Pour cette méthode, nous utiliserons le plugin WP Rocket. C’est le meilleur plugin de mise en cache WordPress sur le marché et 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, consultez notre guide étape par étape sur la façon d’installer un plugin WordPress.
WP Rocket fonctionne immédiatement et activera la mise en cache avec des paramètres optimaux pour votre site Web. Vous pouvez en savoir plus à ce sujet dans notre guide complet 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 Web ou certaines fonctionnalités, c’est pourquoi le plugin vous permet d’activer ces paramètres en option.
Pour ce faire, vous devez visiter Paramètres »WP Rocket puis passez à l’onglet «Optimisation des fichiers». À partir de là, faites défiler jusqu’à la section Fichiers CSS et cochez les cases à côté des options Réduire le CSS, Combiner les fichiers CSS et Optimiser la livraison CSS.
Remarque: WP Rocket tentera de minimiser tous vos fichiers CSS, de les combiner et de charger uniquement le CSS nécessaire pour la partie visible de votre site Web. Cela pourrait affecter l’apparence de votre site Web, vous devez donc tester minutieusement votre site Web sur plusieurs appareils et tailles d’écran.
Ensuite, vous devez faire défiler jusqu’à la section Fichiers JavaScript. De là, vous pouvez vérifier toutes les options pour une amélioration maximale des performances.
Vous pouvez réduire et combiner des fichiers JavaScript comme vous l’avez fait pour CSS.
Vous pouvez également empêcher WordPress de charger le fichier jQuery Migrate. C’est un script que WordPress charge pour assurer la compatibilité des plugins et des thèmes utilisant les 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 Web pour vous assurer que sa suppression n’affecte pas votre thème ou vos plugins.
Ensuite, faites défiler un peu plus loin et cochez les cases à côté des options «Charger JavaScript différé» et «Mode sans échec pour jQuery».
Ces options retardent le chargement de JavaScripts non essentiels, et le mode sans échec jQuery vous permet de charger jQuery pour les thèmes qui peuvent l’utiliser en ligne. Vous pouvez laisser cette option décochée si vous êtes certain que votre thème n’utilise nulle part jQuery en ligne.
N’oubliez pas de cliquer sur le bouton Enregistrer les modifications pour enregistrer vos paramètres.
Après cela, vous pouvez également vider le cache dans WP Rocket avant de tester à nouveau votre site Web avec Google Page Speed Insights.
Sur notre site de test, nous avons pu obtenir un score de 100% sur le bureau et le problème de blocage du rendu a été résolu dans les scores sur mobile et sur ordinateur.
2. Correction des scripts de blocage de rendu et CSS 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 de WP Rocket.
La première chose à faire est d’installer et d’activer le Optimiser automatiquement brancher. Pour plus de détails, consultez notre guide étape par étape sur la façon d’installer un plugin WordPress.
Lors de l’activation, vous devez visiter le Paramètres »Optimisation automatique page pour configurer les paramètres du plugin.
Tout d’abord, vous devez cocher la case à côté de l’option « Optimiser le code JavaScript » sous le bloc Options JavaScript. Assurez-vous que l’option «Agréger les fichiers JS» n’est pas cochée.
Ensuite, faites défiler jusqu’à la case Options CSS et cochez l’option ‘Optimiser le code CSS’. Assurez-vous 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 enregistrer vos paramètres.
Allez-y et testez votre site Web avec l’outil Page Speed Insights. Sur notre site de démonstration, nous avons pu résoudre le problème de blocage du rendu avec ces paramètres de base.
S’il existe encore des scripts de blocage de rendu, vous devez revenir à la page des paramètres du plugin et passer en revue les options sous les options JavaScript et CSS.
Par exemple, vous pouvez autoriser le plugin à inclure le JS en ligne et à supprimer les scripts qui sont exclus par défaut comme seal.js ou jquery.js.
Cliquez sur le bouton ‘Enregistrer les modifications et vider le cache’ pour enregistrer vos modifications et vider le cache du plugin.
Une fois que vous avez terminé, continuez et vérifiez à nouveau votre site Web avec l’outil Page Speed.
Comment ça marche?
Autoptimize regroupe tous les JavaScript et CSS mis en file d’attente. Après cela, il crée des fichiers CSS et JavaScripts minifiés et sert des copies mises en cache sur votre site Web comme asynchrones ou différées.
Cela vous permet de résoudre le problème des scripts et des styles de blocage du rendu. Cependant, gardez à l’esprit que cela peut également affecter les performances ou l’apparence de votre site Web.
Dépannage
En fonction de la façon dont les plugins et votre thème WordPress utilisent JavaScript et CSS, il peut être assez difficile de résoudre complètement tous les problèmes de blocage du rendu par JavaScript et CSS.
Bien que les outils ci-dessus puissent vous aider, vos plugins peuvent avoir besoin de certains scripts à un niveau de priorité différent pour fonctionner correctement. Dans ce cas, les solutions ci-dessus peuvent interrompre la fonctionnalité de ces plugins ou se comporter de manière inattendue.
Google peut toujours vous montrer certains problèmes tels que l’optimisation de la livraison CSS pour le contenu au-dessus du pli. WP Rocket vous permet de résoudre ce problème en ajoutant manuellement le CSS critique requis pour afficher la zone de pliage ci-dessus de votre thème.
Cependant, il peut être assez difficile de savoir quel code CSS vous devrez afficher au-dessus du contenu du pli.
Nous espérons que cet article vous a aidé à apprendre à résoudre les problèmes JavaScript et CSS bloquant le rendu dans WordPress. Vous pouvez également consulter notre guide ultime sur la façon d’accélérer les performances de WordPress pour les débutants et notre comparaison des sociétés d’hébergement WordPress les mieux gérées.
Si vous avez aimé cet article, veuillez vous abonner à notre Chaîne Youtube pour les didacticiels vidéo WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.
Le message Comment réparer le JavaScript et le CSS bloquant le rendu dans WordPress est apparu en premier sur WPBeginner.
