Les ressources bloquantes sont des styles CSS ou scripts JavaScript nécessitant d'être entièrement chargés pour effectuer le premier rendu de la page.
Selon leur position dans le code HTML de votre site, ces ressources bloquantes peuvent ralentir considérablement le temps de chargement de votre page.
Le code HTML d’une page web est lu de haut en bas par les navigateurs. Si votre script JavaScript se situe en début de page par exemple, la lecture par le navigateur de votre code HTML va se mettre en “pause” pour traiter votre script Javascript. Ainsi, le reste de votre contenu HTML ne s’affichera pas durant le traitement de cet élément, ce qui est pénalisant pour le temps de chargement de votre site, pour l’expérience utilisateur et donc pour votre référencement.
Les ressources bloquant le rendu d’une page web sont généralement issues de JavaScript et de CSS.
Placer les scripts JavaScript en bas de page ou différer leur chargement grâce à l'attribut "defer" :
<head>
<script src="/script.js" defer></script>
</head>
... ou ...
<script src="/script.js"></script>
</body>
</html>
Spécifier le media concerné pour les feuilles de style :
<head>
<link rel="stylesheet" href="print.css" media="print">
</head>