Render Blocking
Recursos CSS o JavaScript que impiden que una página se muestre hasta que terminan de cargarse.
Resumen rápido
Render Blocking se refiere a recursos CSS o JavaScript que impiden que una página se muestre hasta que terminan de cargarse. Los recursos render-blocking son una de las principales causas de un LCP lento y una mala experiencia de usuario. Google penaliza páginas que tardan mucho en mostrar contenido visible, y los usuarios abandonan sitios que no cargan en 3 segundos. Consejo clave: Herramienta rápida: abre Chrome DevTools > Coverage (Ctrl+Shift+P, busca "Coverage").
¿Qué es Render Blocking?
Los recursos render-blocking son archivos CSS y JavaScript que el navegador debe descargar y procesar completamente antes de poder mostrar cualquier contenido visible al usuario. Cada archivo CSS o JS referenciado en el <head> de tu HTML sin atributos async o defer es potencialmente render-blocking, retrasando la primera impresión visual de la página y empeorando métricas como FCP (First Contentful Paint) y LCP.
¿Por qué importa?
Los recursos render-blocking son una de las principales causas de un LCP lento y una mala experiencia de usuario. Google penaliza páginas que tardan mucho en mostrar contenido visible, y los usuarios abandonan sitios que no cargan en 3 segundos. Eliminar o diferir estos recursos puede ser la mejora de rendimiento más impactante que hagas.
Cómo aplicar Render Blocking paso a paso
Usa async o defer en scripts JavaScript no críticos, separa e inline el CSS crítico above-the-fold directamente en el HTML, y carga el CSS no esencial de forma asíncrona usando media queries o preload. Minimiza y combina archivos cuando sea posible para reducir el número de solicitudes de red.
Ejemplo práctico
Un sitio corporativo cargaba 12 archivos JavaScript en el <head>, incluyendo jQuery, analytics, chat widget y 3 plugins de WordPress. Total: 2.8MB de JS render-blocking. Al mover 10 de ellos al final del body con defer, eliminar 3 plugins innecesarios e inline 1KB de CSS crítico, el FCP pasó de 5.1s a 1.4s y la tasa de rebote en móvil se redujo del 72% al 48%.
Errores comunes
Cargar Google Fonts de forma síncrona sin preconnect o font-display: swap, causando texto invisible
Incluir todo el CSS del sitio en un solo archivo enorme en vez de separar el CSS crítico del above-the-fold
Agregar scripts de terceros (chat, analytics, remarketing) directamente en el head sin async o defer
No usar preconnect o dns-prefetch para dominios de terceros de los que se cargan recursos frecuentemente
Tip pro
Herramienta rápida: abre Chrome DevTools > Coverage (Ctrl+Shift+P, busca "Coverage"). Te muestra exactamente cuánto CSS y JS de cada archivo se usa realmente en la página actual. Si un archivo tiene más del 70% de código sin usar, es candidato a code-splitting u optimización. También prueba tu sitio con la pestaña Network configurada en "Slow 3G" para ver lo que experimentan usuarios con conexiones lentas.
Preguntas frecuentes
Herramientas relacionadas
Términos relacionados
My Rank Lab
Aprende a aplicar Render Blocking como un profesional
Herramientas reales, cursos avanzados y soporte experto. No solo lees, aplicas.