Menú


Solucionar el mensaje eliminate render blocking resources

Cuando nos aparece el mensaje eliminate render blocking resources, significa que hay elementos que retardan en demasía la carga y muestra del primer elemento visual de nuestra Web. A lo que normalmente se nos sugiere que consideremos en entregar los CSS y JS críticos en primera instancia, y los demás los entreguemos en diferido. Gracias por la sugerencia ¿Pero como se consigue esto?

Analisis de situación

En primer lugar y antes de evaluar la solución que se nos propone os recomendamos hacer una pausa y hacer una análisis de situación según los siguiente puntos.

  • Cuantos archivos CSS y JS tenemos: Hay que mirar cuantos archivos de este tipo tenemos.
  • Intentar unificarlos y minificarlos: Con ello ya ganamos algo de tiempo para la carga inicial.
  • Ver que codigo CSS y JS no es crítico: Es decir que CSS no se usa, o que JS, no es necesario para la primera carga de la página y si podemos ponerlos en un archivo separado del principal.
  • Eliminar todo el CSS y JS que no se utilice: Si utilizas módulos, pluguins o código de terceros, seguramente puedes reducir mucho el código necesario para tu web.

Como identificar los archivos o código crítico

Para identificar el código critico puedes utilizar la herramienta para desarrolladores de Google Chrome, que se encuentra dentro de las pestaña más herramientas del menu de configuración.

Una vez activada, te vas a la pestaña Sources y despues en la parte inferior le das a coverage tal y como mostramos en el gráfico:

  • Punto 1: Seleccionamos Resources en las pestañas superiores.
  • Punto 2: Seleccionamos coverage.
  • Punto 3: En este punto vemos el código usado (Verde) y el que no (Rojo). De esta manera nos podemos hacer una idea, de si vale la pena o no reducirlo.

Entregar los archivos CSS y JS en diferido

Llegados a este punto si has conseguido, reducir los archivos y separar el código crítico del no crítico, ahora solo queda cargar este último en diferido. Esto significa que lo cargaremos al finalizar la primera carga visual de la Web. Con esto se persigue que el usuario vea lo antes posible la parte que nos interesa de la Web y por lo tanto tenga la sensación que la página es un cañon. Esto mejora su percepción y la experiencia final.

Si todo el código que tenemos lo consiferamos crítico, poco más podemos hacer. Si no, la parte no crítica debemos llamarla de la siguiente forma:

<!--Para los estilos CSS-->
<link rel="preload" href="nombre-archivo.css" as="style" onload="this.onload=null;this.rel='stylesheet'">

<!--Para los scripts JS-->
<link rel="preload" href="nombre-archivo.js" as="script" onload="this.onload=null;this.rel='script'">

De estas dos formas, conseguimos que los archivos se carguen en paralelo a la carga del HTML, pero que no se ejecuten hasta que esta finaliza, consiguiendo mejorar los tiempos y la percepción del usuario.

Hay algunos creadores de Webs, que prefieren utilizar códigos como el siguiente:

<script type="text/javascript"> function downloadJSAtOnload() {
      var element = document.createElement("script");
     element.src = "defer.js";
     document.body.appendChild(element);
}
if (window.addEventListener)
     window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
     window.attachEvent("onload", downloadJSAtOnload);
else
     window.onload = downloadJSAtOnload;
</script>

Artículos relacionados