Gzip versus minify

El otro día tuve una discusión algo animada sobre cómo minimizar Javascript y CSS frente a alguien que prefiere usar Gzip.

Llamaré a esta persona X.

X dijo que Gzip ya minimiza el código, ya que comprime tus archivos.

Estoy en desacuerdo. Zip es un método sin pérdidas para reducir el tamaño del archivo. Sin pérdida significa que el original debe restaurarse perfectamente, lo que significa que la información debe almacenarse para poder restaurar los espacios, los caracteres innecesarios, el código comentado y todo lo demás. Eso ocupa más espacio, ya que se debe comprimir más.

No tengo ningún método de prueba, pero creo que el Gzip de este código:

.a1 {
    background-color:#FFFFFF;
    padding: 40px 40px 40px 40px;
}

Seguirá siendo más grande que el Gzip de este código:

.a1{body:background-color:#FFF;padding:40px}

¿Hay alguien que pueda probar que esto está bien o mal?
Y por favor no vengas diciendo "Está bien porque eso es lo que siempre he usado".

Estoy pidiendo pruebas científicas aquí.

Muy simple de probar. Tomé tu js, los puse en diferentes archivos y ejecuté gzip -9 en ellos. Aquí está el resultado. Esto se hizo en una máquina WinXP que ejecuta Cygwin y gzip 1.3.12.

-rwx------  1 xxxxxxxx mkgroup-l-d     88 Apr 30 09:17 expanded.js.gz

-rwx------  1 xxxxxxxx mkgroup-l-d     81 Apr 30 09:18 minified.js.gz

Aquí hay una prueba más con un ejemplo de JS del mundo real. El archivo de origen es "common.js". El tamaño del archivo original es 73134 bytes. Minificado, llegó a 26232 bytes.

Archivo original:

-rwxrwxrwx 1 xxxxxxxx mkgroup-l-d 73134 Apr 13 11:41 common.js

Archivo minificado:

-rwxr-xr-x 1 xxxxxxxx mkgroup-l-d 26232 Apr 30 10:39 common-min.js

Archivo original comprimido con la opción -9 (misma versión que la anterior):

-rwxrwxrwx 1 xxxxxxxx mkgroup-l-d 12402 Apr 13 11:41 common.js.gz

Archivo minimizado comprimido con la opción -9 (misma versión que la anterior):

-rwxr-xr-x 1 xxxxxxxx mkgroup-l-d  5608 Apr 30 10:39 common-min.js.gz

Como puede ver, hay una diferencia definitiva entre los diversos métodos. La mejor opción es minificarlos y comprimirlos.

Aquí están los resultados de una prueba que hice hace un tiempo, usando un archivo CSS "de la vida real" de mi sitio web. CSS Optimiser se utiliza para la minificación. La aplicación estándar de archivo de Linux que viene con Ubuntu se usó para Gzipping.

Original: 28,781 bytes
Minificado: 22,242 bytes
Comprimido: 6,969 bytes
Min + Gzip: 5,990 bytes

Mi opinión personal es ir a Gzipping primero, ya que eso obviamente hace la mayor diferencia. En cuanto a la minificación, depende de cómo trabajes. Tendría que conservar el archivo CSS original para realizar ediciones más adelante. Si no te molesta minificarlo después de cada cambio, entonces hazlo.

(Nota: existen otras soluciones, como ejecutarlo a través de un minificador "a pedido" cuando sirve el archivo y almacenarlo en caché en el sistema de archivos).

Tenga cuidado al probar esto: esos dos fragmentos de CSS son trivialmente pequeños, por lo que no se benefician de la compresión GZIP: la adición del pequeño encabezado y pie de página de GZIP (aproximadamente 20 bytes de sobrecarga) solo perderá las ganancias obtenidas. En realidad, no tendría un archivo CSS tan pequeño y estaría preocupado por comprimirlo.

minify + gzip comprime más que solo gzip

La respuesta a la pregunta original es, sí, minify + gzip obtendrá una cantidad significativa más de compresión que solo gzip. Esto es cierto para cualquier ejemplo no trivial (es decir, cualquier código JS o CSS útil que tenga más de unos pocos cientos de bytes).

Para obtener ejemplos de esto en efecto, tome el código fuente de Jquery que está disponible minimizado y sin comprimir, comprímalos con gzip y eche un vistazo.

Vale la pena señalar que Javascript se beneficia mucho más de la minificación que CSS bien optimizado, pero todavía hay un beneficio.

Razonamiento:

La compresión GZIP no tiene pérdidas. Esto significa que tiene que almacenar todo el texto, incluido el espacio en blanco exacto, comentarios, nombres largos de variables, etc., para que puedan reproducirse perfectamente más adelante. Por otro lado, la minificación es con pérdida. Si minimiza su código, está eliminando gran parte de esta información de su código, dejando menos que GZIP necesita preservar.

• La minificación descarta espacios en blanco innecesariamente, dejando espacios solo donde sea necesario por razones sintácticas.
• Minificación elimina comentarios.
• La minificación de código puede reemplazar los nombres de los identificadores con nombres más cortos donde no habría efectos secundarios.
• La minificación de código puede hacer 'optimizaciones de compilador' triviales para el código que solo son posibles analizando realmente el código
• La minificación CSS puede eliminar reglas redundantes o combinar reglas que tienen el mismo selector.

Tienes razón.

No es lo mismo minificar que gzipping (se llamarían lo mismo si ese fuera el caso). Por ejemplo, no es lo mismo comprimir esto:

var myIncrediblyLongNameForThisVariableThatDoesNothingButTakeUpSpace = null;

Que minificar para terminar con algo como:

var a = null;

Por supuesto, yo diría que el mejor enfoque en la mayoría de los casos es minificar PRIMERO y luego Gzip, que solo minificar o gzipping, aunque dependiendo del código a veces solo minificar o gzippear le dará mejores resultados que hacer ambas cosas.

Hay un umbral en el que la codificación gzip es ventajosa. La regla general es: cuanto más grande sea el archivo, mejor será la compresión y gzip ganará fácilmente. Por supuesto, puedes minificar primero y luego gzip después.

Pero si estamos hablando de gzip vs minify en un pequeño texto de no más de 100bytes de longitud, una comparación "objetiva" no es confiable, incluso no tiene sentido, a menos que salgamos con un texto de referencia para establecer un medio estándar de evaluación comparativa, como un tipo Lorem Ipsum pero escrito en Javascript o CSS.

Entonces, permítanme proponer comparar las últimas versiones de jQuery y MooTools (las versiones sin comprimir) utilizando mi código Fat-Free Minify (PHP) (simplemente eliminando espacios en blanco y comentarios, sin acortamiento de variables, sin codificación baseX)

Aquí están los resultados de minify vs gzip (con compresión conservadora de nivel 5) vs minify + gzip:

MooTools-Core
-------------
Baseline 102,991 bytes
Minified 79,414 (77.1% of original)
Gzipped 27,406 (26.6%)
Minified+Gzipped 22,446 (21.8%)

jQuery
------
Baseline 170,095
Minified 99,735 (58.6% of original)
Gzipped 46,501 (27.3%)
Minified+Gzipped 27,938 (16.4%)

Antes de que alguien salte el arma, esta no es una batalla de bibliotecas JS.

Como puede ver, la minificación + gzipping le da una mejor compresión en archivos grandes . La reducción del código tiene sus ventajas, pero el factor principal es cuánto espacio en blanco y comentarios están presentes en el código original. En este caso, jQuery tiene más, por lo que ofrece una mejor minificación (muchos más espacios en blanco en la documentación en línea). La fuerza de la compresión Gzip está en cuánta repetición hay en el contenido. Entonces no se trata de minify vs.Gzip. Hacen las cosas de manera diferente. Y obtienes lo mejor de ambos mundos al usar ambos.

¿Por qué no usar ambos?

Es fácil de probar: simplemente coloque el texto de su CSS en archivos de texto y comprima los archivos usando un archivador como gzip en Linux.

Acabo de hacer esto, y sucede que para el primer CSS, el tamaño es de 184 bytes y para el segundo 162 bytes.

Entonces, tiene razón, el espacio en blanco es importante incluso para los archivos comprimidos, pero como se puede ver en esta pequeña prueba, para archivos realmente pequeños, el tamaño del archivo comprimido puede ser mayor que el tamaño del archivo original.

Esto se debe solo al tamaño muy pequeño de su ejemplo, para archivos más grandes, gzipping obtendrá archivos más pequeños.

No vi a nadie mencionar a Mangling, así que publico mis resultados al respecto.

Aquí hay algunas cifras que se me ocurrieron usando UflifyJS para minificación y Gzip. Tenía unos 20 archivos que concatenaba juntos a unos 2.5 MB con comentarios y todo.

Concat Files 2.5MB

uglify({
    mangle: false
})

Minified sin destrozar: 929kb

uglify({
    mangle: true
})

Minificado y destrozado: 617kb

Ahora, si tomo esos archivos y los comprimo, obtendré 239 kb y 190 kb respectivamente.

Hay un método muy simple para probar esto: cree un archivo que consista solo en espacios en blanco y otro archivo que esté realmente vacío. Luego Gzip ambos y comparar sus tamaños. El archivo con el espacio en blanco será, por supuesto, más grande.

Por supuesto, la compresión con pérdida "humana" que conserva el diseño u otras cosas importantes y elimina cualquier basura no necesaria (espacios en blanco, comentarios, cosas redundantes, etc.) será mejor que una compresión gZip sin pérdidas.

Por ejemplo, cosas como marcas o nombres de funciones probablemente tendrán una cierta longitud para describir el significado. Reemplazar esto por nombres de un carácter de largo ahorrará mucho espacio y no es posible con una compresión sin pérdidas.

Por cierto, para CSS hay herramientas como el compresor CSS que harán el trabajo con pérdidas para usted.

Sin embargo, obtendrá los mejores resultados al combinar la "optimización con pérdidas" y la compresión sin pérdidas.

por supuesto que puedes probar: escribe tu en un archivo y gzip con zlib . También puede probar con el programa de utilidad "gzip".

Volviendo a su pregunta, no existe una relación definida entre la longitud de la fuente y el resultado comprimido. El punto clave es la 'entropía' (cuán diferente es cada elemento en la fuente).

entonces, eso depende de cómo sea tu fuente. por ejemplo, muchos espacios continuos (ex,> 1000) pueden comprimirse del mismo tamaño que pocos espacios (ex, <10).

Este es el resultado cuando gzipea los dos archivos

bytes  File
45     min.txt
73     min.gz

72     normal.txt
81     normal.gz

Tienes razón, minify + gzip resulta en menos bytes. Sin embargo, no hay pruebas científicas.

¿Cómo es que no tienes método de prueba?

Minifique su código en un archivo y déjelo "sin minificar" en otro. Cargue en un servidor web capaz de comprimir la salida (mod_deflate para Apache, por ejemplo), instale la extensión Firebug para firefox, borre su caché y acceda a ambos archivos. La pestaña "NET" de Firebug contendrá la cantidad exacta de datos transferidos, compárelos y tendrá una prueba "empírica".