Ressource bloquant le rendu
Une ressource bloquant le rendu est un fichier CSS ou JavaScript que le navigateur doit télécharger et traiter avant d'afficher le moindre pixel de la page.
Définition
Une ressource bloquant le rendu est un fichier CSS ou JavaScript que le navigateur doit télécharger et traiter avant d’afficher le moindre pixel de la page. Le serveur a déjà envoyé tout le texte, le navigateur l’a déjà reçu, et pourtant il attend. Le visiteur, lui, regarde un écran vide.
Quelles ressources bloquent le rendu ?
Les feuilles de style, et les scripts déclarés sans précaution.
Le CSS bloque par construction. Le navigateur ne peut pas savoir à l’avance si une règle contenue dans la feuille va changer la couleur, la taille ou la position de ce qu’il s’apprête à peindre. Plutôt que d’afficher une page qu’il devrait redessiner une seconde plus tard, il attend d’avoir lu la totalité des feuilles déclarées dans l’en-tête.
Le JavaScript bloque pour une autre raison. Un script peut modifier le document pendant sa lecture, donc le navigateur interrompt l’analyse de la page, télécharge le fichier, l’exécute, puis reprend où il en était. Deux attributs changent ce comportement. Avec defer, le fichier se télécharge en parallèle et ne s’exécute qu’à la fin de l’analyse, dans l’ordre de déclaration. Avec async, il s’exécute dès qu’il est prêt, sans garantie d’ordre.
Pourquoi un site WordPress en accumule-t-il autant ?
Parce que chaque extension charge partout, y compris là où elle ne sert pas.
Une extension de formulaire de contact dépose sa feuille de style et son script sur l’ensemble des pages du site, pas seulement sur celle qui porte le formulaire. Une extension de galerie fait de même, une extension de partage aussi. Personne n’arbitre, parce que chaque auteur d’extension raisonne sur son propre périmètre et ne voit pas la file complète.
Les constructeurs de page amplifient le phénomène en chargeant leur propre moteur d’affichage sur chaque page construite avec eux. Le résultat est un en-tête qui compte parfois plusieurs dizaines de fichiers, dont une grande partie ne concerne pas la page consultée.
Le raccourci à éviter. Tout basculer en async parce que c’est le mot qui sonne le plus rapide. Un script asynchrone s’exécute dès qu’il est disponible, dans un ordre imprévisible. Si un second script dépend du premier, la fonctionnalité casse sans message d’erreur visible. L’attribut defer conserve l’ordre de déclaration et reste le réglage sûr par défaut.
Où se fabrique la file d’attente sur un site WordPress ?
Dans le thème, dans le constructeur, et dans les extensions les plus lourdes.
Le thème charge sa feuille de style principale sur chaque page, ce qui est normal et rarement le problème. Le constructeur de page, lui, ajoute son propre moteur d’affichage, ses styles et ses scripts d’animation, y compris sur des pages qui n’utilisent qu’un titre et deux paragraphes.
WooCommerce est le cas d’école. La boutique publie ses feuilles de style et ses scripts de panier sur l’ensemble du site, page de contact et articles de blog compris, parce qu’il n’a aucun moyen de savoir à l’avance qu’un bouton d’achat n’y figurera pas. Sur un site où la boutique ne représente que quelques pages, ce chargement pèse sur toutes les autres.
Pour voir ce qui est réellement inutile plutôt que de le supposer, les outils de développement de Chrome offrent un onglet de couverture. Il indique, feuille par feuille et script par script, quelle proportion du code téléchargé a effectivement servi à la page consultée. Une feuille utilisée à 5 % n’est pas un soupçon, c’est une mesure.
Comment réduire les ressources bloquantes ?
En comptant d’abord, en supprimant ensuite, en différant en dernier.
Établir la liste
PageSpeed Insights nomme les fichiers qui retardent le premier affichage et le temps que chacun coûte. C’est la seule liste qui vaut, avant toute intervention. Établir cette liste page par page est le point de départ d’une optimisation du chargement des pages.
Supprimer ce qui ne sert pas ici
Une ressource retirée d’une page où elle ne sert à rien ne coûte plus rien et ne risque plus de casser. C’est le seul gain sans contrepartie, et c’est celui qu’on saute le plus souvent pour aller directement aux réglages.
Différer ce qui reste
Les scripts qui ne participent pas au premier affichage passent en defer. Statistiques, bandeau de consentement, animations, tout cela peut attendre que la page soit lisible.
Écrire le style du premier écran dans la page
Le strict nécessaire à l’affichage du haut de page, appelé style critique, est écrit directement dans le document et le reste des feuilles est chargé sans bloquer. C’est la technique qui produit le gain le plus net sur le premier affichage. C’est aussi la plus fragile : le style critique se recalcule à chaque modification du gabarit, faute de quoi il finit par décrire une page qui n’existe plus.
Questions fréquentes
Faut-il fusionner tous les fichiers en un seul ?
C’était le bon conseil du temps où le navigateur ouvrait une connexion par fichier. Ce n’est plus automatique aujourd’hui, les requêtes parallèles coûtant beaucoup moins cher. Fusionner a même un revers : la moindre modification dans un coin du fichier oblige tous les visiteurs à retélécharger l’ensemble, alors que des fichiers séparés gardent leur cache.
Une police d’écriture bloque-t-elle l’affichage ?
Pas directement, mais elle est déclarée dans une feuille de style qui, elle, bloque. Le texte peut ensuite rester invisible le temps que la police arrive, comportement qui se règle par une propriété dédiée plutôt qu’en retirant la police.
Mon site s’affiche instantanément chez moi, pourquoi l’outil signale-t-il un blocage ?
Parce que votre navigateur a déjà tous ces fichiers en cache et que votre connexion n’a rien à voir avec celle mesurée. L’évaluation se fait sur un mobile bridé, première visite, cache vide. C’est la situation d’un visiteur qui vous découvre.
Faut-il désactiver les fichiers de la boutique sur les pages sans produit ?
C’est le chantier le plus rentable d’un site WordPress mixte, et le plus risqué à faire sans méthode. Un panier présent dans l’en-tête ou un bloc de produits mis en avant dans un article dépendent de ces fichiers. La règle est de conditionner page par page à partir d’un relevé de couverture, pas d’appliquer une exclusion globale.
Sources
Et sur votre site ?
Une définition ne dit pas si vous êtes concerné.
L'audit gratuit répond dans votre cas : état technique, temps de chargement, et ce que Google voit réellement de vos pages. Un constat écrit, sans engagement et sans jargon.