Comment éliminer les ressources bloquant le rendu ?
-
Table des matières
- Qu’est-ce que les ressources bloquant le rendu ?
- Pourquoi éliminer les ressources bloquant le rendu ?
- Comment identifier les ressources bloquant le rendu sur votre site web ?
- Comment éliminer les ressources bloquant le rendu
- Comment réduire les ressources bloquantes dans WordPress avec Speed Optimizer de SiteGround
- Liste de contrôle pour éliminer les ressources bloquant le rendu
Cet article a été initialement rédigé et publié le 28 mars 2022 par Cal Evans. Il a été mis à jour le 20 mars 2025 pour refléter les dernières évolutions des techniques d’élimination des ressources qui bloquent le rendu.
Les premières pages web étaient construites dans une version simplifiée de XML appelée HTML, caractérisées par un fond blanc avec du texte noir. Si une phrase était soulignée en bleu, vous saviez que vous pouviez cliquer dessus. Si elle était violette, vous saviez que vous aviez déjà cliqué dessus.
La vie était simple.
De nos jours, le code HTML est généralement la plus petite partie d’une page web. Lorsqu’un navigateur demande une page, il obtient le code HTML, mais doit ensuite le séparer et télécharger les autres ressources :
- CSS
- JavaScript
- Images
- Polices de caractères
- …et d’autres fichiers externes nécessaires pour offrir l’expérience utilisateur
Toutes les ressources ne sont pas créées égales. Certaines ressources, lorsqu’elles doivent être chargées, peuvent en fait ralentir l’affichage de la page web.
Ces ressources sont appelées « Ressources bloquant le rendu » et cet article vous montrera quelques tactiques que vous pouvez utiliser pour réduire le nombre de ressources bloquant le rendu sur votre site web et comment les appliquer manuellement ou en utilisant le plugin Speed Optimizer de SiteGround.
Qu’est-ce que les ressources bloquant le rendu ?
« Rendu » est le terme technique pour “affichage”. Dans cet article, lorsque nous parlons de rendu, nous entendons le processus d’affichage de votre site web sur un écran.
Toutes les ressources chargées sur votre site web sont susceptibles de bloquer le rendu. Il s’agit notamment des ressources suivantes :
- Grandes images
- Code JavaScript qui doit être exécuté dans le <head> de votre page
- Feuilles de style CSS volumineuses que votre page ne peut pas afficher tant qu’elles ne sont pas toutes chargées
- Toute ressource provenant d’un autre site qui est plus lente que le vôtre
- Plugins qui ont chacun leurs propres fichiers CSS et JavaScript
En bref, tout ce que vous avez dans votre HTML à charger est potentiellement une ressource bloquant le rendu.
Pourquoi éliminer les ressources bloquant le rendu ?
Lorsqu’un visiteur arrive sur votre site web, son navigateur veut lui montrer la page le plus rapidement possible. Mais s’il y a trop de ressources bloquant le rendu, le navigateur doit freiner et attendre que ces fichiers soient téléchargés et traités avant d’afficher quoi que ce soit d’utile.
Cela crée ce que nous appelons un « first contentful paint lent » – cette pause gênante où les utilisateurs regardent fixement une page blanche ou à moitié chargée. Ce n’est pas l’idéal, n’est-ce pas ?
Voici pourquoi c’est important :
- Meilleure expérience utilisateur : Les pages qui se chargent rapidement donnent une impression de dynamisme et de précision. Une page qui se charge lentement, en revanche, peut frustrer les visiteurs et les faire partir avant même qu’ils ne voient votre contenu.
- Amélioration du SEO : Google et d’autres moteurs de recherche considèrent la vitesse de la page comme un facteur de classement principal. Si vos pages sont lentes à cause des ressources bloquant le rendu, cela nuira à votre position dans les résultats de recherche.
- Conversions plus élevées : Que vous gériez une boutique en ligne, un blog ou un site de portfolio, des pages qui se chargent plus rapidement signifient souvent des taux de conversion plus élevés. Une page réactive aide à maintenir l’engagement des utilisateurs.
- Utilisation plus efficace des ressources : L’élimination des ressources inutiles ou mal optimisées réduit l’utilisation de la bande passante et la charge du serveur, ce qui peut vous faire économiser de l’argent et réduire la pression sur votre environnement d’hébergement.
Avec Interaction to Next Paint (INP) remplaçant First Input Delay (FID) en tant que métrique des core web vitals, il est encore plus important de réduire les ressources bloquant le rendu.
Optimiser la rapidité avec laquelle les utilisateurs peuvent interagir avec votre page améliorera non seulement la performance perçue mais aura également un impact positif sur votre score de web vitals.
En fin de compte, l’objectif de votre site web est de communiquer rapidement et clairement. Les ressources bloquant le rendu entravent cela en retardant le moment où les visiteurs peuvent réellement commencer à interagir avec votre contenu.
Maintenant que vous connaissez le « pourquoi », explorons comment repérer ces éléments ralentisseurs et optimiser le processus de chargement de votre site web.
Comment identifier les ressources bloquant le rendu sur votre site web ?
Il existe de nombreux outils pour vous aider à voir comment votre site web se charge. Nous vous suggérons ces options pour identifier les ressources bloquant le rendu :
Utilisation des outils de développement du navigateur web
C’est l’un des outils qui peut vous montrer une vue en « cascade » de la façon dont une page se charge. Tous les navigateurs modernes incluent cette fonctionnalité.
Cliquez avec le bouton droit n’importe où sur votre page web, sélectionnez « Inspecter », puis allez à l’onglet « Réseau ».
Rechargez la page, et vous verrez quelque chose comme ceci :
Sur le côté droit, vous verrez le graphique en cascade. Les barres colorées montrent combien de temps chaque ressource prend pour se charger. La fine ligne bleue indique le moment où le rendu de la page commence.
Si vous remarquez beaucoup de ressources se chargeant avant cette ligne, cela pourrait signifier qu’il y a place à l’amélioration.
Cette vue intégrée est idéale pour des vérifications rapides, mais elle ne vous indique que les performances de la page dans votre configuration actuelle. Si vous développez en local, c’est-à-dire que vous créez et testez sur votre propre ordinateur ou un serveur local, les résultats peuvent sembler plus rapides que dans des conditions réelles.
Pour des analyses plus approfondies, vous pouvez vous tourner vers des outils en ligne comme WebPageTest.
WebPageTest et autres outils de test de performance
WebPageTest vous donne une image plus claire de la performance de votre site à l’échelle mondiale. De plus, vous pouvez personnaliser les tests pour correspondre aux conditions réelles.
Conseil d’expert: Si vous souhaitez un aperçu plus rapide, des outils comme PageSpeedInsights signalent également les ressources bloquant le rendu.
La méthode typique est :
- Commencez par un test sur ordinateur de bureau
- Choisissez un serveur éloigné de l’hébergeur de votre site web.
- Utilisez Chrome, sauf si vous avez une raison de choisir un autre navigateur.
Vous pouvez ajuster ces paramètres sous l’onglet « Configuration Avancée ».
Cliquez sur « Démarrer le Test » et examinez les résultats.
Vous verrez maintenant un graphique en cascade plus détaillé. En cliquant dessus, vous ouvrez une version en taille réelle où vous pouvez repérer les fichiers JavaScript et CSS bloquant le rendu.
Dans cet exemple, il y a 32 ressources bloquant le rendu—principalement des fichiers CSS, avec quelques fichiers JavaScript mélangés.
Il est facile de comprendre pourquoi JavaScript peut bloquer le rendu, mais le CSS peut faire de même. Le navigateur ne peut pas afficher complètement la page tant qu’il n’a pas tous les styles nécessaires. Si une règle CSS importante se charge tardivement, votre page pourrait faire une pause jusqu’à ce qu’elle soit prête.
C’est pourquoi optimiser la livraison de CSS et JS est essentiel, et c’est exactement ce que nous allons aborder ensuite.
Comment éliminer les ressources bloquant le rendu
Au fil du temps, les développeurs web ont expérimenté diverses méthodes pour réduire ou éliminer les ressources bloquant le rendu. Aujourd’hui, il existe plusieurs techniques fiables pour accélérer le rendu des pages.
- Optimiser le chargement de JavaScript
JavaScript est l’un des coupables les plus courants en matière de blocage du rendu. Heureusement, il existe plusieurs techniques pour contrôler comment et quand vos scripts se chargent, afin que votre page puisse s’afficher plus rapidement.
1.1. Comprendre Async vs. Defer
Pour empêcher les fichiers JavaScript de bloquer le rendu de la page, vous devez utiliser les attributs DEFER ou ASYNC dans vos balises de script.
<script defer src="https://example.com/script.js"></script>- DEFER télécharge le script pendant que la page se rend et l’exécute seulement après que le HTML est entièrement analysé. Il préserve l’ordre des scripts.
- ASYNC télécharge et exécute le script dès qu’il est prêt, indépendamment de l’état de rendu de la page. Cela peut entraîner l’exécution des scripts dans le désordre.
Généralement, DEFER est le meilleur choix, surtout lorsque vos scripts dépendent les uns des autres ou du DOM. Il permet au navigateur de se concentrer sur l’affichage de la page avant d’exécuter les scripts.
1.2. Gérer efficacement les scripts tiers
Les scripts tiers, comme les widgets d’analyse ou de partage social, sont des bloqueurs de rendu courants. Si possible, chargez ces scripts en utilisant DEFER ou ASYNC.
Certains scripts tiers non essentiels peuvent également être chargés après le rendu complet de la page, à l’aide de récepteurs d’événements tels que window.onload.
1.3. Chargement différé des scripts non critiques avec IntersectionObserver
Pour les scripts qui ne sont nécessaires qu’une fois que l’utilisateur interagit ou défile jusqu’à une certaine section (par exemple, les widgets de chat ou les vidéos intégrées), vous pouvez les charger différemment à l’aide de l’API IntersectionObserver.
const observer = new IntersectionObserver((entries) => {
if (entries[0].isIntersecting) {
// Dynamically load script here
}
});
observer.observe(document.querySelector('#lazy-element'));Cela indique au navigateur de charger ces scripts uniquement lorsque les éléments concernés apparaissent à l’écran, réduisant ainsi la charge initiale pour le navigateur.
- Optimiser les CSS pour un rendu plus rapide
Le CSS indique à votre navigateur comment styliser votre page, mais il peut également ralentir l’affichage de cette page. Voyons comment faire en sorte que votre CSS travaille avec vous, et non contre vous, en matière de performance.
2.1. Inclure des feuilles de style CSS essentielles pour le contenu au-dessus du pli
Les navigateurs bloquent le rendu jusqu’à ce qu’ils aient traité le CSS. Pour accélérer le premier affichage, Google suggère d’identifier votre « CSS critique » (les styles nécessaires pour le contenu au-dessus de la ligne de flottaison) et de les intégrer directement dans votre HTML.
<style>/* Critical CSS goes here */</style>Cela élimine la nécessité pour le navigateur d’attendre les feuilles de style externes avant d’afficher le contenu au-dessus de la ligne de flottaison.
La façon la plus simple d’identifier et d’intégrer le CSS critique est d’utiliser des outils comme le Chrome Coverage Tool pour voir quels styles se chargent lors du rendu initial.
Il vous montrera le CSS que vous chargez qui n’est pas critique (barre rouge) et critique (barre verte).
En extrayant le CSS critique et en le plaçant en ligne, vous pouvez supprimer le CSS en tant que ressource bloquant le rendu.
2.2. Différer le CSS non critique
Pour les styles non essentiels, tels que ceux qui affectent le pied de page ou les éléments situés sous le pli, vous pouvez différer le chargement en utilisant l’attribut media avec une valeur comme print et en le changeant en all après le chargement de la page :
<link rel="stylesheet" href="non-critical.css" media="print" onload="this.media='all'">Cette astuce permet au navigateur de prioriser les ressources critiques et de charger le reste après que la page soit visuellement complète.
2.3. Précharger des fichiers CSS clés
Une autre tactique consiste à précharger les fichiers CSS dont vous savez qu’ils sont cruciaux mais que vous ne voulez pas mettre en ligne. Le préchargement aide le navigateur à découvrir ces ressources plus tôt dans le processus de rendu :
<link rel="preload" href="important.css" as="style" onload="this.rel='stylesheet'">C’est utile pour les feuilles de style importantes qui impactent l’apparence et la sensation du contenu au-dessus du pli, mais qui sont trop volumineuses ou trop complexes pour être intégrées.
3. Techniques de rendu progressif
Au-delà des scripts et des feuilles de style, il existe d’autres stratégies que vous pouvez utiliser pour charger progressivement le contenu et accélérer le premier affichage de votre site web.
3.1. Rendu côté serveur (SSR) et génération statique
Le rendu côté serveur (SSR) et la génération statique peuvent aider à fournir du HTML entièrement formé au navigateur, réduisant ainsi la dépendance aux scripts côté client pour le rendu initial.
Cela signifie que le contenu devient visible plus tôt car le navigateur n’a pas à attendre que JavaScript construise la structure de la page.
Des frameworks comme Next.js ou Gatsby facilitent la mise en œuvre du SSR et de la génération statique.
3.2. Optimisation des polices et des images pour améliorer les temps de chargement
Les polices et les images peuvent également bloquer le rendu si elles ne sont pas gérées correctement. Pour les optimiser :
- Utilisez la propriété CSS font-display: swap pour empêcher les fichiers de polices de bloquer le premier affichage.
- Utilisez le chargement différé des images au-dessus du pli à l’aide de l’attribut loading=”lazy”.
- Préchargez les polices clés ou les images principales avec la balise <link rel=”preload”> pour les classer par ordre de priorité.
Ensemble, ces stratégies améliorent les performances de votre site web en permettant aux navigateurs d’afficher le contenu le plus tôt possible tout en chargeant les ressources non essentielles en arrière-plan.
Comment réduire les ressources bloquantes dans WordPress avec Speed Optimizer de SiteGround
Si vous utilisez WordPress, le plugin Speed Optimizer de SiteGround offre un moyen facile de réduire les ressources bloquant le rendu sans toucher à votre code.
Même si votre site n’est pas hébergé chez SiteGround, ce plugin peut vous aider à optimiser ses performances.
Attention:
Lors de la mise en œuvre de ces changements, il est important de procéder avec précaution. Nous vous recommandons d’ajuster un paramètre à la fois, puis de vérifier votre site dans un autre navigateur pour vous assurer que tout fonctionne correctement.
De cette façon, vous pouvez identifier tout problème potentiel et le corriger immédiatement avant de passer à l’optimisation suivante.
1. Optimisation du JavaScript
Tout d’abord, allez dans les paramètres JavaScript du plugin. Voici les optimisations clés :
- Minifier les fichiers JavaScript : Cela supprime les caractères inutiles de votre code JavaScript. Cela le rend plus petit et plus rapide à charger.
- Combiner des fichiers JavaScript : La combinaison des fichiers JavaScript réduit le nombre de requêtes que le navigateur doit effectuer, accélérant ainsi le temps de chargement.
- Exclure du report de JS bloquant le rendu : Cette option importante ajoute l’attribut DEFER à vos fichiers JavaScript, permettant à la page de se rendre avant d’exécuter le JavaScript.
2. Optimisation du CSS
Ensuite, rendez-vous dans les paramètres CSS :
- Préchargement au fichier CSS combiné : Ce paramètre garantit que votre fichier CSS combiné est chargé tôt dans le processus, afin qu’il soit disponible lorsque la page commence à se rendre.
- Minifier les fichiers CSS : Cela supprime les espaces, les nouvelles lignes et les commentaires de votre CSS, réduisant la taille du fichier et améliorant les temps de chargement.
- Combiner des fichiers CSS : La combinaison des fichiers CSS aide à réduire le blocage du rendu en diminuant le nombre de requêtes HTTP.
En appliquant ces optimisations, vous pouvez réduire considérablement les ressources bloquant le rendu sur votre site WordPress et le rendre plus rapide.
Si vous souhaitez approfondir les optimisations WordPress, consultez notre vidéo sur Comment accélérer votre site WordPress comme un pro.
Après avoir suivi toutes ces étapes sur notre site de test, nous sommes passés de 32 à 24 ressources bloquant le rendu. C’est un très bon début.
L’étape suivante consiste à localiser toutes les feuilles de style CSS essentielles et à les mettre en ligne. Reportez ensuite toutes les autres feuilles de style CSS et appliquez les autres techniques d’optimisation dont nous avons parlé plus haut. Cela permettra d’éliminer presque tous les bloqueurs de rendu restants.
Passons maintenant en revue une liste de contrôle finale de toutes les techniques que nous avons explorées.
Liste de contrôle pour éliminer les ressources bloquant le rendu
À présent, vous avez appris que les ressources bloquant le rendu ne font pas que ralentir les pages web, elles peuvent directement impacter l’expérience utilisateur, le SEO, et les conversions.
Pour vous aider à tout mettre en œuvre, voici une liste de contrôle que vous pouvez suivre :
- ✅ Identifiez les ressources bloquant le rendu à l’aide des outils de développement du navigateur ou d’outils comme WebPageTest.
- ✅ Ajoutez les attributs defer ou async aux fichiers JavaScript non critiques.
- ✅ Optimisez les scripts tiers en les chargeant de manière asynchrone ou en les différant lorsque c’est possible.
- ✅ Utilisez IntersectionObserver pour charger de manière différée les scripts qui ne sont pas nécessaires immédiatement.
- ✅ Intégrez votre CSS critique (styles au-dessus du pli) directement dans votre HTML.
- ✅ Différez le CSS non critique ou chargez-le de manière asynchrone, et supprimez le CSS inutilisé.
- ✅ Préchargez les fichiers CSS importants pour donner une avance au navigateur.
- ✅ Mettez en œuvre des techniques de rendu progressif comme le rendu côté serveur (SSR) ou la génération statique là où cela a du sens.
- ✅Optimisez les polices et les images pour éliminer les pièges cachés.
- ✅ Utilisez des plugins d’optimisation des performances comme Speed Optimizer de SiteGround pour automatiser facilement bon nombre de ces tâches.
L’élimination des ressources bloquant le rendu peut ressembler à une mise au point. Chacune de ces étapes permet d’éliminer les pauses frustrantes lors du chargement des pages. Appliquez-les de manière cohérente et vous créerez une expérience plus conviviale pour vos visiteurs.
De l’amélioration de l’expérience utilisateur à la stimulation du SEO, chaque optimisation compte. Lorsque vos pages se chargent rapidement, les visiteurs restent plus longtemps sur votre site et les moteurs de recherche en tiennent compte.
Et le meilleur dans tout ça ? Avec un outil comme Speed Optimizer de SiteGround, vous pouvez automatiser un grand nombre de ces étapes et obtenir des résultats plus rapides sans trop de difficultés ni de connaissances en matière de codage.
Sur le long terme, chaque petite amélioration s’additionne et c’est ce qui permet à votre site web d’être rapide, fiable et prêt à fonctionner.
Commentaires ( 0 )
Laisser un commentaire