Aplaza el CSS que no sea crítico

Demián Renzulli

Los archivos CSS son recursos que bloquean la renderización: deben cargarse y procesarse 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 ocultos de texto, cada uno de los cuales tiene un diseño con una clase 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 a la sección Rendimiento.

El informe muestra la métrica Primer procesamiento de imagen con contenido con un valor de "1 s" y la oportunidad Eliminar recursos que bloquean la renderización, que apunta al archivo style.css:

Para visualizar cómo este CSS bloquea la renderización, sigue estos pasos:

1. Abre la página en Chrome.
2. Presiona Control+Shift+J (o Command+Option+J en Mac) para abrir DevTools.
3. Haz clic en la pestaña Rendimiento.
4. 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 termina de cargarse el CSS:

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 determinar esto, usa la herramienta de cobertura:

1. En DevTools, presiona Control+Shift+P o Command+Shift+P (Mac) para abrir el menú de comandos.
2. Escribe "Cobertura" y selecciona Mostrar cobertura.
3. 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 las necesita para renderizar el contenido visible, incluidos el título, el subtítulo y los botones del acordeón.
• Las clases marcadas en rojo no son críticas y solo afectan el 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:

1. 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>
   

2. 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 sobre preload en la guía de carga previa de recursos críticos.
• El atributo onload en link 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 atributo rel.
• 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 se ve exactamente igual que la versión anterior, incluso cuando la mayoría de los estilos se cargan de forma asíncrona. A continuación, se muestra cómo se ven los estilos intercalados y la solicitud asíncrona al archivo CSS en el archivo HTML:

Supervisar

Usa DevTools 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:

Como paso final, ejecuta 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 Elimina los 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 aplazar el CSS no esencial extrayendo manualmente el código sin usar de la página. Para entornos de producción más complejos, la guía para extraer CSS críticos abarca algunas de las herramientas más populares para extraer CSS críticos y también incluye un codelab para ver cómo funcionan en la práctica.