¿Supiste lo que acaba de lanzar LagriHost? Sí, como lo estabas esperando, ahora vendemos Web Hosting y Dominios. Conoce más :)


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



Posibles temas similares…
Tema Autor Respuestas Vistas Último mensaje
  Tutorial Versiones de Visual Basic ¿Qué es? ¿Es Visual Basic buen lenguaje para Programar? Kevin Alfonso 2 3,061 20-06-2016, 09:13 PM
Último mensaje: cybersdl
  Tutorial Aporte - Popunder Javascript para cualquier link de tu elección! Kevin Alfonso 1 2,673 19-06-2016, 07:29 PM
Último mensaje: Nomak
  Tutorial Cómo utilizar Javascript para reproducir un archivo Roberto 2 3,130 19-06-2016, 07:22 PM
Último mensaje: Nomak
  Tutorial Cómo utilizar Javascript para actualizar un Título Roberto 0 2,228 05-12-2015, 07:12 PM
Último mensaje: Roberto
  Cargamos los estilos css desde un archivo externo torgar22 0 2,404 23-10-2015, 06:44 PM
Último mensaje: torgar22



Usuarios navegando en este tema:
1 invitado(s)


Forum software by © MyBB Theme © Kevinex & iAndrew 2018