Cómo arreglar: ‘Eliminar recursos que bloquean el renderizado’

cómo solucionar la recomendación de Google LightHouse eliminar bloques de renderizado

'Eliminar render-blocking' para mejorar la velocidad de carga de tu web

El renderizado de bloques es una de las recomendaciones que más aparece en el listado de «Best Practices» de Google LightHouse.  Una de las reglas de oro de la optimización web es: «Que tu web empiece a renderizar lo antes posible». 

Cualquier retraso en el renderizado hace que la web cargue más despacio, por lo que baja la puntuación que otorga Google. Para ello, hay que aplazar o eliminar estos recursos que bloquean el procesamiento de la web.

¿Por qué Google LightHouse marca renderizar bloques como recomendación?

En las auditorías web de Google Lighthouse suele aparecer la recomendación de renderizar bloques. Es algo muy frecuente, que nos encontramos en multitud de proyectos. Esto sucede por dos motivos, generalmente:

1._ La web tiene una etiqueta de secuencia de comandos que está en el encabezado y no se difiere.

Las secuencias de comandos en el encabezado de la página se bloquean de forma predeterminada si no tienen el atributo diferido de asíncrono.

Una hoja de estilo vinculada que coincide con los medios del dispositivo.

Un <link rel=»stylesheet»> bloqueará la visualización de la página si no está deshabilitado y coincide con los medios del navegador. 

Por ejemplo, <link rel=»stylesheet» media=»print»> no bloqueará la representación en dispositivos de escritorio.

Si hay demasiados recursos que bloquean el renderizado, las métricas importantes como First Contentful Paint (FCP) y Largest Contentful Paint (LCP) se verán afectadas.

¿Qué causa el "bloqueo de recursos" durante la carga de la web?

Lo que causa el bloqueo de recursos durante la carga son básicamente: los StyleSheets y JavaScripts en el encabezado de la página. 

Estos elementos solo pueden ser agregados por el tema que se esté utilizando, manualmente mediante código personalizado o mediante un plugin. Encontrarás los recursos de bloqueo de carga en estos tres sitios: 

La plantilla 

Los archivos de plantilla de tu web es el primer lugar para buscar. Encuentra el código <head> y busca estilos y scripts codificados.

El CMS

A veces, el propio CMS requiere algunos scripts (por ejemplo, jQuery) para funcionar correctamente.

Plugins

Algunos plugins añaden estilos y scripts en la página.

¿Cómo afecta el renderizado a la velocidad de carga?

Hasta que no se crea el árbol de renderizado, el navegador no comenzará a renderizar. 

Esto significa que la página permanecerá completamente en blanco hasta que todos los recursos de bloqueo de carga se hayan descargado y evaluado. 

Esto afecta a métricas tan importantes como First Contentful Paint (FCP) y the Largest Contentful Paint (LCP)

¿Cómo solucionar 'Eliminate render-blocking resources'?

Para corregir los «recursos de bloqueo de carga», debes asegurarte de que estos recursos ya no estén bloqueando el procesamiento. 

La forma más fácil es simplemente eliminar estos recursos. A veces, los recursos antiguos que aún no se utilizan bloquean la visualización de la página.

 Si no puedes eliminarlos, debes aplazarlos.

JavaScript perezoso


JavaScript se puede diferir agregando el atributo diferido o asíncrono a la etiqueta del script.

//deferred javascript
<script defer src="script.js"></script>
//async javascript
<script async src="script.js"></script>

Aplazamiento de hojas de estilo

Aplazar las hojas de estilo puede ser un poco más complicado. 

Cuando se difiere una hoja de estilo, la página se mostrará primero sin estilos. 

Luego, cuando se cargan los estilos, el navegador aplicará el estilo provocando todo tipo de cambios de diseño y parpadeo. Es por eso que necesitarás CSS crítico en línea. 

Critical CSS es una colección de los estilos necesarios para representar la parte visible de la página.

<style>//cricical CSS here</style>
<link rel="preload"
      href="css.css"
      type="text/css"
      as="style"
      onload="this.onload=null;this.rel='stylesheet';"/>

Solución alternativa para 'eliminar los recursos que bloquean el renderizado'

A veces no es posible eliminar esos recursos que bloquean el renderizado. 

Existen algunas soluciones para disminuir el impacto de esos recursos que bloquean el renderizado.

Minimiza y comprime los estilos y scripts de tu web
Los recursos más pequeños tienen un impacto menor en el rendimiento de carga que los recursos más grandes.

Dividir archivos grandes en varios archivos.
Dividir archivos grandes en varios archivos puede reducir el tiempo de carga de los recursos.


Descargar recursos por página.

Cuando un recurso no se puede eliminar de una página, eso no significa que sea necesario en todas las páginas. Los plugins de WordPress, por ejemplo, tienden a agregar secuencias de comandos y estilos a todas las páginas, aún cuando el plugin no está activo en esa página o no se necesiten esas funciones en ella.

 

Deja una respuesta

Tu dirección de correo electrónico no será publicada.