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.
Lo que no hace: Lee el HTML y señala patrones; no carga la página ni mide cuánto bloquea cada recurso el renderizado. La prueba de velocidad de página da tiempos medidos.
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.