Quelle difference entre defer et async pour les scripts ?

async telecharge le script en parallele et l'execute des qu'il est disponible (peut interrompre le parsing). defer telecharge en parallele mais attend la fin du parsing HTML avant d'executer, et respecte l'ordre des scripts. defer est generalement prefere pour les scripts qui dependent du DOM.

Render-blocking Resources : Éliminer les Blocages

Q: Comment charger du CSS sans bloquer le rendu ?

La technique recommandee est : . Cela charge le CSS en arriere-plan puis l'applique une fois telecharge. Combinez avec l'inlining du CSS critique pour un premier rendu rapide.

Définition

Les render-blocking resources sont des fichiers CSS et JavaScript qui empêchent le navigateur d'afficher le contenu, pénalisant les Core Web Vitals et le SEO.

Les render-blocking resources sont des fichiers CSS et JavaScript qui doivent être telecharges et traités par le navigateur avant de pouvoir afficher le contenu de la page. Par défaut, le CSS est render-blocking (le navigateur attend le CSSOM complet avant de peindre) et le JavaScript synchrone bloque le parsing du DOM. Ces ressources retardent le First Contentful Paint (FCP) et le Largest Contentful Paint (LCP), degradant les Core Web Vitals. Les solutions incluent : charger le CSS non-critique de manière asynchrone (media='print' onload), inliner le CSS critique, utiliser defer ou async sur les balises script, charger les scripts tiers en fin de page ou via un tag manager avec deferrement, et utiliser le preload pour les ressources critiques. Google PageSpeed Insights signale spécifiquement les render-blocking resources comme problème a corriger.

ressources bloquant le rendu render blocking CSS render blocking JS ressources critiques

Points clés à retenir

Le CSS est render-blocking par défaut, utiliser l'inlining critique + chargement async
JavaScript synchrone bloque le parsing du DOM, privilégier defer et async
Google PageSpeed Insights identifie automatiquement les ressources render-blocking

Exemples concrets

Defer des scripts tiers

Un site charge 8 scripts tiers (analytics, chat, tracking) de manière synchrone. Après passage en defer et chargement conditionnel, le FCP s'améliore de 1.5 secondes.

CSS asynchrone

Un site avec 3 fichiers CSS (400KB total) les transforme : le CSS critique (15KB) est inline, les 2 fichiers non-critiques sont charges avec media='print' onload='this.media="all"'. Le LCP gagne 800ms.

Questions fréquentes

Quelle différence entre defer et async pour les scripts ?

async telecharge le script en parallèle et l'exécuté des qu'il est disponible (peut interrompre le parsing). defer telecharge en parallèle mais attend la fin du parsing HTML avant d'exécuter, et respecte l'ordre des scripts. defer est généralement préféré pour les scripts qui dépendent du DOM.

Comment charger du CSS sans bloquer le rendu ?

La technique recommandée est : <link rel='stylesheet' href='style.css' media='print' onload='this.media="all"'>. Cela charge le CSS en arrière-plan puis l'applique une fois telecharge. Combinez avec l'inlining du CSS critique pour un premier rendu rapide.

Termes liés

Aller plus loin avec LemmiLink

Découvrez comment LemmiLink peut vous aider à mettre en pratique ces concepts SEO.

Acheter des backlinks de qualité Solutions SEO pour agences