En la sección Oportunidades del informe de Lighthouse, se enumeran todas las hojas de estilo con CSS sin usar, con un ahorro potencial de 2 KiB o más. Quita el CSS que no se usa para reducir los bytes innecesarios que consume la actividad de red:
Cómo el CSS sin usar ralentiza el rendimiento
Usar una etiqueta <link> es una forma común de agregar estilos a una página:
<!DOCTYPE html>
<html>
<head>
<link href="main.css" rel="stylesheet" />
...
</head>
</html>
El archivo main.css que descarga el navegador se conoce como hoja de estilo externa,
porque se almacena por separado del HTML que la usa.
De forma predeterminada, un navegador debe descargar, analizar y procesar todos los diseños de página externos que encuentre antes de poder mostrar o renderizar cualquier contenido en la pantalla de un usuario. No tendría sentido que un navegador intente mostrar contenido antes de que se procesen los diseños de página, ya que estos pueden contener reglas que afectan el diseño de la página.
Cada hoja de estilo externa se debe descargar de la red. Estos viajes de red adicionales pueden aumentar significativamente el tiempo que los usuarios deben esperar antes de ver contenido en sus pantallas.
El CSS sin usar también ralentiza la construcción del árbol de renderización de un navegador. El árbol de renderización es como el árbol de DOM, excepto que también incluye los estilos de cada nodo. Para construir el árbol de renderización, un navegador debe recorrer todo el árbol del DOM y verificar qué reglas de CSS se aplican a cada nodo. Cuanto más CSS sin usar haya, más tiempo podría necesitar un navegador para calcular los estilos de cada nodo.
Cómo detectar el CSS sin usar
La pestaña Cobertura de las Herramientas para desarrolladores de Chrome puede ayudarte a descubrir CSS fundamentales y no críticas. Consulta Cómo ver el CSS usado y sin usar con la pestaña Cobertura.
Intercala el CSS crítico y aplaza el CSS no crítico
Al igual que el código intercalado en una etiqueta <script>, intercala los diseños críticos necesarios para la primera pintura dentro de un bloque <style> en el head de la página HTML.
Luego, carga el resto de los diseños de forma asíncrona con el vínculo preload.
Procura automatizar el proceso de extracción e integración del código CSS de la mitad superior de la página con la herramienta fundamental.
Obtén más información en Aplaza el CSS que no sea crítico.
Orientación específica de la pila
Drupal
Se recomienda quitar las reglas de CSS no utilizadas y solo adjuntar las bibliotecas de Drupal necesarias al componente o a la página pertinentes. Consulta la documentación de Drupal para obtener más información.
Para identificar las bibliotecas adjuntas que agregan instancias innecesarias de CSS, prueba ejecutar la cobertura de código en DevTools de Chrome. Puedes identificar el tema o el módulo responsable desde la URL de la hoja de estilo cuando está inhabilitada la agregación de CSS en tu sitio de Drupal.
Presta atención a los temas y módulos que tengan varias hojas de estilo en la lista con muchos elementos en rojo en la cobertura de código. Los temas y los módulos solo deben adjuntar una biblioteca de hojas de estilo si se usa en la página.
Joomla
Puedes reducir o cambiar la cantidad de extensiones de Joomla que cargan elementos de CSS que tu página no usa.
WordPress
Puedes reducir o cambiar la cantidad de complementos de WordPress que cargan hojas de estilo CSS que tu página no usa.