{"id":5804,"date":"2017-09-19T12:23:06","date_gmt":"2017-09-19T12:23:06","guid":{"rendered":"https:\/\/blog.hostinger.io\/fr-tutoriels\/?p=5804"},"modified":"2025-05-13T16:34:48","modified_gmt":"2025-05-13T16:34:48","slug":"blocage-de-rendu-asynchronous-plugin-rendering","status":"publish","type":"post","link":"\/fr\/tutoriels\/blocage-de-rendu-asynchronous-plugin-rendering\/","title":{"rendered":"R\u00e9parer le blocage du rendu JS\/CSS avec Asynchronous Plugin Rendering"},"content":{"rendered":"

La vitesse d’un site web est l’un des facteurs les plus importants pour attirer et retenir les visiteurs. Toutes choses égales par ailleurs, un site web plus rapide est beaucoup plus susceptible d’attirer les utilisateurs. C’est parce que les moteurs de recherche tiennent compte de la vitesse du site lors du classement des résultats. Donc, si vous voulez surclasser votre concurrence dans le référencement, faites de la vitesse du site votre priorité.<\/p>

Bien sûr, juger la vitesse de votre site peut être un problème. Il y a une quantité de variables qui pourraient affecter votre méthode de test : la vitesse de connexion à Internet, la localisation géographique, etc. C’est là que PageSpeed Insights<\/a> de Google entre en jeu. C’est un service gratuit offert par Google qui attribue un score aux sites web en fonction de leur vitesse de chargement. Idéalement, vous voulez avoir le plus meilleur score possible sur PageSpeed. Et si vous avez déjà utilisé l’outil en ligne, vous avez peut-être rencontré l’infâme suggestion « Eliminez les codes Javascript et les styles CSS qui bloquent l’affichage du contenu au-dessus de la ligne de flottaison<\/strong> ».<\/p>

\"\"<\/a><\/figure>

Qu’est ce que “blocage de rendu dans le contenu au dessus de la ligne de flotaison” veut dire ?<\/span><\/h2>

Pour comprendre cette suggestion, nous devons regarder les critères de Google pour la notation des sites sur PageSpeed Insights. Il existe dix règles de vitesse définies par Google<\/a>, et l’échec dans l’un de ces résultats entraîne une réduction des points.<\/p>

Les codes Javascript et les styles CSS qui bloquent l’affichage du contenu constituent l’une de ces règles. En règle générale, les scripts JS et CSS forcent le navigateur Web à retarder le chargement de la page HTML. Bien sûr, ce n’est pas un problème. En fait, c’est précisément ce que vous voulez; personne ne souhaite regarder un contenu qui n’a pas été mis en forme.<\/p>

JS et les styles CSS qui bloquent l’affichage du contenu, cependant, se réfère aux scripts qui introduisent une latence de chargement mais ne sont pas utilisés dans le contenu au-dessus de la ligne de flottaison (ATF). Le contenu ATF se réfère à la partie de la page web qui est visible lorsque la page est chargée; toute partie de la page que vous devez faire défiler vers le bas pour atteindre, est non-ATF. Ainsi, avec cette suggestion, Google vous permet de savoir qu’il existe des scripts JS et CSS sur cette page Web qui ralentissent votre site inutilement<\/strong>, car la partie de la page qu’ils affectent n’est même pas observable pour l’utilisateur.<\/p>

Dans ce tutoriel WordPress, nous utiliserons Google PageSpeed Insights pour identifier les scripts de blocage de rendu. Ensuite, nous vous montrerons comment résoudre ce problème pour votre site WordPress, en utilisant 3 méthodes différentes. En plus de ce guide, vous devriez également regarder d’autres façons d’accélérer votre site WordPress <\/a>pour une expérience utilisateur optimale.<\/p>

Ce dont vous aurez besoin<\/h2>

Avant de commencer ce tutoriel, vous aurez besoin des éléments suivants<\/p>