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 qu’il ne fait pas: Il lit le HTML et signale des schémas ; il ne charge pas la page et ne mesure pas combien de temps chaque ressource bloque le rendu. Le test de vitesse de page donne des temps mesurés.
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.