Aplazar CSS no crítico
Los archivos CSS son recursos que bloquean el renderizado: deben cargarse y procesarse antes de que el navegador muestre la página. Las páginas web que contienen estilos de CSS innecesariamente grandes tardan más en procesarse.
En esta guía aprenderá cómo aplazar el CSS no crítico, con el objetivo de optimizar la ruta de renderización crítica y mejorar la First Contentful Paint o FCP (primer despliegue de contenido).
Cargar CSS de una manera deficiente #
El siguiente ejemplo contiene un acordeón con tres párrafos de texto ocultos, cada uno con un estilo de diferente clase:
Esta página solicita un archivo CSS con ocho clases, pero no todas son necesarias para renderizar el contenido "visible".
El objetivo de esta guía es optimizar esta página, para que solo los estilos críticos se carguen simultáneamente, mientras que el resto (como los aplicados a los párrafos), se carguen sin bloquear el renderizado.
Métrica #
Ejecute Lighthouse en la página y vaya a la sección Rendimiento.
El informe muestra la métrica First Contentful Paint con un valor de "1s" y la oportunidad Eliminar recursos que bloquean el renderizado, apuntando al archivo style.css:
Para visualizar cómo este CSS bloquea el renderizado:
- Abra la página en Chrome.
- Press `Control+Shift+J` (or `Command+Option+J` on Mac) to open DevTools.
- Click the Performance tab.
- En el panel Rendimiento, haga clic en Actualizar.
En el seguimiento resultante, verá que el marcador FCP se coloca inmediatamente después de que el CSS termina de cargarse:
Esto significa que el navegador debe esperar a que todo el CSS se cargue y procese antes de pintar un solo píxel en la pantalla.
Optimizar #
Para optimizar esta página, necesita saber qué clases se consideran "críticas". Utilizará la herramienta de cobertura para eso:
- En DevTools, abra el menú de comandos presionando
Control+Shift+PoCommand+Shift+P(Mac). - Escriba "Cobertura" y seleccione Mostrar cobertura.
- Haga clic en el botón Actualizar para volver a cargar la página y comenzar a capturar la cobertura.
Haga doble clic en el informe para ver las clases marcadas en dos colores:
- Verde (crítico): estas son las clases que el navegador necesita para renderizar el contenido visible (como los botones de título, subtítulo y acordeón).
- Rojo (no crítico): estos estilos se aplican al contenido que no es visible inmediatamente (como los párrafos dentro de los acordeones).
Optimice su CSS con esta información para que el navegador comience a procesar los estilos críticos inmediatamente después de que se cargue la página, mientras pospone el CSS no crítico para más adelante:
- Extraiga las definiciones de clase marcadas con verde en el informe obtenido de la herramienta de cobertura y colóquelas dentro de un
<style>en el encabezado de la página:
<style type="text/css">
.accordion-btn {background-color: #ADD8E6;color: #444;cursor: pointer;padding: 18px;width: 100%;border: none;text-align: left;outline: none;font-size: 15px;transition: 0.4s;}.container {padding: 0 18px;display: none;background-color: white;overflow: hidden;}h1 {word-spacing: 5px;color: blue;font-weight: bold;text-align: center;}
</style>- A continuación, cargue el resto de las clases de forma asincrónica, aplicando el siguiente patrón:
<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="styles.css"></noscript>Esta no es la forma estándar de cargar CSS. Así es como funciona:
link rel="preload" as="style"solicita la hoja de estilo de forma asincrónica. Puede obtener más información sobre el atributopreloaden la Guía de activos críticos de precarga.- El atributo
onloadenlinkpermite que el CSS se procese cuando termine de cargarse. - "null" en el controlador
onload, una vez que se haya utilizado, ayuda a algunos navegadores a evitar volver a llamar al controlador al cambiar el atributo rel. - La referencia a la hoja de estilo dentro de un elemento
noscriptfunciona como una alternativa para los navegadores que no ejecutan JavaScript.
La página resultante se ve exactamente como la versión anterior, incluso cuando la mayoría de los estilos se cargan de forma asincrónica. Así es como se ven los estilos en línea y la solicitud asincrónica al archivo CSS en el archivo HTML:
Monitor #
Utilice DevTools para ejecutar otro seguimiento de rendimiento en la página optimizada.
El marcador FCP aparece antes de que la página solicite el CSS, lo que significa que el navegador no necesita esperar a que se cargue el CSS antes de renderizar la página:
Como paso final, ejecute Lighthouse en la página optimizada.
En el informe, verá que la página FCP se ha reducido en 0,2 s (¡una mejora del 20%!):
La sugerencia Eliminar recursos que bloquean el renderizado ya no se encuentra en Oportunidades y ahora pertenece a la sección Auditorías aprobadas:
Próximos pasos y referencias #
En esta guía, aprendió cómo aplazar el CSS no crítico extrayendo manualmente el código no utilizado en la página. Además, la guía de extracción de CSS crítico cubre algunas de las herramientas más populares para extraer CSS crítico, e incluye un codelab para ver cómo funciona en la práctica.