Eliminar los Recursos que Bloquean el Renderizado en autoptimize

Es probable que al realizar análisis desde Google PageSpeed Insights, se te salga la recomendación de eliminar los recursos de bloqueo de renderizado en tu sitio.

En esta guía vamos te explicaré qué son y cómo eliminar los recursos que bloquean el renderizado.

Para entender qué son estos recursos y por qué perjudican los tiempos de carga y las estadísticas del sitio, hay que entender qué utiliza el navegador web al cargar nuestro sitio.

Cuando alguien ingresa a tu sitio web, este se carga desde la parte superior de su código hasta la inferior. Si, durante de este proceso, se encuentra con un archivo CSS o JavaScript, necesita dejar de cargar mientras descarga y procesa estos archivo.

El tiempo que tu sitio pasa «detenido» para descargar y verificar esos recursos podría invertirse en algo más eficiente, como cargar el sitio con contenido que es o puede ser visible por el usuario inmediatamente cuando entra en tu web. Te pongo un ejemplo de esto, aunque algo extremista:

Supongamos que tienes un efecto o un aviso en el footer de tu web y que este está utilizando el archivo efectofooter.js, que a su vez se referencia en el header pero no se ve hasta que se llega al footer de la página. En este caso, el visitante no podrá ver el efecto o aviso hasta que bajar al final de toda la web.

Así que el código tendría una estructura similar a esta estructura:

  • Meta de cabecera
  • efectofooter.js
  • HTML para el contenido de arriba el cual debería ser cargado y visto por el usuario lo antes posible.

Y aquí está la razón por la que esto es un problema:

Cuando el usuario ingresa a la web debe esperar a que se descargue y analice el archivo efectofooter.js, y no solo este archivo sino otros mas que nuestra instalación este cargando previamente antes que el sitio como tal. Por lo que el usuario final se tarda mas tiempo en ingresar a la web por lo que entenderá que el sitio web es lento.

Cuando Google te indica que elimines los recursos de bloqueo de renderizado, te está diciendo específicamente que no cargues en la parte superior de tu sitio todos los archivos CSS y JavaScript porque harás que los visitantes y los navegadores carguen tu contenido de forma mas lenta.

Entendiendo a que se refiere Google al darnos esta indicación, puedes pasar a solucionar este inconveniente.

Plugin Autoptimize + Async JavaScript

Autoptimize

Async JavaScript

Ambos complementos son independientes entre sí pero juntos nos ayudarán a solventar los problemas de carga.

Descarga ambos complementos e ingresa a:

Ajustes > Async JavaScript

Una vez dentro, marca la casilla para activar JavaScript Async en la parte superior y elige entre Aplicar Async y Aplicar Defer en el cuadro de configuración rápida.

Si la opción Async causa problemas en el sitio, es recomendable verificar con la opción de Defer o excluir jQuery, para lo cual el plugin le da una opción.

Una vez configurado el plugin de JavaScript Async, ingresa a Ajustes > Autoptimize y haz lo siguiente:

Marca la casilla para optimizar el código JavaScript y la casilla para optimizar el código CSS:

Si quieres eliminar aún más de esos archivos, puedes utilizar Autoptimize para alinear manualmente su crítico CSS. Pero, esto requiere algunos conocimientos de desarrollo, por lo que no es algo que se suele intentar.

Updated on 19 octubre, 2021

Related Articles