Foros del Web » Creando para Internet » Diseño web »

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

Estas en el tema de Como puedo comprimir en gzip, los *.js y *.css en el foro de Diseño web en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 11/02/2012, 22:41
 
Fecha de Ingreso: julio-2003
Mensajes: 243
Antigüedad: 20 años, 11 meses
Puntos: 11
Pregunta Como puedo comprimir en gzip, los *.js y *.css

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

Cita:
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
  #2 (permalink)  
Antiguo 12/02/2012, 08:31
Avatar de cuasatar  
Fecha de Ingreso: junio-2011
Ubicación: Bogotá Rock City
Mensajes: 1.230
Antigüedad: 13 años
Puntos: 181
Respuesta: Como puedo comprimir en gzip, los *.js y *.css

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.
__________________
Blog de humor http://elcuasatar.net63.net/
  #3 (permalink)  
Antiguo 12/02/2012, 10:42
 
Fecha de Ingreso: julio-2003
Mensajes: 243
Antigüedad: 20 años, 11 meses
Puntos: 11
Respuesta: Como puedo comprimir en gzip, los *.js y *.css

Cita:
Iniciado por cuasatar Ver Mensaje
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
  #4 (permalink)  
Antiguo 12/02/2012, 11:05
 
Fecha de Ingreso: julio-2005
Mensajes: 310
Antigüedad: 18 años, 10 meses
Puntos: 36
Respuesta: Como puedo comprimir en gzip, los *.js y *.css

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.
  #5 (permalink)  
Antiguo 12/02/2012, 12:25
 
Fecha de Ingreso: julio-2003
Mensajes: 243
Antigüedad: 20 años, 11 meses
Puntos: 11
Respuesta: Como puedo comprimir en gzip, los *.js y *.css

Cita:
Iniciado por kiko's Ver Mensaje
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?
  #6 (permalink)  
Antiguo 12/02/2012, 16:57
 
Fecha de Ingreso: julio-2005
Mensajes: 310
Antigüedad: 18 años, 10 meses
Puntos: 36
Respuesta: Como puedo comprimir en gzip, los *.js y *.css

Buenas noches,

Aquí te dejo un ejemplo.

Saludos.
  #7 (permalink)  
Antiguo 12/02/2012, 17:21
 
Fecha de Ingreso: julio-2003
Mensajes: 243
Antigüedad: 20 años, 11 meses
Puntos: 11
Respuesta: Como puedo comprimir en gzip, los *.js y *.css

Cita:
Iniciado por kiko's Ver Mensaje
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
  #8 (permalink)  
Antiguo 13/02/2012, 10:34
Avatar de cuasatar  
Fecha de Ingreso: junio-2011
Ubicación: Bogotá Rock City
Mensajes: 1.230
Antigüedad: 13 años
Puntos: 181
Respuesta: Como puedo comprimir en gzip, los *.js y *.css

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
__________________
Blog de humor http://elcuasatar.net63.net/

Última edición por cuasatar; 13/02/2012 a las 10:46
  #9 (permalink)  
Antiguo 13/02/2012, 22:26
 
Fecha de Ingreso: julio-2003
Mensajes: 243
Antigüedad: 20 años, 11 meses
Puntos: 11
Respuesta: Como puedo comprimir en gzip, los *.js y *.css

Cita:
Iniciado por cuasatar Ver Mensaje
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
  #10 (permalink)  
Antiguo 15/02/2012, 19:24
 
Fecha de Ingreso: julio-2003
Mensajes: 243
Antigüedad: 20 años, 11 meses
Puntos: 11
Respuesta: Como puedo comprimir en gzip, los *.js y *.css

¿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
  #11 (permalink)  
Antiguo 11/12/2015, 05:49
 
Fecha de Ingreso: diciembre-2015
Mensajes: 1
Antigüedad: 8 años, 6 meses
Puntos: 0
Mensaje Respuesta: Como puedo comprimir en gzip, los *.js y *.css

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]

Última edición por khaven369; 11/12/2015 a las 06:00

Etiquetas: comprimir, css, gzip, js
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 16:46.