Los archivos CSS son recursos que bloquean la renderización: se deben cargar y procesar antes de que el navegador renderice la página. Las páginas web que contienen hojas de estilo innecesariamente grandes tardan más en renderizarse.
En esta guía, aprenderás a aplazar el CSS no crítico para optimizar la ruta de renderización crítica y mejorar la primera pintura significativa (FCP).
Ejemplo: Carga de CSS subóptima
El siguiente ejemplo contiene un acordeón con tres párrafos de texto ocultos, cada uno de los cuales tiene un estilo diferente:
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 de forma síncrona, mientras que el resto (incluidos los estilos de párrafo) se carguen de forma no bloqueante.
Medir
Ejecuta Lighthouse en la página y navega hasta la sección Rendimiento.
El informe muestra la métrica Primer procesamiento de imagen con contenido con un valor de “1s” y la oportunidad Elimina los recursos que bloquean el procesamiento, que apunta al archivo style.css:
Para visualizar cómo este CSS bloquea la representación, sigue estos pasos:
- Abre la página en Chrome.
- Presiona
Control+Shift+J
(oCommand+Option+J
en Mac) para abrir Herramientas para desarrolladores. - Haz clic en la pestaña Rendimiento.
- En el panel Rendimiento, haz clic en Volver a cargar.
En el seguimiento resultante, verás 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 se cargue y procese todo el CSS antes de dibujar un solo píxel en la pantalla.
Optimizar
Para optimizar esta página, debes saber qué clases se consideran críticas. Para determinarlo, usa la Herramienta de cobertura:
- En DevTools, presiona
Control+Shift+P
oCommand+Shift+P
(Mac) para abrir el menú de comandos. - Escribe "Cobertura" y selecciona Mostrar cobertura.
- Haz clic en Volver a cargar para volver a cargar la página y comenzar a capturar la cobertura.
Haz doble clic en el informe para ver los detalles:
- Las clases marcadas en verde son fundamentales. El navegador los necesita para renderizar el contenido visible, incluidos los botones de título, subtítulo y acordeón.
- Las clases marcadas en rojo no son críticas y solo afectan al contenido que no es visible de inmediato, como los párrafos ocultos.
Con esta información, optimiza tu CSS para que el navegador pueda comenzar a procesar los estilos críticos inmediatamente después de que se cargue la página y difiera el CSS no crítico para más adelante:
Extrae las definiciones de clase marcadas en verde en el informe de cobertura y colócalas en un bloque
<style>
en la parte superior 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>
Carga el resto de las clases de forma asíncrona 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. A continuación, le indicamos cómo funciona:
link rel="preload" as="style"
solicita la hoja de estilo de forma asíncrona. Puedes obtener más información sobrepreload
en la guía de carga previa de recursos críticos.- El atributo
onload
enlink
permite que el navegador procese el CSS cuando termina de cargarse la hoja de estilo. - "Anular" el controlador
onload
después de usarlo ayuda a algunos navegadores a evitar volver a llamar al controlador cuando cambian el atributorel
. - La referencia a la hoja de estilo dentro del elemento
noscript
proporciona un resguardo para los navegadores que no ejecutan JavaScript.
La página resultante tiene el mismo aspecto que la versión anterior, incluso cuando la mayoría de los diseños se cargan de forma asíncrona. A continuación, se muestra cómo se ven los estilos insertados y la solicitud asíncrona al archivo CSS en el archivo HTML:
Supervisar
Usa las Herramientas para desarrolladores para ejecutar otro registro 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:
El último paso es ejecutar Lighthouse en la página optimizada.
En el informe, verás que la página de FCP se redujo en 0.2 s (¡una mejora del 20%!):
La sugerencia Eliminar recursos que bloquean el procesamiento ya no aparece en Oportunidades, sino en la sección Auditorías aprobadas:
Próximos pasos y referencias
En esta guía, aprendiste a diferir el código CSS no crítico extrayendo manualmente el código sin usar de la página. Para entornos de producción más complejos, en la guía de extracción de CSS críticos, se abordan algunas de las herramientas más populares para extraer CSS críticas y se incluye un codelab para ver cómo funcionan en la práctica.