La sección Oportunidades de tu informe de Lighthouse enumera 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 uso de CSS sin usar ralentiza el rendimiento
El uso de 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 lo usa.
De forma predeterminada, un navegador debe descargar, analizar y procesar todas las hojas de estilo externas. que encuentra 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 las hojas de estilo, ya que las hojas de estilo pueden contener reglas que afectan el estilo de la página.
Se debe descargar cada hoja de estilo externa de la red. Estos viajes adicionales por la red pueden aumentar considerablemente el tiempo que los usuarios deben esperar antes de ver cualquier contenido en sus pantallas.
Un lenguaje CSS sin usar también ralentiza la construcción del navegador árbol de renderización. El árbol de representación es como el árbol del DOM, excepto que también incluye los estilos de cada nodo. Para construir el árbol de representación, un navegador debe recorrer todo el árbol del DOM y comprobar las reglas de CSS que se aplican a cada nodo. Cuanto más CSS no uses, más tiempo podría necesitar un navegador para calcular los estilos de cada nodo.
Cómo detectar 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 los elementos de CSS usados y sin usar en la pestaña Cobertura.
Intercala el CSS crítico y aplaza el CSS no crítico
Al igual que para intercalar código en una etiqueta <script>,
estilos críticos intercalados requeridos para la primera pintura
dentro de un bloque <style> en el head de la página HTML.
Luego, carga el resto de los estilos de forma asíncrona mediante el vínculo preload.
Considera automatizar el proceso de extracción e integración de la parte superior de la página CSS 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
Te recomendamos quitar las reglas de CSS que no se usen. Solo adjunta las bibliotecas de Drupal necesarias a la página o al componente correspondiente en una página. Consulta Cómo definir una biblioteca para conocer los detalles.
Joomla
Te recomendamos reducir o cambiar la cantidad de extensiones de Joomla que cargan elementos de CSS sin usar en tu página.
WordPress
Puedes reducir o cambiar la cantidad de complementos de WordPress que cargan elementos CSS sin usar en tu página.