Comprobador de recursos bloqueantes
Respuesta breve
Encuentra los scripts y hojas de estilo que bloquean el renderizado y los hábitos que ralentizan las páginas: falta de async/defer, manejadores de eventos inline y document.write.
Qué hace
Comprueba el HTML de una página en dos partes. Recursos bloqueantes de renderizado: scripts en `<head>` sin `async` ni `defer`, hojas de estilo que bloquean el renderizado y reglas `@import` de CSS. Higiene de scripts: cuántos scripts externos e inline carga la página, si los scripts externos usan `async` o `defer`, controladores de eventos inline como `onclick`, llamadas a `document.write` y si se usan módulos ES.
Por qué importa
Un navegador tiene que descargar y ejecutar cada script y hoja de estilo bloqueante en `<head>` antes de poder pintar nada, lo que retrasa el First Contentful Paint y a menudo el Largest Contentful Paint. `document.write` empeora esto: Chrome puede negarse a ejecutar los scripts que inyecta en conexiones lentas, y los controladores inline se interponen en una Content-Security-Policy estricta.
Cómo funciona
-
Introduce la URL de una página o pega su HTML
-
Analizamos el `<head>` y cada `<script>` de la página
-
Marcamos los scripts y hojas de estilo bloqueantes, y luego comprobamos los scripts en busca de async/defer, controladores inline y document.write
-
Devolvemos un resultado por cada parte, con los recursos que marcamos
Ejemplo de entrada y salida
url: https://rankproof.eu/tools
Recursos bloqueantes de renderizado: 2 <script src="analytics.js"> blocking <link rel="stylesheet" href="theme.css"> blocking sin @import en CSS OK Higiene de scripts scripts: 7 (5 externos, 2 inline) los scripts externos usan async o defer warn sin controladores de eventos inline OK sin document.write OK usa módulos ES OK 0 de 2 áreas están bien
Quién lo usa
-
Ingeniero/a de rendimiento
Antes de una temporada alta, pasa cada script bloqueante a async o defer y vuelve a comprobar que no se ha colado nada nuevo en `<head>`.
-
Desarrollador/a frontend
Encuentra el fragmento de analítica o widget que aún carga de forma síncrona y cámbialo a una carga diferida.
-
Especialista en SEO
Comprueba las plantillas detrás de tus páginas más lentas y entrega los recursos marcados al equipo de desarrollo.
Preguntas frecuentes
¿Cómo desbloqueo una hoja de estilo?
Para CSS no crítico, añade `media="print"` y `onload="this.media='all'"`. Para CSS crítico, inclúyelo en línea en etiquetas `<style>`.
¿Puedo simplemente aplicar defer a todos mis scripts?
No siempre: los scripts que deben ejecutarse antes del primer pintado, los polyfills necesarios para el diseño y los scripts inline no siempre pueden esperar. Audítalos por su impacto.
¿Qué tiene de malo document.write?
Obliga al navegador a pausar el análisis, y Chrome puede bloquear los scripts que inyecta en conexiones lentas. Inserta elementos con métodos del DOM en su lugar.
¿Por qué se marcan los controladores de eventos inline?
Controladores como `onclick="…"` mezclan el comportamiento con el marcado y necesitan `unsafe-inline` en una Content-Security-Policy. Adjunta los listeners desde un archivo de script en su lugar.
¿Qué pasa con los widgets de terceros?
Cárgalos con `<script async>` o mediante un gestor de etiquetas con carga diferida. Mejor aún, carga los widgets bajo el pliegue solo al hacer scroll o al interactuar.