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 digital, il est indispensable de posséder un site web ultra-rapide pour rivaliser efficacement avec des milliers de concurrents à travers le monde. Un site rapide a indéniablement plus de chances d'attirer des visiteurs et de susciter leur intérêt pour le 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, le chargement de tous ces éléments n'est pas toujours indispensable. Si vous avez déjà analysé les performances de votre site web avec Google PageSpeed Insights , vous avez probablement rencontré les options JavaScript et CSS bloquant le rendu et impactant sa vitesse.
Aujourd'hui, nous allons parler de ces fichiers superflus et vous expliquer comment 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 normale, car une page dépourvue de ces éléments essentiels sera inutilisable. Le problème est que le navigateur web ne peut pas afficher la page tant que ces fichiers ne sont pas entièrement 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 est plus long. C'est pourquoi Google vous incite à ne plus exécuter de ressources inutiles dans le code de votre site.
Trouver JavaScript et CSS bloquant le rendu
Le moyen le plus simple de déceler ce problème est d'effectuer un test de vitesse avec Google PageSpeed Insights. Une fois sur la page, il vous suffit de saisir son adresse URL dans le champ prévu à cet effet, puis de cliquer sur le bouton « Analyser ».
Si ce problème se produit sur la page, vous verrez une suggestion vous invitant à éliminer les éléments JavaScript et CSS bloquant le rendu dans le contenu visible au-dessus de la ligne de flottaison.
Il est important de se rappeler que la plupart des sites web obtiennent un score entre 70 et 90, et que même les plus performants atteignent rarement un score proche de 100. Il ne faut donc jamais forcer votre site à atteindre 100. Faites votre possible pour obtenir le meilleur score possible sans impacter négativement l'expérience utilisateur.
Selon le thème et les outils utilisés sur votre site, certains scripts sont indispensables pour offrir une expérience utilisateur optimale à vos visiteurs. Par conséquent, il est totalement imprudent de les supprimer dans l'espoir d'obtenir un meilleur score dans les 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 permet au navigateur de l'utilisateur de télécharger le JavaScript pendant qu'il analyse d'autres parties du HTML.
Bien que l'analyse syntaxique ne s'interrompe pas complètement pendant le téléchargement du fichier, l' analyseur HTML fait une pause pour exécuter le script une fois le téléchargement terminé. En revanche, l'approche « Defer » permet au navigateur de télécharger le JavaScript tout en analysant d'autres parties du code HTML et n'exécute le script que lorsque l'analyse du code HTML est 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 eux-mêmes leur site web.
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 vous présenterons cinq plugins WordPress très performants qui vous aideront à résoudre ce problème de manière optimale.
Attention : avant d’utiliser l’un des outils suivants, assurez-vous de sauvegarder votre site web afin d’éviter toute perte de données éventuelle.
Autoptimize
Le plugin Autoptimize est spécifiquement conçu pour résoudre les problèmes signalés par les outils d'analyse de sites web tels que Google PageSpeed Insights. Il améliore la diffusion des fichiers JavaScript et CSS sans trop se concentrer sur d'autres aspects des performances du site.
Si vous recherchez des fonctionnalités d'optimisation de base, ce plugin répondra à vos besoins. L'un de ses atouts majeurs est sa capacité à convertir les images de votre site web au format WebP optimisé.
Une fois Autoptimize installé et activé, cochez les cases « Optimiser le code JavaScript » et « Optimiser le code CSS » dans les paramètres du plugin. Veillez à ne pas cocher les cases situées en dessous, qui regroupent les fichiers CSS et JavaScript.
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 outil d'optimisation WordPress bien connu, qui vous assiste sur différents aspects tels que la modification de JavaScript et de CSS, ainsi que la configuration du chargement différé. L'installation de WP Rocket est assez simple, mais la prise en main de son interface peut s'avérer complexe au premier abord.
Il est opérationnel immédiatement et applique des paramètres optimaux à votre site web dès son installation. Compte tenu des risques de dysfonctionnement liés aux modifications de scripts, le plugin ne désactive pas par défaut les paramètres JavaScript et CSS bloquant le rendu.
Mais vous pouvez facilement activer cette fonctionnalité en accédant aux paramètres du plugin et en recherchant les options correspondantes dans les sections « Fichiers CSS » et « Fichiers JavaScript ».
L'extension principale coûte 49 $ par an et inclut un an de support. De plus, plusieurs extensions gratuites sont disponibles pour cette extension sur WordPress.
LapinChargeur
RabbitLoader est un plugin WordPress de pointe pour l'optimisation des performances, conçu pour rendre un site web plus rapide, plus fluide et plus efficace.
À l'instar du très réputé WP Rocket, RabbitLoader non seulement améliore les performances de votre site, mais introduit également des fonctionnalités innovantes qui le distinguent de ses concurrents.
La magie du cache : RabbitLoader passe à la vitesse supérieure en proposant un système de cache dynamique qui s’adapte en temps réel aux modifications de votre site, garantissant ainsi à vos visiteurs l’accès au contenu le plus récent sans sacrifier la vitesse.
Optimisation des images : Les images peuvent considérablement ralentir un site web, mais la fonctionnalité d’optimisation des images de RabbitLoader change la donne. Elle compresse et redimensionne automatiquement les images à une taille optimale sans compromettre leur qualité, garantissant ainsi un chargement rapide de votre site sans sacrifier son attrait visuel.
Chargement différé : WP Rocket et RabbitLoader proposent tous deux le chargement différé des images et des iframes, mais RabbitLoader va plus loin en proposant le chargement différé de JavaScript.
Compatibilité : RabbitLoader est conçu pour fonctionner parfaitement avec une large gamme de thèmes et d’extensions WordPress, tout comme WP Rocket. Que vous ayez un simple blog ou un site e-commerce complexe, RabbitLoader est conçu pour optimiser les performances de votre site sans conflit.
W3 Total Cache
W3 Total Cache est un outil d'optimisation des performances robuste qui gère non seulement les problèmes de mise en cache, mais aussi ceux causés par les scripts et les feuilles de style.
Vous pouvez facilement supprimer les fichiers JavaScript et CSS bloquant le rendu en activant d'abord l'option Minify dans les paramètres du plugin et en la configurant en mode manuel.
Ensuite, cliquez sur l'onglet « Supprimer les ressources bloquant le rendu » et copiez l'adresse complète des fichiers nécessaires pour les scripts et feuilles de style bloquants. Vous pouvez maintenant utiliser ces liens et les saisir dans la section « JS » de l' onglet Performance > Minification.
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
Speed Booster Pack est un outil fiable pour optimiser les feuilles de style, les fichiers JavaScript, le chargement différé et supprimer les éléments superflus. L'équipe de développement met régulièrement à jour ce plugin afin de garantir sa compatibilité avec les dernières mises à jour et mesures de sécurité.
Si vous vendez des produits et services en ligne, le WooCommerce-optimisation spécifique Les fonctionnalités du Speed Booster Pack vous aideront beaucoup à augmenter la visibilité de votre magasin sur Internet.
Vous pouvez rapidement corriger les problèmes de rendu JavaScript et CSS bloquants sur votre site WordPress en cliquant sur l'onglet « Avancé » du 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, accédez au 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
JCH Optimize est le dernier plugin de cette liste. Il est doté d'outils performants pour accélérer le chargement des pages . Par exemple, il permet de réduire le nombre de requêtes HTTP nécessaires au chargement des pages et, par conséquent, d'en diminuer la taille.
Sprite Generator est une autre fonctionnalité intéressante de ce plugin qui réduit le nombre de requêtes HTTP nécessaires au chargement des images d'arrière-plan.
Avec JCH Optimize, vous pouvez supprimer les fichiers JavaScript et CSS bloquant le rendu en passant à un abonnement premium. Il vous suffit d'activer les options « Premium » ou « Optimum » dans la section « Paramètres automatiques ». Les paramètres de diffusion 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 fréquentes lors de l'utilisation de l'outil puissant de Google. Vous pouvez facilement résoudre ce problème en installant l'un des cinq plugins présentés dans cet article et ainsi accélérer considérablement le chargement de vos pages.
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.
