JavaScript et CSS bloquant le rendu dans WordPress: 5 plugins pour y remédier

Il n'y a pas si longtemps, Google a annoncé que les sites Web prenant plus de trois secondes à charger n'étaient pas optimisés pour le référencement.

À l'ère d'Internet et du marketing numérique, vous devez disposer du site Web le plus rapide si vous voulez rivaliser efficacement avec des milliers de rivaux dans le monde entier. Il ne fait aucun doute qu'un site Web plus rapide a de meilleures chances d'attirer des visiteurs et d'augmenter leur engagement dans leur contenu.

L'exécution d'un site Web WordPress signifie un nombre important de scripts qui s'exécutent en même temps pour rendre votre site accessible.

Cependant, tous ces éléments ne sont pas toujours essentiels à charger. Si vous avez déjà vérifié les performances de votre site Web avec Google PageSpeed ​​Insights, vous avez probablement rencontré l'option JavaScript et CSS bloquant le rendu qui a un impact sur sa vitesse.

Aujourd'hui, nous allons parler de ces fichiers superflus et vous éclairer sur les façons dont vous pouvez les supprimer pour améliorer votre site.

 

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

En résumé, JavaScript et CSS bloquant le rendu sont une série de feuilles de style et de scripts nécessaires pour s'exécuter entièrement avant qu'un site ne se charge et ne devienne visible.

Les thèmes et plugins que vous installez sur votre site Web WordPress ajoutent beaucoup de ces fichiers à la section frontale de votre site Web. Et comme vous l'avez peut-être deviné, certains d'entre eux ralentissent le temps de chargement de la page et empêchent le rendu de vos pages.

Lorsqu'un visiteur du site Web ouvre votre site Web, le navigateur Internet charge d'abord les fichiers JavaScript et CSS nécessaires avant le code HTML.

Il s'agit d'une procédure ordinaire puisqu'une page sans ces éléments essentiels sera inutilisable. Le problème est que le navigateur Web ne peut pas afficher la page avant que ces fichiers ne soient complètement chargés.

L'astuce ici est que vous pouvez reporter le chargement de certains scripts sans causer de problèmes pour ce que les visiteurs voient lors de l'ouverture d'une de vos pages.

Les propriétaires de sites Web peuvent apporter des modifications à leur site pour empêcher les navigateurs Web de charger des codes en dehors de ce qui est nécessaire pour la partie supérieure de la page qu'un utilisateur voit immédiatement.

En d'autres termes, les navigateurs ne chargent que les fichiers essentiels de cette section avant qu'un utilisateur ne fasse défiler la page. Cette zone de pages Web s'appelle ATF, qui signifie Above the Fold. D'autres parties qui obligent les utilisateurs à faire défiler vers le bas pour pouvoir voir sont la section non-ATF.

Par conséquent, si votre site Web charge les codes JavaScript et CSS liés aux sections non ATF, le chargement des pages prend plus de temps. Et c'est pourquoi Google essaie de vous dire d'arrêter d'exécuter les ressources inutiles dans les codes de votre site Web.

 

Trouver JavaScript et CSS bloquant le rendu

Le moyen le plus simple de découvrir ce problème consiste à effectuer un test de vitesse à l'aide de Google PageSpeed ​​Insights. Une fois que vous avez visité la page, il vous suffit de saisir votre adresse URL dans le champ requis, puis de cliquer sur le bouton « Analyser ».

Si vous rencontrez ce problème sur la page, vous verrez une suggestion vous indiquant d'éliminer le JavaScript et le CSS bloquant le rendu dans le contenu au-dessus de la ligne de flottaison.

Il vaudrait mieux que vous n'oubliiez pas que la plupart score de sites Web quelque part entre 70 et 90, et même les plus performants atteignent rarement un nombre proche de 100. Vous ne devriez donc jamais forcer votre site à atteindre 100. Faites tout ce que vous pouvez pour obtenir le score le plus élevé sans affecter l'expérience utilisateur négativement.

Selon le thème et les outils que vous utilisez sur votre site, certains scripts sont indispensable pour une UX parfaite vous êtes censé offrir à votre public. Par conséquent, il est totalement imprudent de les supprimer pour tenter d'atteindre un score un peu plus élevé sur la page de résultats de cet outil Google.

 

Correction de JavaScript et CSS bloquant le rendu

Il existe de nombreuses stratégies pour éliminer le JavaScript bloquant le rendu. Les principales méthodes sont Async et Defer. La première méthode permet au navigateur de l'utilisateur de télécharger le JavaScript tout en analysant d'autres parties HTML.

Bien qu'il n'arrête pas complètement l'analyse pendant le téléchargement du fichier, le Analyseur HTML s'interrompt pour exécuter le script lorsqu'il se télécharge. D'autre part, l'approche Defer permet au navigateur de télécharger le JavaScript tout en analysant d'autres parties HTML et n'exécute pas le script tant que l'analyse HTML n'est pas terminée.

L'élimination du CSS bloquant le rendu est plus difficile car vous pouvez retarder les codes nécessaires pour charger le contenu ATF. La procédure est un peu compliquée et nécessite une bonne compréhension du développement web.

Néanmoins, nous nous adressons aux utilisateurs moyens qui gèrent leur site Web par eux-mêmes.

Nous savons tous que WordPress est un système modulaire qui permet aux utilisateurs moyens de tout modifier sans écrire une seule ligne de code. La résolution de ce problème est également la même et vous pouvez rapidement résoudre le problème en installant le plugin approprié.

 

Meilleurs plugins WordPress pour corriger JavaScript et CSS bloquant le rendu

Dans les paragraphes suivants, nous présenterons cinq plugins WordPress les plus performants qui vous aident à résoudre ce problème le plus profondément.

Prudence: Avant d'utiliser l'un des outils suivants, assurez-vous de sauvegarder votre site Web pour éviter toute perte probable de données.

 

Autoptimize

Les Autoptimize plugin est explicitement conçu pour résoudre les problèmes suggérés par les outils d'analyse de site Web tels que Google PageSpeed ​​Insights. Il améliore la livraison des fichiers JavaScript et CSS sans trop se concentrer sur les autres aspects des performances du site Web.

Si vous recherchez des fonctionnalités d'optimisation de base, ce plugin vous donnera ce dont vous avez besoin. Une bonne partie de cet outil est qu'il convertit les images de votre site Web au format WebP optimisé.

Une fois que vous avez installé et activé Autoptimize, vous devez cocher les cases des options "Optimiser le code JavaScript" et "Optimiser le code CSS" trouvées dans les paramètres du plugin. Attention à ne pas cocher les cases en dessous de ces deux options qui agrègent les fichiers CSS et script.

Bien que ce plugin soit disponible gratuitement, vous pouvez également acheter des packages premium qui vous aident à configurer votre site Web.

 

WP Rocket

WP Rocket est un nom bien connu parmi les outils d'optimisation WordPress qui vous assiste dans différents aspects tels que la modification JavaScript et CSS, les paramètres de chargement paresseux. Le processus de configuration de WP Rocket est assez simple, mais vous aurez peut-être du mal à comprendre comment les choses se font sur l'interface.

Il est prêt à l'emploi et applique les paramètres optimaux sur votre site Web immédiatement après l'installation. Compte tenu de l'inévitabilité des dysfonctionnements du site Web dus aux modifications de script, le plugin n'active pas les paramètres JavaScript et CSS de blocage du rendu par défaut.

Mais vous pouvez facilement activer cette fonctionnalité en vous rendant sur les paramètres du plugin et en recherchant les options associées dans les sections "Fichiers CSS" et "Fichiers JavaScript".

Le plugin principal coûte 49 $ par an, avec un an de support également. De plus, vous pouvez trouver plusieurs suppléments gratuits pour le plugin de base sur WordPress, aussi.

 

LapinChargeur

LapinChargeur est un plugin d'optimisation des performances WordPress de pointe conçu pour rendre un site Web plus rapide, plus fluide et plus efficace.

Semblable au célèbre WP Rocket, RabbitLoader élève non seulement les performances de votre site vers de nouveaux sommets, mais introduit également des fonctionnalités innovantes qui le distinguent des autres joueurs du jeu.

Magie de mise en cache : RabbitLoader va encore plus loin en proposant un système de mise en cache dynamique qui s'adapte en temps réel aux modifications sur votre site, garantissant ainsi que vos visiteurs voient toujours le contenu le plus récent sans sacrifier la vitesse.

Optimisation des images : Les images peuvent ralentir considérablement un site Web, mais la fonction d'optimisation d'image de RabbitLoader change la donne. Il compresse et redimensionne automatiquement les images à une taille optimale sans compromettre la qualité, garantissant ainsi un chargement rapide de votre site sans sacrifier l'attrait visuel.

Chargement paresseux: WP Rocket et RabbitLoader proposent tous deux un chargement paresseux pour les images et les iframes, mais RabbitLoader va plus loin en proposant un chargement JavaScript différé.

Compatibilité: RabbitLoader est conçu pour fonctionner parfaitement avec un large éventail de thèmes et de plugins WordPress, tout comme WP Rocket. Que vous ayez un simple blog ou un site Web de commerce électronique complexe, RabbitLoader est conçu pour améliorer les performances de votre site sans conflits.

 

W3 Total Cache

W3 Total Cache est un amplificateur de performances robuste qui gère non seulement les problèmes de mise en cache, mais également les problèmes causés par les scripts et les feuilles de style.

Vous pouvez facilement supprimer le JavaScript et le CSS qui bloquent le rendu en activant d'abord l'option Minify dans les paramètres du plugin et en la définissant sur le mode manuel.

Ensuite, vous devez cliquer sur l'onglet « Éliminer les ressources bloquant le rendu » et copier l'adresse complète du lien des fichiers nécessaires pour bloquer les scripts et les feuilles de style. Vous pouvez maintenant utiliser ces liens et les saisir dans la 'section JS' du Performances>Réduire languette.

W3 Total Cache compte plus d'un million d'installations actives et vous pouvez le télécharger gratuitement sur votre site à partir du site Web WordPress.org.

 

Pack accélérateur de vitesse

Pack accélérateur de vitesse est un outil fiable pour optimiser les feuilles de style, les scripts JavaScript, le chargement paresseux et la suppression de l'encombrement. L'équipe de développeurs met continuellement à jour ce plugin pour le tenir à jour avec les dernières mises à jour et mesures de sécurité.

Si vous vendez des produits et services en ligne, le Optimisation spécifique à WooCommerce Les fonctionnalités du Speed ​​Booster Pack vous aideront beaucoup à augmenter la visibilité de votre magasin sur Internet.

Vous pouvez rapidement corriger le JavaScript et le CSS qui bloquent le rendu sur votre site Web WordPress en cliquant sur l'onglet « Avancé » dans le menu Speed ​​Booster Pack de votre panneau d'administration.

Pour JavaScript, activez les options 'Déplacer les scripts vers le pied de page' et 'Différer l'analyse des fichiers JavaScript'. Ensuite, rendez-vous dans le menu « Optimisation CSS » et choisissez parmi les options disponibles pour améliorer les performances de votre site.

Speed ​​Booster Pack est une solution gratuite disponible sur le site WordPress.org.

 

Optimiser JCH

Optimiser JCH est le dernier élément de cette liste de plugins suggérés qui est équipé d'outils utiles pour accélérer le chargement des pages. Par exemple, cela vous aide à réduire le nombre de requêtes HTTP nécessaires pour charger vos pages et, en même temps, à réduire la taille de ces pages.

Générateur de Sprite est une autre fonctionnalité intéressante disponible dans ce plugin qui réduit le nombre de requêtes HTTP pour charger les images d'arrière-plan.

En utilisant JCH Optimize, vous pouvez supprimer le JavaScript et le CSS qui bloquent le rendu si vous passez à un plan premium. Il vous suffit d'activer les options « Premium » ou « Optimum » dans la section « Paramètres automatiques ». Les paramètres de livraison CSS sont également disponibles uniquement dans la version Pro.

Vous pouvez installer ce plugin gratuitement à partir de WordPress.org, mais vous devez acheter un forfait premium pour libérer tout son potentiel. Les plans tarifaires commencent à partir de 29 $ pour six mois et atteignent 99 $ pour un accès à vie.

 

Résumé

La vitesse de chargement du site Web est l'un des éléments les plus critiques pour attirer, engager et fidéliser le public. Vous devez lui accorder une priorité élevée lors de l'optimisation de votre site Web pour les moteurs de recherche et utiliser l'outil Google PageSpeed ​​Insights pour mesurer vos performances dans ce domaine.

L'élément JavaScript et CSS bloquant le rendu est l'une des suggestions les plus courantes que vous pourriez voir lors de l'utilisation du puissant outil de Google. Vous pouvez facilement résoudre ce problème en installant l'un des cinq plugins que nous avons présentés dans cet article et accélérer la vitesse de chargement de vos pages en grande partie.

Nous espérons que vous trouverez ce tutoriel utile et que vous profiterez d'un site Web à chargement rapide pour les meilleurs résultats possibles.