Si vous avez déjà utilisé votre site WordPress avec Google PageSpeed Insights, Google vous a probablement dit que vous deviez éliminer les ressources qui bloquent le rendu sur votre site WordPress. En fait, c’est peut-être la raison pour laquelle vous lisez cet article en ce moment même.

Cela pose probablement deux questions dans votre esprit :

  1. Que sont les ressources qui bloquent le rendu en premier lieu ?
  2. Comment éliminer les ressources qui bloquent le rendu sur WordPress ?

Dans cet article, nous allons répondre à ces deux questions pour vous. Voici tout ce que nous allons couvrir dans cet article :

Que signifie « éliminer les ressources qui bloquent le rendu » ?

Afin de comprendre ce que sont les ressources qui bloquent le rendu et pourquoi elles nuisent aux temps de chargement de votre site, nous devons commencer par un examen de base de la façon dont un navigateur web rend une page web.

Lorsqu’un visiteur arrive sur votre site, son navigateur web démarre en haut du code de votre site et le lit. De haut en bas, compris ?

Si, au cours de ce processus, il rencontre un fichier CSS ou JavaScript, il doit arrêter de « lire » en attendant de télécharger et de traiter ce fichier. Le temps qu’il passe en « pause » pour télécharger et analyser ces ressources pourrait être consacré à quelque chose de beaucoup plus productif, comme le chargement de la partie du contenu de votre site web qui est immédiatement visible lorsque quelqu’un arrive sur la page.

Examinons un exemple extrême pour montrer pourquoi cela peut poser problème.

Disons que vous avez cet effet JavaScript sympa dans le pied de page de votre site. Il est alimenté par « coolfooter.js », qui est un script référencé en haut du code de votre site (même si l’effet se trouve dans le pied de page, de sorte que les visiteurs ne le verront pas avant d’avoir fait défiler le pied de page).

Ainsi, une mise en page très approximative du code de votre site pourrait ressembler à quelque chose comme ça :

Et voici pourquoi c’est un problème :

Lorsqu’un visiteur arrive sur votre site, son navigateur commence à lire de haut en bas. Ainsi, avant de pouvoir analyser et rendre le HTML pour le contenu ci-dessus sur votre site, il doit attendre de télécharger et d’analyser le fichier coolfooter.js.

Résultat final ? Il faut plus de temps pour afficher le HTML pour le contenu ci-dessus, ce qui signifie que vos visiteurs percevront votre site comme étant plus lent.

Lorsque Google vous dit d’éliminer les ressources qui bloquent le rendu, il vous dit essentiellement : « hé, ne chargez pas de ressources inutiles en haut du code de votre site parce que cela va faire en sorte que les navigateurs des visiteurs mettent plus de temps à télécharger la partie visible de votre contenu ».

Grâce aux conseils donnés dans cet article, vous pourrez attendre, pour charger certaines ressources CSS et JavaScript, que la partie visible de votre page soit déjà chargée.

Quelles sont les ressources bloquant le rendu ?

Lorsqu’on parle de ressources bloquant le rendu, on parle généralement de :

Il est important de comprendre que tous les fichiers CSS et JavaScript ne bloquent pas le rendu.

Par exemple, il est important de charger votre CSS critique en haut de la page, sinon vos visiteurs pourraient faire l’expérience de ce qu’on appelle un flash de contenu non stylisé (FOUC).

Les images sont-elles des ressources qui bloquent le rendu ?

Non, les images ne bloquent pas le rendu. Il est toujours important d’optimiser vos images pour réduire leur taille, mais vous n’avez pas à vous soucier d’optimiser le chemin de livraison de vos images.

Comment vérifier si votre site web dispose de ressources bloquant le rendu ?

Pour évaluer si votre site WordPress dispose actuellement de ressources de blocage du rendu, vous pouvez utiliser Google PageSpeed Insights.

Il vous suffit de saisir l’URL que vous souhaitez tester. Ensuite, si vous avez un problème avec les ressources qui bloquent le rendu, PageSpeed Insights répertoriera chaque ressource individuelle dans la section Éliminer les ressources qui bloquent le rendu sous la rubrique Opportunités :

Le message « Éliminer les ressources qui bloquent le rendu » dans PageSpeed Insights

Le message « Éliminer les ressources qui bloquent le rendu » dans PageSpeed Insights

Comment éliminer les ressources qui bloquent le rendu ?

Ne vous inquiétez pas, vous n’avez pas à le faire manuellement. Dans la prochaine section, nous parlerons des extensions WordPress qui peuvent vous aider à éliminer les ressources qui bloquent le rendu.

Cependant, il est utile de comprendre ce que ces extensions font en coulisses pour éliminer les ressources qui bloquent le rendu.

Comment éliminer le JavaScript qui bloque le rendu

Il existe plusieurs stratégies différentes pour éliminer le JavaScript qui bloque le rendu. Nous les abordons en détail dans notre article sur la façon de différer l’analyse de JavaScript, mais voici les principales méthodes :

Cette illustration de Growing with the Web montre bien la différence :

JavaScript async vs defer

JavaScript async vs defer

L’avantage de l’utilisation de defer est que vos scripts sont garantis de s’exécuter dans l’ordre où ils apparaissent dans le code.

Async n’utilise pas cette approche, ce qui peut parfois poser des problèmes si vous appliquez async à toutes les ressources JavaScript car cela peut souvent casser des ressources qui dépendent de ressources qui apparaissent plus tôt dans le document. Le problème le plus courant que produit asynch est la casse des ressources jQuery qui tentent de se charger avant que jquery.js n’ait été ajouté au document.

Comment éliminer les CSS qui bloquent le rendu

L’élimination des CSS bloquant le rendu peut être un peu plus délicate car il faut faire attention à ne pas retarder les CSS nécessaires au rendu de contenu supérieur. L’idéal est de :

Comment éliminer les ressources CSS et JavaScript bloquant le rendu avec les extensions WordPress

Pour démontrer comment éliminer les ressources bloquant le rendu sur WordPress, nous avons mis en place un site de test simple qui inclut des CSS et JavaScript bloquant le rendu. Nous vous montrerons ensuite comment utiliser deux solutions différentes d’extensions pour éliminer les CSS et JavaScript bloquant le rendu :

À titre de référence, voici à quoi ressemble notre site de test avant d’optimiser la diffusion des CSS et des JavaScript :

Le message « Éliminer les ressources qui bloquent le rendu » dans PageSpeed Insights

Le message « Éliminer les ressources qui bloquent le rendu » dans PageSpeed Insights

Si vous testez l’efficacité de vos modifications avec Google PageSpeed Insights, sachez que Google met ses résultats en cache pendant plusieurs minutes. En gros, cela signifie que si vous…

  1. Testez votre site non optimisé
  2. Activez l’une des extensions de cette section
  3. Testez à nouveau votre site

…alors vous verrez toujours les résultats pour votre site non optimisé jusqu’à ce que Google réinitialise son cache. Assurez-vous donc d’attendre quelques minutes que Google vide son cache avant de penser que l’extension ne fonctionne pas.

Comment éliminer les ressources bloquant le rendu avec l’extension Autoptimize + Async JavaScript

Autoptimizer et Asynch Javascript sont deux extensions gratuites distinctes provenant du même développeur. Ensemble, elles vous aident à optimiser la diffusion de votre CSS et de votre JavaScript.

Une fois que vous avez installé les deux extensions, allez dans les Réglages → Async JavaScript et :

Comment configurer l’extension JavaScript Async

Comment configurer l’extension JavaScript Async

Si l’option Async pose des problèmes sur votre site, nous vous recommandons d’essayer Defer ou d’exclure jQuery, l’extension vous offre une option pour cela.

Une fois que vous avez configuré l’extension JavaScript Async, allez dans Réglages → Autoptimize et :

Comment configurer l’extension Autoptimize

Comment configurer l’extension Autoptimize

Si vous êtes un utilisateur avancé, vous pouvez jouer avec les réglages d’optimisation JavaScript et CSS supplémentaires, mais la plupart des sites se contenteront des valeurs par défaut.

Après avoir configuré à la fois Autoptimize et Async JavaScript, notre site de test a passé avec succès l’audit « Éliminer les ressources bloquant le rendu » de PageSpeed Insights :

Résultats de PageSpeed Insights avec Autoptimize et Async JavaScript

Résultats de PageSpeed Insights avec Autoptimize et Async JavaScript

Si vous vouliez éliminer encore plus de ces fichiers, vous pourriez utiliser Autoptimize pour aligner manuellement votre CSS critique. Cela nécessite cependant des connaissances en matière de développement, et ce n’est donc pas quelque chose que les non-développeurs devraient essayer.

Vous pouvez également utiliser les extensions séparément si vous le souhaitez. Mais étant donné que les deux extensions proviennent du même développeur et sont conçues pour fonctionner ensemble, la meilleure approche pour la plupart des sites est de les combiner.

Comment éliminer les ressources bloquant le rendu avec WP Rocket

WP Rocket est une extension WordPress de performance et de mise en cache haut de gamme très populaire.

Normalement, nous n’autorisons pas les extensions de mise en cache sur les sites WordPress hébergés chez Kinsta parce que nous nous occupons déjà de la mise en cache pour vous au niveau du serveur via le cache rapide Nginx FastCGI.

Cependant, WP Rocket a une intégration spéciale avec Kinsta qui permet à WP Rocket de jouer gentiment avec votre cache Kinsta. C’est une bonne chose car WP Rocket fait beaucoup plus pour les performances de WordPress que la simple mise en cache, notamment en vous aidant à éliminer les ressources CSS et JavaScript qui bloquent le rendu sur votre site WordPress.

Une fois que vous avez installé et activé WP Rocket, allez à l’onglet Optimisation de fichier. Ensuite, activez ces deux options :

Comment configurer WP Rocket

Comment configurer WP Rocket

Après avoir activé ces deux fonctionnalités, notre site de test a également réussi l’audit « Éliminer les ressources bloquant le rendu » dans PageSpeed Insights. WP Rocket a également réussi à éliminer plus de ressources de blocage de rendu que la configuration Autoptimize / Async JavaScript :

Résultats de PageSpeed Insights avec WP Rocket

Résultats de PageSpeed Insights avec WP Rocket

Et voilà comment éliminer les ressources qui bloquent le rendu sur votre site WordPress !

Vous voulez vous débarrasser des ressources bloquant le rendu dans #WordPress? C’est super facile avec les bonnes extensions... Découvrez comment modifier leurs réglages et rendre votre site plus rapide ! ⚙️🏃‍♀️Click to Tweet

Résumé

Les ressources bloquant le rendu ralentissent le temps de chargement des pages de votre site WordPress en forçant les navigateurs des visiteurs à retarder le rendu des contenus supérieurs au format standard, alors que le navigateur télécharge des fichiers qui ne sont pas nécessaires immédiatement.

Pour aider les visiteurs à charger plus rapidement la partie visible de votre page, vous devriez retarder le chargement des ressources qui ne sont pas immédiatement nécessaires.

Pour éliminer les ressources qui bloquent le rendu sous WordPress, vous pouvez utiliser des extensions.

Pour une solution gratuite, vous pouvez utiliser la combinaison d’Autoptimize et d’Async JavaScript, deux extensions du même développeur.

Si vous êtes prêt à payer, vous pouvez utiliser WP Rocket, qui offre une intégration spéciale avec Kinsta et peut vous aider pour de nombreux autres ajustements des performances de WordPress.

Avez-vous d’autres questions sur la manière d’éliminer les ressources bloquant le rendu sur WordPress ? Faites-le nous savoir dans les commentaires !


Si vous avez aimé cet article, alors vous allez adorer la plateforme d’hébergement WordPress de Kinsta. Accélérez votre site Web et obtenez le support 24/7 de notre équipe de vétérans de WordPress. Notre infrastructure propulsée par Google Cloud met l’accent sur la mise à l’échelle automatique, la performance et la sécurité. Laissez-nous vous montrer la différence de Kinsta ! Découvrez nos plans