Comprimir css – mejora la velocidad de carga de tu web con facilidad

Comprimir css – mejora la velocidad de carga de tu web con facilidad

2 Abril, 20140 Comentarios1


Hola a tod@s!, hacía tiempo que no podía escribir nada debido a la gran carga de trabajo de estas últimas semanas, como sabéis hemos rediseñado toda la web y ello nos ha obligado a no poder atender otras cosas importantes como escribir para vosotr@s. La lección de hoy es comprimir css y sobre este tema os voy a dar algunos trucos/consejos para tener un buen css con el menor peso necesario para que vuestra web cargue lo más rápido posible.

Introducción

Antes de nada os recomiendo la lectura de este artículo para que conozcáis un archivo css u hoja de estilos ya que así será más fácil entender el artículo, ¿qué es un css?. Hoy en día es fundamental en una web disponer de una hoja de estillos o css que dote a nuestra web del estilo/formato. Últimamente se usan frameworks de diseño tales como Foundationo Bootstrap que aumentan considerablemente el peso de nuestros css y hacen que nuestra web responda más lentamente. Para solucionarlo os propongo una solución: comprimir css.

Solución

Lo primero que debemos hacer es eliminar las clases de nuestro css que no usamos ya que cuando hacemos una web a veces perdemos el control de nuestras clases en el css y puede aumentar considerablemente su peso sin necesidad alguna. También esto sucede cuando usamos frameworks, como los anteriormente mencionados, o plugins externos. Una tediosa solución sería utilizando Dust-Me Selectors para Firefox o usando la herramienta para Auditar el código de la web de Google Chrome pero estas dos soluciones sólo nos enumeran las clases que no se usan pero ¿y si tenemos más de 1.000 clases que no se usan?

Para mi esta no es una solución válida ya que tengo miles de clases que no se usan pero buceando por Internet me encontré con esta útil herramienta online para comprimir css llamada Unused css.

Comprimir css - Captura de home de unused css by @muchomasquewebs

Esta herramienta nos puede ayudar muchísimo a reducir el tamaño de nuestro css ya que nos indica las clases que no usamos y nos permite descargar nuestra hoja de estilos optimizada. El único inconveniente es que algunas funciones son de pago pero si nuestro día a día es optimizar páginas web merece la pena gastarse 59 euros al año ya que nos ahorra mucho tiempo y esfuerzo. Gracias a este artículo he podido utilizar la versión de pago sin coste alguno y os aseguro que me ha sido de mucha utilidad.

Para utilizar esta herramienta os recomiendo registraros y una vez logueados podemos añadir la url de la web a optimizar. Hecho eso la herramienta se pone a trabajar y nos manda un email cuando los resultados están disponibles con un enlace a los mismos.

Como apreciareis en la captura de abajo se pueden visualizar los resultados de nuestros css con unos gráficos que indican el porcentaje de uso de estilos en cada css. Además de esta información aparece todo nuestro css escrito en un textarea y debajo un botón para descargarlo. También se pueden marcar/desmarcar clases que se incluirán/excluirán del css que descarguemos.
Mucho cuidado:Os aconsejo que reviséis bien todos los estilos antes de descargarlo ya que algunas funciones javascript o plugins pueden usar ciertas clases que la herramienta no detecta.

Comprimir css - Captura de resultado de unused css by @muchomasquewebs

A mi esta herramienta me ha sido muy útil ya que he reducido el tamaño de mi css un 60% lo que ha supuesto una reducción de 380KB a 152KB.

Os he enseñado mi primer truco para comprimir css pero a continuación os muestro otro que también reduce considerablemente nuestro css.


El segundo truco y no menos importante es la compresión gzip de nuestro css, para ello necesitamos instalar gzip en nuestro Pc, podéis descargar gzipseleccionando vuestro sistema operativo. Una vez instalado debéis ejecutarlo de la siguiente forma:

gzip ruta-completa-del-archivo.css

Una vez ejecutado el comando puedo apreciar como se ha reducido mi css de 152KB a 23KB. ¿Mágico verdad?, pero aún no hemos terminado ya que falta decirle a nuestro servidor web Apache, utilizando un archivo .htaccess, que servimos nuestro css mediante gzip y para ello debemos añadir lo siguiente:

RewriteRule .css.gz$ - [T=text/css,E=no-gzip:1]
AddEncoding x-gzip .cssz
AddType text/css .cssz
RewriteEngine On
RewriteRule ^(.+).css$ /$1 [R=301,L]

Recomendación importante: Antes de realizar estos cambios en vuestro .htaccess realizad una copia de seguridad ya que si algo va mal la web deja de funcionar.

Importante: Tenéis que renombrar vuestros archivos css a cssz y si los llamáis css desde vuestra web dicha hoja de estilos no aparecerá ya que el servidor sólo servirá archivos cssz.


Y esto es todo amig@s!, con dos sencillas acciones he conseguido reducir mi css de 380KB a 23KB, creo que eso de comprimir css puede servir de algo, ¿no? Si tenéis un desarrollo web a medida os recomiendo que sigáis estos consejos ya que os pueden ayudar mucho a mejorar la velocidad de vuestra web.

Si conocéis algún truco más para comprimir css y queréis compartirlo con nosotros no dudéis en rellenar nuestro formulario de contacto. Estaremos encantados de atender vuestras dudas y comentarios y os invitamos a que compartáis esta información con vuestros amig@s en las redes sociales.

Soy Ing. de Telecomunicaciones, diseñador/programador desde hace 8 años, los últimos 3 centrado en el desarrollo de Apps .

Además de muchomasquewebs.com mantengo bepremium.es. En lo personal un apasionado del Windsurf y surf , en general todo lo que tenga que ver con el mar, como afición friky que todo ingeniero debe tener, me encanta el aeromodelismo.

Si queréis contactar conmigo directamente podéis hacerlo a jose.revenga@muchomasquewebs.com

Comprimir css para mejorar la velocidad de tu pagina web
Comprimir css para mejorar la velocidad de tu pagina web
La velocidad de carga de una pagina web es muy importante para el SEO y las conversiones por lo que te enseñamos a comprimir el css de tu web y mejorar su carga



Soy Ing. de Telecomunicaciones, diseñador/programador desde hace 8 años, los últimos 3 centrado en el desarrollo de Apps . Además de muchomasquewebs.com mantengo bepremium.es. En lo personal un apasionado del Windsurf y surf , en general todo lo que tenga que ver con el mar, como afición friky que todo ingeniero debe tener, me encanta el aeromodelismo. Si queréis contactar conmigo directamente podéis hacerlo a jose.revenga@muchomasquewebs.com