Vérificateur de ressources bloquantes
Réponse courte
Repérez les scripts et feuilles de style qui bloquent le rendu, ainsi que les pratiques qui ralentissent les pages : async/defer manquants, gestionnaires d'événements inline et document.write.
Ce que ça fait
Vérifie le HTML d'une page en deux parties. Ressources bloquant le rendu : scripts dans `<head>` sans `async` ni `defer`, feuilles de style bloquant le rendu et règles CSS `@import`. Hygiène des scripts : combien de scripts externes et inline la page charge, si les scripts externes utilisent `async` ou `defer`, les gestionnaires d'événements inline tels que `onclick`, les appels `document.write` et si des modules ES sont utilisés.
Pourquoi c'est important
Un navigateur doit télécharger et exécuter chaque script et feuille de style bloquants dans `<head>` avant de pouvoir afficher quoi que ce soit, ce qui retarde le First Contentful Paint et souvent le Largest Contentful Paint. `document.write` aggrave la situation — Chrome peut refuser d'exécuter les scripts qu'il injecte sur les connexions lentes — et les gestionnaires inline entravent une Content-Security-Policy stricte.
Comment ça fonctionne
-
Saisissez l'URL d'une page ou collez son HTML
-
Nous analysons le `<head>` et chaque `<script>` de la page
-
Signalons les scripts et feuilles de style bloquant le rendu, puis vérifions les scripts pour async/defer, les gestionnaires inline et document.write
-
Renvoyons un résultat pour chaque partie, avec les ressources signalées
Exemple d'entrée et de sortie
url: https://rankproof.eu/tools
Render-blocking resources: 2 <script src="analytics.js"> blocking <link rel="stylesheet" href="theme.css"> blocking aucun @import en CSS OK Script hygiene scripts: 7 (5 externes, 2 en ligne) les scripts externes utilisent async ou defer warn aucun gestionnaire d'événements en ligne OK aucun appel à document.write OK uses ES modules OK Aucun domaine sur 2 n'est satisfaisant
Qui l'utilise
-
Ingénieur performance
Avant une saison chargée, passez chaque script bloquant en async ou defer et revérifiez que rien de nouveau ne s'est glissé dans `<head>`.
-
Développeur front-end
Trouvez l'extrait d'analytics ou de widget qui se charge encore de façon synchrone et basculez-le vers un chargement différé.
-
Spécialiste SEO
Vérifiez les modèles derrière vos pages les plus lentes et transmettez les ressources signalées à l'équipe de développement.
Questions fréquentes
Comment débloquer une feuille de style ?
Pour le CSS non critique, ajoutez `media="print"` et `onload="this.media='all'"`. Pour le CSS critique, mettez-le en ligne dans des balises `<style>`.
Puis-je simplement différer tous mes scripts ?
Pas toujours — les scripts qui doivent s'exécuter avant le premier affichage, les polyfills requis pour la mise en page et les scripts inline ne peuvent pas toujours attendre. Auditez-les selon leur impact.
Qu'est-ce qui ne va pas avec document.write ?
Il force le navigateur à mettre en pause l'analyse, et Chrome peut bloquer les scripts qu'il injecte sur les connexions lentes. Insérez les éléments avec des méthodes du DOM à la place.
Pourquoi signaler les gestionnaires d'événements inline ?
Des gestionnaires tels que `onclick="…"` mélangent le comportement au balisage et nécessitent `unsafe-inline` dans une Content-Security-Policy. Attachez plutôt les écouteurs depuis un fichier de script.
Et les widgets tiers ?
Chargez-les avec `<script async>` ou via un gestionnaire de balises avec un chargement différé. Mieux encore, ne chargez les widgets sous la ligne de flottaison qu'au défilement ou à l'interaction.