Solucionar "Eliminar CSS no utilizado" en Lighthouse.

¿Qué es el CSS no utilizado?

El CSS no utilizado consiste en declaraciones CSS que no se utilizan en ninguna parte de una página web.
Es bastante normal que parte del CSS no se utilice. Por ejemplo, porque algunas declaraciones CSS están escritas para otro dispositivo, como un escritorio o móvil. A veces  porque un elemento que se describe en la hoja de estilo (como un botón) no se utiliza en esta página específica.
El CSS no utilizado a menudo ocurre cuando usa un framework como bootstrap donde hay muchos más elementos descritos por defecto en el CSS de los que jamás usará. O cuando ha rediseñado su página pero olvidó eliminar los elementos CSS antiguos.

¿Por qué el CSS no utilizado es malo para la velocidad de la página?

CSS ralentiza la carga de la página. Cuando se carga una página, el navegador primero busca el HTML de esta página. Este HTML se convierte en nodos DOM. Después de eso, el navegador busca todas las hojas de estilo. Los estilos encontrados en estos archivos CSS también se convierten a otro formato, a saber, el CSSOM. El DOM y el CSSOM se combinan en un árbol de renderizado. Solo cuando se ha construido este árbol de renderizado, un navegador comienza a pintar el primer contenido.
Debido a este mecanismo, los archivos CSS siempre bloquearán el renderizado de su página web. Cuando un archivo CSS es más grande de lo que debería ser, lleva más tiempo descargar este archivo y eso causa el primer retraso.  Cuando un archivo CSS contiene CSS no utilizado, lleva más tiempo construir el árbol de renderizado. 

¿Cómo encontrar CSS no utilizado manualmente?

En Google Chrome puede ver el CSS no utilizado en la vista general de Code Coverage. Code Coverage es parte de Chrome DevTools. DevTools es una serie de herramientas integradas que están disponibles en todos los navegadores Chrome. 

Primero abra DevTools con el atajo Ctrl-Shift-J. Luego escriba Ctrl-Shift-P  para abrir la paleta de comandos. Ahora escriba "coverage". Seleccione coverage y recargue la página. Ahora verá una descripción general de los archivos CSS y JavaScript que se cargan y utilizan en la página. Además, puede ver qué tan grandes son los archivos y cuánto del código se está utilizando realmente.
Haga clic en un archivo CSS para ver qué reglas CSS se usan (verde) y qué reglas CSS no se usan (rojo) en la página actual. 

Cómo resolver la advertencia "eliminar CSS no utilizado"

Hay varias formas de resolver el mensaje "eliminar CSS no utilizado" en Lighthouse. Si, por alguna razón, no es posible solucionar la advertencia, podría optimizar la entrega de CSS para asegurarse de que el CSS no utilizado tenga menos impacto en el tiempo de carga de su página. Discutiré brevemente las opciones que tiene para arreglar el CSS no utilizado a continuación.

1. Eliminar el CSS no utilizado manualmente

La forma más lógica y mejor, pero también la más laboriosa, es, por supuesto, eliminar manualmente el CSS no utilizado. Los pasos son sencillos:

1. Haga una copia de seguridad de sus archivos CSS originales. Podría eliminar demasiado CSS.
2. Abra la pestaña Code Coverage en Google Chrome y vea por archivo CSS qué declaraciones no necesita.
3. Abra el archivo CSS en el servidor (o localmente) y verifique cada declaración CSS no utilizada. Determine si se puede eliminar. Pero tenga cuidado: una declaración CSS no utilizada no significa que nunca necesitará esta declaración. ¡Tiene que juzgarlo usted mismo!
4. Verifique por declaración CSS si no está duplicada en el CSS. El CSS duplicado también se marcará como no utilizado. 
5. Verifique cada regla CSS para métodos abreviados.  ¿Es posible acortar el CSS? ¡Entonces acórtelo!

2. Dividir el CSS en varios archivos

¡Hay una forma sencilla  de reducir rápidamente el número de reglas CSS! Solo cargue los estilos que necesita para su dispositivo. Su página es visitada a menudo en dispositivos móviles. Realmente no necesita descargar los estilos para escritorio e impresión para este dispositivo móvil. No descargar estos estilos ahorra tiempo y, por lo tanto, acorta la cadena de solicitud crítica en Lighthouse.

Para lograr esto, use el atributo media. El atributo media asegura que una hoja de estilo solo se use si el atributo media coincide con el medio que está utilizando actualmente.

<link href="all.css" rel="stylesheet" media="all">
<link href="print.css" rel="stylesheet" media="print">
<link href="desktop.css" rel="stylesheet" 
 media="screen and (min-device-width: 1024px)">

3. Usar una herramienta automática de limpieza de CSS

Hay una serie de herramientas inteligentes que pueden limpiar automáticamente sus archivos CSS por usted y eliminar cualquier referencia CSS no utilizada.
Aunque las herramientas funcionan increíblemente bien, no son infalibles. A veces, estas herramientas eliminan demasiadas declaraciones CSS. Así que úselas con cuidado y siempre revise su CSS usted mismo.
Las mejores herramientas de limpieza de CSS son PurifyCSS y PurgeCSS . Estas herramientas se ejecutan en NodeJS. NodeJS es un entorno de ejecución JavaScript, en el que puede ejecutar scripts JavaScript, basado en el motor V8 JavaScript de la propia Google.  También puede probar purifyCSS en línea.

4.  Critical CSS

Critical CSS es una colección de reglas CSS que se necesitan en el viewport (la parte visible) de su sitio web. En otras palabras:  Critical CSS es el CSS que se requiere para renderizar la parte visible de su página.

Hay una serie de herramientas que pueden filtrar y extraer CSS de su página. El Critical CSS se coloca entonces inline, en el head de su página, mientras que los archivos CSS originales se cargan de forma asíncrona (para que el navegador los use más tarde).

Esto no resuelve completamente el problema del CSS no utilizado. Eventualmente, el CSS no utilizado se cargará y analizará, pero su navegador no será "molestado" por él durante la primera fase de renderizado.

La herramienta más utilizada para encontrar y extraer Critical CSS es el script NodeJS Critical . También hay herramientas en línea como Critical Path CSS Generator y otro Critical Path CSS Generator

5. Minificar los archivos CSS

El CSS no utilizado ralentiza una página, como leyó anteriormente, de 2 maneras. La primera es porque los archivos CSS son más grandes y, por lo tanto, toman más tiempo para descargarse. 

Podemos contrarrestar ese problema reduciendo el tamaño del archivo CSS minificando los archivos CSS. Eso se hace a través de un minificador CSS.  Un minificador CSS reduce los archivos CSS eliminando espacios, comentarios y formato. Además, un minificador CSS puede reescribir variables y código CSS para que ocupen menos bytes para transferir.

Una herramienta conocida para minificar CSS es css-minify . Minifique todos sus archivos CSS a través de la línea de comandos con el comando css-minify -f filename. También hay varios minificadores CSS en línea minificadores como cssminifier.com

6. Recompilar su framework CSS

¿Está utilizando un framework CSS como bootstrap CSS? Ese es un framework CSS con el que puede diseñar todo su sitio. Este framework es tan completo que es probable que nunca use grandes partes de él.

Afortunadamente, los creadores de bootstrap y otros frameworks CSS han tenido esto en cuenta. Este framework está escrito en SASS. Ese es un lenguaje que es muy similar a CSS. Consiste en varios archivos SASS pequeños que pueden usar variables y funciones simples. Esto hace que sea fácil ajustar y personalizar  el framework usted mismo con un poco de conocimiento. Puede simplemente omitir las partes que no usa y compilarlo fácilmente en 1 archivo CSS final.

Asegúrese también de no cargar un framework CSS sin modificar desde el CDN estándar. Descargue el framework y compílelo con SASS exactamente como lo desea, con solo las clases CSS que utiliza.

7. Considere una estrategia CSS diferente

¿Realmente quiere ser rápido? Entonces podría ser una idea repensar su estrategia CSS. Cómo se hace depende de su sitio. Hay varios caminos que llevan a Roma.

Tomemos nuestro sitio por ejemplo. Solo cargamos el CSS que realmente  necesitamos por página. Las clases CSS son importadas automáticamente por nuestro CMS solo cuando son necesarias. Colocamos el CSS inline (en el head de la página). Eso nos ahorra una solicitud de red adicional. Esta solución es increíblemente rápida y fácil de mantener.

Un lector atento podría pensar: "¿Qué pasa con el almacenamiento en caché de CSS?, CSS es más rápido cuando los archivos CSS finales se almacenan en caché. Sí, es correcto. Es por eso que precargamos todos los enlaces en el viewport visible para que una página siempre se recupere del caché, incluido el CSS.

Solucionar "eliminar CSS no utilizado" en Wordpress

¿Está listo para eliminar el CSS no utilizado? Así es como empezar en WordPress. En WordPress, el CSS se puede agregar de 3 maneras:

• Directamente en la plantilla . En su carpeta de plantillas hay un archivo llamado header.php. En este archivo a menudo hay archivos CSS específicos de la plantilla. Podría modificar estos archivos CSS como describí anteriormente. No olvide hacer una copia de seguridad de sus archivos CSS originales y tenga en cuenta que una actualización del tema puede sobrescribir sus archivos CSS.
• CSS agregado por un plugin . Los plugins en WordPress pueden agregar archivos CSS ilimitados en su HTML. Estos plugins usan las funciones wp_register_style y wp_enqueue_style. La mayoría de los plugins no se molestan en comprobar si están activos en la página actual. Simplemente inyectan CSS en cada página, aunque no haya necesidad de ese CSS específico del plugin en esa página. Me encuentro con eso todos los días. Si ese es el caso, puede usar las funciones wp_dequeue_style y wp_deregister_style para eliminar estos estilos de las páginas. Ese es un trabajo preciso. Si no está seguro de cómo solucionar esto, consulte a su desarrollador o pídame ayuda. También puede usar el plugin Asses CleanUp con el cual puede configurar por tipo de página qué plugin, estilos y scripts se pueden cargar.
• CSS agregado por JavaScript . También es posible "inyectar" hojas de estilo en la página usando JavaScript. Al igual que las hojas de estilo, puede deshabilitar estos scripts por página con la función wp_dequeue_script . Cuando el JavaScript no se carga, la hoja de estilo tampoco se inyectará.
  Si necesita el script y la hoja de estilo pero no directamente después de cargar, es posible posponer la carga de JavaScript a través del atributo script defer. Haga esto agregando este código en functions.php

function defer_js( $url ) {
    if ( is_user_logged_in() ) return $url; //don"t break WP Admin
    if ( strpos( $url, "somescript.js" ) ) {
        str_replace( " src", " defer src", $url );
    }
}
add_filter( "script_loader_tag", "defer_js", 10 );