Les tests de vitesse que vous effectuez pour optimiser votre site WordPress vous renvoient souvent de nombreuses opportunités d’amélioration. Parmi celles-ci, se trouve la recommandation d’éliminer les ressources qui bloquent le rendu WordPress. Dans cet article, nous allons voir comment procéder pour corriger cet avertissement et accélérer un site.
Certains des liens figurant dans cet article sont des « liens affiliés ». Cela signifie que si vous cliquez sur le lien et réalisez un achat, je recevrai une commission d’affiliation, sans frais supplémentaires pour vous. Si c’est le cas, merci de soutenir ce blog !
1. Que sont les ressources qui bloquent le rendu WordPress
Avant de commencer, il est important de comprendre ce que sont les ressources bloquantes et pourquoi elles sont signalées comme problématiques. Ces ressources sont en réalité les fichiers d’un site qui contiennent du code JavaScript et CSS. Elles permettent au site de fonctionner et de s’afficher correctement.
Néanmoins, elles font partie des principaux éléments susceptibles de ralentir le chargement d’une page. En effet, pour que cette dernière s’affiche dans un navigateur, ces fichiers doivent être chargés, ce qui prend du temps. En toute logique, moins les fichiers sont volumineux et nombreux, plus rapidement ils seront chargés.
1.1 Contenu prioritaire
Pour remédier aux problèmes de vitesse, de nombreuses techniques sont utilisées en parallèle. L’une d’entre elles consiste à charger la partie visible d’une page web en priorité. Ainsi, les utilisateurs accèdent aux premières informations pendant que le reste de la page est chargé. Mais les ressources bloquantes empêchent ce processus parce qu’elles doivent être chargées avant que la partie visible d’une page ne puisse s’afficher. Notez que “partie visible” signifie le contenu qui se trouve au-dessus de la ligne de défilement, aussi appelée ligne de flottaison.
2. Accélérer un site WordPress en éliminant les ressources qui bloquent le rendu
Pour optimiser à la fois la vitesse, mais aussi l’expérience sur votre site, il faut donc éliminer les ressources bloquantes. Des processus différents seront nécessaires pour supprimer ces ressources selon qu’il s’agisse de fichiers JavaScript ou CSS.
2.1 Ressources CSS bloquantes
Les ressources CSS bloquantes devront être revues et parfois transformées pour que le CSS critique puisse être chargé. Le CSS critique comporte le code indispensable à l’affichage du contenu au-dessus de la ligne de défilement.
2.2 Ressources JavaScript bloquantes
Les ressources JavaScript bloquantes, quant à elles, devront être chargées de manière asynchrone. Cette technique permet de différer leur chargement, mais aussi de les charger simultanément avec d’autres fichiers. Par conséquent, leur chargement ne bloque pas le rendu.
3. Comment repérer les ressources qui bloquent le rendu
Pour corriger le problème, il faudra repérer les ressources qui bloquent le rendu. Pour ce faire, commencez par effacer le cache et désactiver votre extension de performance et de cache si vous en utilisez une. Ensuite, effectuez un test de vitesse dans PageSpeed Insights et cliquez sur l’avertissement “éliminez les ressources qui bloquent le rendu” pour découvrir les fichiers responsables.
3.1 Décider de garder ou de supprimer des fichiers
Il est important de déterminer si ces fichiers font partie d’extensions que vous utilisez ou si ce sont des fichiers externes, par exemple. De cette manière, vous pourrez décider s’il est plus intéressant de vous passer entièrement d’une extension que de garder ces fichiers et de les optimiser.
Notez aussi s’il s’agit de fichiers JavaScript ou CSS uniquement. En effet, comme les solutions pour ces deux types de ressources sont différentes, il sera inutile de les mettre toutes les deux en place s’il n’y a qu’un seul type de fichier qui crée le problème.
4. Éliminer les ressources qui bloquent le rendu WordPress
Pour éliminer les ressources qui bloquent le rendu WordPress, il faudra utiliser une extension de performance, voire l’extension de performance et de cache que vous avez peut-être déjà installée. Mais avant de procéder, il est aussi conseillé de supprimer les ressources inutilisées de votre site. En effet, il se peut que les ressources bloquantes ne soient même pas nécessaires sur votre site. Dans ce cas, il vaut mieux les éliminer tout de suite.
4.1 Extensions de performance et de cache
Dans les extensions les plus populaires, comme W3 Total Cache, LiteSpeed Cache, WP Fastest Cache, ou WP Rocket, il y a des options dans les optimisations de page ou de code qui vous permettent de différer le JavaScript et de générer du CSS critique. Pour le JavaScript, je vous recommande de toujours privilégier la méthode “defer” qui est plus efficace que “async”, sauf si elle crée des problèmes sur le site. Par ailleurs, il n’est pas nécessaire d’installer une extension supplémentaire si vous utilisez l’une de celles mentionnées plus haut.
4.2 Autoptimize
Ensuite, pour éliminer les ressources bloquantes, mais qui sont nécessaires sur votre site, vous pouvez utiliser Autoptimize. Cette extension vous permet d’optimiser le JavaScript et le CSS. Rendez-vous dans Réglages > Autoptimize, puis dans l’onglet “JS, CSS & HTML”, cochez la case “Optimiser le code JavaScript”. Vous pourrez ensuite soit cocher “Concaténer les fichiers JS” ou “Ne pas concaténer mais différer”. Je vous recommande de tester les deux options et de vérifier si l’une ou l’autre cause des problèmes sur le site.
Côté CSS, vous pourrez aussi cocher la case “Optimiser le code CSS” ainsi que “Éliminer les CSS qui bloquent le rendu”. Vous pouvez aussi concaténer le CSS pour réduire la taille des fichiers.
4.3 Async JavaScript
Si les ressources qui bloquent le rendu ne sont que des fichiers JavaScript, vous pouvez installer l’extension Async JavaScript. Elle est conçue par la même équipe qui développe Autoptimize et fonctionnera en complément de celle-ci. En effet, elle vous permet de charger les fichiers JavaScript de manière asynchrone en choisissant très précisément les fichiers que vous souhaitez optimiser.
Là aussi, je vous recommande de choisir la méthode “defer”, sauf si elle crée des problèmes. Cette extension vous offre aussi la possibilité de corriger les lacunes d’une autre extension de performance qui n’optimiserait pas tous vos scripts, par exemple.
4.4 CSS critique
Enfin, si les seules ressources qui bloquent le rendu sur votre site sont des fichiers CSS, vous pouvez tout de même utiliser Autoptimize, mais ne configurer que la partie dédiée à l’optimisation des fichiers CSS.
5. Conclusion
Éliminer les ressources qui bloquent le rendu WordPress ne nécessite bien souvent que de paramétrer une extension de performance correctement. Choisissez en priorité celle que vous utilisez déjà. Sinon, configurez Autoptimize en partie ou en entier selon le type de ressources bloquantes qui vous posent problème. En plus d’améliorer votre score dans les outils de test de vitesse, vous offrirez aussi une meilleure expérience à vos utilisateurs et vos utilisatrices.
Est-ce qu’il n’y aurait pas une façon d’éliminer ces ressources sans l’usage de plugin?
Bonjour, c’est toujours possible, mais plus compliqué. Il faut ajouter les attributs
async
oudefer
au chargement des fichiers JavaScript et optimiser le chargement des fichiers CSS.Ces ressources expliquent comment procéder : https://developers.google.com/speed/docs/insights/BlockingJS?hl=fr
https://web.dev/critical-rendering-path-render-blocking-css/
https://web.dev/defer-non-critical-css/