Aplaza el CSS que no sea crítico

Demián Renzulli

Los archivos CSS son recursos que bloquean el procesamiento: deben cargarse y procesarse antes de que el navegador procese 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 diferir el código CSS no esencial para optimizar la ruta de renderización crítica y mejorar el primer procesamiento de imagen con contenido (FCP).

Ejemplo: Carga de CSS subóptima

En el siguiente ejemplo, se incluye un acordeón con tres párrafos ocultos de texto, cada uno de los cuales tiene un estilo diferente:

En esta página, se 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 diseños críticos se carguen de forma síncrona, mientras que el resto (incluidos los diseños de párrafo) se cargue de manera sin bloqueo.

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 los recursos de bloqueo de renderización, que apunta al archivo style.css:

Sigue estos pasos para visualizar cómo este CSS bloquea la renderización:

1. Abre la página en Chrome.
2. Presiona Control+Shift+J (o Command+Option+J en Mac) para abrir las Herramientas para desarrolladores.
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 todo el CSS y se procese antes de pintar un solo píxel en la pantalla.

Optimiza

Para optimizar esta página, debes saber qué clases se consideran fundamentales. Para determinarlo, usa la herramienta de cobertura de la siguiente manera:

1. En Herramientas para desarrolladores, 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 los 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 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 diseños críticos inmediatamente después de cargar la página y aplazar las CSS que no sean críticas para más adelante:

1. Extrae las definiciones de clase marcadas con verde en el informe de cobertura y coloca esas clases en un bloque <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>
   

2. Aplica el siguiente patrón para cargar el resto de las clases de forma asíncrona:

   <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. Aquí te mostramos cómo funciona:

• link rel="preload" as="style" solicita la hoja de estilo de manera asíncrona. Puedes obtener más información sobre preload en la Guía sobre la carga previa de recursos críticos.
• El atributo onload de link permite que el navegador procese el CSS cuando la hoja de estilo termina de cargarse.
• "anular" el controlador onload después de su uso 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 a 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 intercalados y la solicitud asíncrona en el 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 para procesar 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 Eliminar recursos de bloqueo de procesamiento ya no aparece en Oportunidades y se encuentra en la sección Auditorías aprobadas:

Próximos pasos y referencias

En esta guía, aprendiste a diferir el código CSS no esencial mediante la extracción manual del código sin usar de la página. En entornos de producción más complejos, la guía de extracción de CSS fundamental abarca algunas de las herramientas más populares para extraer CSS críticas e incluye un codelab para ver cómo funcionan en la práctica.