Calificación:
  • 2 voto(s) - 5 Media
  • 1
  • 2
  • 3
  • 4
  • 5
¿Cómo limpiar estilos no usados de tu CSS para liberar espacio?
#1
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.

[Imagen: limpiar-codigo-CSS.png]

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:

[Imagen: dust-me-monetizados.png]

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á:

[Imagen: estilos-no-usados-css.png]

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.

Como visto en: Venezuelawarez
No me dejan poner mis web Triste
WWW
#2
Buena tecnica, te doy +1 ya que la usare en mi futuro sitio web
WWW
#3
(07-10-2016, 10:32 PM)FullPirata escribió: Buena tecnica, te doy +1 ya que la usare en mi futuro sitio web

Gracias, yo lo estoy usando, por eso lo comparto Sonrisa
No me dejan poner mis web Triste
WWW
#4
Excelente Info, muchas gracias en verdad, una herramienta totalmente indispensable
#5
Pues es muy útil y seguramente la use en breve, sólo por ver si mi CSS necesita alguna limpia.
Que oye, aunque apenas se borren unas líneas y eso no sea nada, cualquier milisegundo cuenta!
#6
Muchas gracias, a veces elimina uno estilos que no causan efecto aparentemente y luego vienen problemas,
mi IDE no le he encontrado esa función o ni lo hace, en verdad me será de mucha ayuda para mis plantillas.
#7
Excelente aporte estoy ayuda mucho ademas de que te ahorra tiempo yo lo hacia como quien dice artesanalmente lo probare en mis webs
#8
lo iremos revisando. Siempre he pecado en dejar los CSS hechos una mierda. Gracias
#9
Tienes toda la razón amigo, cuando por alguna razón tenemos que hacer limpieza de la hoja de estilos a mano, es para volverse locos, pero con tu gran aporte eso quedó en el pasado, muchas gracias por compartir esta valiosa herramienta para todo desarrollador web. Saludos.
WWW
#10
Huuuu que genio!!!!! Me viene como anillo al dedo!
Estoy en un proyecto con un amigo y tenía que limpiar el CSS (la mandé a el porque no soy tanto del diseño), esto lo va a alegrar bastante supongo jaja
Se buscan colaboradores para comenzar con un foro de programación en general.

[url]www.programarg.com[/url]
WWW


Posibles temas similares...
Tema Autor Respuestas Vistas Último mensaje
  Limpiar estilos no usados de tu CSS para liberar espacio Jvh_22 9 364 01-08-2017, 04:54 AM
Último mensaje: garcon



Usuarios navegando en este tema: 1 invitado(s)