¿Sabes cuál es el peso neto de CSS en tu página web?

Publicado en Optimización web / WPO hace 7 meses. Leído 461 veces.

imagen destacada

Ya vimos que unifiicar y minimizar archivos CSS y JS puede ser peligroso porque, si no se sabe lo que se está haciendo, puede traernos consecuencias desagradables como que algunas funcionalidades dejen de estar activas o que nuestra web termine pesando más y, por tanto, sea más lenta. La causa de esto último, es decir, de que nuestra web pese más y se ralentice, viene dada por agrupar código y cargarlo en partes de nuestro sitio en los que no es necesario.

Lo mejor, por tanto, si quieres mejorar el WPO de tu web es hacer una carga selectiva de los archivos CSS/JS. Dejo claro que no digo que no se deban de unificar/minimizar CSS/JS sólo que te recomiendo que lo hagas una vez que sepas cuándo conviene, sobre qué archivos hacerlo y dónde. Sólo así, consegirás de verdad una web rápida.

Ahora que llevas un poco de entrada leída, y hay confianza, te tengo que confesar que tengo el armario de mi cuarto todo lleno de ropa, sin embargo, en mi día a día, casi siempre tiendo a ponerme las mismas prendas. Las demás las tengo para momento especiales o esperando a que algún día adelgace o de otra temporada. Los archivos CSS de una página web es como el armario de mi dormitorio. Están llenos de selectores de estilos pero todos estos selectores no siempre se usan. Algunos sí que están para su uso cotidiano, pero otros están para momentos, o páginas, especiales, otros por si acaso algún día hicieran falta y hay otros que el desarrollador usó en el pasado pero ya no( y se le olvidó borrarlos o los dejó por dejadez ). Todo ese conjunto de selectores de estilos que forman parte de mi armario, digo de tu web, sin usar es un peso tremendo. Hay que quitarlos.

El objetivo de la entrada de hoy es ver el uso que damos a nuestros CSS, para poder separar la paja del grano. ¿ Cómo hacerlo para así aumentar la velocidad de nuestra web ?. Muy fácil, con:

  • Unused-css : Este sitio web te permitirá saber el porcentaje de selectores que estás usando de cada archivo CSS analizando los HTML descargado de cada página. También te permite, previo pago, bajarte los archivos CSS con sólo los selectores que se usan en tu web.
  • Mincss. Script en Python que te permite lo mismo que unused-css pero usándolo desde tu propio equipo. Necesitarás algunos conocimientos mínimos técnicos para ponerlo en marcha.
  • Helium-css: Pequeña librería Javascript que añadiéndolo a tu página( en la copia que tengas en tu propio equipo y no a la que acceden tus visitantes ), te mostrará un informe de uso de tus archivos CSS. También lo puedes usar como bookmarklet WPO, sin necesidad de instalación ni nada, una vez obtenido el código.
  • Purifycss: Este es el más potente, ya que no analiza el HTML descargado de una página web, sino que trabaja sobre los códigos fuentes en servidor de los archivos JS, HTML y PHP. Extrayendo de ellos sólo el CSS necesario. También, por tener como requisito su ejecución en un alojamiento, no funcionará en alojamientos compartidos.

Una vez que ya sepamos el CSS neto por cada página, podremos unificarlos si en todas las páginas de nuestro sitio es el mismo. También deberemos añadir selectivamente los CSS no comunes, en los sitios especificos que son necesarios. Finalmente, y aunque obvio, debemos descartar los selectores no usados en ningún sitio. En cualquier caso, estas siguen siendo reglas generales. Lo ideal sería hacer una auditoría WPO más exhaustiva tras la cual se creen las mejores estrategias para hacer que nuestra web sea de las más rápidas.


0 comentarios

Deja un comentario

Puedes usar Markdown para formatear tu comentario.

Este sitio utiliza cookies propias y de terceros para mejorar tu experiencia con el sitio web. Al continuar con la navegación consideramos que acepta su uso.