Le critical rendering path est la séquence d'étapes que le navigateur exécute pour transformer le HTML, le CSS et le JS en pixels à l'écran. Tout ce qui doit se terminer avant le premier paint est render-blocking.
Le critical rendering path est la séquence d'étapes que le navigateur exécute pour transformer le HTML, le CSS et le JS en pixels à l'écran. Tout ce qui doit se terminer avant le premier paint est render-blocking.
<script> arrête le parsing du HTML pendant qu'il se télécharge et s'exécute.<!-- Bloque le parsing : le navigateur attend ici avant de continuer -->
<script src="/app.js"></script>
<!-- defer : télécharge en parallèle, s'exécute après le parsing du HTML, dans l'ordre -->
<script src="/app.js" defer></script>
<!-- async : télécharge en parallèle, s'exécute dès qu'il est prêt (ordre non garanti) -->
<script src="/analytics.js" async></script>
Utilisez defer pour le code applicatif qui touche au DOM, et async pour les scripts indépendants comme l'analytics. Mettez le CSS critique en inline et chargez le reste sans blocage.
C'est le modèle mental derrière presque tous les correctifs de temps de chargement : le CSS/JS render-blocking est la principale cause d'un premier paint lent et d'un mauvais LCP. Savoir pourquoi defer/async existent montre que vous comprenez le navigateur, pas seulement la syntaxe.
Une bibliothèque de questions d'entretien IT avec des réponses détaillées — du Junior au Senior.
Faire un don