Arreglar la advertencia de Lighthouse 'eliminate render-blocking resources'
Elimina los recursos que bloquean el renderizado y mejora los Core Web Vitals
'Eliminate render-blocking resources' en resumen
Al cargar cualquier página con recursos que bloquean el renderizado, un navegador no podrá iniciar el proceso de renderizado hasta que todos los elementos que lo causan hayan sido descargados y evaluados.
Esto rompe la regla de oro de PageSpeed: 'comienza a renderizar siempre lo antes posible'. Cualquier retraso en el renderizado de la página hace que esta se cargue más lentamente de lo necesario.
Arregla esta advertencia de Lighthouse eliminando o difiriendo estos recursos que bloquean el renderizado.
¿Qué es la advertencia de Lighthouse 'Eliminate render-blocking resources'?
¿Qué causa la advertencia Eliminate render-blocking resources en Lighthouse? Lighthouse marca las páginas que tienen:
- Una etiqueta script que está en el head y no está diferida.
Las etiquetas script en el head de la página bloquean el renderizado de forma predeterminada si no tienen el atributo defer o async. - Una hoja de estilo vinculada que coincide con el medio del dispositivo.
Un <link rel="stylesheet"> bloqueará el renderizado de la página si no está deshabilitado y coincide con el medio del navegador. Por ejemplo, <link rel="stylesheet" media="print"> no bloqueará el renderizado en dispositivos de escritorio.
La advertencia 'Eliminate render-blocking resources' afecta directamente a algunas métricas de Lighthouse. En teoría, las páginas con recursos que bloquean el renderizado aún podrían cargarse bastante rápido. En la práctica, a menudo no lo hacen. Demasiados recursos que bloquean el renderizado muy probablemente afectarán directamente a métricas importantes de Lighthouse como First Contentful Paint (FCP) y Largest Contentful Paint (LCP).
Un recordatorio rápido: ¿qué es el renderizado?
El renderizado es un proceso utilizado en el desarrollo web que convierte el código de un sitio web en las páginas interactivas que ven los usuarios cuando lo visitan. El término se refiere generalmente al uso de códigos HTML, CSS y JavaScript. El proceso es completado por un motor de renderizado, el software utilizado por un navegador web para renderizar una página web.
¿Qué causa los 'recursos que bloquean el renderizado'?
Los recursos que bloquean el renderizado son siempre StyleSheets y JavaScripts en el head de la página. Esto significa que solo pueden ser añadidos por tu CMS, manualmente por tu desarrollador web o por un plugin. Al intentar encontrar el origen de un recurso que bloquea el renderizado, intenta buscar en estos lugares:
- La plantilla: Los archivos de plantilla de tu sitio web son el primer lugar donde buscar. Encuentra el lugar donde se encuentra el código <head> y busca estilos y scripts codificados directamente.
- El CMS: A veces, el propio CMS requiere algunos scripts (por ejemplo, jQuery) para funcionar correctamente.
- Plugins: Los plugins son conocidos por inyectar estilos y scripts en la página.
Cómo afectan los 'recursos que bloquean el renderizado' a la velocidad de la página
Los recursos que bloquean el renderizado impiden que se genere el árbol de renderizado (render tree). Cuando el árbol de renderizado no se ha construido, el navegador no comenzará a renderizar. Esto significa que la página permanecerá completamente en blanco hasta que todos los recursos que bloquean el renderizado se hayan descargado y evaluado. Esto afectará a métricas como el First Contentful Paint y el Largest Contentful Paint.
Cómo arreglar 'Eliminate render-blocking resources'
Para arreglar los 'recursos que bloquean el renderizado' deberás asegurarte de que estos recursos ya no bloqueen el renderizado. La forma más fácil es simplemente eliminar estos recursos. A veces, recursos antiguos y no utilizados todavía bloquean el renderizado de la página. Si no puedes eliminarlos, deberías diferirlos.
Diferir JavaScript
El JavaScript se puede diferir añadiendo el atributo defer o async a la etiqueta script.
//javascript diferido <script defer src="script.js"></script> //javascript asíncrono <script async src="script.js"></script>
Diferir hojas de estilo (StyleSheets)
Diferir las hojas de estilo puede ser un poco más complicado. Cuando se difiere una hoja de estilo, la página se renderizará primero sin los estilos. Luego, cuando se carguen los estilos, el navegador aplicará el estilo, lo que causará todo tipo de parpadeos y cambios de diseño. Es por eso que necesitarás CSS crítico en línea. El CSS crítico es una colección de los estilos necesarios para renderizar la parte visible de la página.
<style>//CSS crítico aquí</style>
<link rel="preload"
href="css.css"
type="text/css"
as="style"
onload="this.onload=null;this.rel=stylesheet;"/>
Solución alternativa para 'eliminate render-blocking resources'
A veces no es posible eliminar esos recursos que bloquean el renderizado. Es posible que no tengas acceso a la plantilla o que tu CMS requiera ciertos scripts. Existen algunas soluciones alternativas para disminuir el impacto de esos recursos.
- Minifica y comprime tus estilos y scripts.
Minimiza y comprime tus estilos y scripts actuales. Los recursos más pequeños tienen menos impacto en el rendimiento de carga que los recursos más grandes. - Divide archivos grandes en varios archivos.
Dividir archivos grandes en varios archivos puede reducir el tiempo de carga de los recursos. - Descarga recursos por página.
Que un recurso no pueda eliminarse de una página no significa que sea necesario en todas las páginas. Los plugins de Wordpress, por ejemplo, tienden a añadir scripts y estilos a todas las páginas, aunque el plugin no esté activo en esa página en concreto.
Stop debating in Jira.
Get a definitive answer on your performance issues. I deliver a granular breakdown of your critical rendering path.
- Definitive Answers
- Granular Breakdown
- Critical Path Analysis
