Compresion te html, js, y css

[uylmfs]

Hola,

Estoy intentando comprimir mi sitio web para mejorara la experiencia del usuario y disminuir el consumo de ancho de banda.

No me es posible usar las técnicas de este manual http://www.desarrolloweb.com/articulos/htaccess-comprimir-gzip.html por que mi sitio esta hosteado en godaddy y no admite gzip.

Para las páginas con PHP, que son las de la tienda godaddy sugiere que se introduzca este código
<?php if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip')) ob_start("ob_gzhandler"); else ob_start(); ?>
al principio de cada archivo. Lo hice y funciono bien (para las .php) el problemas es que las PHP invocan a archivos .js y .css para los cuales estuve viendo posibilidades como las que sugieren aquí http://www.tufuncion.com/gzip-comprimir-archivos , o en otras páginas pero hasta ahora no parecen dar resultados.
Además buena parte de mi sitio esta hecho en html plano, por lo que el código para las php no funcionaría . Podría cambiarlas a php, pero perdería el posicionamiento.
Por otro lado he notado que al usar la compresión en los archivos php a veces el tiempo de carga es mayor que si usarla, pues el servidor tiene un espera mayor antes de entregar el archivo.
Me gustaría implementar algún método de compresión como el que se sugiere en la página de tufuncion , que tenga archivos ya comprimidos y archivos alternativos sin comprimir, pero no pude dar con la forma de hacer según muestran allí.

¿Ideas de como comprimir tomando en cuenta que godaddy y no admite gzip.?

Saludos y desde ya muy agradecido por cualquier ayuda

[emprear]

uylmfs:

Los artículos a los que haces referencia están algo desactualizados, todos los navegadores modernos aceptan gzip (opera, chrome,Ie,firefox,Safari)

"Lo hice y funciono bien (para las .php)", como es la cosa, te admiten o no el gzip?

Ateniendonos a que en los php te funcionó (a propósito, como lo verificaste), sería cuestion de que el php, procese tambien tus css , js y html. para eso bastaría, si tenes acceso, que en .htaccess utilices la siguientes directivas

AddType application/x-httpd-php .html .js .css

Con eso dichas extensiones serán procesadas por php, ahora solo te resta hacer lo que hiciste en los php en los html, js y css. con una variante, en la primera linea de tus css tendrías que agregar
<?php header("Content-Type: text/css;charset=utf-8"); ?>
y en los js
<?php header("Content-Type: text/javascript;charset=utf-8"); ?>
Esto es para prevenir errores en Firefox. Importante, estos dos agregados tiene que ser la primera linea de tus archivos, no debe haber siquiera ninguna linea en blanco sobre ella.
El método que proponen en www.tufuncion.com/gzip-comprimir-archivos está completamente obsoleto.

Hay una forma más sencilla aun, pero se necesita saber como está configurado tu server. Así que por ahora me la reservo.

Si podés pasa la url de tu página para verificar como estás comprimiendo

con respecto al Google, el posicionamiento y el gzip, no tenes ningún problema, basta que utilices la herramienta para webmasters que povee Google: 2Explorar como Googlebot" para verificarlo.

Saludos

[uylmfs]

Antes que nada, agradecer la respuesta de emprear.
Te cuento y les cuento a los demás:

"todos los navegadores modernos aceptan gzip (opera, chrome,Ie,firefox,Safari)"
Se que lo hacen, el que parece no hacerlo (o al menos no de forma directa) es el servidor de godaddy.

"te admiten o no el gzip?"
Lo que hace es una implementación de de Gzip, pero no perite un acceso directo. Supongo que es para que no puedas definir el nivel de compresión ni aplicar la compresión a todos los archivos, y de esa forma proteger los recursos del servidor. Aunque no tendría sentido, alguien podría aplicar el Gzip a formato gráficos que ya viene comprimidos y aumentar la carga del CPU. Creo que la gente de godaddy lo implemento así para eso. No podes hacer una llamada directa a Gzip, llamas a un "manejador" de Gzip llamado "ob_gzhandler".

"Ateniendonos a que en los php te funcionó (a propósito, como lo verificaste)"
Hay varías páginas en linea que verifican si estas o no comprimiendo, yo use esta http://www.gidnetwork.com/tools/gzip-test.php , pones la url y dice si esta comprimiendo y otros datos, te pego el resultado de la tienda que es la parte de la web que tiene la mayor parte de los archivos .php comprimidos

Results for: www.tqm.com.uy/catalog/
Web page compressed? Yes
Compression type? gzip
Size, Markup (bytes) 64,397
Size, Compressed (bytes) 8,443
Compression % 86.9

Whorush: 5 sites by this AdSense ID

Response Headers
status HTTP/1.1 200 OK
date Thu, 16 Sep 2010
13:07:32 GMT
server Apache
cache-control no-store, no-cache,
must-revalidate,
post-check=0,
pre-check=0
content-encoding gzip
expires Thu, 19 Nov 1981
08:52:00 GMT
pragma no-cache
vary Accept-Encoding
x-powered-by PHP/4.4.9
set-cookie osCsid=5214b8115da5f
2df3f95e89d1801560e;
path=/catalog/;
domain=www.tqm.com.uy
connection close
content-type text/html


"Si podés pasa la url de tu página para verificar como estás comprimiendo"
La parte comprimida [URL="http://www.tqm.com.uy/catalog/"]http://www.tqm.com.uy/catalog/[/URL]
La parte sin comprimir [URL="http://www.tqm.com.uy/"]http://www.tqm.com.uy/[/URL]


"sería cuestion de que el php, procese tambien tus css , js y html. para eso bastaría, si tenes acceso, que en .htaccess utilices la siguientes directivas
AddType application/x-httpd-php .html .js .css
Con eso dichas extensiones serán procesadas por php, ahora solo te resta hacer lo que hiciste en los php en los html, js y css. con una variante, en la primera linea de tus css tendrías que agregar
<?php header("Content-Type: text/css;charset=utf-8"); ?>
y en los js
<?php header("Content-Type: text/javascript;charset=utf-8"); ?>
Esto es para prevenir errores en Firefox. Importante, estos dos agregados tiene que ser la primera linea de tus archivos, no debe haber siquiera ninguna linea en blanco sobre ella."
Me gusto tu solución pero, tengo algunas dudas: Las paginas de productos del OSC .php se son renombrados por el OSC como .html ¿no surgiría ningún conflicto ni problema? (aunque pesandolo bien las páginas estáticas de mi web son .htm, y las dinámicas .html , con lo que creo poniendo .htm en lugar de .html quedaría resuelto el problema si lo hubiera)
Otro tema es que he realizado pruebas de la misma página con y sin compresión y me dio resultados desalentadores:
Con compresión: 6,2 ; 16,46 ; 7,5 segundos
Sin compresión: 7,9 ; 5,05 ; 3,2 segundos
La pruebas se alternado los archivos con y sin compresión ( comprimido, sin , comprimido, sin , comprimido, sin , ) en intervalos de 1 minuto.
Irónicamente en promedio las páginas comprimidas demoran más que las no comprimidas . Eso según creo debido al tiempo extra del CPU.
Aún así resulta que la mayor parte del tráfico es .js

File Type Number of requests Percentage of the bytes
1. .js [JavaScript code] 8,104,100 28.02%
2. .html [Hypertext Markup Language] 4,217,311 26.84%
3. .rar 20,746 9.59%
4. .jpg [JPEG graphics] 14,816,518 7.11%
5. .gif [GIF graphics] 44,984,625 6.13%
6. .php [PHP] 1,644,541 5.27%

Eso se explica por que si tomamos por ejemplo esta página [URL="http://www.tqm.com.uy/catalog/impresora-multifuncion-brother-dcp165c-p-1542.html"]http://www.tqm.com.uy/catalog/impresora-multifuncion-brother-dcp165c-p-1542.html[/URL] veremos que se compone de:

Website information

Total loading time: 4.6 seconds
Total objects: 50 (295.5 KB)
External objects: 1 (2.7 KB)
HTML (X)HTML: 1 (74.4KB)
RSS RSS/XML: 0
CSS CSS: 2 (8.7KB)
Scripts Scripts: 4 (146.3KB)
Images Images: 43 (66.1KB)
Plugins Plugins: 0
Other Other: 0
Redirected Redirected: 0

Entonces casi el 50% es de "Scripts Scripts: 4 (146.3KB)", y eso en esta página, en otras el porcentaje es aún mayor.

Tomando en cuenta todo lo anterior creo que lo mejor sería ofrecer mediante el .htaccess ofrecer versiones ya comprimidas al menos de los .js , de esa forma se reduciría el consumo del ancho de banda sin afectar al cpu, pues no habría que comprimirlos cada vez que se soliciten. Aunque no es tanto el consumo de ancho de banda de los .css (a penas el 2.07%), también se podría aplicar a ellos y de esta forma aumentar el ahorro. Debo de tener cerca de unos 200 archivos de .htm que también se podrían comprimir y ofrecer versiones ya comprimidas.
He intentado implementarlo a nivel de .htaccess pero hasta ahora no me ha salido, de momento lo único que funciona en mi web a nivel de compresión es el <?php if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip')) ob_start("ob_gzhandler"); else ob_start(); ?> en las páginas .php

Creo que todos los dato y la investigación que puse le van a ser útiles a más de uno, por lo que si logro solucionarlo por otro lado publicare aquí la solución.

Desde ya muy agradecido por cualquier ayuda y/o consejo que me puedan dar.

Saludos
Marcelo

[MikiBroki]

Hola, usando el siguiente enlace me funciona la compresión en .html.gz, .js.gz y .css.gz, pero no .php.gz:

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

Godaddy tiene apache 1.3, así que también he intentado con:

http://blog.unijimpe.net/optimizacio...mpresion-gzip/

No me comprime "al vuelo" pero sí devuelve los .gz... pero sigue sin funcionarme con .php.gz (no devuelve bien el archivo)

... Y con ello llevo dos días :@

[MikiBroki]

Bueno y ahora veo que si quito lo del .htacess, se cargan igual los .gz (menos de php)

hay un módulo cargado en un php.ini de una carpeta superior que carga un modulo 'zendoptimizer.so', no se si tendrá que ver.

[emprear]

MikiBroki:

esto es algo bastante simple en principio, y no se por uqe razon se esta haciendo complicado.

Primero, necesitamos saber como esta instalado php, si como modulo de Apache o Como CGI, Corre una script
<?php

phpinfo();

?>

y de los resultados, fijate en la 3 ó 4 fila, si es

Server API Apache 2.0 Handler
ó
Server API CGI (o FAST/CGI)


más abajo busca la info del modulo Zlib, te va a aparecer algo asi

zlib
ZLib Support enabled
Stream Wrapper support compress.zlib://
Stream Filter support zlib.inflate, zlib.deflate
Compiled Version 1.2.3
Linked Version 1.2.3

Directive Local Value Master Value
zlib.output_compression Off Off
zlib.output_compression_level -1 -1
zlib.output_handler no value no value

cuando tengas esta información, hacémela saber, y hacemos unas pruebas


Saludos

[MikiBroki]

Mil gracias emprear, no ando ducho configurando apache, aparte de que la configuración cambia según la versión.

La fila 'server api' pone 'CGI/FastCGI'. En cuanto a lo de zlib lo pone tal cual has puesto.

Comentarte que he probado con varias configuraciones para apache 1.3 encontradas por la red, y que he visto algún que otro post sobre godaddy específicamente, teniendo el mismo problema (y sin solución a él). Creo que debe ser tema de la configuración propia de Godaddy.

La solución expuesta por uylmfs me va sin problema con archivos .php:

[CODE]
<?php if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip')) ob_start("ob_gzhandler"); else ob_start(); ?>
[CODE]

... pero tengo entendido que haciéndolo así con PHP el consumo de procesador puede incrementarse bastante.

[emprear]

MikiBroki:

perfecto, con esos datos, ya puedo orientarme mejor.
ahora mismo no tengo tiempo, pero en un par de horas te voy a dejar un par de scripts para que hagamos algunas pruebas, con archivos php, js y css.


Saludos

[emprear]

MikiBroki:

Date una vuelta por
http://gzip.emprear.com.ar

ahi esta la compresión funcionando y los archivos para descargar.

Ese servidor en particular en el que te los subí, usa PHP como Fast/CGI, igual al tuyo.
te aclaro que para comprimir los html, deberias renombrarlos a php e insertarles al inicio el código php que está al inicio de test.php (hay otra forma más practica que no necesita renombrar, pero, una vez más depende de la configuración de tu servidor y no siempre funciona.

saludos

[MikiBroki]

Me funciona a la perfección, mi problema parecía estar en que no incluía el código php en la hoja de estilos.

Algunas puntualizaciones:

1) Tras renombrar 'estilos.css' a 'estilos.css.php', no es necesario modificar el nombre de dicho archivo en las páginas que lo cargan.

2) SIN MODIFICAR .htaccess para cargar 'mod_gzip' (Godaddy tiene Apache 1.3.33), borro mi archivo 'estilos.css' y lo sustituyo por uno comprimido 'estilos.css.gz' (con el código php dentro o no, aunque no es necesario si ya está comprimido) funciona todo bien, y no es necesario modificar el nombre de dicho archivo en las páginas que cargan dicho archivo.

3) Sin embargo, si comprimo a formato .php.gz una página PHP con código HTML no se muestra corréctamente... aunque sí se envía comprimida.

4) He probado a sustituir tanto en 'test.php' como en 'test.css.php' el código PHP que me has pasado por la siguiente línea, recomendada por Godaddy y todo parece ir bien:

Código:

if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip')) { ob_start("ob_gzhandler"); } else { ob_start(); }

Pero veo que tú además envías unas cabeceras, ¿con qué fin?:

Código:

header("Content-Type: text/css;charset=utf-8");
header("Cache-Control:must-revalidate");
ob_start("ob_gzhandler");
$offset = 60 * 60;
$ExpStr = "Expires:" . 
gmdate("D,d M Y H:i:s",time() + $offset) . " GMT";
header($ExpStr);"*************************************************/\n\n";
echo "/************************************************\n";
echo "Css xra ". $_SERVER['SCRIPT_URI'] ."\n";

5) La única duda que me queda al respecto de todo esto, es: la compresión en lugar de hacerla desde PHP como lo visto en tu ejemplo, ¿sería mejor para reducir la carga del procesador hacerla configurando de algún modo el .htaccess?... como pone en el siguiente enlace:

http://www.samaxes.com/2008/04/htacc...dwidth-saving/

this makes PHP to compress your PHP files (be cautious, this is very CPU intensive).

Un millón de gracias por tu ayuda.

[emprear]

MikiBroki:

no quiero abundar en teoria, porque incluso llegaría a un punto en que tampoco tendria los conocimientos necesarios.

Te simplifico, en tu .htaccess NO tendrías que poner ninguna directiva referida a la compresion.

efectivamente, tenes que llamar a todos los css.php y js.php nuevamente desde las páginas que los llamen, ya sean html o php

Olvidate de .gz, es obsoleto.

Justamente te di este sistema para que sea compatible en Apache 1.3 y Apache 2.x

Esas cabeceras adicionales en los CSS son para que el navegador los cachee correctamente, y los conten-type para que el navegador (sobre todo firefox) interprete correctamente que se trata de un css o un javascript (que en ambos casos son "text")


En cuanto a esto

echo "/************************************************\n ";
echo "Css xra ". $_SERVER['SCRIPT_URI'] ."\n";
echo "©2005 Guillermo Gianello\n";
echo "webmaster[Alt+64]emprear.com\n";
echo "********************************************* ****/\n\n";

es simplemente informativo, pero yo lo dejo porque si visualizo un css o js en el navegador, se que en realidad es un css.php ó un js.php

como te dije, lamentablemente, no creo que funcione el método que hay para comprimir los .html, tenes que renombrarlos a php e incluir la linea al inicio para efectuar la compresión.

Te recomiendo que crees una carpeta a manera de pruebas, y en tanto las haces, elimina tu .htaccess en la raiz de tu web, o solo si quieres deja las directivas más comunes como
Options -indexes
DirectoryIndex index.php index.html
etc....

Si tenés Opera, te puedo comentar de una prueba bastante interesante que se puede hacer.

Cualquier duda, pregunta
Saludos

[MikiBroki]

Mejor explicado imposible y sí que tengo Opera, pero no te preocupes ya me has ayudado bastante.

La única duda que me queda es lo que comentaba acerca de la carga del procesador, si era mejor buscar algún modo de hacer la compresión configurando .htaccess, ¿cuál es tu experiencia al respecto?

Gracias

[emprear]

MikiBroki:

Este es un tema de larga data, lo que sucede es que mucha de la información ha quedado obsoleta, la evolución de php, Apache, los procesadores, las velocidades de transmisión de Adsl, etc han cambiado mucho las cosas. (lo que es de extrañar es que en Goodady sigan usando Apache 1.3)

Había una forma más natural de hacerlo a través de un módulo de apache, pero hoy en día, no conozco un server que lo tenga instalado,
con respecto a la sobrecarga que esto pueda implicarle al procesador, me atengo a los resultados de las pruebas que otros han echo.
Esta es sin duda, la forma más sencilla y transparente de hacerlo.

Si lo ves por el lado "empírico", la respuesta es sencilla,
¿Vos pensas que si este método afectase tanto a los servidores, nos permitirían realizar con tanta facilidad este procedimiento?

saludos

[MikiBroki]

Sí, también me extraña que Godaddy tenga aún Apache 1.3, por otro lado el módulo 'mod_gzip' tenerlo activado lo tienen, por lo que me dijeron al preguntarles, lo que no ofrecían soporte para esas configuraciones (lo que sí me aconsejaron que probara a eliminar del htaccess las líneas con 'mime' para que no hubiese conflicto con su configuración... pero nada).

Godaddy tiene fama (no se si será cierta) de que como uno se exceda un poco con el ancho de banda o la carga del procesador (que no hay forma de saberlo) te cierran la cuenta sin previo aviso... de ahí mi preocupación. Y otra es lo del ancho de banda 'ilimitado'.

Por lo demás, ya iré modificando mis páginas para añadir el código.

Y MUCHAS GRACIAS por todo!