Minificar las hojas de estilo CSS
El otro día nos quedamos hablando del uso de compresión GZIP para reducir el tiempo de carga de las páginas, otro de los aspectos para intentar aumentar la velocidad de nuestro site, consiste en minimizar el uso de recursos a la hora de llamar a archivos que complementan el código de las páginas, es el caso de los archivos CSS.
Nuestro CSS, u hojas de estilo son las páginas de código que se usan en nuestra web para definir la visualización y aspecto que tendran nuestras páginas html. Los estilos CSS se definen en archivos .css que son llamados desde el <head> de las páginas en html, este sería un ejemplo de llamada a un aerchivo ccs desde la cabecera de una página html:
<link rel=”stylesheet” type=”text/css” href=”http://www.midominio.es//style.css”/>
Esta sería una llamada general a un estilo, pero también tenemos que tener en cuenta que si tenemos instalados diferentes plugins, por ejemplo de wordpress, cada plugin tendrá una hoja de estilos definida y por tanto habrá muchas llamadas a estas hojas de estilo desde nuestra página. y por tanto más consumo de recursos por parte del servidor.
Los archivos CSS, son archivos de texto y en muchos casos, para poder hacerlos más legibles, se estructuran demasiado y con muchos espacios en blanco y saltos de linea, lo que hace que ocupen demasiado. Minificar el CSS, consiste en eliminar todos los espacios en blanco que contenga el archivo, hacerlo manualmente es bastante fuerte, con lo cual existen bastantes herramientas que nos puede ayudar a conseguirlo. Aquí tenéis un ejemplo de fragmento de código CSS sin minificar.
y este mismo fragmento de código despues de minificarlo, reduciendo saltos de linea y espacios en blanco:
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block}audio,canvas,video{display:inline;zoom:1}
audio:not([controls]){display:none}
html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}
a:focus{outline:5px auto 0;outline-offset:-2px}
a:hover,a:active{outline:0}
sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}
sup{top:-.5em}
sub{bottom:-.25em}
img{max-width:100%;width:auto \9;height:auto;vertical-align:middle;border:0;-ms-interpolation-mode:bicubic}
#map_canvas img,.google-maps img{max-width:none}
button,input,select,textarea{font-size:100%;vertical-align:middle;margin:0}
button,input{overflow:visible;line-height:normal}
Pues bien, la idea sería coger todos nuestros archivos CSS, y minificarlos de esta manera para que ocupen menos espacio, y por tanto, su carga por parte del servidor sea más rápida. Como os comentaba antes, existen muchas herramientas, yo he encontrado las siguientes:
- CSScompressor, esta consiste en copiar nuestro código y el resultado pegarlo de nuevo en nuestro archivo CSS con un editor de texto.
- CSSoptimiser, esta nos permite subir el archivo desde la url, copiarlo como texto o cargarlo en local.
- CSS Compressor & Minifier, esta tienes muchísimas opciones, tambien consiste en copiar nuestro texto.
- Minifier, se parece mucho a la primera opción.
- Pretty Diffse, esta herramienta también nos permite subir el archivo desde el pc.
- CSS Minifier, esta también tiene la opción de pegar el texto o subir el archivo.
Unificar o combinar las hojas de estilo CSS
Otra optimización que se puede hacer con los archivos CSS, es lo que se llama combinarlos, es decir, en el caso de que tengamos varios archivos CSS distintos, agruparlos en uno sólo o en menos grupos, y reducir las llamadas desde el <head> de las páginas a un número menor de archivos.
Otra cosa que me parece recomendable comentar, es que si nuestro sitio ya está en producción, la minificación de los archivos CSS está bien hacerla una vez que hayamos terminado todos los cambios que pensemos hacer en los mismos, ya que si la hacemos antes, y luego tenemos que meternos a tocar código es mucho más amigable hacerlo con los archivos sin reducir.
Como siempre digo estamos aprendiendo, así que cualquier sugerencia, aportación o correción a este post, será bien recibida.
Y como siempre, si te ha gustado el artículo dale a un megusta, o un tweet o lo que sea, que te lo agradeceré eternamente.
Manual Práctico de Redes Sociales en PDF, con el que podrás comenzar desde el primer día a diseñar tu estrategia en Redes Sociales para la empresa. Con decenas de referencias a obras y herramientas adicionales. Consta de 92 páginas. Este manual está valorado en 6,99 €.
Enviando tu email, confirmas que aceptas recibir en tu correo las actualizaciones del blog según nuestra política de privacidad. Recuerda que una vez envies tu email tendrás que confirmar la suscripción en tu correo.
Introduce tu email:
*Suscríbete ahora a mi blog y te enviaremos un enlace por mail a la descarga del manual.
Puzzle Bobble
Karate Blazers
Puzzle De Bloques
Magical Cat Adventure