Aplaza el CSS que no sea crítico

Demián Renzulli
Demián Renzulli

Los archivos CSS son recursos que bloquean el procesamiento: se deben cargar y procesar antes de que el navegador renderice la página. Páginas web que contienen hojas de estilo innecesariamente grandes, tardan más en renderizarse.

En esta guía, aprenderás a diferir las CSS que no sean críticas para optimizar la Ruta crítica de renderización y mejora Primer procesamiento de imagen con contenido (FCP):

Ejemplo: carga de CSS subóptima

El siguiente ejemplo contiene un acordeón con tres párrafos ocultos de texto, cada uno con una clase diferente:

Esta página solicita un archivo CSS con ocho clases, pero no todas son necesario para renderizar el código "visible" contenido.

El objetivo de esta guía es optimizar esta página para que solo los estilos críticos se cargan de forma síncrona, mientras que el resto (incluidos los estilos de párrafo) se carguen sin bloqueos.

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". la oportunidad de eliminar los recursos que bloquean el procesamiento, que apuntan al style.css:

Faro
    informe de página no optimizada que muestra el FCP de "1" y "Eliminar el bloqueo"
    recursos en "Oportunidades"
El informe de Lighthouse sugiere que simplifiques hoja de estilo para que tu página se cargue más rápido.

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

  1. Abre la página en Chrome.
  2. Presiona Control+Shift+J (o Command+Option+J en Mac) para abrir 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 termine de cargarse el CSS:

Seguimiento de rendimiento de Herramientas para desarrolladores de una página no optimizada, que muestra el FCP que comienza después de que se carga CSS.
En la página de demostración no optimizada, no puede ocurrir el FCP. hasta que el CSS termine de cargarse.

Esto significa que el navegador debe esperar a que se carguen y procesen todos los CSS. antes de pintar 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:

  1. En las Herramientas para desarrolladores, abre el menú de comandos. pulsando Control+Shift+P o Command+Shift+P (Mac).
  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.
Cobertura del archivo CSS, que muestra un 55.9% de bytes sin usar.
En el informe de cobertura, se muestra qué porcentaje del CSS se usa en la carga inicial de la página.

Haz doble clic en el informe para ver los detalles:

  • Las clases marcadas en verde son fundamentales. El navegador los necesita para renderizar el el contenido visible, incluidos los botones de título, subtítulo y acordeón.
  • Las clases marcadas en rojo no son críticas, solo que 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 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. 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. Carga el resto de las clases de forma asíncrona aplicando lo siguiente diseño:

    <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. Tú puedes obtener más información sobre preload en la guía Precargar recursos críticos.
  • El atributo onload de link permite que el navegador procese el CSS cuando cuando termine de cargarse la hoja de estilo.
  • “anulación” 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 una como resguardo para navegadores que no ejecutan JavaScript.

La página resultante tiene el mismo aspecto la versión anterior, incluso cuando la mayoría de los diseños se cargan de forma asíncrona. A continuación, te mostramos cómo los estilos intercalados y la solicitud asíncrona al archivo CSS se ven en el código HTML archivo:

Supervisar

Usa las Herramientas para desarrolladores para ejecutar otro registro de Rendimiento en el página optimizada.

El marcador FCP aparece antes de que la página solicite el CSS, lo que significa que navegador no necesita esperar a que se cargue el CSS para procesar la página:

DevTools
    Seguimiento del rendimiento de la página optimizada, que muestra el FCP que comienza antes del CSS
    .
En la página optimizada, el FCP puede comenzar antes del carga la hoja de estilo.

El último paso es ejecutar Lighthouse en la página optimizada.

En el informe, verás que la página del FCP se redujo en 0.2 s (un 20%). mejoras):

Informe de Lighthouse que muestra un valor de FCP de “0.8s”.
El nuevo FCP reducido.

La sugerencia Eliminar los recursos de bloqueo de renderización ya no aparece en Oportunidades y, en su lugar, se encuentra en la sección Auditorías aprobadas:

Faro
    en el que se muestran los informes “Elimina los recursos de bloqueo” del curso “Auditorías aprobadas”
    sección.
La página ahora pasa los recursos de bloqueo auditoría de Cloud.

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, La guía de extracción crítica de CSS abarca algunos de los más populares para extraer CSS crítico, e incluye un codelab para ver cómo trabajo en la práctica