Quita los elementos CSS sin usar

En la sección Oportunidades de tu informe de Lighthouse, se enumeran todas las hojas de estilo que incluyen CSS sin usar con un potencial ahorro de 2 KiB o más. Quita el CSS sin usar para reducir los bytes innecesarios que consume la actividad de red:

Captura de pantalla de la auditoría de Lighthouse para quitar las CSS sin usar

Cómo ralentiza el rendimiento el CSS sin usar

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 una hoja de estilo externa, ya que se almacena por separado del código HTML que lo usa.

De forma predeterminada, un navegador debe descargar, analizar y procesar todas las hojas de estilo externas que encuentre antes de poder mostrar o renderizar cualquier contenido en la pantalla de un usuario. No tendría sentido que un navegador intentara mostrar contenido antes de que se hayan procesado las hojas de estilo, ya que estas pueden contener reglas que afectan el estilo 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 para ver contenido en sus pantallas.

Las CSS sin usar también ralentizan la construcción del árbol de renderización en los navegadores. El árbol de representación es como el árbol del DOM, excepto que también incluye los estilos para cada nodo. Para construir el árbol de representación, un navegador debe recorrer todo el árbol del DOM y comprobar qué reglas de CSS se aplican a cada nodo. Mientras más CSS sin usar haya, más tiempo podría necesitar un navegador para calcular los diseños de cada nodo.

Cómo detectar elementos CSS sin usar

La pestaña Cobertura de las Herramientas para desarrolladores de Chrome puede ayudarte a detectar CSS importantes y no críticas. Consulta el artículo Consulta los CSS usados y sin usar en la pestaña Cobertura.

Herramientas para desarrolladores de Chrome: Pestaña Cobertura
Herramientas para desarrolladores de Chrome: Pestaña Cobertura.

Intercala el CSS crítico y aplaza el CSS que no sea esencial

De manera similar a cómo intercalar código en una etiqueta <script>, los estilos críticos intercalados necesarios para la primera pintura dentro de un bloque <style> en head de la página HTML Luego, carga el resto de los estilos de forma asíncrona mediante el vínculo preload.

Procura automatizar el proceso de extracción e intercalación de CSS de la "mitad superior de la página" con la herramienta crítica.

Obtén más información en Aplaza los CSS no críticos.

Orientación específica de pila

Drupal

Considera quitar las reglas de CSS sin usar. Solo adjunta las bibliotecas de Drupal necesarias a la página o el componente correspondiente de una página. Consulta Cómo definir una biblioteca para obtener más detalles.

Joomla

Puedes reducir o cambiar la cantidad de extensiones de Joomla que cargan elementos CSS que no se usan en tu página.

WordPress

Puedes reducir o cambiar la cantidad de complementos de WordPress que cargan archivos CSS que no se usan en tu página.

Recursos