Dans cet article, nous allons r\u00e9pondre \u00e0 ces deux questions pour vous. Voici tout ce que nous allons couvrir dans cet article :<\/p>\n
- \n
- Quelles sont les ressources qui bloquent le rendu et pourquoi elles posent probl\u00e8me<\/a><\/li>\n
- Comment rem\u00e9dier au blocage des ressources de rendu en g\u00e9n\u00e9ral<\/i><\/a><\/li>\n
- Comment utiliser des extensions gratuites ou payantes pour r\u00e9soudre le probl\u00e8me sur WordPress<\/a><\/li>\n<\/ul>\n
Vous pr\u00e9f\u00e9rez regarder la version vid\u00e9o<\/a><\/h3>\n
<\/kinsta-video>\n Que signifie \u00ab\u00a0\u00e9liminer les ressources qui bloquent le rendu\u00a0\u00bb ?<\/h2>\n
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\u00e7on dont un navigateur web rend une page web.<\/p>\n
Lorsqu’un visiteur arrive sur votre site, son navigateur web d\u00e9marre en haut du\u00a0code de votre site<\/a> et le lit. De haut en bas, compris ?<\/p>\n
Si, au cours de ce processus, il rencontre un fichier CSS<\/a> ou JavaScript, il doit arr\u00eater<\/strong> de \u00ab\u00a0lire\u00a0\u00bb en attendant de t\u00e9l\u00e9charger et de traiter ce fichier. Le temps qu’il passe en \u00ab\u00a0pause\u00a0\u00bb pour t\u00e9l\u00e9charger et analyser ces ressources pourrait \u00eatre consacr\u00e9 \u00e0 quelque chose de beaucoup plus productif, comme le chargement de la partie du contenu de votre site web qui est imm\u00e9diatement visible lorsque quelqu’un arrive sur la page.<\/p>\n
Examinons un exemple extr\u00eame pour montrer pourquoi cela peut poser probl\u00e8me.<\/p>\n
Disons que vous avez cet effet JavaScript sympa dans le pied de page de votre site. Il est aliment\u00e9 par \u00ab\u00a0coolfooter.js\u00a0\u00bb, qui est un script r\u00e9f\u00e9renc\u00e9 en haut du code de votre site (m\u00eame si l’effet se trouve dans le pied de page, de sorte que les visiteurs ne le verront pas avant d’avoir fait d\u00e9filer le pied de page<\/i>).<\/p>\n
Ainsi, une mise en page tr\u00e8s approximative du<\/i> code de votre site pourrait ressembler \u00e0 quelque chose comme \u00e7a :<\/p>\n
- \n
- M\u00e9ta d’en-t\u00eate<\/li>\n
- Coolfooter.js<\/li>\n
- HTML pour votre contenu au-dessus du pli. C’est tout le contenu qu’un visiteur voit imm\u00e9diatement (avant qu’il ne commence \u00e0 interagir avec la page<\/i>)<\/li>\n<\/ul>\n
Et voici pourquoi c’est un probl\u00e8me :<\/p>\n
Lorsqu’un visiteur arrive sur votre site, son navigateur commence \u00e0 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\u00e9l\u00e9charger et d’analyser le fichier coolfooter.js.<\/p>\n
R\u00e9sultat final ? Il faut plus de temps pour afficher le HTML pour le contenu ci-dessus<\/strong>, ce qui signifie que vos visiteurs percevront votre site comme \u00e9tant plus lent.<\/p>\n
Lorsque Google vous dit d’\u00e9liminer les ressources qui bloquent le rendu, il vous dit essentiellement : \u00ab\u00a0h\u00e9, 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 \u00e0 t\u00e9l\u00e9charger la partie visible de votre contenu\u00a0\u00bb.<\/p>\n
Gr\u00e2ce aux conseils donn\u00e9s dans cet article, vous pourrez attendre, pour charger certaines ressources CSS et JavaScript, que la partie visible de votre page soit d\u00e9j\u00e0 charg\u00e9e.<\/p>\n
Quelles sont les ressources bloquant le rendu ?<\/h3>\n
Lorsqu’on parle de ressources bloquant le rendu, on parle g\u00e9n\u00e9ralement de :<\/p>\n
- \n
- CSS<\/li>\n
- JavaScript<\/li>\n<\/ul>\n
Il est important de comprendre que tous les fichiers CSS et JavaScript ne bloquent pas le rendu<\/strong>.<\/p>\n
Par exemple, il est important de charger votre CSS critique en haut de la page, sinon vos visiteurs pourraient faire l’exp\u00e9rience de ce qu’on appelle un\u00a0flash de contenu non stylis\u00e9<\/a> (FOUC).<\/p>\n
Les images sont-elles des ressources qui bloquent le rendu ?<\/h3>\n
Non, les images ne bloquent pas le rendu<\/strong>. Il est toujours important d’optimiser vos images<\/a> pour r\u00e9duire leur taille, mais vous n’avez pas \u00e0 vous soucier d’optimiser le chemin de livraison de vos images.<\/p>\n
Comment v\u00e9rifier si votre site web dispose de ressources bloquant le rendu ?<\/h2>\n
Pour \u00e9valuer si votre site WordPress dispose actuellement de ressources de blocage du rendu, vous pouvez utiliser\u00a0Google PageSpeed Insights<\/a>.<\/p>\n
Il vous suffit de saisir l’URL que vous souhaitez tester. Ensuite, si vous avez un probl\u00e8me avec les ressources qui bloquent le rendu, PageSpeed Insights r\u00e9pertoriera chaque ressource individuelle dans la section \u00c9liminer les ressources qui bloquent le rendu<\/strong> sous la rubrique Opportunit\u00e9s<\/strong> :<\/p>\n
![\"Le](\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/02\/message-eliminer-ressources.jpg\")
Le message \u00ab\u00a0\u00c9liminer les ressources qui bloquent le rendu\u00a0\u00bb dans PageSpeed Insights<\/figcaption><\/figure>\n Comment \u00e9liminer les ressources qui bloquent le rendu ?<\/h2>\n
Ne vous inqui\u00e9tez pas, vous n’avez pas \u00e0 le faire manuellement. Dans la prochaine section, nous parlerons des extensions WordPress qui peuvent vous aider \u00e0 \u00e9liminer les ressources qui bloquent le rendu.<\/p>\n
Cependant, il est utile de comprendre ce que ces extensions font en coulisses pour \u00e9liminer les ressources qui bloquent le rendu.<\/p>\n
Comment \u00e9liminer le JavaScript qui bloque le rendu<\/h3>\n
Il existe plusieurs strat\u00e9gies diff\u00e9rentes pour \u00e9liminer le JavaScript qui bloque le rendu. Nous les abordons en d\u00e9tail dans\u00a0notre article sur la fa\u00e7on de diff\u00e9rer l’analyse de JavaScript<\/a>, mais voici les principales m\u00e9thodes :<\/p>\n
- \n
- Async<\/strong> – permet \u00e0 l’analyseur HTML (par exemple, le navigateur d’un visiteur<\/i>) de t\u00e9l\u00e9charger le JavaScript tout en analysant le reste du HTML. Autrement dit, il ne s’arr\u00eate pas compl\u00e8tement pendant le t\u00e9l\u00e9chargement du fichier. Cependant, il mettra en pause l’analyseur HTML pour ex\u00e9cuter le script une fois qu’il aura \u00e9t\u00e9 t\u00e9l\u00e9charg\u00e9.<\/li>\n
- Defer<\/strong> – permet \u00e0 l’analyseur HTML de t\u00e9l\u00e9charger le JavaScript pendant l’analyse du reste du HTML et<\/strong> attend l’ex\u00e9cution du script jusqu’\u00e0 ce que l’analyse du HTML soit termin\u00e9e.<\/li>\n<\/ul>\n
Cette illustration de Growing with the Web<\/a> montre bien la diff\u00e9rence :<\/p>\n
![\"JavaScript](\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2019\/08\/javascript-async-defer.png\")
JavaScript async vs defer<\/figcaption><\/figure>\n L’avantage de l’utilisation de defer<\/strong> est que vos scripts sont garantis de s’ex\u00e9cuter dans l’ordre o\u00f9 ils apparaissent dans le code.<\/p>\n
Async<\/strong> n’utilise pas cette approche, ce qui peut parfois poser des probl\u00e8mes si vous appliquez async \u00e0<\/strong> toutes les ressources JavaScript car cela peut souvent casser des ressources qui d\u00e9pendent de ressources qui apparaissent plus t\u00f4t dans le document. Le probl\u00e8me le plus courant que produit asynch est la casse des ressources jQuery<\/a> qui tentent de se charger avant que jquery.js n’ait \u00e9t\u00e9 ajout\u00e9 au document.<\/p>\n
Comment \u00e9liminer les CSS qui bloquent le rendu<\/h3>\n
L’\u00e9limination des CSS bloquant le rendu peut \u00eatre un peu plus d\u00e9licate car il faut faire attention \u00e0 ne pas retarder les CSS n\u00e9cessaires au rendu de contenu sup\u00e9rieur. L’id\u00e9al est de :<\/p>\n
- \n
- Identifier les styles qui sont n\u00e9cessaires pour rendre un contenu sup\u00e9rieur \u00e0 la moyenne et\u00a0fournir ces styles en ligne avec le HTML<\/a>.<\/li>\n
- Utiliser l’attribut media sur les \u00e9l\u00e9ments de lien qui r\u00e9cup\u00e8rent les fichiers CSS pour identifier les ressources CSS qui sont conditionnelles, c’est-\u00e0-dire uniquement n\u00e9cessaires pour des dispositifs ou des situations sp\u00e9cifiques.<\/li>\n
- Les ressources CSS restantes devraient \u00eatre charg\u00e9es de mani\u00e8re asynchrone, ce qui se fait g\u00e9n\u00e9ralement en les ajoutant avec du JavaScript diff\u00e9r\u00e9 ou asynchrone. Pour \u00eatre honn\u00eate, nous sommes vraiment d\u00e9pass\u00e9s par les \u00e9v\u00e9nements, n’est-ce pas ? C’est sans aucun doute le territoire des d\u00e9veloppeurs front-end. Ce qui est tr\u00e8s bien si vous \u00eates un d\u00e9veloppeur de premi\u00e8re qualit\u00e9, mais la plupart d’entre nous ne le sont pas. La bonne nouvelle est que cet article concerne WordPress, et vous pouvez \u00e9liminer ou du moins r\u00e9duire consid\u00e9rablement le nombre de ressources JS et CSS bloquant le rendu et affectant votre site avec des bonnes extensions.<\/li>\n<\/ul>\n
Pour un autre moyen rapide et facile de stimuler votre optimisation globale, pensez \u00e0 minifier votre code. Kinsta a int\u00e9gr\u00e9 une fonction de minification du code<\/a> directement dans le tableau de bord MyKinsta<\/a>, permettant aux clients d’activer la minification automatique de CSS et JavaScript d’un simple clic.<\/p>\n
Si vous ne parvenez pas \u00e0 localiser la fonction dans votre tableau de bord, consultez simplement notre vid\u00e9o Comment activer la minification dans MyKinsta<\/a>.<\/p>\n
Comment \u00e9liminer les ressources CSS et JavaScript bloquant le rendu avec les extensions WordPress<\/h2>\n
Pour d\u00e9montrer comment \u00e9liminer 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\u00e9rentes d\u2019extensions pour \u00e9liminer les CSS et JavaScript bloquant le rendu :<\/p>\n
- \n
- Autoptimiser + Async JavaScript (gratuit)<\/li>\n
- WP Rocket (payant)<\/li>\n<\/ul>\n
\u00c0 titre de r\u00e9f\u00e9rence, voici \u00e0 quoi ressemble notre site de test avant d’optimiser la diffusion des CSS<\/a> et des JavaScript :<\/p>\n
![\"Le](\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/02\/message-eliminer-bloquent-rendu.jpg\")
Le message \u00ab\u00a0\u00c9liminer les ressources qui bloquent le rendu\u00a0\u00bb dans PageSpeed Insights<\/figcaption><\/figure>\n Si vous testez l’efficacit\u00e9 de vos modifications avec Google PageSpeed Insights, sachez que Google met ses r\u00e9sultats en cache pendant plusieurs minutes. En gros, cela signifie que si vous…<\/p>\n
- \n
- Testez votre site non optimis\u00e9<\/li>\n
- Activez l’une des extensions de cette section<\/li>\n
- Testez \u00e0 nouveau votre site<\/li>\n<\/ol>\n
…alors vous verrez toujours les r\u00e9sultats pour votre site non optimis\u00e9 jusqu’\u00e0 ce que Google r\u00e9initialise son cache. Assurez-vous donc d’attendre quelques minutes que Google vide son cache avant de penser que l\u2019extension ne fonctionne pas.<\/p>\n
Comment \u00e9liminer les ressources bloquant le rendu avec l\u2019extension Autoptimize + Async JavaScript<\/h3>\n
Autoptimizer<\/a> et Asynch<\/a> Javascript sont deux extensions gratuites distinctes provenant du m\u00eame d\u00e9veloppeur. Ensemble, elles vous aident \u00e0 optimiser la diffusion de votre CSS et de votre JavaScript.<\/p>\n
Une fois que vous avez install\u00e9 les deux extensions, allez dans les R\u00e9glages \u2192 Async JavaScript<\/strong> et :<\/p>\n
- \n
- Cochez la case pour Activer Async JavaScript<\/strong> en haut de la page.<\/li>\n
- Choisissez entre Appliquer Async<\/strong> et Appliquer Defer<\/strong> dans la bo\u00eete des R\u00e9glages rapides<\/strong>.<\/li>\n<\/ul>\n
![\"Comment](\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2019\/12\/comment-configurer-extension-javascript-async.jpg\")
Comment configurer l\u2019extension JavaScript Async<\/figcaption><\/figure>\n Si l’option Async<\/strong> pose des probl\u00e8mes sur votre site, nous vous recommandons d’essayer Defer<\/strong> ou d’exclure jQuery<\/strong>, l\u2019extension vous offre une option pour cela.<\/p>\n
Une fois que vous avez configur\u00e9 l\u2019extension JavaScript Async, allez dans R\u00e9glages \u2192 Autoptimize<\/strong> et :<\/p>\n
- \n
- Cochez la case pour Optimiser le code JavaScript<\/strong><\/li>\n
- Cochez la case pour Optimiser le code CSS<\/strong><\/li>\n<\/ul>\n
![\"Comment](\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2019\/12\/comment-configurer-extension-autoptimize-fr.jpg\")
Comment configurer l\u2019extension Autoptimize<\/figcaption><\/figure>\n Si vous \u00eates un utilisateur avanc\u00e9, vous pouvez jouer avec les r\u00e9glages d’optimisation JavaScript et CSS suppl\u00e9mentaires, mais la plupart des sites se contenteront des valeurs par d\u00e9faut.<\/p>\n
Apr\u00e8s avoir configur\u00e9 \u00e0 la fois Autoptimize<\/a> et Async JavaScript, notre site de test a pass\u00e9 avec succ\u00e8s l’audit \u00ab\u00a0\u00c9liminer les ressources bloquant le rendu\u00a0\u00bb de PageSpeed Insights :<\/p>\n
![\"R\u00e9sultats](\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2019\/12\/pagespeed-psi-autoptimize-async-javascript.jpg\")
R\u00e9sultats de PageSpeed Insights avec Autoptimize et Async JavaScript<\/figcaption><\/figure>\n Si vous vouliez \u00e9liminer encore plus de ces fichiers, vous pourriez utiliser Autoptimize pour aligner manuellement votre CSS critique<\/a>. Cela n\u00e9cessite cependant des connaissances en mati\u00e8re de d\u00e9veloppement, et ce n’est donc pas quelque chose que les non-d\u00e9veloppeurs devraient essayer.<\/p>\n
Vous pouvez \u00e9galement utiliser les extensions s\u00e9par\u00e9ment si vous le souhaitez. Mais \u00e9tant donn\u00e9 que les deux extensions proviennent du m\u00eame d\u00e9veloppeur et sont con\u00e7ues pour fonctionner ensemble, la meilleure approche pour la plupart des sites est de les combiner.<\/p>\n
Comment \u00e9liminer les ressources bloquant le rendu avec WP Rocket<\/h3>\n
WP Rocket<\/a> est une extension WordPress de performance et de mise en cache haut de gamme tr\u00e8s populaire.<\/p>\n
Normalement, nous n’autorisons pas\u00a0les extensions de mise en cache<\/a> sur les sites WordPress h\u00e9berg\u00e9s chez Kinsta parce que\u00a0nous nous occupons d\u00e9j\u00e0 de la mise en cache pour vous<\/a> au niveau du serveur via le cache rapide Nginx FastCGI.<\/p>\n
- Cochez la case pour Optimiser le code CSS<\/strong><\/li>\n<\/ul>\n
- Choisissez entre Appliquer Async<\/strong> et Appliquer Defer<\/strong> dans la bo\u00eete des R\u00e9glages rapides<\/strong>.<\/li>\n<\/ul>\n
- Cochez la case pour Activer Async JavaScript<\/strong> en haut de la page.<\/li>\n
- Defer<\/strong> – permet \u00e0 l’analyseur HTML de t\u00e9l\u00e9charger le JavaScript pendant l’analyse du reste du HTML et<\/strong> attend l’ex\u00e9cution du script jusqu’\u00e0 ce que l’analyse du HTML soit termin\u00e9e.<\/li>\n<\/ul>\n
- Async<\/strong> – permet \u00e0 l’analyseur HTML (par exemple, le navigateur d’un visiteur<\/i>) de t\u00e9l\u00e9charger le JavaScript tout en analysant le reste du HTML. Autrement dit, il ne s’arr\u00eate pas compl\u00e8tement pendant le t\u00e9l\u00e9chargement du fichier. Cependant, il mettra en pause l’analyseur HTML pour ex\u00e9cuter le script une fois qu’il aura \u00e9t\u00e9 t\u00e9l\u00e9charg\u00e9.<\/li>\n
- Comment rem\u00e9dier au blocage des ressources de rendu en g\u00e9n\u00e9ral<\/i><\/a><\/li>\n
![\"Comment](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/02\/wp-rocket-backend.png\")
![\"R\u00e9sultats](\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2019\/12\/resultats-pagespeed-insights-wp-rocket-fre.jpg\")