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:
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+Jen 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 termine de cargarse el CSS:
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:
- En las Herramientas para desarrolladores, abre el menú de comandos.
pulsando
Control+Shift+PoCommand+Shift+P(Mac). - 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 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:
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>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 sobrepreloaden la guía Precargar recursos críticos.- El atributo
onloaddelinkpermite que el navegador procese el CSS cuando cuando termine de cargarse la hoja de estilo. - “anulación” el controlador
onloaddespué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
noscriptproporciona 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:
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):
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:
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