Optimizacin de un sitio web con compresin GZIP

Optimizacin
de un sitio
web con
compresin
GZIP
Optimizar un sitio web enviando archivos comprimidos con GZIP. Manual con las tcnicas ms sencillas para enviar los

archivos de tu sitio comprimidos con GZIP, para el servidor web Apache.

desarrolloweb.com/manuales/manual-compresion-gzip.html Pgina 1
 Optimizacin de un sitio web con compresin GZIP

Autores del manual

Este texto "Optimizacin de un sitio web con compresin GZIP" es obra de los siguientes autores.

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formacin online EscuelaIT. Comenz en el mundo del desarrollo
web en el ao 1997, transformando su hobby en su trabajo.

http://www.desarrolloweb.com
5 artculos publicados

Aviso: Puedes imprimir este manual, siempre que contenga este aviso, respetes el encabezado y pie del PDF, as
como mantengas la informacin de los autores originales.
Los manuales de DesarrolloWeb.com tienen copyright de sus autores. Por favor, consulta autorizacin para su
distribucin en otros medios.

desarrolloweb.com/manuales/manual-compresion-gzip.html Pgina 2
 Optimizacin de un sitio web con compresin GZIP

0.1.- Introduccin a la compresin GZIP de un

sitio web
Qu es la compresin por GZIP de un sitio web, cmo funciona y de qu manera ayuda en la
optimizacin de la descarga de una pgina.

La compresin por GZIP es una de las posibilidades ms importantes para optimizar un sitio web, para buscar un mejor
desempeo en la carga de las pginas. Consiste en enviar los cdigos del sitio en formato comprimido, para que ocupen
mucho menos espacio y por tanto se transfieran por la Red de una manera ms rpida.

Tenemos variar formas de definir que se enven comprimidos los archivos de la pgina. La manera ms normal es
configurar el servidor web donde est alojada la pgina, ya sea Apache, IIS o cualquier otro sistema, para marcar que se
utilice alguno de los mtodos de compresin para los archivos. Aunque en ocasiones asusta un poco eso de configurar el
servidor web, os podemos adelantar que esa configuracin es muy sencilla de realizar y a lo largo de los prximos
artculos vamos a explicar detenidamente cmo realizarla de diversas maneras.

Otra manera de enviar los archivos comprimidos es programar nosotros mismos esta funcionalidad con algn mdulo en
tu pgina realizado en lenguajes del servidor como PHP. Este mdulo que podras programar se encargara de comprimir
los archivos y enviarlos comprimidos al cliente web, pero estas tcnicas slo seran recomendadas si no tenemos la
posibilidad de configurar directamente el servidor web. En adelante veremos de qu maneras que se pueden enviar los
archivos comprimidos con algn lenguaje de programacin.

En definitiva, veremos maneras distintas de conseguir esta configuracin y as cualquier persona, en cualquier mbito de
trabajo, pueda optimizar la distribucin de los contenidos de su pgina con GZIP.

Ventajas de comprimir con GZIP

La ventaja de comprimir con GZIP nuestro sitio web es que ser menos pesado en KB, lo que derivar a su vez en otras
ventajas importantes:

Ahorro de ancho de banda / transferencia: nuestro sitio web enviar archivos comprimidos y por tanto, la
transferencia que utilizar para enviar una misma pgina, ser mucho mejor que si no estuviera comprimida. Al
cabo del mes, sobre todo en sitios web con bastante trfico, se obtendr un ahorro considerable en transferencia.
Velocidad del sitio: los archivos comprimidos tardarn menos en llegar a sus destinatarios, por tanto el sitio
cargar con mayor rapidez. Si estamos optimizando el sitio en busca de mejorar el tiempo de carga, la compresin
con GZIP ser una de las ms importantes opciones que tendremos a nuestra disposicin y podremos configurarla
en pocos minutos.
Soporte en todos los navegadores actuales: hoy en da podemos estar tranquilos con la compatibilidad de la
compresin con GZIP, puesto que todos los navegadores actuales la implementan.

En realidad, comprimir los archivos con GZIP siempre nos trae ventajas interesantes que harn que nuestro sitio web
funcione ms deprisa, por lo que resultar positivo en cualquier caso. El nico marco que podra dar problemas es que el
navegador que est utilizando el visitante no acepte compresin en las pginas, pero realmente en el panorama actual de
navegadores eso es poco probable. Por tanto, a no ser que tu sitio web deba ser compatible con, por ejemplo, la versin 3
de Internet Explorer, puedes utilizarla sin problemas.

De cualquier forma, nuestro servidor puede enviar los archivos comprimidos slo a los navegadores que soporten ese
formato. Por lo que no debera preocuparnos ni tan siquiera esa posibilidad de un navegador no compatible.

Sitios web populares como Yahoo.com o Google comprimen las pginas con GZIP antes de enviarlas al cliente web, por lo
que resulta claro que nosotros tambin debemos aprovechar esa posibilidad de optimizacin de la web. De hecho, no

desarrolloweb.com/manuales/manual-compresion-gzip.html Pgina 3
 Optimizacin de un sitio web con compresin GZIP

hacerlo, significa que estamos perdiendo una oportunidad muy buena para hacer que nuestro sitio sea ms rpido.

Por poner un par de ejemplos, la portada de Yahoo.com en este momento ocupa 150KB, pero como se enva comprimida,
en realidad slo se transfieren 30 KB. DesarrolloWeb.com, el sitio donde estamos publicando estas informaciones, ocupa
en su home page 78 KB y al enviarse comprimida la pgina por GZIP en realidad slo se transfieren 18 KB. Esto quiere
decir que estamos ahorrando ms de un 75% de la transferencia que en principio sera necesaria si no lo
comprimisemos.

En el Manual de compresin web con GZIP estamos publicando diversos artculos en los que mostraremos ms detalles
sobre este modo de optimizar pginas web, as como tutoriales para configurar nuestro servidor web de varias maneras
distintas.

En el prximo artculo veremos cmo funciona la compresin GZIP en las comunicaciones entre cliente y servidor web.

Por Miguel Angel Alvarez

0.2.- Cmo funciona la compresin GZIP / Deflate

La compresin de una web es un proceso transparente para el usuario, pero es bueno que
conozcamos un poco sobre cmo se realiza internamente en las comunicaciones HTTP.

En el anterior artculo mostramos algunos detalles interesantes sobre la compresin GZIP, sobre cmo funciona y cules
son las ventajas de este modo de optimizacin de las pginas web. Ahora vamos a continuar con la segunda entrega del
Manual de Compresin GZIP, explicando cmo funciona en la prctica este sistema.

Para poder entender la compresin por GZIP, u otros mtodos de comprimir como Deflate, tenemos que conocer un poco
sobre las comunicaciones por HTTP, que es el protocolo que se utiliza para el acceso al web. Como sabemos, toda
comunicacin entre el cliente y servidor web responde a un mismo esquema, que es justamente ese protocolo, o modo
de operar, definido para las comunicaciones entre clientes y servidores web.

De una manera muy esquemtica, estos son los pasos que se realizan en una comunicacin HTTP entre el servidor web y
el navegador:

1. El cliente web (navegador) solicita una pgina

2. El servidor recibe la comunicacin, comprueba si existe el archivo solicitado
3. El servidor enva el archivo
4. El cliente lo muestra

Para implementar este protocolo, en la prctica, los sistemas cliente y servidor se envan diversas informaciones de
control, en las cabeceras HTTP de la solicitud y la respuesta. En las cabeceras del HTTP, tanto en la solicitud como en la
respuesta, se aloja mucha informacin para control y especificacin de las comunicaciones, aunque en realidad ahora
slo nos interesan los datos enviados para definir si hay o no compresin.

Cuando el cliente web solicita una pgina, en el paso 1), enva en las cabeceras del HTTP un cdigo de control para decir
si acepta o no envo de los archivos comprimidos y qu formatos permite.

En concreto el cliente que solicit la pgina enviar una variable llamada "accept-encoding" que tendr como valor los
formatos de compresin que admite ese navegador. Actualmente todos los navegadores modernos aceptan compresin
con GZIP y Deflate, por lo que en las cabeceras del HTTP de la solicitud tendremos el siguiente cdigo de control:

Accept-Encoding: gzip,deflate

Eso quiere decir que el navegador acepta los formatos de compresin GZIP y Deflate. El servidor que recibe esa cabecera,

desarrolloweb.com/manuales/manual-compresion-gzip.html Pgina 4
 Optimizacin de un sitio web con compresin GZIP

podr entonces enviar los archivos solicitados al cliente en formato comprimido, con la certeza de que el cliente los podr
procesar perfectamente. Sin embargo, dependiendo de cmo se configure el servidor, los archivos se podrn enviar
comprimidos o no.

El servidor web tambin enva en las cabeceras de las comunicaciones HTTP una variable para informar si finalmente se
comprimieron o no los archivos de respuesta y, en el caso de que se hayan comprimido, el formato con el que se
codificaron.

Content-Encoding: gzip

En esa variable, el servidor web est indicando que la respuesta enviada est en formato comprimido con GZIP.

Nota: Para examinar las cabeceras del HTTP, de modo que cualquier persona pueda buscar las variables donde se
enva notificacin sobre la compresin o no de los archivos, podemos utilizar alguna herramienta como HTTP Live
Headers.
Para saber si un servidor web est enviando la respuesta comprimida, o no, podemos acceder a la FAQ: Cmo saber
si una pgina est comprimida con GZIP.

Existen diversas maneras de configurar nuestro sitio web para que las pginas se enven comprimidas, as como otros
archivos externos tambin. Nosotros vamos a hacer diversas prcticas en este sentido, comenzando con las explicaciones
sobre cmo configurar el servidor para que las pginas PHP se enven comprimidas.

Por Miguel Angel Alvarez

0.3.- Cmo comprimir con GZIP pginas PHP

Optimizar la descarga de una pgina PHP por medio de la compresin GZIP. Enviar el cdigo de la
pgina comprimido al cliente.

La compresin por GZIP o Deflate es una buena tcnica para liberar de peso, en KB, a las pginas web. No resulta nada
complicada si sabemos cmo configurarla y las ventajas son muy representativas. En los anteriores artculos del
Manual de Optimizacin con GZIP ya hemos explicado bien en qu consiste y cules son las ventajas de utilizar estos
mtodos de compresin.

Depende de nosotros, o de la configuracin de nuestro servidor web, que se enven o no los archivos comprimidos a los
clientes que lo solicitan, as que un primer paso para cualquier persona interesada en optimizar su web sera comprobar
si las pginas de su sitio web se estn enviando comprimidas .

En este artculo veremos una de las primeras configuraciones que podemos hacer con suma facilidad y en minutos sobre
nuestro sitio web, para que las pginas PHP de nuestro sitio se enven comprimidas. Se trata de la edicin del archivo
.htaccess para configurar Apache y hacer que los archivos PHP se compriman con GZIP antes de enviarse al cliente.

Nota: Claro que estas notas sern slo tiles para sitios con programacin PHP que corran sobre el servidor web
Apache, pues los archivos htaccess son ficheros de texto que sirven para configurar Apache. Puedes ver la FAQ
Qu es HTACCESS, donde encontrars algunas explicaciones bsicas sobre ese archivo y referencias para su
configuracin.

Cdigo htaccess para comprimir las pginas PHP

Ahora veamos un sencillo cdigo fuente que podemos utilizar para configurar Apache, de modo que los archivos PHP se
enven comprimidos. Es decir, que el cdigo HTML de la pgina, generado despus del procesamiento de los scripts PHP,

desarrolloweb.com/manuales/manual-compresion-gzip.html Pgina 5
 Optimizacin de un sitio web con compresin GZIP

se comprima en lnea antes de enviarse al cliente que lo solicit.

Esto se coloca en un archivo htaccess en nuestro servidor, osea, un fichero de texto llamado ".htaccess", donde
colocamos el cdigo necesario para configurar Apache.

Nota: Por si no se sabe, los archivos htaccess tienen siempre el mombre ".htaccess". En Linux los archivos cuyo
nombre comienza con punto "." quiere decir que son ocultos. As pues el htaccess es un archivo que resulta oculto
dentro de Linux, pero no en Windows. En los .htaccess colocamos cualquier configuracin para el servidor Apache, no
slo las configuraciones para comprimir los archivos, tambin para hacer redirecciones, bloquear acceso a ficheros,
etc etc.

Como los .htaccess sirven para configurar un directorio y todos los subdirectorios de aquel donde hemos colocado el
archivo, el cdigo siguiente lo pondremos en un archivo .htaccess que tendremos en la home del dominio (directorio raz
de publicacin de nuestro sitio web), de modo que afecte al directorio principal del dominio y todos los subdirectorios que
cuelguen de l.

php_flag zlib.output_compression On
php_value zlib.output_compression_level 2

La primera lnea le indica que se tiene que activar la compresin GZIP para los archivos PHP. La segunda lnea indica el
nivel de compresin del archivo (cuanto mayor sea el nivel, de 1 al 10) mayor ser la compresin, pero tambin requerir
ms tiempo de procesamiento el comprimir los archivos antes de enviarlos. Con una compresin a nivel 2 ya se comprime
bastante y requiere menos tiempo de proceso que una compresin a nivel superior.

En siguientes artculos aprenderemos a comprimir no slo las Pginas PHP enviadas por Apache, sino tambin otros tipos
de archivo susceptibles de ser comprimidos. Puedes continuar la lectura a partir del artculo donde explicamos cmo
comprimir archivos JS, CSS y dems.

Por Miguel Angel Alvarez

0.4.- Comprimir con GZIP archivos JS (Javascript)

y CSS
Por qu nos interesa comprimir con GZIP los archivos de cdigo fuente Javascript, con extensin .js, o
las hojas de estilos .css, y cmo podemos configurar nuestro servidor para ello.

Estamos haciendo un Manual sobre las ventajas y mtodos para comprimir con GZIP / Deflate los archivos de una web.
Hasta ahora hemos conocido las ventajas de comprimir los archivos y un primer mtodo para comprimir el cdigo de las
pginas PHP enviado al navegador. Sin embargo, la idea de la compresin debemos extenderla tambin a otros archivos
de texto y no slo al cdigo HTML de las pginas web y cuando me refiero a archivos de texto, no slo estoy hablando de
los .txt, sino cualquier cdigo del sitio web que est basado en texto, que se enve al navegador para interpretar y
renderizar la pgina.

El cdigo de la pgina, como sabemos, est compuesto por varios elementos, como el propio HTML del documento,
imgenes, hojas de estilo, archivos Javascript, etc. Las imgenes en realidad ya est comprimidas, puesto que los
formatos usados en pginas web, como GIF, JPG o PNG, ya tienen la compresin del propio formato grfico. No obstante,
ficheros como las hojas de estilos (extensin .css) o los cdigos Javascript (normalmente con extensin .js) se crean como
archivos de texto plano, que no tiene ninguna compresin. Por ello, son ideales para enviarse comprimidos al navegador.

Para que esto quede bien claro, pensemos en el cdigo de CSS de este mismo sitio, DesarrolloWeb.com. En el momento

desarrolloweb.com/manuales/manual-compresion-gzip.html Pgina 6
 Optimizacin de un sitio web con compresin GZIP

de escribir este artculo tenemos un archivo de CSS que ocupa 33.4 KB. Pero ese archivo se enva comprimido con GZIP,
por lo que realmente lo que se est enviando al navegador es un archivo con 7.2 KB. La diferencia es, cuando menos,
relevante. Lo cierto es que el CSS se transfiere una vez, en la primera visita del usuario, pero luego en pginas siguientes
que pueda ver, o en visitas sucesivas, ese CSS se toma desde la Cach del navegador, as que ese ahorro de
transferencia por enviar el archivo comprimido slo se nota en la primera pgina que el usuario visita, pero aun as
ayudar a reducir considerablemente la primera carga y por tanto ser positivo.

Los archivos Javascript tambin se pueden comprimir para obtener ventajas similares, igual que los CSS podemos hacer
que pesen entre un 60% y un 90% menos que los archivos no comprimidos. Sobre todo, pensando que los sitios ms
modernos utilizan bastante cdigo Javascript, para hacer lo que se llaman aplicaciones enriquecidas en el cliente, la
compresin con GZIP ser fundamental para una rpida carga del sitio.

Por ejemplo, en DesarrolloWeb.com utilizamos el framework Javascript Mootools y tambin unas libreras relacionadas
llamadas Mootools More para generar interfaces de usuario avanzadas. Pero adems utilizamos una buena cantidad de
scripts Javascript creados por nosotros mismos y basados en ese framework para animar y aportar dinamismo al web. Si
sumamos todos los Javascript que utilizamos en una pgina bsica del sitio tendremos unos ahorros de transferencia
considerables, como se puede ver en la siguiente tabla:

Archivo JSTamao sin comprimirTamao comprimidoAhorro en KB mootools-1.2.3-core-yc.js66.7 KB20.8 KB45.9

KB mootools-1.2.3.1-more.js6.3 KB2.5 KB3.8 KB desarrolloweb.js39.7 KB9.5 KB30.2 KB TOTAL112.7 KB32.8 KB79.9 KB

Como se puede ver, el ahorro total que obtenemos en estos tres archivos es de aproximadamente 80 KB y adems no son
los nicos ficheros .js que utilizamos en el sitio web, con lo que el ahorro en algunas pginas todava es mayor.

Si utilizamos cualquier otro framework Javascript, como el popular jQuery, el ahorro tambin ser tan representativo
como con Mootools. Por ejemplo, en la pgina de inicio de jQuery nos informan que el framework pesa 24KB "Minified and
Gzipped", pero si nosotros lo descargamos veremos que el archivo realmente ocupa 70.5KB. Lo que nos quieren decir es
que, si tenemos configurado nuestro servidor para que comprima los archivos con GZIP antes de enviarlos al cliente, el
peso real del archivo de jQuery que se enviar al cliente es de 24 KB, osea, casi un 33% del peso del fichero original (sin
comprimir).

Configurar un htaccess para comprimir archivos CSS / JS o similares

Ahora que ya sabemos bien las ventajas de enviar comprimidos los archivos de cdigo fuente del sitio web, veamos cmo
hacerlo en Apache. La manera ms cmoda y al alcance de ms personas, para comprimir los archivos JS o CSS es definir
un archivo htaccess con las directrices de configuracin de nuestro servidor.

Nota: Como hemos explicado en diversos artculos de DesarrolloWeb.com, el htaccess es un archivo llamado
".htaccess" que se coloca generalmente en la raz de publicacin de nuestro sitio web y sirve para configurar el
servidor web Apache, en ese directorio donde lo colocamos y todos sus subdirectorios.

En el archivo .htaccess, que contiene texto de configuracin para Apache, vamos a colocar varias lneas de cdigo para
solicitar a Apache que enve comprimidos los archivos de extensiones que nosotros deseemos.

Por ejemplo, con el siguiente cdigo estamos diciendo que se enve comprimidos todos los archivos que tengan
extensiones .css (todas las hojas de estilos de nuestro sitio web):

<Files *.css>
SetOutputFilter DEFLATE
</Files>

Observar el *.css para indicar los tipos de archivos a enviar comprimidos. Observar tambin que se est solicitando el uso
del mtodo DEFLATE para la compresin de los archivos.

De una manera similar podemos definir la compresin de los archivos con cdigo fuente Javascript, que tienen

desarrolloweb.com/manuales/manual-compresion-gzip.html Pgina 7
 Optimizacin de un sitio web con compresin GZIP

extensiones .js:

<Files *.js>
SetOutputFilter DEFLATE
</Files>

De este modo, podemos definir cualquier extensin de archivo y Apache se encargar de enviarlo comprimido de manera
transparente para nosotros desarrolladores y tambin para los visitantes. Es decir, el archivo est comprimido sin que
tengamos que hacer nada ms en la etapa de desarrollo y por tanto al navegador se le enviar con un peso menor. El
cliente web recibir ese archivo comprimido y lo descomprimir internamente, sin que el visitante se entere de nada.

En el siguiente artculo seguiremos ofreciendo consejos y mtodos de compresin de los contenidos de nuestra web y en
concreto veremos cmo definir un htaccess para comprimir de una vez todos los tipos de archivos menos las imgenes.

Por Miguel Angel Alvarez

0.5.- .htaccess para comprimir con GZIP todo

menos las imgenes
Cmo podemos crear un archivo .htaccess para configurar Apache y pedirle que enve todos los
archivos, menos las imgenes, comprimidas con GZIP.

Despus de haber ledo el Manual de compresin con GZIP de un sitio web ya debemos tener una idea sobre las ventajas
de comprimir las pginas y otros recursos antes de enviarlos al navegador. Adems, hemos conocido ya diversos
mtodos de fcil configuracin para conseguir esa compresin GZIP en las pginas PHP y otros archivos externos como JS
o CSS.

En este artculo vamos a continuar explorando posibilidades de configuracin de nuestro servidor web Apache, tambin
por medio de un archivo .htaccess, que es la manera ms sencilla y al alcance de un mayor nmero de personas. En
concreto vamos a mostrar cmo definir en una sola instruccin que se compriman todos los archivos menos las
imgenes.

Quizs alguno de vosotros se pregunte Por qu no comprimimos las imgenes? Y es que realmente, como ya habamos
sealado en este manual, las imgenes ya estn comprimidas, puesto que los archivos grficos utilizados en web tienen
todos un nivel de compresin. Por lo tanto, comprimir un GIF con GZIP no tendr prcticamente mejora alguna, pues el
peso del archivo comprimido ser prcticamente el mismo que el GIF original. Adems, representar un esfuerzo para el
procesador del servidor web, que tendr que comprimir esos archivos antes de enviarlos al cliente. Al final, el rendimiento
del servidor puede verse reducido, por tener que comprimir todas las imgenes, y realmente no habremos adelantado en
nada, puesto que las imgenes ocuparn casi el mismo espacio en KB. Esto ocurre con cualquier tipo de archivo grfico,
no slo con los GIF, sino con otros utilizados para hacer webs, como JPG o PNG.

Instruccin htaccess para comprimir un tipo de medio

Existe un comando que se inserta en el cdigo de los htaccess que sirve para definir la compresin GZIP / DEFLATE. El
comando se llama AddOutputFilterByType y tenemos que indicarle luego el tipo de compresin y el tipo de medio que
deseamos comprimir.

Por ejemplo, con esta lnea de cdigo comprimiramos todos los archivos de texto plano:

AddOutputFilterByType DEFLATE text/plain

desarrolloweb.com/manuales/manual-compresion-gzip.html Pgina 8
 Optimizacin de un sitio web con compresin GZIP

Si deseamos, podemos comprimir todos los archivos HTML con esta lnea de cdigo en el htaccess.

AddOutputFilterByType DEFLATE text/html

A continuacin podemos ver una serie de lneas con distintos tipos de medios que se estn indicando para comprimir:

AddOutputFilterByType DEFLATE text/xml

AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml

Con este mtodo, Apache ser lo suficientemente inteligente para enviar los archivos comprimidos slo para los
navegadores que soportan esa optimizacin y nosotros no tenemos que hacer nada para que todo funcione
correctamente.

De entre los dos mtodos GZIP / DEFLATE podemos elegir cualquiera de ellos. Deflate es bastante rpido y compatible
con ms versiones de navegadores antiguos.

Recordar que en artculo anterior ya explicamos otro mtodo para conseguir comprimir en funcin de la extensin del
archivo. Tambin ser de utilidad en este punto conocer algn mtodo para saber si nuestra web est enviando los
archivos comprimidos.

Por Miguel Angel Alvarez

desarrolloweb.com/manuales/manual-compresion-gzip.html Pgina 9