Aleksandar focuses on how hosting infrastructure, performance systems, and platform tools work together to keep websites fast, secure, and reliable. His work translates complex hosting concepts, such as caching, DNS, and server-level optimization, into practical guidance based on real-world scenarios and user needs. Outside of work, he enjoys chess, meditation, playing guitar, and integrating AI systems in his daily life.
Si votre site utilise le plugin de sauvegarde UpdraftPlus, voici l’essentiel : une faille critique a été découverte dans le plugin, et nous l’avons déjà mis à jour vers la version corrigée sur tous les sites affectés que nous hébergeons. Vous êtes protégé et vous n’avez rien à faire.
Voici ce qui s’est passé, ce que nous avons fait et ce qu’il convient de surveiller.
Votre site est déjà protégé
Le 11 juin 2026, notre équipe d’ingénieurs a forcé la mise à jour du plugin UpdraftPlus sur tous les sites hébergés utilisant une version vulnérable. Chaque installation affectée a été mise à jour vers la version 1.26.5, qui contient le correctif officiel. Plus de 128 000 sites sur notre plateforme utilisaient une version vulnérable, et tous ont été corrigés.
Nous avons testé les chemins de mise à jour avant tout déploiement et n’avons constaté aucun problème. Nous ne prévoyons aucune perturbation de site à la suite de cette mise à jour.
En quoi consiste la faille
La faille, suivie sous CVE-2026-10795, est un contournement d’authentification non authentifié affectant les versions d’UpdraftPlus jusqu’à 1.26.4. En termes simples, elle permettait aux attaquants d’obtenir un accès administrateur à un site WordPress sans connaître de nom d’utilisateur ou de mot de passe. À partir de là, ils pouvaient exécuter du code sur le site, ce qui est aussi grave qu’une vulnérabilité de plugin puisse l’être.
L’aspect « non authentifié » est ce qui rend cette faille critique. De nombreuses vulnérabilités exigent qu’un attaquant dispose déjà d’un certain niveau d’accès, comme un compte abonné ou contributeur. Celle-ci ne nécessitait absolument rien. Tout site utilisant une version vulnérable était exposé à quiconque connaissait la faille.
Ce que nous avons fait et quand
Dès la divulgation de la vulnérabilité, notre équipe a mis moins d’une heure pour déployer de manière proactive la version corrigée du plugin sur tous les sites affectés, agissant immédiatement pour fermer la fenêtre d’exposition avant que les attaquants ne puissent l’exploiter à grande échelle, plutôt que d’attendre que les propriétaires de sites effectuent la mise à jour manuellement ou soient affectés de quelque manière que ce soit.
Voici à quoi ressemblait la réponse :
Nous avons identifié tous les sites hébergés exécutant les versions 1.24.x, 1.25.x et 1.26.x d’UpdraftPlus.
Nous avons testé les mises à jour de 1.24.x à 1.26.x et d’autres versions affectées à 1.26.5 à l’avance pour confirmer que la mise à jour ne causerait pas de problèmes.
Nous avons mis à jour de force plus de 128 000 installations affectées vers la version corrigée 1.26.5.
Le processus complet a été achevé en environ 52 minutes.
La mise à jour affectera-t-elle mon site web ?
Nous ne nous y attendons pas. Les mises à jour du plugin entre ces versions ont été testées avant le déploiement, et aucun problème n’est apparu.
Cela dit, si vous souhaitez une tranquillité d’esprit supplémentaire, voici deux choses rapides que vous pouvez vérifier :
Confirmez que votre calendrier de sauvegarde dans UpdraftPlus est toujours configuré comme vous l’avez défini.
Vérifiez que votre sauvegarde la plus récente a été complétée avec succès.
Les deux prennent moins d’une minute depuis votre tableau de bord WordPress.
Pourquoi nous forçons les mises à jour pour les failles critiques
Lorsqu’une vulnérabilité est critique, facilement exploitable et divulguée publiquement, chaque heure de retard compte. Les attaquants commencent à rechercher des sites vulnérables dans les heures qui suivent une divulgation comme celle-ci, et attendre que chaque propriétaire de site mette à jour manuellement laisserait des milliers de sites exposés entre-temps.
Dans ces situations, nous corrigeons d’abord et notifions juste après. Nous croyons qu’une mise à jour proactive est toujours le meilleur compromis par rapport à laisser les sites ouverts à une prise de contrôle complète.
En règle générale, nous recommandons également de garder les mises à jour automatiques des plugins activées autant que possible. C’est l’habitude la plus efficace pour rester en avance sur les vulnérabilités comme celle-ci.
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 commePageSpeed Insights 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.
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 :
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 :
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.
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.
