.htaccess para comprimir con GZIP todo menos las imágenes

  • Por
  • Última actualización: 05 de marzo de 2019
  • Internet
Cómo podemos crear un archivo .htaccess para configurar Apache y pedirle que envíe todos los archivos, menos las imágenes, comprimidas con GZIP.

Después de haber leído el Manual de compresión con GZIP de un sitio web ya debemos tener una idea sobre las ventajas de comprimir las páginas y otros recursos antes de enviarlos al cliente web (el navegador del usuario). Además, hemos conocido ya diversos métodos de fácil configuración para conseguir esa compresión GZIP en las páginas PHP y otros archivos externos como JS o CSS.

En este artículo vamos a continuar explorando posibilidades de configuración de nuestro servidor web Apache, también por medio de un archivo .htaccess, que es la manera más sencilla y al alcance de un mayor número de personas. En concreto vamos a mostrar cómo definir en una sola instrucción que se compriman todos los archivos. Eso sí, nos vamos a dejar por comprimir las imágenes, que se deben de mandar tal como están almacenadas en nuestro propio servidor.

Por qué no se deben comprimir las imágenes con GZip

Quizás alguno de vosotros se pregunte ¿Por qué no comprimimos las imágenes? Y es que realmente, como ya habíamos señalado en este manual, las imágenes ya están comprimidas, puesto que generalmente todos los formatos de archivos gráficos utilizados en web tienen ya, de por sí, cierto nivel de compresión. Por lo tanto, comprimir un GIF con GZIP no tendrá prácticamente mejora alguna, pues el peso del archivo comprimido será prácticamente el mismo que el GIF original. Por supuesto, ocurre lo mismo con los jpg, png y otros.

Si, a pesar de esta recomendación, nos empeñamos en comprimir las imágenes con GZip, ese trabajo extra 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 imágenes, y realmente no habremos mejorado mucho, puesto que las imágenes ocuparán casi el mismo espacio en KB. Esto ocurre con cualquier tipo de archivo gráfico. Por lo tanto, en este artículo verás que comprimimos un montón de tipos de ficheros, pero no los GIF, JPG o PNG.

Dicho sea de paso, el único archivo gráfico que sí podría ser conveniente comprimir es el .ico, ya que es un formato que en principio no tiene compresión.

Instrucción htaccess para comprimir un tipo de medio

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

Por ejemplo, con esta línea de código comprimiríamos todos los archivos de texto plano:

AddOutputFilterByType DEFLATE text/plain

Si deseamos, podemos comprimir todos los archivos HTML con esta línea de código en el htaccess.

AddOutputFilterByType DEFLATE text/html

A continuación podemos ver una serie de líneas con distintos tipos de medios que se están 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
AddOutputFilterByType DEFLATE image/x-icon

Con este método, Apache será lo suficientemente inteligente para enviar los archivos comprimidos sólo para los navegadores que soportan esa optimización y nosotros no tenemos que hacer nada para que todo funcione correctamente.

De entre los dos métodos GZIP / DEFLATE podemos elegir cualquiera de ellos. Deflate es bastante rápido y compatible con más versiones de navegadores antiguos.

Añadir tipos de archivos desconocidos por Apache

Puede ocurrir que algunos archivos como los .ico Apache no los reconozca (este formato se usa en el archivo favicon.ico). Por ello, aunque estemos indicando "AddOutputFilterByType DEFLATE image/x-icon", podría darse el caso que Apache no esté comprimiendo los .ico.

Ante un problema como este podemos añadir los tipos de archivo que Apache no conozca con la instrucción "AddType". Según tengo entendido esto no es necesario de configurar en la mayoría de los casos, pero para el caso concreto de los .ico sí me ha hecho falta en mi servidor web.

Indico a continuación un código de configuración de la compresión gzip que estoy usando en uno de mis proyectos, donde se indica el addType para los .ico. Además, también he incluido la compresión de otro de los formatos de archivos que ya en 2019 deberíamos usar todos en los sitios web, los SVG.

# GZIPEADO DE ASSETS
AddType image/x-icon .ico
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/x-js
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE image/x-icon

Conclusión sobre la configuración .htaccess para gzip

Puedes realizar estas configuraciones en el archivo .htaccess en cuestión de minutos (el .htaccess del directorio raíz de publicación de tu dominio). Una vez actualizado el fichero, Apache comenzará a comprimir los assets que se deberían enviar "Gzipeados". Con ello obtendremos una sensible optimización de la performance del sitio web.

Recordar que en artículo anterior ya explicamos otro método para conseguir comprimir en función de la extensión del archivo. También será de utilidad en este punto conocer algún método para saber si nuestra web está enviando los archivos comprimidos.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

leifsk8er

19/8/2010
Forma corta...
Otra forma mas reducida de referirse a todos los ficheros:

<FilesMatch ".(js|css|html|htm|php|xml)$">
SetOutputFilter DEFLATE
</FilesMatch>

jose hernandez

27/9/2010
más opciones para .htaccess
También podemos usar el .htaccess para más cosas, como por ejemplo redireccionar cualquier página de HTTP a HTTPS.

Este blog lo explica en detalle (ojo, inglés):

http://jaumemussons.edertone.com/2010/09/27/force-a-web-page-to-load-throught-https-secure-protocol/

alberto

05/10/2012
Tengo progremas con el .htaccess para comprimir con GZIP
Antiguamente seguí estas instrucciones y todo funcionaba, lo comprimía perfectamente.
Pero tuve un problema con la web y he tenido que reacerla, y ahora pongo mi .htaccess configurado como decis y no me sale, no lo entiendo.
Os lo copio:
<ifmodule mod_expires.c>
ExpiresActive On
ExpiresDefault A604800
<filesmatch ".(jpg|JPG|gif|GIF|png|css|ico|js)$">
ExpiresDefault "access plus 7 day"
</filesmatch>
</ifmodule>
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
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
<Files *.css>
SetOutputFilter DEFLATE
</Files>
<Files *.js>
SetOutputFilter DEFLATE
</Files>
php_flag zlib.output_compression On
php_value zlib.output_compression_level 2
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

# END WordPress

Gracias de antemano.