Como puedo comprimir en gzip, los *.js y *.css

[BiChOmAlO_TGN]

Hola!!

Estoy intentando optimizar mi pagina y la he pasado por el page speed de google, me dice que tengo que comprimir todos estos elementos y lo marca como alta prioridad

Habilitar compresión
Compressing resources with gzip or deflate can reduce the number of bytes sent over the network.
Learn more

Suggestions for this page
Si se comprimen los recursos indicados a continuación con gzip, se puede reducir el tamaño de transferencia en 313,4 KB (lo que supone una reducción del 73%).
Si se comprime http://www.mipaginaweb.es/.../jquery....custom.min.js, se pueden ahorrar 153,8 KB (lo que supone una reducción del 74%).
Si se comprime http://www.mipaginaweb.es/.../jquery-1.6.1.min.js, se pueden ahorrar 58 KB (lo que supone una reducción del 64%).
Si se comprime http://www.mipaginaweb.es/.../stylesheet.css, se pueden ahorrar 28,7 KB (lo que supone una reducción del 82%).
Si se comprime http://www.mipaginaweb.es/.../jquery.cycle.all.min.js, se pueden ahorrar 22,8 KB (lo que supone una reducción del 75%).
Si se comprime http://www.mipaginaweb.es/.../jquery...slider.pack.js, se pueden ahorrar 12,2 KB (lo que supone una reducción del 78%).
Si se comprime http://www.mipaginaweb.es/.../jquery...-1.3.4.pack.js, se pueden ahorrar 9,8 KB (lo que supone una reducción del 64%).
Si se comprime http://www.mipaginaweb.es/.../yaslider.css, se pueden ahorrar 8,8 KB (lo que supone una reducción del 82%).
Si se comprime http://www.mipaginaweb.es/.../jquery.fancybox-1.3.4.css, se pueden ahorrar 7 KB (lo que supone una reducción del 79%).
Si se comprime http://www.mipaginaweb.es/catalog/vi...ript/common.js, se pueden ahorrar 4,2 KB (lo que supone una reducción del 75%).
Si se comprime http://www.mipaginaweb.es/.../jquery.tipsy.js, se pueden ahorrar 3,2 KB (lo que supone una reducción del 69%).
Si se comprime http://www.mipaginaweb.es/.../jquery.cookie.js, se pueden ahorrar 2,3 KB (lo que supone una reducción del 63%).
Si se comprime http://www.mipaginaweb.es/.../scrolltopcontrol.js, se pueden ahorrar 2,1 KB (lo que supone una reducción del 56%).
Si se comprime http://www.mipaginaweb.es/.../custom_scripts.js, se pueden ahorrar 392 B (lo que supone una reducción del 50%).
Si se comprime http://www.mipaginaweb.es/.../css.tipsy.css, se pueden ahorrar 299 B (lo que supone una reducción del 50%).

yo he probado en poner esto en el .htaccess

Código:

<IfModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_item_include file \.css$
mod_gzip_item_include file \.js$
mod_gzip_item_include mime ^application/javascript$
mod_gzip_item_include mime ^application/x-javascript$
</IfModule>

Pero me sigue diagnosticando lo mismo el page speed , ¿que puedo hacer?


Saludos

[cuasatar]

Hola, en esta pagina puedes comprimir los js y css. Ademas te dan la opción de recibir el resultado en .gzip. Esta ultima opción personalmente no la he usado pero quizas te podria servir.

http://www.refresh-sf.com/yui/

Espero y te sirva.

[BiChOmAlO_TGN]

Iniciado por cuasatar

Hola, en esta pagina puedes comprimir los js y css. Ademas te dan la opción de recibir el resultado en .gzip. Esta ultima opción personalmente no la he usado pero quizas te podria servir.

http://www.refresh-sf.com/yui/

Espero y te sirva.

Hola!! muchas gracias

No entiendo mucho de programación y no se muy bien como usar la pagina esta.

Entro en la pagina http://www.refresh-sf.com/yui/ señalo que quiero comprimir un ‘’File’’ le doy a examinar y elijo el *js que quiero comprimir, en este caso elijo ‘’jquery-ui-1.8.16.custom.min.js’’ hasta aquí bien jeje,


¿luego que tengo que marcar?

¿al final que tengo que marco? Redirect to output? o Redirect to gzipped output? , si marco la segunda opción me devuelve un archivo llamado ‘’min.js.gz’’, ¿esto es lo que tendría que subir a la pagina en el lugar del ‘’jquery-ui-1.8.16.custom.min.js’’ ?


Saludos

[kiko's]

Jejeje... yo también utilicé hace poco ese programilla de Google para lo mismo. Yo comprimí mis css y js así:

Código PHP:

 // miarchivocss.css.php
<?php if(extension_loaded('zlib')){ob_start('ob_gzhandler');} header("Content-type: text/css"); ?>
  ...
  codigo css
  ...
 
<?php if(extension_loaded('zlib')){ob_end_flush();}?>   

Eso para comprimir el código en gzip, luego también puedes comprimir el código eliminado espacios en blanco en algunas páginas de comprensión de css.

Saludos.

[BiChOmAlO_TGN]

Iniciado por kiko's

Jejeje... yo también utilicé hace poco ese programilla de Google para lo mismo. Yo comprimí mis css y js así:

Código PHP:

 // miarchivocss.css.php
<?php if(extension_loaded('zlib')){ob_start('ob_gzhandler');} header("Content-type: text/css"); ?>
  ...
  codigo css
  ...
 
<?php if(extension_loaded('zlib')){ob_end_flush();}?>   

Eso para comprimir el código en gzip, luego también puedes comprimir el código eliminado espacios en blanco en algunas páginas de comprensión de css.

Saludos.

Muchas gracias kiko´s , podrias explicarmelo paso por paso, es que de php no se nada

por ejemplo tengo este archivo ‘’jquery.mousewheel-3.0.4.pack.js’’ lo abro y el codigo es este:

Código:

/*! Copyright (c) 2010 Brandon Aaron (http://brandonaaron.net)
* Licensed under the MIT License (LICENSE.txt).
*
* Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers.
* Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix.
* Thanks to: Seamus Leahy for adding deltaX and deltaY
*
* Version: 3.0.4
*
* Requires: 1.2.2+
*/

(function(d){function g(a){var b=a||window.event,i=[].slice.call(arguments,1),c=0,h=0,e=0;a=d.event.fix(b);a.type="mousewheel";if(a.wheelDelta)c=a.wheelDelta/120;if(a.detail)c=-a.detail/3;e=c;if(b.axis!==undefined&&b.axis===b.HORIZONTAL_AXIS){e=0;h=-1*c}if(b.wheelDeltaY!==undefined)e=b.wheelDeltaY/120;if(b.wheelDeltaX!==undefined)h=-1*b.wheelDeltaX/120;i.unshift(a,c,h,e);return d.event.handle.apply(this,i)}var f=["DOMMouseScroll","mousewheel"];d.event.special.mousewheel={setup:function(){if(this.addEventListener)for(var a=
f.length;a;)this.addEventListener(f[--a],g,false);else this.onmousewheel=g},teardown:function(){if(this.removeEventListener)for(var a=f.length;a;)this.removeEventListener(f[--a],g,false);else this.onmousewheel=null}};d.fn.extend({mousewheel:function(a){return a?this.bind("mousewheel",a):this.trigger("mousewheel")},unmousewheel:function(a){return this.unbind("mousewheel",a)}})})(jQuery);

¿Que tendria que hacer exactamente?

[kiko's]

Buenas noches,

Aquí te dejo un ejemplo.

Saludos.

[BiChOmAlO_TGN]

Iniciado por kiko's

Buenas noches,

Aquí te dejo un ejemplo.

Saludos.

Muchas gracias por tu tiempo!!

entonces seria asi, por ejemplo este archivo "jquery.mousewheel-3.0.4.pack.js" lo abro y el codigo es este:

Código:

/*! Copyright (c) 2010 Brandon Aaron (http://brandonaaron.net)
* Licensed under the MIT License (LICENSE.txt).
*
* Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers.
* Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix.
* Thanks to: Seamus Leahy for adding deltaX and deltaY
*
* Version: 3.0.4
*
* Requires: 1.2.2+
*/

(function(d){function g(a){var b=a||window.event,i=[].slice.call(arguments,1),c=0,h=0,e=0;a=d.event.fix(b);a.type="mousewheel";if(a.wheelDelta)c=a.wheelDelta/120;if(a.detail)c=-a.detail/3;e=c;if(b.axis!==undefined&&b.axis===b.HORIZONTAL_AXIS){e=0;h=-1*c}if(b.wheelDeltaY!==undefined)e=b.wheelDeltaY/120;if(b.wheelDeltaX!==undefined)h=-1*b.wheelDeltaX/120;i.unshift(a,c,h,e);return d.event.handle.apply(this,i)}var f=["DOMMouseScroll","mousewheel"];d.event.special.mousewheel={setup:function(){if(this.addEventListener)for(var a=
f.length;a;)this.addEventListener(f[--a],g,false);else this.onmousewheel=g},teardown:function(){if(this.removeEventListener)for(var a=f.length;a;)this.removeEventListener(f[--a],g,false);else this.onmousewheel=null}};d.fn.extend({mousewheel:function(a){return a?this.bind("mousewheel",a):this.trigger("mousewheel")},unmousewheel:function(a){return this.unbind("mousewheel",a)}})})(jQuery);

simplemente tendria que agregar las lineas al principio y al final, asi?

Código:

<?php if(extension_loaded('zlib')){ob_start('ob_gzhandler');} ?>
/*! Copyright (c) 2010 Brandon Aaron (http://brandonaaron.net)
* Licensed under the MIT License (LICENSE.txt).
*
* Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers.
* Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix.
* Thanks to: Seamus Leahy for adding deltaX and deltaY
*
* Version: 3.0.4
*
* Requires: 1.2.2+
*/

(function(d){function g(a){var b=a||window.event,i=[].slice.call(arguments,1),c=0,h=0,e=0;a=d.event.fix(b);a.type="mousewheel";if(a.wheelDelta)c=a.wheelDelta/120;if(a.detail)c=-a.detail/3;e=c;if(b.axis!==undefined&&b.axis===b.HORIZONTAL_AXIS){e=0;h=-1*c}if(b.wheelDeltaY!==undefined)e=b.wheelDeltaY/120;if(b.wheelDeltaX!==undefined)h=-1*b.wheelDeltaX/120;i.unshift(a,c,h,e);return d.event.handle.apply(this,i)}var f=["DOMMouseScroll","mousewheel"];d.event.special.mousewheel={setup:function(){if(this.addEventListener)for(var a=
f.length;a;)this.addEventListener(f[--a],g,false);else this.onmousewheel=g},teardown:function(){if(this.removeEventListener)for(var a=f.length;a;)this.removeEventListener(f[--a],g,false);else this.onmousewheel=null}};d.fn.extend({mousewheel:function(a){return a?this.bind("mousewheel",a):this.trigger("mousewheel")},unmousewheel:function(a){return this.unbind("mousewheel",a)}})})(jQuery);

<?php if(extension_loaded('zlib')){ob_end_flush();}?>

luego guardo el archivo con el nombre "jquery.mousewheel-3.0.4.pack.js.php'' y lo subo al servidor eliminando el antiguo "jquery.mousewheel-3.0.4.pack.js"

¿Así es?

Saludos

[cuasatar]

Bueno, veo que se esta haciendo un poco largo el tema así que hare algunos comentarios para colaborarte en la optimización:

Si estas usando el framework de jquery lo mejor es que lo obtuvieras de un servidor externo y no el tuyo propio. De esta manera ya estarias ahorrando mucho.

http://quenerapu.com/javascript/usa-...e-google-anda/

Lo unico que deberias tener cuidado es colocar la versión de jquery que deseas cargar. En el ejemplo esta una versión vieja pero te puede servir, solo cambia por la versión que uses.

En el programa que te indique si tu colocas la opción sin comprimir (es decir sin el .gz) lo que te aparecera es el código con la eliminación de espacios, comentarios y demas que hace que los archivos reduzcan drasticamente el peso.

La opción que te presenta kiko's creo que si funciona, lo unico que se debe verificar antes es si tu proveedor admite la compresión (es decir si tiene habilitadas las opciones), en caso tal primero deberias preguntarle al proveedor si se permite la compresión que deseas hacer. En caso negativo diles que te habiliten la opción.

Este tema es muy practico y util asi que si alguien mas nos colabora con sus comentarios seria muy util.

p.s. Igual si deseas usar los archivos .gz para comprimir encontre este foro revisando uno de los tantos aportes que dan y encontre esta solución que te podria servir y complementar. Ya es cuestión de que uses la que mas te guste y te sirva.

http://www.tufuncion.com/gzip-comprimir-archivos

[BiChOmAlO_TGN]

Iniciado por cuasatar

Bueno, veo que se esta haciendo un poco largo el tema así que hare algunos comentarios para colaborarte en la optimización:

Si estas usando el framework de jquery lo mejor es que lo obtuvieras de un servidor externo y no el tuyo propio. De esta manera ya estarias ahorrando mucho.

http://quenerapu.com/javascript/usa-...e-google-anda/

Lo unico que deberias tener cuidado es colocar la versión de jquery que deseas cargar. En el ejemplo esta una versión vieja pero te puede servir, solo cambia por la versión que uses.

En el programa que te indique si tu colocas la opción sin comprimir (es decir sin el .gz) lo que te aparecera es el código con la eliminación de espacios, comentarios y demas que hace que los archivos reduzcan drasticamente el peso.

La opción que te presenta kiko's creo que si funciona, lo unico que se debe verificar antes es si tu proveedor admite la compresión (es decir si tiene habilitadas las opciones), en caso tal primero deberias preguntarle al proveedor si se permite la compresión que deseas hacer. En caso negativo diles que te habiliten la opción.

Este tema es muy practico y util asi que si alguien mas nos colabora con sus comentarios seria muy util.

p.s. Igual si deseas usar los archivos .gz para comprimir encontre este foro revisando uno de los tantos aportes que dan y encontre esta solución que te podria servir y complementar. Ya es cuestión de que uses la que mas te guste y te sirva.

http://www.tufuncion.com/gzip-comprimir-archivos

parece buena solucion, lo voy a estudiar, tambien encontre esto http://closure-compiler.appspot.com/home por lo visto reduce el tamaño de js y eso ayudará

saludos

[BiChOmAlO_TGN]

¿Esto puede funcionar asi?

voy a la pagina web http://www.refresh-sf.com/yui/#output selecciono el archivo que quiero comprimir en este caso "jquery-ui-1.8.16.custom.min.js" marco la casilla "Redirect to gzipped output?" le doy a compres y me devuleve un archivo con extension *.gz , por ftp borro el archivo "jquery-ui-1.8.16.custom.min.js" y subo el archivo con nombre "jquery-ui-1.8.16.custom.min.js.gz"

¿esto funcionaria? o es una tonteria


saludos

[khaven369]

Use css, html, js minifier to compress your html file to make it load a bit faster.
here are some minifiers / compressors that you can use:

[URL="http://beautifytools.com/html-minifier.php"]HTML Minifier[/URL]
[URL="http://beautifytools.com/css-minifier.php"]CSS Minifier[/URL]
[URL="http://beautifytools.com/javascript-minifier.php"]Javascript Minifier[/URL]
[URL="http://beautifytools.com/javascript-obfuscator.php"]Javascript Obfuscator[/URL]