Éliminez les ressources qui bloquent le rendu

Si vous avez testé votre site Internet sur le site Google PageSpeed Insights, il est possible que l’outil vous conseille d’éliminer les ressources qui bloquent le rendu. Vous pouvez avoir la même réponse en utilisant Le plugin LightHouse de Chrome, basé sur le même algorithme.

Parmi l’ensemble des recommandations Google, celle-ci revient très souvent, vous n’êtes donc pas seul. Sa résolution peut avoir une incidence importante sur le temps de chargement de votre site. Pour améliorer la performance de votre site web et optimiser votre référencement, c’est donc un passage obligé.

Avant d’aller plus loin, présentons nous. Nous sommes l’agence 36 Pixels, experts en webperformance, en réalisation de site sous WordPress et sous Vue.js. Nous allons tenter de vous aider à résoudre votre problématique sur les ressources qui bloquent le rendu. Notez aussi que cet article fait partie de toute une série sur les optimisations pour obtenir une score de 100 sur Google PageSpeed Insights. Voici le programme :

Qu’est-ce qu’une ressource ?

Une ressource, pour un site Internet, c’est un fichier qui est nécessaire à l’affichage de la page. Il peut s’agir d’un fichier CSS (pour la mise en forme du site), d’un fichier JS (pour les interactions) ou encore une typographie. Si tout va bien, c’est à dire si votre site a été bien codé, ces fichiers ne devraient pas avoir un poids excessif. Si ce n’est pas le cas, alors il vous faudra repasser sur l’ensemble des fichiers. Sorry…

Pourquoi les ressources peuvent être bloquantes ?

Pour que votre page web s’affiche correctement, pour que les interactions soient mises en place et fassent fonctionner l’ensemble du site, certaines ressources peuvent être obligatoires. Elle vont donc bloquer l’affichage de votre page tant qu’elles ne sont pas chargées.

Google est sympa et nous dit d’éliminer ces ressources. Malheureusement, vous ne pouvez parfois tout simplement pas le faire sans compromettre le bon fonctionnement de votre site. Il va donc vous falloir composer en fonction du type de ressource et de son utilité. Le mieux est donc d’en faire le tour.

Gérer les ressources de type CSS

Généralement, tous les fichiers de mise en forme d’un site web sont chargés avant l’affichage de la page. Pour les développeurs, cela se passe dans la partie <head>. C’est la norme et c’est ce comme cela que sont développés tous les sites Internet depuis l’invention du CSS. Dommage, Michel, du service performance web chez Google, déconseille d’utiliser cette méthode…

Michel n’a pas tord. On peut en effet se demander pourquoi il est nécessaire de télécharger toute la mise en forme de la page. Au moins dans un premier temps, seule la mise en forme au dessus de la ligne de flottaison est nécessaire.

L’idée réside donc dans l’idée de séparer le CSS au dessus de cette ligne, et de le télécharger en priorité. Ce premier bout de CSS, prioritaire, s’appelle le critical CSS. Le CSS du reste de la page, pourra être chargé bien plus loin dans le processus d’affichage de la page.

Malheureusement, cette technique n’est pas simple à mettre en oeuvre. Il existe bien des sites Internet vous proposant de générer pour vous le critical CSS mais il est nécessaire de le faire pour chacune des pages.

Le mieux est donc de travailler cette technique de séparation du CSS dès la création du site Internet, en créant 2 fichiers distincts :

  • l’un qui servira à l’affichage de tout ce qui se situe au dessus de la ligne de flottaison, qui s’appelle donc le critical CSS. Il sera donc chargé en priorité, mais son poids ne sera pas très important. Il est aussi possible de placer ce code directement dans la page via l’utilisation d’une balise <style>
  • Le reste du CSS sera téléchargé plus loin, voir à la fin de la page, afin de ne pas bloquer le rendu.

Gérer les resources de type JS

Gérer les ressources de type JS pour améliorer le temps d’affichage de la page repose à peu près sur le même principe, à un détail près. En effet, le JS sert notamment à définir les interactions sur la page. Donc tant que le rendu de la page n’a pas été fait, aucune interaction ne peut avoir lieu.

Théoriquement donc, aucun fichier JS n’est prioritaire par rapport à l’affichage de la page. On peut donc placer tout le JS le plus loin possible dans le code, généralement juste avant la fermeture de la balise <body>.

Il existe cependant des techniques complémentaires pour améliorer encore plus le chargement de la page et du JS. Google PageSpeed Insights recommande notamment de « précharger les demandes clés ». Sans rentrer dans les détails, l’idée est de charger dès le début de la page les ressources JS, mais sans bloquer le rendu. Quand ce fichier sera enfin nécessaire, donc en fin de page, il aura déjà été téléchargé.

Comment gérer les fonts qui bloquent le rendu ?

Sachez que vous avez aussi des typographies qui peuvent bloquer le rendu de l’affichage des textes. Nous avons écrit tout un article sur le blocage du rendu des textes pendant le chargement des polices, consultez-le !

Eliminez les ressources bloquantes sur WordPress

Sous WordPress, il existe une multitude de plugins qui vous permettront d’améliorer la vitesse de votre site en supprimant ou en déportant les ressources bloquantes.

En voici 2 proposés :

  • Speed Booster Pack est un plugin WordPress qui a plus de 30 000 installations actives avec une moyenne de 4 étoiles sur 5
  • HummingBird performance, avec le maximum d’étoiles et 80 000 installations actives.

Attention, ces plugins WordPress peuvent paraître simples à utiliser mais leurs conséquences sur la structure du site sont très importantes. Il convient de vérifier que la mise en forme de votre site n’est pas altérée et que son comportement non plus. Nous vous conseillons de faire appel à un spécialiste WordPress.

Supprimer les ressources qui peuvent être bloquantes sur Vue.js

Nous vous l’avons annoncé plus haut, nous sommes aussi experts Vue.js. Nous proposons notamment l’utilisation de Vue.js combiné à WordPress pour nos clients qui veulent un site extrêmement performant. L’utilisation de Vue.js permet d’obtenir des sites qui s’affichent quasiment instantanément.

Bref, sous Vue.js il existe plusieurs plugins qui vont faciliter la génération du critical CSS. Citons notamment ce plugin : Critical CSS Plugin for Vue CLI 3

Pour le bloquage du rendu via le JS, c’est aussi un cas particulier car Vue est entièrement écrit en JS et est donc optimisé pour ne pas bloquer le rendu. Ainsi, si le site est bien développé en Vue.js, cette recommandation de Google ne devrait pas être proposée.

Quel gain espérer en supprimant les ressources qui bloquent le rendu ?

Bloquage du rendu

Sur son outil, Google PageSpeed Insights indique le gain potentiel à différer ou supprimer les ressources de type CSS ou JS.

Google indique dans ses résultats l’incidence du blocage du rendu par les ressources de type CSS et JS. Il vous est donc facile de mesurer l’amélioration que vous aller pouvoir obtenir sur le chargement de votre site.

Sachez que résoudre cette recommandation va avoir une influence sur tous les indicateurs de Google PageSpeed ou LightHouse et va accélérer sensiblement le temps de chargement de vos pages. On peut noter par exemple le First Contentful Paint, le First Meaningful Paint ou le Délai avant interactivité. Eliminer les ressources qui bloquent le rendu vous rapprochera donc grandement de la note maximal de 100 sur mobile et sur ordinateur et c’est l’une des recommandations Google à traiter en priorité.

Conclusion sur l’élimination des ressources qui bloquent l’affichage de la page.

Vous l’aurez compris, la suppression des problèmes de rendu dus aux ressources bloquantes peut avoir une grande incidence sur le temps de chargement de votre site. C’est l’une des recommandations que l’on retrouve le plus souvent.

Si vous vous en sentez capable, vous pouvez essayer de résoudre vous même cette problématique. Veillez à parcourir l’ensemble de votre site web une fois les modifications mises en place.

N’hésitez pas aussi à nous solliciter pour vous aider à résoudre cette recommandation ou pour toutes autres suggestion de Google PageSpeed.

Besoin d’aide pour optimiser votre site ?

Demandez un devis Demandez un devis

Articles liés

En résumé sur les ressources qui bloquent le rendu

🙉Qu'est-ce qu'une ressource web ?

Une ressource web est un fichier qui est appelé lors du chargement de votre page pour l’afficher correctement. Cet appel se fait la plus part du temps à l’intérieur de la balise <head> de votre page, au tout début du chargement. ➡ En savoir plus

❓Pourquoi certaines ressources web bloquent le rendu ?

Pour pouvoir s’afficher correctement, votre page web peut être dépendante de certains fichiers qui gèrent par exemple l’affichage de la page ou les interactions avec les utilisateurs. ➡ En savoir plus

⚔️Comment éliminer les ressources bloquantes sur WordPress ?

Bonne nouvelle si vous utilisez WordPress, il existe quelques plugins qui vous permettront de gérer les ressources qui bloquent votre rendu. Il est aussi possible de corriger cela directement dans le code. ➡ Voir les solutions

🔥Quelle amélioration sur le temps de chargement supprimant les ressources qui bloquent le rendu ?

En optimisant le chargement des ressources, vous devriez pouvoir mesurer simplement les résultats en terme de temps de chargement sur votre site. ➡ En savoir plus