Aumentando la compresión GZIP de CSS

En este artículo vamos a ver como podemos aumentar ligeramente la compresión GZIP de nuestros archivos CSS con el plugin postCSS-sorting.

Un tweet de Hugo Giraudel me ponía tras la pista de esta técnica desconocida para mi.

Friendly reminder that CSS declaration sorting (no matter how) helps gzip perform better.

— Hugo Giraudel (@HugoGiraudel) February 22, 2016

Así que aprovechando que utilizo postCSS-sorting para ordenar mis CSS he decidido ponerla a prueba.

Antes de continuar esta técnica no es exclusiva de **postCSS**, tenemos otros métodos para ordenar nuestros archivos **CSS**.

Todo esto no sirve de nada si la compresión GZIP no esta activada en el servidor donde alojamos nuestra web. En este enlace puedes comprobar si esta activada en tu servidor.

GZIP es un compresor genérico que se puede aplicar a cualquier flujo de bytes. Lo que hace es recordar cierto contenido visto anteriormente para después buscar y reemplazar fragmentos de datos duplicados de forma eficaz. Optimizar la codificación y el tamaño de transferencia de los recursos basados en texto

Vamos a instalar postcss-sorting a través de NPM.

npm i postcss-sorting --save-dev

Ahora vamos a añadirlo a nuestra tarea de postCSS en Gulp.

gulp.task('css', function() {
    var processors = [
        sorting({
            "sort-order": "yandex"
        })
    ];
    return gulp.src('./src/css/styles.css')
    .pipe(sourcemaps.init())
        .pipe(postcss(processors))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('./css'));
});

Este plugin trae una ordenación por defecto que se llama default. También tenemos a nuestra disposición los siguientes métodos para ordenar las propiedades, los métodos son los siguientes csscomb, yandex y zen. Para consultar en detalle como ordenada cada una de estas opciones las propiedades de nuestros CSS podéis consultarlo en este enlace.

Para este artículo he utilizado un CSS con un tamaño descomunal y fuera de toda lógica alguna como es el que proporciona el por desgracia conocido como bootstrap.

Y a continuación los resultados.

CSS sin ordenar: 19.690 bytes

CSS ordenado con csscomb: 19.429 bytes

CSS ordenado con yandex: 19.427 bytes

CSS ordenado con zen: 19.470 bytes

Así que simplemente por ordenar nuestros archivos con el método de Yandex hemos reducido un 1.34%(263 bytes) el archivo de CSS.

He de decir que he hecho otras pruebas con diferentes CSS y el método de CSSCOMB daba mejor resultado, y como podéis ver en el caso de bootstrap solamente se diferencia en 2 bytes.

El código como siempre esta disponible en GitHub