Cal Evans

Evangelista PHP

Desarrollo
Velocidad
WordPress

Apr 06, 2022 • 6 min read

Recursos que bloquean el renderizado: ¿Cómo y por qué eliminarlos?

Tabla de contenidos

En los comienzos de la web, las primeras páginas web se crearon en una versión simplificada de XML llamada HTML. Blanco con texto negro. Si veías una frase con un subrayado azul, sabías qué podías hacer clic sobre ella. Si era morado, sabías que ya habías hecho clic.

La vida era sencilla.

Actualmente, el HTML suele ser la parte más pequeña de cualquier página web. Cuando un navegador solicita una página, obtiene el HTML pero luego tiene que separarlo y descargar los recursos.

CSS
JavaScript
Imágenes
Fuentes
…y otros archivos externos necesarios para proporcionar la experiencia del usuario

No todos los recursos son iguales. Algunos recursos que deben cargarse pueden ralentizar la visualización de la página web. Estos recursos se denominan “Recursos que bloquean el renderizado” y este artículo mostrará algunas tácticas que puedes usar para reducir la cantidad de recursos de bloqueo de renderizado en tu sitio web y cómo aplicarlos manualmente o usando el plugin SiteGround Optimizer.

¿Qué significa eliminar los recursos que bloquean el renderizado?

Renderizado es el término técnico para “mostrar”. En este artículo, cada vez que hablamos de renderizado, nos referimos al proceso de mostrar tu sitio web en una pantalla.

Con eso en mente, el bloqueo de renderizado es cualquier cosa que detenga o ralentice ese proceso.

Al principio, todo se cargaba en el orden en que estaba codificado en HTML. Si tu encabezado tenía 5 etiquetas de JavaScript que debían cargarse, compilarse y ejecutarse antes de que el encabezado sea completo, entonces podrían ralentizar tu sitio. Es por eso que comenzamos a colocar etiquetas de JavaScript en el pie de página, para que no impidieran que se mostrará la página.

Tipos de recursos de bloqueo de renderizado

Cada recurso que se carga en tu sitio web tiene el potencial de ser un recurso de bloqueo de renderizado.

Si una imagen es grande y tarda en cargarse, es potencialmente un recurso de bloqueo de renderizado.
Si JavaScript tiene que ejecutarse en el <head> de tu página, entonces es potencialmente un recurso de bloqueo de renderizado
Si el CSS es grande y tu página no se puede mostrar hasta que esté completamente cargada, entonces es potencialmente un recurso de bloqueo de renderizado.
Si carga cualquier recurso de otro sitio y ese sitio es más lento que el tuyo, entonces ese recurso es potencialmente un recurso de bloqueo de renderizado.
Si tiene muchos plugins y cada uno tiene sus propios archivos CSS y JavaScript, estos son potencialmente recursos de bloqueo de renderizado.

En resumen, cualquier cosa que tengas en tu HTML para cargar es potencialmente un recurso de bloqueo de renderizado.

¿Cómo puedo probar si mi sitio web tiene recursos que bloquean el renderizado?

Hay muchas herramientas en la web para mostrar cómo se carga tu sitio web. Mis favoritos son estos dos:

La opción “Inspeccionar elemento” del navegador:

Prefiero una herramienta que me muestre una pantalla de “cascada” de cómo se ha cargado mi página. Todos los navegadores modernos te mostrarán una versión básica de una pantalla en cascada. Simplemente haz clic derecho en una página web, después clic en “Inspeccionar” y luego busca la pestaña “Red”.

Una vez que tengas eso, vuelve a cargar la página. Debería ver algo como esto:

La opción "Inspeccionar elemento" del navegador

El lado derecho de la imagen de arriba muestra la pestaña “Red”. Las pequeñas barras en el extremo derecho son la pantalla “Cascada”. Me dicen cuánto tiempo lleva cargar cualquier recurso dado. La delgada línea azul que recorre la página me indica cuándo comenzó a mostrarse la página. Por lo tanto, muchos de mis recursos en esta página se cargan antes de que se cargue la página, y eso probablemente no sea bueno. Eso significa que en esta página en particular, puedo tener algo de margen de mejora.

Esta vista es excelente cuando solo estás haciendo pequeños cambios, pero en realidad todo lo que te dice es qué tan rápido se cargan las cosas en tu ordenador. Puede que no sea una métrica real. Por ejemplo, si hago todo mi desarrollo localmente, la rapidez con la que se cargan las cosas en mi navegador desde un servidor que se ejecuta en el mismo ordenador no me dice mucho.

Es por eso que cuando me tomo en serio medir cosas, uso herramientas online como https://www.webpagetest.org/

WebPage Test:

Si vas a WebPageTest e ingresas tu URL, obtendrás una imagen mucho mejor de la realidad. Además, puedes jugar con la configuración para obtener la prueba exacta que deseas.

En gran parte, te recomiendo que hagas lo mismo que yo:

Prueba primero el escritorio
Selecciona un servidor que no esté cerca de donde está alojado tu sitio web
Selecciona Chrome a menos que necesites específicamente otro navegador
Puedes ajustar la configuración en la pestaña “Configuración avanzada“.

Luego, haz clic en “Iniciar prueba”.

Ahora, vas a obtener una pantalla de cascada mucho más útil. Es un poco pequeña, así que haz clic sobre ella y te llevará a una versión más grande. Una de las cosas que te mostrará es una lista de los recursos que bloquean el renderizado.

Una de las cosas que te mostrará es una lista de los recursos que bloquean el renderizado

En este caso, tengo 32 recursos de bloqueo de renderizado. Casi todos son archivos CSS, los últimos son archivos JavaScript.

Los archivos JavaScript son fáciles de entender, pero ¿por qué los archivos CSS bloquean el procesamiento? La página no se puede mostrar hasta que conozca todo el CSS necesario para mostrar lo que está en la pantalla. Por lo tanto, si tu sitio está cargando muchos archivos CSS y casi al final de la lista hay una regla CSS que se usa para mostrar el primer elemento en tu página, entonces tu página tiene que esperar hasta que se cargue esa regla antes de que el navegador pueda continuar para “pintar la pantalla”. Así es como CSS puede ser un recurso de bloqueo de renderizado.

Cómo eliminar los recursos que bloquean el renderizado

A lo largo de los años, las técnicas para reducir o eliminar los recursos que bloquean el renderizado han variado. Algunas de estas técnicas funcionan.

Cómo eliminar el JavaScript que bloquea el renderizado

Para evitar que una etiqueta de JavaScript sea un recurso de bloqueo de renderizado, ahora puedes usar los atributos DEFER o ASYNC.

<script defer type=’text/javascript’ src=’//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js#038;ver=2.2.4′ id=’jquery-js’></script>

DEFER le dice al navegador que descargue archivos a medida que la página se procesa y ejecuta archivos en orden secuencial una vez que la página ha terminado de procesarse.
ASYNC le dice al navegador que descargue archivos a medida que se procesa la página y que los ejecute en cuanto estén disponibles.

El mejor de estos dos es DEFER si es posible. De esta manera, la pantalla puede terminar de mostrarse y luego se puede ejecutar el JavaScript. Como puedes ver en el ejemplo anterior, postergo la carga de jQuery hasta que la página esté preparada. Luego, una vez que cargue, se ejecutará. Dado que jQuery es una biblioteca grande, aplazarla ayudará con la carga, a menos que mi página tenga algo que requiera jQuery.

Cómo eliminar el CSS que bloquea el renderizado

CSS es un poco complicado de organizar. Cuando el navegador ve un elemento CSS en el código, tiene que hacer referencia a las reglas que ha cargado hasta el momento y ver si tiene esa regla. Si aún no ha cargado esa regla, debe pausar el procesamiento hasta que se cargue esa regla.

Google ha acuñado el término “CSS crítico”. CSS crítico es el CSS al que se hace referencia en la parte de la página que puedes ver cuando se muestra la página. Por ejemplo, si tienes un pie de página que tiene una regla de CSS que lo diseña, si ese pie de página no está visible hasta que tu espectador se desplaza hacia abajo en la página, entonces esa regla de CSS no es crítica.

Google recomienda extraer todo el CSS crítico y incorporarlo en el HTML. Esto hace que el CSS deje de ser un recurso de bloqueo de renderizado porque el navegador tiene todo el CSS absolutamente necesario para mostrar la parte visible de la página.

Esto es complicado porque significa que tienes que mirar todo tu CSS y sacar piezas. La mejor manera es usar el Google Chrome Coverage Tool. Te mostrará el CSS que está cargando que no es crítico (barra roja) y crítico (barra verde).

Al extraer el CSS crítico e incorporarlo en línea, puedes eliminar el CSS como un recurso de bloqueo de renderizado.

Esto suena fácil, pero en realidad, refactorizar el CSS de esta manera puede ser muy difícil, ya que es una técnica avanzada.

Cómo reducir los recursos que bloquean el renderizado en WordPress con el plugin SiteGround Optimizer

Una de las cosas que puedes hacer que no requiere refactorizar el código o editar manualmente el HTML es usar SiteGround Optimizer. Incluso si no te alojas con SiteGround, este plugin ayudará a reducir los recursos de bloqueo de renderizado en tu página web.

Hay un par de cosas que puedes hacer con el plugin:

1) Habilitar Memcached

Primero, si estás alojado con SiteGround, asegúrate de ir a Site Tools y activar Memcached. Eso no está relacionado con los recursos de bloqueo de renderizado, pero realmente marcará la diferencia.

Memcached activation on SiteGround to eliminate render-blocking resources

A continuación, ir al menú de configuración del plugin y seleccionar “Frontend”.

Ahora, la configuración con la que estamos a punto de jugar puede estropear tu sitio web si no tienes cuidado. Recomiendo cambiar una cosa a la vez y luego volver a cargar el sitio web (en un navegador diferente). Asegúrate de que todo sigue funcionando. Entonces, y solo entonces, haz el siguiente cambio.

2) Optimiza tu CSS

En la sección CSS, selecciona “Minimizar archivos CSS“. Esta optimización es segura y sencilla. Eliminará los espacios vacíos obsoletos, nuevas líneas, comentarios, etc. del código reduciendo el tamaño de tus páginas. Por otro lado, si tienes activada la compresión en tu servidor web, tampoco habrá diferencia. Aún así, no estará demás activarlo.

A continuación, selecciona “Combinar archivos CSS“. Esta es probablemente la primera cosa que debes hacer para eliminar los recursos que bloquean el procesamiento. Sin embargo, debes utilizarlo con precaución ya que no todos los sitios podrían funcionar de la misma manera.

Si eso funciona, también activa “Precargar CSS combinado“. Esto forzará que el CSS se cargue temprano en el proceso para que tu CSS esté allí cuando lo necesite.

3) Optimiza tu Javascript

A continuación, dirígete a la pestaña JavaScript.

Hagamos las mismas acciones:

Minificar archivos JavaScript

Combinar archivos JavaScript

Aplazar JavaScript de bloqueo de renderizado

Aplazar JavaScript de bloqueo de renderizado

Por lo general, hay muchos menos problemas al combinar JavaScript que CSS. En todos los sitios que probé, funcionó. Este último es importante, agregará la etiqueta DEFER al JavaScript combinado.

Cuando hayas hecho todo lo posible en tu sitio web de prueba, bajaras a 24 recursos de bloqueo de procesamiento de 32. Ese es un muy buen comienzo.

Tu próximo paso en el sitio web es localizar todo CSS crítico e incorporarlo en línea. Luego diferir todos los otros CSS. Eso eliminará casi todos los bloqueadores de procesamiento restantes.

En resumen

Después de haber hecho lo fácil para acelerar su sitio web:

Almacenamiento en caché
Compresión
Optimización de base de datos

Es hora de comenzar a mirar los pequeños ajustes. Estos son los pequeños ajustes. Eso no significa que no sean importantes. Recuerda, los motores de búsqueda han declarado que la velocidad a la que se cargan nuestras páginas web influye en nuestra clasificación SEO. Si deseas mejorar tu clasificación SEO, mejora la velocidad de carga de tu página. Todo ayuda, y es aún mejor cuando tienes las herramientas adecuadas para facilitar las cosas, como el plugin SiteGround Optimizer, que puedes descargar gratis aquí.