¿Te imaginas tener una web que genere ingresos mes a mes?

Quiero ayudarte a que lo consigas, tengas los conocimientos que tengas. Para ello solo tienes que pulsar el siguiente botón y ahí empezará nuestro camino para hacerlo posible.

¿Cómo limpiar estilos no usados de tu CSS para liberar espacio?

Quiero compartir con vosotros una técnica realmente útil para tener vuestro blog o web como los chorros del oro.

Personalmente me parece interesante ya que he estado tiempo buscando cómo podría hacer esto y al final he visto una solución que puede resultar bastante efectiva.

Voy a contar de qué se trata y cómo usarlo.

Cuando tienes una página, es muy posible que con el paso del tiempo haya sufrido muchas modificaciones. En un blog, esto podría causar que se fueran acumulando residuos, como los que se quedan en tu blog al eliminar los plugins, o que cada vez hayas ido añadiendo más estilos en tu css haciendo que este vaya creciendo a lo largo del tiempo.

Sabemos que uno de los factores importantes tanto para el SEO, como para una buena accesibilidad de tu página, es el tiempo de carga de la misma.

Un tiempo elevado de carga puede hacer que tus lectores se acaben aburriendo y se vayan de ella antes de que termine de visualizarse completamente, o podría hacer también que lo mismo le pase a Google y se vea afectado tu SEO perdiendo posiciones en los resultados del buscador.

Para evitar que vayamos perdiendo velocidad por culpa de elementos que ya no necesitamos vamos a intentar limpiar los mismos de vez en cuando.

Si ya os hablé de eliminar los residuos de los plugins que vayamos eliminando, en el caso de este artículo me voy a centrar en el fichero CSS de vuestro tema de WordPress o de cualquiera de vuestras webs.

Limpiar código CSS que ya no es usado de tu hoja de estilos.

Según vas añadiendo elementos en tu página, es posible que vayas creando nuevos estilos para los mismos. Cuando cambies de nuevo esa página, seguramente elimines algunos de esos elementos, pero rara vez te acordarás de limpiar los estilos que habías creado para los mismos.

Hacer limpia en el fichero CSS de tu página es un verdadero suplicio porque es complicado saber si una etiqueta determinada es usada o no en tu blog.

limpiar codigo CSS

Una solución sería buscar cada uno de los elementos de tu hoja de estilos en todo el código de tu página web, lo que podría hacer que te volvieras loco, o que perdieras bastante tiempo.

Lo que os voy a mostrar aquí es una herramienta que hará precisamente eso, hacer un escaner de toda tu página y estudiar lo siguiente:

  • Busca todas las hojas de estilos que vea en tu página.
  • Busca cada propiedad de esa hoja de estilos dentro del código de la página.

De esa forma obtendremos la valiosa información de los atributos de estilos que no se están usando en ninguna parte de tu página de entre los que aparecen en las distintas hojas de estilo encontradas.

Creo que es sencillo, pero vamos a ver el ejemplo para que quede más claro, y a hablar de cómo usar la aplicación.

Me estoy refiriendo a un complemente que encontraremos en Firefox que se llama Dust-Me Selectors.

¿Cómo usar Dust-Me Selectors para eliminar los estilos no usados del CSS?

Lo primero que tendremos que hacer será instalar el complemento. No creo que tengáis ningún problema para ello pero si fuera así, comentadme.

Una vez que lo tienes instalado, y hayas reiniciado tu Firefox, verás un nuevo icono en la barra de complementos.

Pulsando en el icono de Dust-Me tendrás varias opciones pero la que nos interesa es la de “Spider Sitemap”.

Una vez pulsemos en ella, tendremos que poner la página raiz desde la que quieres que empiece el scaneo, como podemos ver en la siguiente imagen:

dust-me monetizados

Lo que hará una vez que demos a start, será ir recorriendo las páginas en busca de ficheros css y revisando los estilos usados en cada página.

Una vez termine verás una lista de los elementos no usados de cada uno de los ficheros .css. Lo que tarde podrá depender del número de páginas que tenga que recorrer, pero bueno, lo dejas un rato trabajando y ya está, no hay problema.

Esto sería un ejemplo de los resultados que nos devolverá:

estilos no usados css

He usado como ejemplo la página de Byemovil porque ya la tenía generada.

Podemos ver que ha detectado una hoja de estilos (entre otras cuantas que se ven al hacer scroll) y dentro de esa hoja de estilos ha encontrado 47 selectores que no se usan en ninguna de las páginas del código.

Lo bueno es que puedes ir a ese archivo y te indica la línea donde se encuentra. En función de qué selector sea podrás decidir tú mismo si eliminarlo o no. Será fácil reconocer si este pertenece a algún elemento que ya no uses y puedes borrar, o a otra cosa que tengas que dejarla por si acaso (como el h4 en las entradas en mi caso).

Espero que os parezca interesante, yo me volví loco algunas veces para realizar esta tarea hasta que descubrí esta utilidad.

A parte de los blogs, es especialmente interesante cuando estás desarrollando una web, ya que ahí hay mucho más baile de CSS. Sobre todo si la has programado desde cero.

¿Qué os parece? ¿Conocíais la herramienta, o qué usáis para esta tarea concreta?

¿Cómo limpiar estilos no usados de tu CSS para liberar espacio?
5 (100%) 1 voto
Javier Elices

Javier Elices

Después de trabajar en importantes Multinacionales como Havas Media o Telefónica, tanto en España como en otros países, decidí dar un giro a mi vida y lanzarme a lo que realmente me apasiona, que es emprender y lanzar proyectos online que generen beneficios. Todo el camino que recorro para ello, te lo cuento en el blog de Monetizados donde aprenderás cómo conseguir ingresos con tus proyectos ayudándote en los consejos SEO y las herramientas que te presentaré.

Esta entrada tiene 28 comentarios

  1. Me viene que ni pintada tu entrada de hoy, parece que me leíste el pensamiento.

    Saludos y gracias por el aporte!

    1. Gracias a ti Javi por ser tan rápido en pasarte y comentar!

      Me alegro de que te sirva!

  2. Buen truco como siempre 🙂 Lo acabo de poner y me marca ¡1018 sectores sin usar! A saber cuáles hay que quitar y cuáles no .

    Gracias Javien 🙂

    1. Hola Tino!

      Lo has puesto para Dinerobits?? Lo acabo de probar yo mismo con tu página y me salen 19 selectores sin usar en la hoja de estilos del tema de tu blog.

      Es muy raro que te salgan tantos! Si no consigues que te salgan menos, o algo coherente, dímelo y vemos que puede estar saliendo mal. También puedo exportar los resultados que me dan a mi de tu página.

      Ten en cuenta que muchas veces muestra también los resultados de otras hojas de estilo como las que usan los plugins… Hay algunos que están realmente mal hechos y tienen muchos selectores sin usar en el CSS. Es posible que estés viendo de esos CSS.

      Ya me dirás!

      Un saludo y gracias por comentar!! 😉

  3. Javi, de verdad, mira a ver si hay alguna casa en alquiler cerca de la tuya porque me mudo a ver si se me pega argo, La clavas siempre!!! 🙂

    Yo siempre he tenido esa sensación de “estoy sucio” con el blog, porque edito y edito y luego ya no se lo que no uso.

    Gracias Gracias Gracias!

    1. jajajajaj, nada, cambiémoslo al contrario que me gusta más la idea de vivir cerca de la costa! 😉

      La verdad es que a mi me pasa lo mismo. Al igual que cuando investigué el tema de los plugins porque veía que crecía y crecía la base de datos de mi blog y resulta que era porque no se limpiaban bien las tablas de los plugins que limpiaba.

      Lo mismo con los estilos css…

      Ya me dirás qué te parecen los resultados en caso de que decidas hacer una prueba.

      Gracias como siempre por tu comentario Victor, es siempre un alegrón ver que te has pasado por aquí :).

      Saludos crack!

      1. Además, te voy a dedicar un post con otras formas de monetización el próximo lunes 4 de noviembre que ya está programado a las 8:00…

        1. Oleee, eso ya sí que se saldrá y no sé si habrá forma existente de agradecértelo! 😉

          Gracias crack!

  4. ya lo estoy ejecutando! Porque claro como en mi caso de una tienda online, tiene miles de lineas de estilos y varios archivos. Me pregunto si al limpiar los fichero, la velocidad de carga de la web mejorará?
    Por cierto, la imagen de post es genial!

    1. Hola de nuevo Elena! 🙂

      Pues en verdad te aportará dos cosas:

      – Por un lado el limpiar el código, que si se ha ido acumulando a lo largo de mucho tiempo sí que puede ser un ahorro considerable de espacio en disco y tiempo de carga, lo que te traería beneficios.
      – Por otro lado, también muy importante, es que también te será más fácil modificar tu página ya que no tendrás “basura” que te entorpezca y te será más fácil buscar un determinado estilo para cambiarlo.

      Espero que te haya funcionado la prueba. Ya nos contarás si lo has conseguido y cómo andaba tu hoja de estilos de “sucia” antes de usarlo!

      Saludos y gracias de nuevo por comentar!

    2. Aaaaah, y gracias por lo de la imagen! jeejje. La verdad es que quedó chula 🙂

  5. Gracias por la publicación, 😀

  6. hmmm… a mi me parece menos genial de lo que parece, porque lo que hace es unicamente decirte que selectores no se están usando en el archivo de tú web que le hayas puesto en la url. Por ejemplo.

    Si tienes dos archivos en tu web llamados “casa.com/yo” y “casa.com/nosotros”, cuando uses esta extensión tienes que poner una url, la de “casa.com/yo” por ejemplo, y solo te marcará los selectores que no se usen en esa página… pero a lo mejor si se usan en la otra, y por lo tanto si borras esos estilos puedes desajustar la otra página. Con dos archivos no pasa nada, pero si son 10… tela marinera!..

    En definitiva, la idea de estos programas es buena, pero aún tienen que mejorar esas cosas, porque si no no son muy útiles. 🙂

  7. Hola Zeromm,
    Si, estoy de acuerdo, tienes toda la razón en eso. En una web con una estructura de varias páginas distintas, y sobre todo con un diseño diferente puede ser bastante engorroso.
    En verdad escribí esto pensando en blogs. Piensa que un blog de WordPress no tiene muchas variantes en sus páginas: home, post, archivos, busqueda. No tiene muchas más páginas.
    Además, la estructura de ellas es muy similar (a no ser que tengas una home muy distinta). En ese caso, no es tan costoso ya que solo tendrás que revisar dos o tres páginas para saber si el cambio está afectando en otros sitios.
    Para eso puedes usar la extensión de Firebug (en cualquier navegador) y así verás en tiempo real si un cambio en el CSS afecta a otra página de tu web.
    Al final, puede ayudar en ciertos casos, así que puede llegar a ser útil 🙂
    Un saludo y muchas gracias por compartir tu opinion!! (Aunque haya tardado en llegar mi respuesta 🙁 jeje).

  8. Saludos,

    El problema es que la limpieza también incluye los estilos usados en los archivos JS, que no aparecen directamente en el HTML.

    ¿Alguna idea de cómo resolver esto?

    Gracias.

    1. Hola Jorge,
      En verdad esto está pensado, o es la utilidad que le he visto así de primeras, para blogs en WordPress donde no habrá código css en los js (a priori).
      Si tu web está en otra plataforma, o sí que tienes css en los js por alguna razón, me da que esto no serviría.
      No sé qué pasaría si en la URL le pasas la dirección donde esté el js. No sé si en ese caso te saldrá algo o te dirá qué estilos se están usando.
      Ya nos contarás si haces la prueba.
      Un saludo!

  9. Fantástico artículo. Son un verdadero suplicio estas limpiezas. Saludos.

  10. Hay un problema con este pluggin, no se puede revisar otras paginas dentro de la misma web, no reconoce los estilos que no se encuentren en un archivo css externo

    1. Hola Juanse,

      Sí, tiene ese tipo de limitaciones. Digamos que considera los estilos de la página actual y que estén en el css.

      En caso de un blog no es complicado porque todos los estilos suelen estar en el css, y luego hay 3 o 4 páginas distintas, no más… por eso podría aplicar bien en ese caso.

      Para otro tipo de webs a lo mejor es más difícil, aunque siempre algo se puede ir limpiando.

      Un saludo y gracias por comentar.

  11. Maravilloso artículo. una explicación muy bien explicada de como realizar este tipo de limpiezas. Muchas gracias un cordial saludo.

  12. hola gracias por el post, pero analice una web que tiene un theme clon muy desorganizado y con montenes de lineas que seguro sobran, el plugin que recomiendas encontró 7382 lineas de css que se pueden borrar, cabe resaltar que este archivo .css tiene 26409 lineas, pero empece a borrar y se empezó a cargar cosas importantes como el css del login la web no es un wordpress, es una script php echo en framework codeigniter.

    me puedes recomendar algo para solucionar esto? ya que yo no programe esta web llego y todo esta hecho un lio pero tiene funciones muy importantes y validaciones y diseño que me parece perfecto pero esta muy mal optimizada y en eso estoy me puedes recomendar algo gracias

  13. amigo, saca los archivos de .js y sube el index a tu ftp y luego usar la herramienta
    cuando ya alla terminando hay si unes tus .js con las .css

  14. Gracias por compartir con este blog estos trucos que nos servirán de ayuda en un futuro.
    Seguro que me sirve en algún momento

  15. Hola Javier veo que la herramienta actualmente ya no esta activa (año 2018) tendremos alguna alternativa similar? te agradecería enviar tu sugerencia a [email protected]. Grandes Saludos!

Deja un comentario

  Acepto la política de privacidad

Cerrar