Parte II - Optimizando CSS
En el post anterior de ésta serie hablé sobre la optimización de imágenes.
Otro de los grandes problemas al momento de la optimización de la velocidad de una página web es la carga de los CSS.
En las páginas web que hacemos muchas veces existe más de un archivo CSS y muchas veces no es escrito por nosotros, puede que sea una librería o parte de un framework.
El problema de tener muchos archivos CSS no radica tanto en su tamaño si no en que cada archivo implica una solicitud al servidor donde está alojado. A veces tarda más la solicitud que la transferencia del archivo y eso está muy mal.
Lo primero que podemos hacer es comprimir los archivos CSS. Es posible reducir su tamaño ya que la sintaxis de CSS, permite, por medio de puntos y comas, separar diferentes reglas lo que algunos programas aprovechan para eliminar el espacio entre el punto y coma y la siguiente regla. También se eliminan las lineas en blanco, se comprimen o eliminan en ocasiones los comentarios.
Nota: Siempre tiene que guardarse el archivo original por si queremos hacer modificaciones, el que se tiene que usar en la página es el comprimido.
Para esto podemos usar varias herramientas de internet como por ejemplo Minificador de JS y CSS pero para comprimir mis archivos yo, uso SASS.
En la consola coloco el nombre de mi archivo con extensión .scss y al final coloco -t compressed, que le indica que quiero el archivo comprimido, el archivo resultante tendrá el mismo nombre pero con la extensión .css, listo para usar.
Ejemplo
sass -w main.scss -t compressedProtip: -w sirve para que cada que guardemos el archivo original, SASS lo detectará y actualizará automáticamente el archivo CSS.
También podemos poner varios CSS dentro de un mismo archivo, lo que disminuiría la cantidad de solicitudes al servidor.
Con SASS lo que hago es importar los demás archivos o librerías en el documento principal, así, al principio de mi archivo final, al que siempre nombro main.scss, están incluídos los demás archivos, mi página realmente solo solicita un archivo CSS donde está todo incluído.
Las primeras líneas reales (lo que no es un comentario) de mi archivo main.scss son:
@import 'normalize';
@import 'odyssey';Y solamente un par de clases después están:
@import 'header';
@import 'footer';Esto es porque el header y footer usan las clases y variables que están declaradas antes que sean importados. Esto es muy importante, no todos los imports pueden ir al principio del archivo.
Cuando hacemos esto tenemos que cuidar que tampoco desperdiciemos mucho. Si tenemos un CSS de 84KB y la mayoría de las páginas solo ocupan 12KB entonces tenemos otro problema.
También se pueden tener CSS compilados diferente para secciones diferentes de una página y de ésta forma aprovechar al máximo el tamaño y compresión de cada archivo sin incrementar las solicitudes al servidor.
Con ésto concluyo la segunda parte de la serie, en siguientes capítulos hablaré de como y que archivos pueden ser guardados en caché, CDNs, fuentes web, etc.
27/Nov/2018 - Claudia W. sugiere que se use Minificador de JS y CSS en lugar de CSS Compressor
Publicado por Julio Montaño el 21/Oct/2014.