Calificación:
  • 0 voto(s) - 0 Media
  • 1
  • 2
  • 3
  • 4
  • 5
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 cer
#2
No ocupa tanto pero bueno, si eliminas algo por equibocacion puede generar error en el css de tu pagina.
WWW
#3
(18-07-2017, 04:56 AM)DaveNPlay escribió: No ocupa tanto pero bueno, si eliminas algo por equibocacion puede generar error en el css de tu pagina.

Pero esto se hace con control , no se hace así sin más
#4
Me parece genial que se pula bien los códigos. La semántica sirve para algo, ademas de dejarlo limpio, yo añadiria que tendriamos que quitar los comentarios del código.
Aceleramos tiempos y un trabajo bien hecho siempre estará bien hecho.
#5
(18-07-2017, 10:58 AM)Lerans escribió: Me parece genial que se pula bien los códigos. La semántica sirve para algo, ademas de dejarlo limpio, yo añadiria que tendriamos que quitar los comentarios del código.
Aceleramos tiempos y un trabajo bien hecho siempre estará bien hecho.


Yo lo he usado en mi sitio web y ahora va un poco mas rapida
#6
lo bueno de pulir los codigos te ayuda matener organisada la pagina y a ti a la hor que rerer modificar algo y no saber donde sta por el desorden que tiene s con tu codigo
[Imagen: Nexo_Firma.gif]
WWW
#7
es una excelente herramienta pero que tal cuando usas algun tipo de framework, llamece bootstrap o foundation, no es riesgoso?, una en el momento no sea que vuekles algo y segunda si despues quieres agregar funcionalidades.
#8
normalmente suelo revisar los css de vez en cuando para ver si hay algo que no deberia estar, es algo trabajoso.
#9
(31-07-2017, 06:39 AM)gassip escribió: es una excelente herramienta pero que tal cuando usas algun tipo de framework, llamece bootstrap o foundation, no es riesgoso?, una en el momento no sea que vuekles algo y segunda si despues quieres agregar funcionalidades.


En absoluto, no es riesgoso
#10
Es muy útil ya que después de hacer modificaciones en ocasiones queda código obsoleto el cual debe ser eliminado para optimizar nuestros sitios, excelente aporte, saludos.


Posibles temas similares...
Tema Autor Respuestas Vistas Último mensaje
  ¿Cómo limpiar estilos no usados de tu CSS para liberar espacio? CarlosAlberto 20 1,533 03-12-2016, 05:03 PM
Último mensaje: Duilmer20



Usuarios navegando en este tema: 1 invitado(s)