Le navigateur construit une page en deux étapes qui s’imbriquent : il lit le HTML, mais s’arrête net dès qu’il rencontre certaines feuilles de style ou scripts, le temps de les récupérer et de les analyser. Ces fichiers qui suspendent l’affichage sont dits « bloquants pour le rendu ».
Un coupable fréquent sur les sites WordPress
Un thème qui charge plusieurs feuilles de style d’un coup, dont certaines ne concernent que des sections basses de la page, retarde inutilement l’affichage initial. WordPress charge par défaut les feuilles CSS et scripts déclarés via wp_enqueue_style et wp_enqueue_script dans l’en-tête, sauf indication contraire.
Exemple
wp_enqueue_script(
'mon-carrousel',
get_template_directory_uri() . '/js/carrousel.js',
array(),
'1.0',
true // charge le script juste avant </body>
);Le dernier argument à true déplace le script en pied de page plutôt que dans l’en-tête, ce qui l’empêche de retarder l’affichage initial du contenu.
Bon à savoir
- L’attribut
deferretarde l’exécution d’un script jusqu’à ce que le HTML soit entièrement analysé, sans bloquer le rendu ;asyncl’exécute dès que possible, potentiellement en interrompant l’analyse du HTML. - Le CSS critique (le strict nécessaire à l’affichage immédiat visible) peut être intégré directement dans le HTML pour éviter d’attendre une feuille de style externe complète.
- Réduire le nombre de fichiers CSS et JavaScript bloquants améliore directement des métriques comme le LCP, puisque le premier rendu visuel dépend de leur disponibilité.