Una de las advertencias de mejora de optimización de PageSpeed Insights de Google, basado en las métricas web principales o Core Web Vitals es la de eliminar CSS sin utilizar, así que vamos a ver de qué estamos hablando y cómo corregirlo.
Índice de contenidos
Qué es el CSS sin usar
El CSS no utilizado es un archivo CSS que está presente en una página pero que, normalmente, no es necesario para que se cargue la página.
Cuando un visitante abre una web, el navegador normalmente tiene que descargar, analizar y procesar todas las hojas de estilo en la página visitada antes de poder mostrar el contenido de la página al visitante.
Si existe algún CSS en una página de este tipo que no se utiliza en la página, el navegador perderá su tiempo en procesarlo.
Un ejemplo clásico de esto es la mayoría de los plugins de formularios de contacto que se utilizan. Estos plugins, aunque se utilizan principalmente solo en la página de contacto, cargan su CSS en toda la web. Da igual si estás en la página de inicio, donde no se usa, se cargará el CSS.
Si hay demasiados CSS que no son necesarios pero se están cargando y ralentizando el tiempo del navegador para leer y mostrar una página, puede convertirse en un problema.
Además, los desarrolladores de temas escriben el tema de tal manera que el tema sea compatible con casi todos los tipos de sitios como blogs, WooCommerce, foros, etc.
Todos estos sitios pueden requerir varios tipos de elementos HTML (con sus propias variaciones) como por ejemplo:
- Tipografía
- Iconos
- Mesas
- Formularios y botones
- Widgets
- Barra de navegación
- WooCommerce
- Cuadro de autor
- Barra de búsqueda
- Comentarios
- Galerías
- Botones de redes sociales
- La lista sigue…
El 99% de las veces, los desarrolladores de temas escriben todo en un solo archivo style.css. Ya sea que lo uses o no, los CSS necesarios para todos estos elementos se sirven a tus usuarios cada vez que se carga cualquiera de las páginas de tu sitio.
Algo de CSS no utilizado puede no ser un problema, pero una gran cantidad de CSS no utilizado puede afectar el tiempo de carga de tu web.
¿Por qué debería eliminar el CSS sin utilizar?
Yo creo que los motivos son bastante obvios, pues el resultado de lo visto en el punto anterior es que…
- El CSS no utilizado no se utiliza ni se desea, pero se entrega a los usuarios.
- Ese CSS no utilizado consume recursos (ancho de banda, servidor, etc.) sin ningún propósito.
- También contribuye al tiempo de carga (velocidad del sitio) de tu sitio. Eso significa que CSS no utilizado reduce la velocidad de tu web.
Creo que no hace falta recordar la importancia de la velocidad de una web. La velocidad de carga puede hacer o deshacer su sitio. Por lo tanto, debes eliminar todo lo no deseado para que tu web sea más rápida.
Cómo identificar el CSS sin uso
Descubrir el CSS sin utilizar es bastante fácil. Para localizarlo te recomiendo hacerlo de una de estas dos maneras.
Google PageSpeed Insights
Una es analizar tu web en PageSpeed Insights. Revisa si en tu web aparece la advertencia de CSS sin usar, haz clic ahí y podrás identificar qué componentes de tu web son los que cargan CSS sin usar.
En la captura de arriba puedes ver un caso típico de CSS sin usar. Al desplegar la advertencia verás una lista de archivos CSS y su ubicación en tu instalación de WordPress que están entregando CSS sin utilizar.
Chrome Dev Tools
La otra manera de descubrir el CSS sin utilizar es un poco más lioso, pues requiere el uso de las herramientas para desarrolladores de Chrome, pero bueno, tampoco es algo tan terrible.
Simplemente abre las herramientas para desarrolladores de Chrome haciendo clic derecho en tu web y pulsando en «Inspeccionar».
A continuación usa la herramienta llamada «Coverage», como vimos en la guía de cómo quitar el JavaScript y CSS sin uso en WordPress, para identificar el CSS sin utilizar.
Carga la herramienta y tendrás una lista de archivos CSS con su porcentaje de uso, estando en rojo los que tengan CSS sin usar.
Si te fijas en la captura anterior he ordenado el resultado por tipo de archivo, con los CSS al principio. A la derecha puedes ver la cantidad de bytes sin uso, donde hay archivos que tienen un 100% de CSS sin uso en la página, y otros con porcentajes menores, pero también importantes de CSS sin utilizar.
Si haces clic en un archivo de la lista, podrás ver arriba el código del mismo, identificado en rojo todo el código CSS sin utilizar que tu web está cargando innecesariamente.
¿Sorprendido?
¡Extra! – PurifyCSS
Otro método adicional, que no te recomiendo por ahora, pero que no está de más conocer, es usar la herramienta online PurifyCSS.
Simplemente añade una URL y te mostrará una lista de todos los archivos que cargan CSS sin utilizar en la misma.
Al lado de cada resultado tienes dos botones, uno para mostrar el código CSS limpio, solo lo que tiene uso en la página, y otro para mostrar la diferencia entre el CSS completo y el limpio.
Además, junto al resumen hay un botón para descargar todo el CSS, minimizado y combinado, sin todo lo que sobra.
Cómo se incorpora esto en tu sitio WordPress es otra cuestión, solo accesible si eres programador o muy apañado, así que ni entraré en esta guía en ello. Si quieres otro día hacemos una guía de cómo hacerlo así en concreto ¿vale?
Hoy veremos cómo eliminar el CSS sin utilizar de manera sencilla, sin tener que tocar código.
Cómo eliminar el CSS sin usar en WordPress
Dicho lo anterior, vamos a ver cómo podemos eliminar ese CSS sin uso en WordPress, sin tener que tocar ni una sola línea de código, al modo NoCode que dicen por ahí.
Te propongo 2 maneras de hacerlo…
Asset CleanUp
La primera, y gratis, es usar el plugin Asset CleanUp.
Una vez instalado y activo ve a la página de ajustes denominada CSS & JS Manager.
Ahí puedes descargar todo el CSS y JavaScript que no necesites en páginas, entradas o en toda la web.
Si descargas archivos CSS en toda la web a continuación debes ir a la página que sí lo necesite, por ejemplo en el caso de plugins de contacto o similares, y activarlo en esa página, como en la siguiente captura:
Así, paso a paso, hilando fino, analizando el CSS sin utilizar y descargándolo de dónde no se necesite, podrás optimizar la carga de todo tu sitio, solo con el CSS necesario, y este plugin gratuito te permite hacerlo a golpe de clic, es simplemente dedicarle un poco de tiempo, los resultados merecen la pena.
WP Rocket
Pues sí, la otra herramienta que te propongo utilizar para eliminar el CSS sin utilizar es el plugin, premium en este caso, WP Rocket.
Para ayudarnos en esta tarea dispone de 2 funcionalidades muy prácticas y potentes, pero sobre todo sencillas de utilizar.
Optimizar la entrega de CSS
Una de ellas es optimizar la entrega de CSS y aplazar el resto del CSS.
Aunque no se trata exactamente de eliminar el CSS sin utilizar, en realidad hace algo muy parecido, que es optimizar e integrar el CSS necesario para mostrar el contenido de tu sitio a primera vista, o Above the fold, como se le suele llamar, aplazando la carga del resto de CSS sin uso.
Eliminar el CSS sin utilizar
Para finalizar, desde la versión 3.9, WP Rocket tiene una herramienta específica con la que eliminar el CSS sin uso en WordPress.
Aquí no hay que complicarse la vida, simplemente activa la herramienta y el plugin se ocupa de todo.
Una vez activada la utilidad y guardados los cambios empezará a revisar todo el CSS de tu sitio WordPress y eliminarlo de manera segura y sin tu intervención, avisándote cuando esté completa la tarea, como puedes ver en la captura anterior.
Lo que hace esta herramienta cuando la activas es:
- Generar todo el CSS necesario para cargar las páginas de tu web.
- Eliminar todo el CSS sin utilizar.
A partir de este momento se entregará desde la caché el HTML solo con el CSS necesario.
Para poder usar esta funcionalidad debes tener en cuenta algunos requisitos básicos:
- El sitio debe ser público – No funciona en instalaciones locales, webs bloqueadas por plugins o .htaccess o similar.
- Debes poner en lista blanca la IP 135.125.83.218 en tu cortafuegos, plugin de seguridad, CDN o lo que tengas.
- Debe estar activo el WP Cron o un cron real.
Notas importantes:
- Esta herramienta en concreto está en fase beta, úsala con precaución.
- El CSS en uso se almacena en la base de datos (en la tabla
_wpr_rucss_resources) y puede llegar a ocupar cientos de megas, incluso gigas, si tu sitio tiene muchas páginas.
Nota: Ambas herramientas de WP Rocket son totalmente compatibles. Puedes tener activas al mismo tiempo la optimización de entrega de CSS y la eliminación del CSS sin usar.
¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!
Hola, yo he estado probando desde hace tiempo con ambos pero a veces en algunas páginas ninguno de los dos logra eliminarlo. Generalmente si que lo hace, cuando no lo hacen entiendo que la mejor solución es eliminarlo a mano.
Claro, si no queda más remedio a mano es la única solución
WP-Rocket no ha lanzado todavía la versión 3.9 ( solo está disponible para el 10% de los usuarios tal como se explica en https://wp-rocket.me/changelog/ ), actualmente está disponible la 3.8.8, y lo único que se puede hacer en estos momentos con el plugin de WP-Rocket es https://docs.wp-rocket.me/article/1393-remove-unused-css-pagespeed
Como verás en las capturas yo la tengo ya, simplemente estaba disponible y actualicé, no sabía que hubiesen hecho ese experimento, simplemente descargué la última versión de mi área de usuario y me descargó la 3.9. En todo caso, ya explico también como hacerlo con Asset CleaUp así que información completa ¿no?
La información está completa, el artículo está muy bien !!!!
De hecho lo de las versiones de WP Rocket es una cerdada que hacen. Resulta que fuera de ese 10% estamos todos los que nos queda poco por caducar la licencia, de tal forma que solo envian actualizaciones a los que les queda mucho tiempo aún.
Tengo 2 websites con 2 licencias diferentes, una expira en breve y a la otra le queda un año. Adivinad cula de las dos tiene más suerte y siempre entra en ese 10% de «pruebas».
No sabía que ese era el motivo, me parece fatal, además de un error. Precisamente, si quiero que los usuarios renueven, lanzaría esas novedades a los que están a punto de caducar la licencia, para animarles a seguir ¿no?
Hola Fernando,
Te cuento un caso, ya que veo que también hablas de DIVI en el blog. Recientemente, he visto que al hacer WPO en algunas web con DIVI me encuentro que la hoja de estilo de DIVI, llega a bloquear el renderizado, y además, aparece como CSS sin usar en un 95-97%. Estoy intentando eliminar la hoja de estilo sin necesidad de usar ningún plugin. Y entonces me surgen unas cuantas dudas:
1- Un snippet en el functions.php para eliminarla directamente y crear una hoja de estilo «hija» con solo ese CSS usado.
2- Borrar el resto del CSS no usado (guardando una copia original) por si las moscas.
En tu opinión ¿Cuál de los dos métodos es mejor?
Menciono lo de hacerlo sin plugins por que veo que tanto con autoptimize, assets y WP-rocket, al minificar y combinar archivos, crean otros archivos más grandes que igualmente bloquean el renderizado, siendo peor el remedio (menos peticiones, pero a costa de cargar dos archivos enormes de los que sobra el 90%).
Depende de dónde tengas alojada la web. Si es un hosting con HTTP/2 mi consejo es que no uses el combinado de CSS, pues genera archivos CSS más grandes, que los analizadores identifican como problemas, y en realidad HTTP/2 gestiona mejor varias peticiones pequeñas que pocas grandes.
También te animaría a revisar la configuración de Divi, pues tiene ajustes para optimizar la carga de CSS que no siempre funcionan bien en según qué configuraciones, conjunción de plugins, etc.
Vamos, que no hay una configuración perfecta para toda web, hay que probar mezcla de ajustes entre caché/plugins/tema hasta dar con la óptima para tu web, tu portada, tus páginas principales.
Hola Fernando!
Gracias por la respuesta. Al final, he dejado esa hoja de estilo, aunque sigue cargando código CSS innecesario (entre el 95 y 97% del archivo), con WP-Rocket y EWWW he conseguido dejar la puntuación para móviles de Page Speed y GTMetrix en algo bastante aceptable. Con todo ello he conseguido que las core web vitals estén dentro de rango (Salvo FCP que ha bajado a 3,2) y una velocidad segun GTmetrix de 2,5 segundos en móvil.
La dichosa hoja de estilo es esta: /style.dev.css
Pertenece al core de DIVI, pero no se por que razón carga está en vez del style.css a secas. ¿Puede ser por el CSS personalizado?
Probaré la misma configuración con otras web, para ver si ha sido suerte o no.
Gracias `por el post. Solo decirte que tengo activada la opcion
«Optimizar la entrega de CSS» y también «Remove Unused CSS is complete!»
en Wp Rocket y a pesar de eso al analizar luego con PageSpeed me sigue diciendo que:
«Reduce el contenido CSS que no se use…… 0,45s»
??? gracias
Hay CSS que, por el modo de cargarse desde un plugin o el tema, no hay manera de optimizarlo así, con un botón. Nada es infalible 🙂
Muchas gracias. Si,…es el CSS de los plugin eso estoy seguro, y entonces ¿ como lo optimizo ? ¿ tienes alguna guía, manual, o link a través del cual pueda optimizar este CSS ? Ya se que en ese caso no será con un click y que tendré que meterme en «faena» no me importa, creo que lo puedo conseguir, solo necesito saber como lo hago. Muchas gracias por tu tiempo (te sigo en los webinar de Site Ground donde tengo mi hosting) gracias de nuevo
Es que depende del plugin, y a veces simplemente por el modo de aplicar los estilos ningún plugin de optimización podrá eliminar ese CSS que no se usa. Por ejemplo si es por Jetpack, dependiendo de qué módulo, se puede eliminar CSS sin uso de módulos que, aunque no se usen, carga por defecto, y he publicado algún truco para desactivar ese CSS. Para cada plugin lo mejor es contactar con el desarrollador y pedirle el modo de desactivar el CSS sin uso de su plugin.
Muchas gracias Fernando, si, te haré caso y contactaré con Crocoblock (suite Jet Engine) y con Elementor que son básicamente el 80% de los plugin de mi web.
Muchas gracias otra vez
Hola, tocayo!
Algún tutorial de Asset Cleanup? Gracias!
Como tal no, pero suelo hacer referencia a cómo se usa en varias guías