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 :
- Que sont les ressources qui bloquent le rendu en premier lieu ?
- 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 :
- Quelles sont les ressources qui bloquent le rendu et pourquoi elles posent problème
- Comment remédier au blocage des ressources de rendu en général
- Comment utiliser des extensions gratuites ou payantes pour résoudre le problème sur WordPress
Vous préférez regarder la version vidéo
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 :
- Méta d’en-tête
- Coolfooter.js
- HTML pour votre contenu au-dessus du pli. C’est tout le contenu qu’un visiteur voit immédiatement (avant qu’il ne commence à interagir avec la page)
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 :
- CSS
- JavaScript
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 :
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 :
- Async – permet à l’analyseur HTML (par exemple, le navigateur d’un visiteur) de télécharger le JavaScript tout en analysant le reste du HTML. Autrement dit, il ne s’arrête pas complètement pendant le téléchargement du fichier. Cependant, il mettra en pause l’analyseur HTML pour exécuter le script une fois qu’il aura été téléchargé.
- Defer – permet à l’analyseur HTML de télécharger le JavaScript pendant l’analyse du reste du HTML et attend l’exécution du script jusqu’à ce que l’analyse du HTML soit terminée.
Cette illustration de Growing with the Web montre bien la différence :
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 :
- Identifier les styles qui sont nécessaires pour rendre un contenu supérieur à la moyenne et fournir ces styles en ligne avec le HTML.
- Utiliser l’attribut media sur les éléments de lien qui récupèrent les fichiers CSS pour identifier les ressources CSS qui sont conditionnelles, c’est-à-dire uniquement nécessaires pour des dispositifs ou des situations spécifiques.
- Les ressources CSS restantes devraient être chargées de manière asynchrone, ce qui se fait généralement en les ajoutant avec du JavaScript différé ou asynchrone. Pour être honnête, nous sommes vraiment dépassés par les événements, n’est-ce pas ? C’est sans aucun doute le territoire des développeurs front-end. Ce qui est très bien si vous êtes un développeur de première qualité, mais la plupart d’entre nous ne le sont pas. La bonne nouvelle est que cet article concerne WordPress, et vous pouvez éliminer ou du moins réduire considérablement le nombre de ressources JS et CSS bloquant le rendu et affectant votre site avec des bonnes extensions.
Pour un autre moyen rapide et facile de stimuler votre optimisation globale, pensez à minifier votre code. Kinsta a intégré une fonction de minification du code directement dans le tableau de bord MyKinsta, permettant aux clients d’activer la minification automatique de CSS et JavaScript d’un simple clic.
Si vous ne parvenez pas à localiser la fonction dans votre tableau de bord, consultez simplement notre vidéo Comment activer la minification dans MyKinsta.
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 :
- Autoptimiser + Async JavaScript (gratuit)
- WP Rocket (payant)
À titre de référence, voici à quoi ressemble notre site de test avant d’optimiser la diffusion des CSS et des JavaScript :
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…
- Testez votre site non optimisé
- Activez l’une des extensions de cette section
- 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 :
- Cochez la case pour Activer Async JavaScript en haut de la page.
- Choisissez entre Appliquer Async et Appliquer Defer dans la boîte des Réglages rapides.
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 :
- Cochez la case pour Optimiser le code JavaScript
- Cochez la case pour Optimiser le code CSS
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 :
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 :
- Optimiser la livraison du CSS dans la section Fichiers CSS
- Chargez le JavaScript différé sous la section Fichiers JavaScript. Vous pouvez expérimenter la désactivation du Mode sans échec pour jQuery. Mais si vous constatez des problèmes sur l’interface de votre site, vous devrez réactiver le mode sécurisé pour jQuery car c’est lui qui est probablement responsable.
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 :
Et voilà comment éliminer les ressources qui bloquent le rendu sur votre site WordPress !
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 !
Jon est le directeur de l'exploitation chez Kinsta et est impliqué quotidiennement avec les équipes de promotion, de service à la clientèle et de support technique de Kinsta. Jon est un père de famille. Quand il ne pianote pas fébrilement sur les touches de son ordinateur portable, il est généralement en train d'aider l'un de ses enfants à corriger un vélo ou de configurer Netflix pour un enfant d'âge préscolaire impatient.
Laisser un commentaire