En matière de performances web, l'un des facteurs essentiels est l'élimination des ressources bloquant le rendu. Ces ressources retardent l'affichage d'une page et peuvent inclure des fichiers JavaScript et CSS, par exemple. Elles doivent être chargées avant que le navigateur puisse commencer à afficher la page. Cela concerne notamment les fichiers CSS et JavaScript externes, ainsi que tout autre élément susceptible de retarder l'affichage initial de la page par le navigateur.
Bien que certaines ressources bloquant le rendu soient nécessaires, comme les fichiers CSS qui garantissent un affichage correct de votre page, d'autres peuvent être optimisées ou supprimées. Pour optimiser la vitesse de chargement de votre site web, il est essentiel d'identifier et de minimiser, voire de supprimer, les ressources bloquant le rendu lorsque cela est possible. Vous avez peut-être déjà constaté cette recommandation lors du test de votre site WordPress avec l'outil PageSpeed.
Comment identifier une ressource bloquant le rendu ?
Lorsque vous cherchez à améliorer les performances de votre site web, vous pouvez rencontrer le terme « ressources bloquant le rendu ». Il s’agit de toutes les ressources qui doivent être chargées avant que le navigateur puisse commencer à afficher la page. Généralement, cela inclut les fichiers CSS et JavaScript externes.
Vous pouvez utiliser les outils de développement de Google Chrome pour identifier une ressource bloquant l'affichage. Chargez votre site web dans Chrome, puis ouvrez les outils de développement. Cliquez sur l'onglet « Couverture » et assurez-vous que l'option « Désactiver le cache » est cochée. Vous visualiserez ainsi la version la plus récente de votre site web.
Rechargez votre site web. Les outils de développement afficheront la liste des ressources chargées lors du rendu de votre page. Repérez les ressources surlignées en rouge : ce sont celles qui bloquent le rendu.
3 façons d'éliminer une ressource bloquant le rendu dans WordPress ?
Il existe plusieurs façons de procéder dans WordPress.
Méthode 1:
Une des solutions consiste à CSS critiquedirectement dans le fichier HTML, au lieu d'utiliser une feuille de style externe. Cette méthode est efficace pour les petits sites web de quelques pages seulement, mais peu pratique pour les sites plus importants. Une fois les ressources bloquant l'affichage identifiées, il faut les supprimer ou les intégrer. L'intégration consiste à incorporer la ressource directement dans le code, évitant ainsi son chargement séparé. Cela est possible avec les fichiers JavaScript et CSS. Des extensions comme FlyingPress, WP Rocket, Swift Performance ou LiteSpeed Cache peuvent automatiser ce processus.
Méthode 2:
Une autre option consiste à charger les ressources non essentielles après le chargement initial de la page. Cela peut se faire à l'aide de techniques de chargement asynchrone, comme le chargement des fichiers JavaScript après l'analyse du document ou l'utilisation d'attributs defer.
Méthode 3:
Enfin, vous pouvez également essayer de réduire le nombre de ressources nécessaires sur chaque page. Cela peut impliquer de fusionner plusieurs fichiers CSS ou JavaScript en un seul, ou d'utiliser des images plus légères qui se chargent plus rapidement. En réduisant le nombre de ressources bloquant le rendu, vous pouvez améliorer considérablement la vitesse de chargement de votre site web et offrir une meilleure expérience utilisateur à vos visiteurs. Si vous avez besoin de plus de temps pour vous familiariser avec le code, certains plugins peuvent automatiser ce processus, tels qu'Autoptimize, WPRocket, etc.
Dans certains cas, certaines ressources bloquant le rendu peuvent être nécessaires au bon fonctionnement de votre site web. Il vous faudra alors trouver un moyen de les optimiser pour accélérer leur chargement.
Conclure
Si vous avez suivi les conseils ci-dessus, vous devriez maintenant avoir éliminé la plupart, voire la totalité, des ressources bloquant l'affichage de votre site web. Si vous avez encore besoin d'aide, découvrez notre service professionnel d'optimisation de la vitesse WordPress. Nous vous aiderons à améliorer les performances et la vitesse de votre site web, ce qui est essentiel pour créer un site web de haute qualité et convivial.
N'oubliez pas que d'autres facteurs peuvent affecter les performances de votre site web, tels que le temps de réponse du serveur, la taille des fichiers et la qualité du code. Toutefois, éliminer les ressources bloquant le rendu est une excellente approche pour améliorer la vitesse et les performances de votre site web, ainsi que Core Web Vitals .
