Si has analizado tu web con Google PageSpeed Insights o GTmetrix y te ha aparecido el aviso de «eliminar los recursos que bloquean el renderizado», no estás solo. Es uno de los problemas más habituales en WordPress y también uno de los que más impacto tiene sobre la velocidad percibida por el usuario. La buena noticia es que tiene solución, y no necesitas ser programador para aplicarla.
El render blocking ocurre cuando el navegador, al cargar tu página, se encuentra con archivos CSS o JavaScript que tiene que descargar y procesar antes de poder mostrar nada en pantalla. En sitios WordPress con varios plugins activos, esto es muy común: cada plugin añade sus propios archivos y, sin una gestión adecuada, el resultado es una página que tarda demasiado en aparecer ante el usuario.
En esta guía vas a aprender exactamente qué causa este problema, cómo identificar qué recursos son los culpables y qué métodos puedes aplicar hoy mismo para eliminarlo, tanto con plugins como con pequeñas modificaciones de código.
Entendiendo el render blocking y su impacto en WordPress
Cuando un navegador carga una página web, lee el HTML de arriba hacia abajo. En el momento en que encuentra un archivo CSS o un script JavaScript en el <head>, detiene el proceso de renderizado hasta que ese archivo se descarga y se procesa por completo. A este comportamiento se le llama render blocking o bloqueo del renderizado.
En WordPress esto se agrava porque el sistema, por defecto, carga muchos estilos y scripts en el <head> de la página. Temas, plugins de formularios, sliders, librerías como jQuery… todos compiten por cargarse antes de que el usuario vea algo. El resultado afecta directamente a métricas clave como el First Contentful Paint (FCP) y el Largest Contentful Paint (LCP), dos de los factores que Google utiliza para evaluar la experiencia de usuario. Si quieres saber más sobre cómo mejorar el LCP en WordPress, sigue leyendo.
No se trata solo de puntuación en PageSpeed. Un segundo adicional de espera puede aumentar la tasa de rebote de forma notable, especialmente en móvil.
Cómo identificar los recursos bloqueantes en tu sitio web
Antes de ponerte a solucionar nada, necesitas saber exactamente qué archivos están causando el problema. Hay varias herramientas que te lo indican de forma clara:
- Google PageSpeed Insights: Analiza tu URL y busca el apartado «Eliminar los recursos que bloquean el renderizado». Te listará los archivos concretos con su peso y el tiempo estimado de bloqueo.
- GTmetrix: En la pestaña Waterfall puedes ver el orden de carga de todos los recursos y cuáles están retrasando el primer renderizado.
- Chrome DevTools: Abre las herramientas de desarrollo con F12, ve a la pestaña Performance y graba una carga de página. Podrás ver exactamente qué archivos bloquean el render y durante cuánto tiempo.
Una vez identificados, clasifícalos en dos grupos: archivos CSS y archivos JavaScript. La estrategia para cada uno es diferente, como verás a continuación.
Cómo distinguir entre CSS crítico y recursos que bloquean el render
No todo el CSS es igual ni puede tratarse de la misma manera. Aquí es donde mucha gente comete el primer error: intentar diferir o eliminar todo el CSS sin distinción.
El CSS crítico es el conjunto de estilos necesarios para renderizar correctamente el contenido que el usuario ve nada más cargar la página, es decir, el área above the fold. Este CSS sí debe cargarse de forma inmediata, porque de lo contrario aparecerá el llamado FOUC (Flash of Unstyled Content): la página se mostrará un instante sin estilos, lo cual genera una experiencia muy mala.
El resto del CSS, el que controla elementos que el usuario solo verá si hace scroll, puede cargarse de forma diferida sin ningún problema visual. La estrategia correcta es:
- Extraer el CSS crítico e incluirlo inline en el
<head>. - Cargar el resto del CSS de forma asíncrona para que no bloquee el renderizado.
Esta técnica, bien aplicada, puede reducir drásticamente el tiempo de bloqueo sin romper el diseño de tu web.
Pasos prácticos para eliminar CSS bloqueante en WordPress
Existen dos enfoques principales para gestionar el CSS bloqueante en WordPress: usar un plugin o intervenir directamente en el código.
Usando plugins de optimización: WP Rocket y LiteSpeed Cache
Si no quieres tocar código, los plugins de optimización hacen este trabajo de forma automática. WP Rocket incluye una opción llamada «Optimizar CSS delivery» que extrae el CSS crítico automáticamente y difiere el resto. Solo tienes que activarla desde el panel de opciones y el plugin se encarga del proceso.
LiteSpeed Cache, en su versión gratuita, también ofrece opciones para optimizar el CSS a través de su apartado de «Page Optimization». La opción «Load CSS Asynchronously» cumple una función similar. Para saber cómo configurar correctamente LiteSpeed Cache, chequea las guías disponibles.
Eliminando recursos bloqueantes de forma manual en WordPress
Si prefieres hacerlo sin plugins adicionales, puedes cambiar la forma en que tu WordPress carga los estilos no críticos usando el siguiente fragmento en el archivo functions.php de tu tema hijo:
add_filter( 'style_loader_tag', function( $html, $handle ) {
$defer_styles = array( 'nombre-del-handle-css' );
if ( in_array( $handle, $defer_styles ) ) {
$html = str_replace( "rel='stylesheet'", "rel='preload' as='style' onload=\"this.onload=null;this.rel='stylesheet'\"", $html );
}
return $html;
}, 10, 2 );Sustituye nombre-del-handle-css por el handle del estilo que quieres diferir. Puedes encontrarlo inspeccionando el código fuente de tu web: aparece como id="nombre-style" en la etiqueta <link>.
Combatir el JavaScript que bloquea el renderizado en tu web
Con los scripts JavaScript la solución más extendida es usar los atributos defer o async. Pero no son intercambiables, y elegir mal puede romper funcionalidades de tu web.
Cuándo utilizar defer para los scripts de JavaScript
El atributo defer le indica al navegador que descargue el script en segundo plano mientras parsea el HTML, pero que lo ejecute solo cuando el documento esté completamente cargado, respetando además el orden entre scripts. Es la opción más segura para la mayoría de scripts de WordPress, especialmente aquellos que dependen de jQuery o del DOM.
Opción async: cuándo y cómo usarlo en tu web
El atributo async descarga y ejecuta el script tan pronto como está disponible, sin esperar al HTML ni al resto de scripts. Es adecuado para scripts completamente independientes como píxeles de seguimiento o scripts de analítica que no tienen dependencias.
Implementando defer y async en WordPress de forma sencilla
En WordPress puedes añadir estos atributos filtrando la etiqueta de script. Añade esto en el functions.php de tu tema hijo:
add_filter( 'script_loader_tag', function( $tag, $handle ) {
$defer_scripts = array( 'nombre-del-handle-js' );
$async_scripts = array( 'otro-handle-js' );
if ( in_array( $handle, $defer_scripts ) ) {
return str_replace( ' src', ' defer src', $tag );
}
if ( in_array( $handle, $async_scripts ) ) {
return str_replace( ' src', ' async src', $tag );
}
return $tag;
}, 10, 2 );Añade los handles correspondientes en los arrays según el atributo que quieras aplicar a cada script.
Utilizando plugins de caché para eliminar render blocking sin complicaciones
Si quieres una solución más integral que cubra tanto CSS como JavaScript sin necesidad de tocar código, los plugins de caché modernos incluyen estas funciones de forma nativa.
WP Rocket es la opción más completa del mercado: desde su sección «Optimización de archivos» puedes activar la minificación y concatenación de CSS y JS, diferir los scripts, y generar el CSS crítico automáticamente. Es de pago, pero el ahorro de tiempo y los resultados justifican la inversión para la mayoría de proyectos.
LiteSpeed Cache es una alternativa gratuita muy potente si tu hosting usa el servidor LiteSpeed. Su módulo de optimización de página cubre prácticamente las mismas funciones.
Autoptimize junto con Async JavaScript es una combinación gratuita que funciona bien: Autoptimize gestiona la optimización de CSS y Async JavaScript aplica defer o async a los scripts que elijas.
Sea cual sea el plugin que uses, activa los cambios de uno en uno y verifica que tu web sigue funcionando correctamente antes de continuar con el siguiente ajuste.
Evita estos errores al tratar de eliminar recursos bloqueantes
Este es uno de esos procesos donde ir demasiado rápido puede causarte más problemas que la propia lenta carga inicial. Estos son los errores más frecuentes:
- Diferir jQuery: jQuery es una dependencia crítica para muchos plugins y temas. Deferirlo puede romper formularios, sliders y otros elementos interactivos. Evita incluirlo en los handles a diferir salvo que hayas comprobado exhaustivamente que todo funciona.
- Eliminar todo el CSS sin generar el CSS crítico: Si difieres todo el CSS sin tener el CSS crítico inline, la página aparecerá sin estilos durante unos instantes. Asegúrate de que el CSS above-the-fold está cubierto.
- No probar en móvil: Muchos problemas visuales provocados por estos cambios solo se manifiestan en resoluciones pequeñas. Siempre verifica en dispositivos móviles.
- Activar demasiadas opciones a la vez: Si algo se rompe y has activado diez opciones simultáneamente, no sabrás cuál es la causa. Activa una opción, verifica, y luego continúa.
- Ignorar el plugin builder del tema: Temas como Divi, Elementor o Avada tienen sus propias librerías CSS y JS. En estos casos, ajusta la configuración desde el propio constructor además de desde el plugin de optimización.
Comprobar si has eliminado correctamente el render blocking
Una vez aplicados los cambios, es el momento de comprobar que han tenido efecto y que nada se ha roto en el proceso.
Vuelve a analizar tu web con Google PageSpeed Insights. Si el aviso de render blocking ha desaparecido o ha reducido significativamente el número de recursos listados, vas por el buen camino. Fíjate también en la mejora de las métricas FCP y LCP.
Haz una inspección visual completa de tu web: página de inicio, páginas interiores, entradas del blog, páginas de producto si tienes WooCommerce, y formularios de contacto. Comprueba en escritorio y en móvil.
Puedes usar también la herramienta WebPageTest para ver una filmtira del proceso de carga y confirmar que el contenido visible aparece antes que con la configuración anterior.
Si todo funciona correctamente y las métricas han mejorado, habrás conseguido uno de los avances más importantes en la optimización de rendimiento de tu WordPress. Si algo no funciona, desactiva el último cambio que aplicaste y vuelve a probar.
Respuestas a las preguntas frecuentes sobre el render blocking
¿Qué es el render blocking en términos simples?
El render blocking ocurre cuando el navegador encuentra archivos CSS o JavaScript que debe descargar y procesar antes de mostrar el contenido de tu página. Estos recursos bloquean el renderizado porque el navegador detiene la visualización hasta procesarlos completamente, lo que aumenta el tiempo de carga percibido por el usuario y afecta negativamente a las métricas de rendimiento como el LCP y el FCP.
¿Es seguro eliminar recursos bloqueantes en masa?
No siempre es recomendable eliminar el render blocking de todos los recursos a la vez. Los archivos CSS principales necesitan cargarse pronto para evitar el FOUC, donde la página aparece sin estilos momentáneamente. Lo ideal es extraer el CSS crítico para el contenido above-the-fold y diferir el resto, mientras que con JavaScript puedes usar defer o async según el tipo de script y sus dependencias.
Diferencias entre defer y async en scripts JavaScript
Defer descarga el script en segundo plano y lo ejecuta después de que el HTML esté parseado, manteniendo el orden de ejecución entre scripts. Async descarga y ejecuta el script tan pronto como esté disponible, sin esperar al HTML ni respetar el orden. Para scripts que dependen de otros o del DOM completo, defer es la opción más segura, mientras que async funciona bien para scripts independientes como los de analítica.
¿Cuánto puede mejorar mi puntuación en PageSpeed si elimino el render blocking?
Sí, eliminar recursos que bloquean el renderizado mejorará significativamente tu puntuación en PageSpeed Insights, especialmente en las métricas de First Contentful Paint y Largest Contentful Paint. Una correcta implementación puede aumentar tu puntuación entre 10 y 30 puntos dependiendo de cuántos recursos bloqueantes tengas actualmente, aunque el resultado final depende también de otros factores de rendimiento de tu web.
