Cuando alguien intenta visitar una página de tu sitio, introduce la URL en su navegador, que empieza a trabajar de inmediato. Para cargar la página, tiene que «renderizar» todos los elementos que la componen.
Pero a veces hay archivos de CSS o JavaScript que interrumpen este proceso e impiden que se renderice tu contenido; se denominan recursos que bloquean el renderizado. Esto significa que los visitantes pueden experimentar largos tiempos de espera, lo que puede influir negativamente en la imagen que se forman de tu organización y en su decisión de realizar las acciones que te gustaría.
En esta guía, explicaremos qué son los recursos que bloquean el renderizado y hablaremos de las ventajas de eliminarlos de tu sitio. Después, te mostraremos cómo eliminarlos de cinco formas diferentes.
¿Qué son los recursos que bloquean el renderizado?
Antes de analizar en detalle los recursos que bloquean el renderizado, es importante entender el proceso normal de carga de un sitio web. Después de que un visitante haga clic en un enlace a tu sitio, su navegador necesita renderizar (o descargar) todo su contenido. Lee el código de tu sitio de arriba abajo, incluido todo su HTML, CSS y JavaScript.
Los visitantes no podrán ver tu sitio web hasta que el navegador haya leído por completo esta cola de scripts. Si hay recursos que bloquean el renderizado, podrían tener que esperar mucho tiempo.
En esencia, un recurso que bloquea el renderizado es un archivo de CSS o JavaScript que hace que el navegador deje de cargar el resto del contenido hasta que lo procese. Esto puede pausar el proceso de renderizado y hacer que la página aparezca en blanco o incompleta.
Cuando tu sitio tiene recursos que bloquean el renderizado, carga archivos innecesarios al principio de su código. Los visitantes tendrán que esperar a que se procesen estos archivos para poder ver la página.
Estas son algunas métricas de rendimiento del sitio web a las que pueden afectar los recursos que bloquean el renderizado:
- LCP (renderizado del mayor elemento con contenido): mide cuánto se tarda en cargar el contenido principal de una página.
- FCP (primer renderizado con contenido): es el tiempo que tarda el navegador en renderizar el primer fragmento de contenido del Modelo de objetos del documento (DOM) en tu sitio.
- TBT (Total Blocking Time): mide el retraso entre el primer renderizado con contenido y el tiempo hasta la interactividad (cuánto tarda una página en ser completamente interactiva).
Los recursos que bloquean el renderizado no son esenciales para la carga, pero pueden retrasar el proceso de renderizado. Esto puede afectar negativamente a la experiencia de usuario (UX) de tu sitio. Por tanto, para evitar que los visitantes abandonen tus páginas, es importante que los elimines.
Ventajas de eliminar los recursos que bloquean el renderizado
Por lo general, a los usuarios de Internet no les gusta esperar a que se carguen las páginas. Un sitio rápido puede animar a los visitantes a explorar tu contenido y evitar que recurran a la competencia.
Eliminar los recursos que bloquean el renderizado puede ser la clave para mejorar la velocidad de la página porque, en esencia, haces que el código de tu sitio web sea lo más ligero posible.
Eliminar los archivos que bloquean el renderizado también puede mejorar la posición de tu sitio en los resultados de los motores de búsqueda, ya que el rendimiento del sitio y la interacción de los usuarios son algunos de los indicadores que empresas como Google utilizan al evaluar los sitios.
Cómo comprobar si hay recursos que bloquean el renderizado en tu sitio web
Antes de empezar a eliminar archivos de tu sitio, tendrás que averiguar si contiene recursos que bloquean el renderizado. Los tiempos de carga lentos también pueden deberse a otros factores, como imágenes no optimizadas, un hosting de baja calidad o tener demasiados plugins.
Para comprobar si tu sitio web tiene recursos que bloquean el renderizado, puedes utilizar una herramienta de Google como PageSpeed Insights. Esta herramienta puede ofrecerte informes detallados sobre el rendimiento de tu página y sugerencias para ayudarte a mejorar tus puntuaciones.
Para empezar, solo tienes que introducir la URL de tu sitio en el cuadro de búsqueda y hacer clic en Analizar. A continuación, la herramienta comprobará el rendimiento de tu sitio. Cuando termine, verás una evaluación de las métricas Core Web Vitals de tu sitio, que miden la velocidad de la página.
PageSpeed Insights también facilita la comprobación de los recursos que bloquean el renderizado. Para ello, desplázate hacia abajo hasta la sección de Oportunidades. Aquí tendrás que buscar una sugerencia titulada Eliminar los recursos que bloquean el renderizado.
Si haces clic en él, PageSpeed Insights te mostrará una lista de los recursos que bloquean el renderizado y que ha identificado durante la prueba. En la parte derecha de la página, verás el ahorro estimado si eliminas o aplazas estos archivos.
Cuando hayas identificado los recursos que bloquean el renderizado, puedes proceder a eliminarlos de tu sitio. De esta forma, mejorarás la velocidad de carga de tus páginas y la experiencia de usuario.
Cómo eliminar los recursos que bloquean el renderizado en WordPress
Ahora que sabes cómo identificar los recursos que bloquean el renderizado en WordPress, quizá te preguntes cómo eliminarlos de tu sitio. Por suerte, hemos recopilado una lista de distintas formas de hacerlo, empezando por los métodos más sencillos.
1. Optimizar la carga de CSS
Una forma de eliminar los recursos que bloquean el renderizado es optimizar la carga de CSS de tu sitio web. Como hemos explicado antes, un navegador carga tu sitio web de arriba abajo. Cuando tiene que procesar determinados archivos, esto puede retrasar el proceso de carga.
Es importante tener en cuenta que solo se necesitan determinados archivos CSS para la carga. Por tanto, al optimizar la carga de CSS, puedes mostrar primero los archivos más importantes.
Aunque puedes eliminar manualmente los archivos CSS que bloquean el renderizado, puedes instalar un plugin para simplificar el proceso. Jetpack Boost te permite optimizar tu sitio desde el panel de administración de WordPress.
Con este plugin, puedes optimizar la carga de CSS, aplazar los archivos JavaScript no esenciales e implementar la carga diferida en unos sencillos pasos. Esta es una de las formas más fáciles de eliminar los recursos que bloquean el renderizado en WordPress.
Para empezar, ve a Plugins → Añadir nuevo en el panel de administración de tu WordPress y busca Jetpack Boost. Después, instala y activa el plugin en tu sitio.
Si ya tienes instalado Jetpack, puedes ir a Jetpack → My Jetpack. De la lista de productos de Jetpack, busca Boost y haz clic en Activar.
Después de activar el plugin, haz clic en la pestaña Jetpack Boost y selecciona Empezar.
Jetpack te dará automáticamente una puntuación de rendimiento de tu sitio web. Verás una calificación con letras, así como información detallada sobre tus puntuaciones en dispositivos móviles y de escritorio.
A continuación, desplázate hacia abajo hasta Optimizar la carga de CSS y activa esta función. Al activarla, Jetpack Boost moverá tu CSS crítico de WordPress a la parte superior de tus páginas para que se carguen más rápido.
2. Aplazar la carga de JavaScript no esencial
Optimizar la carga de CSS no es el único paso que puedes dar para eliminar recursos que bloquean el renderizado en WordPress. También puedes aplazar el análisis de JavaScript no esencial para mejorar aún más los tiempos de carga de tu sitio.
Al aplazar JavaScript no esencial, puedes retrasar ciertas tareas hasta que se haya cargado el contenido. Si algunos archivos de JavaScript no son necesarios para cargar una página, puedes impedir que el navegador los procese.
Por suerte, es fácil implementar esto con el plugin Jetpack Boost. Después de optimizar la carga de CSS, también puedes aplazar fácilmente JavaScript no esencial.
Para hacerlo, busca la sección Aplazar JavaScript no esencial, que está debajo de Optimizar la carga de CSS, y activa el interruptor.
Cuando actives este ajuste, el plugin volverá a calcular el rendimiento general de tu página. Podrás ver tu puntuación antes y después de usar Jetpack Boost.
Compara las puntuaciones de las capturas de pantalla de antes y después de realizar este proceso. Verás que optimizar la carga de CSS y aplazar JavaScript no esencial fueron medidas eficaces para mejorar la velocidad de la página. Al no tener que procesar scripts pesados, los navegadores pueden cargar tu contenido más rápido.
3. Aplazar la carga de las imágenes fuera de pantalla
Las imágenes no bloquean el renderizado, pero puedes plantearte optimizar su proceso de carga para mejorar el renderizado de tu página. A menudo, los sitios web contienen imágenes que están fuera de pantalla y que no aparecen hasta que el visitante interactúa con la página, por ejemplo, al desplazarse. Como no son esenciales para cargar la página web, puedes aplazar su carga mediante la carga diferida.
La carga diferida de imágenes solo implica cargar las imágenes que los visitantes pueden ver. Cuando alguien empieza a desplazarse, estas imágenes se cargarán justo antes de aparecer en la página.
Sin la carga diferida, el navegador intentará cargar todas las imágenes de una página a la vez. Esto hará que el contenido tarde más en cargarse, lo que puede provocar que los usuarios abandonen tu sitio.
Si un visitante utiliza un ordenador de sobremesa, la carga normal quizá no suponga un problema. En cambio, los smartphones y las tabletas tienen pantallas más pequeñas y menos ancho de banda. Si tu sitio web carga por completo todas las imágenes a la vez, puede consumir más ancho de banda y aumentar los tiempos de carga para los usuarios de teléfonos móviles. La carga diferida resuelve este problema.
Puedes usar Jetpack Boost para activar la carga diferida en tu sitio. Solo tienes que buscar la función Carga diferida de imágenes y activarla.
De este modo, tu sitio web solo cargará las imágenes a medida que el visitante se desplace por la página. Aunque las imágenes no bloquean el renderizado, activar la carga diferida puede ayudar a mejorar la velocidad de tu página.
4. Eliminar manualmente el JavaScript que bloquea el renderizado
Aunque instalar un plugin de optimización es una solución mucho más sencilla, también puedes eliminar manualmente los recursos que bloquean el renderizado. Lo ideal es que solo te plantees esta opción si tienes experiencia programando. Este proceso también puede ser útil si quieres reducir el número de plugins de tu sitio web.
Al optimizar JavaScript, puedes añadir el atributo async o defer a tus archivos. Esto marcará los scripts no esenciales y hará que el navegador los renderice por separado. Ambos atributos pueden hacer que el contenido HTML se cargue más rápido.
En un script normal, el archivo HTML se analiza hasta que llega a un archivo de script. Entonces, el análisis se pausa mientras se descarga el script. Una vez descargado y ejecutado, el análisis se reanuda.
El atributo async permite que el navegador descargue JavaScript mientras analiza el resto del HTML. Cuando termina la descarga, puede detener el análisis del HTML para ejecutar el script.
Del mismo modo, el atributo defer permite al navegador descargar el script mientras analiza el HTML. La diferencia es que también espera a que termine el análisis del HTML para ejecutar el script.
Para implementar cualquiera de estos atributos, tendrás que añadir un fragmento de código al archivo functions.php. Primero, tendrás que encontrar la etiqueta <script> del recurso que bloquea el renderizado. Después, puedes añadir un atributo async como este:
<script src="resource.js" async></script>Como alternativa, este es el aspecto que podría tener un script con un atributo defer:
http://resource.jsAunque un plugin puede gestionar estos atributos por ti, quizá prefieras realizar esta tarea por tu cuenta. En ese caso, es importante que sepas cuándo usar cada atributo. Para los scripts no esenciales que dependen de otro script, tendrás que usar un atributo defer. Para el resto de scripts, puedes usar async.
5. Aplicar atributos async o defer con un plugin
Si tienes problemas para editar scripts manualmente, puedes usar un plugin como Async JavaScript. Esta herramienta te permite controlar por completo qué scripts tienen un atributo async o defer.
Una vez instalado el plugin, ve a Ajustes → Async JavaScript y selecciona Activar Async JavaScript.
A continuación, ve a la sección Método de Async JavaScript. Aquí puedes elegir si quieres activar los atributos async o defer.
Como muchos plugins dependen de jQuery, es buena idea excluir estos scripts. Si intentas aplicar atributos async a jQuery, podrías acabar rompiendo tu sitio web.
En caso de duda, puedes usar el atributo defer, pero lo mejor es excluir jQuery por completo.
Ahora puedes indicar scripts específicos que quieras cargar con defer o async. Es importante asegurarte de colocar cada script en la sección correcta.
En la sección de Exclusión de scripts puedes indicar cualquier script que quieras excluir de este proceso.
En la parte inferior de la página también verás opciones para excluir plugins y temas. Cuando indiques aquí un tema o plugin, los atributos async o defer no se aplicarán a sus scripts.
Una vez que hayas personalizado estas opciones, puedes hacer clic en Guardar ajustes. Este método puede ser un término medio eficaz entre editar manualmente los scripts y permitir que un plugin realice este proceso por ti. Como alternativa, puedes usar una herramienta todo en uno como Jetpack Boost para eliminar estos pasos adicionales.
Preguntas frecuentes (FAQ)
Como puedes ver, hay varias formas de eliminar los recursos que bloquean el renderizado en WordPress. Veamos algunas de las preguntas más frecuentes sobre este proceso.
¿Cómo puedo comprobar si mi sitio de WordPress tiene recursos que bloquean el renderizado?
Puedes analizar tu sitio web de WordPress introduciendo su URL en PageSpeed Insights. En los resultados, busca cualquier recurso que bloquee el renderizado en la sección de Oportunidades.
¿Están relacionados los recursos que bloquean el renderizado con las métricas Core Web Vitals?
Sí, los recursos que bloquean el renderizado pueden afectar negativamente a las puntuaciones de Core Web Vitals de tu sitio de WordPress. Cualquier script sin optimizar puede aumentar el Largest Contentful Paint (LCP), el Total Blocking Time (TBT) y el First Contentful Paint (FCP). Si analizas tu sitio web con una herramienta para medir Core Web Vitals, como PageSpeed Insights, puede recomendarte eliminar los recursos que bloquean el renderizado para mejorar tu puntuación.
¿Es HTML un recurso que bloquea el renderizado?
Sí, cualquier importación de HTML, script u hoja de estilos que retrase el proceso de renderizado de la página puede ser un recurso que bloquee el renderizado.
¿Las imágenes bloquean el renderizado?
No, las imágenes no son un recurso que bloquee el renderizado, pero quizá quieras optimizarlas para aumentar la velocidad de carga de tu página. Al usar Jetpack Boost, puedes aplazar la carga de las imágenes fuera de pantalla para cargar solo lo que está visible. Después, las imágenes se cargarán a medida que el visitante se desplace hacia abajo por la página.
Optimiza tu sitio para que cargue más rápido
Al eliminar los archivos que bloquean el renderizado, puedes mejorar los tiempos de carga de tu sitio. Esto puede contribuir a una mejor experiencia de usuario y hacer que los visitantes permanezcan más tiempo en tu sitio web. Por lo tanto, eliminar los recursos que bloquean el renderizado puede ser una forma eficaz de optimizar tu sitio y alcanzar tus objetivos con más facilidad.
A modo de resumen, estas son cinco formas de eliminar los recursos que bloquean el renderizado en WordPress:
- Optimizar la carga de CSS con Jetpack Boost.
- Aplazar el JavaScript no esencial.
- Aplazar la carga de las imágenes fuera de pantalla.
- Eliminar manualmente los recursos que bloquean el renderizado.
- Aplicar atributos async o defer con el plugin Async JavaScript.
¡Cuando elimines los recursos que bloquean el renderizado, tus visitantes disfrutarán de tiempos de carga más rápidos!
Jetpack 