GZIP – Comprimir tu página y el CSS

Hoy en día es sumamente importante que nuestro sitio cargue lo más rápido posible, tanto del punto de vista SEO como para que los usuarios tengan una buena experiencia.

Cuando alguien visita tu página, una petición es enviada a tu servidor para que entregue los archivos necesarios para que esta cargue. Entre más grandes sean estos archivos, más tiempo se tardará en cargar la página. Comprimir tu página y el CSS antes de enviarlo al navegador es una excelente forma de reducir significativamente el tiempo de carga al hacer que los archivos sean más pequeños, para eso tenemos la herramienta de compresión GZIP.

En pocas palabras, GZIP encuentra líneas similares dentro de un texto y las reemplaza temporalmente, esto hace que el archivo sea más pequeño. La compresión por GZIP beneficia mucho a nuestro sitio gracias al ambiente HTML y CSS que lo archivos usan y que repiten muchos textos y espacios. En los resultados finales, la compresión por GZIP puede reducir el tamaño de carga de tu página del 60 al 70%.

ADVERTENCIA: Gzip acelera tu sitio y reduce el tiempo de carga, pero como consecuencia usa más CPU. Así que al habilitarlo asegura de que el uso de CPU este estable.

¿Qué necesitas?

Antes de comenzar con el tutorial debes de tener a la mano lo siguiente:

Acceso a tu archivo .htaccess
Acceso a tu cPanel – e-Panel (opcional)

1.- Habilitar la compresión gzip

Puedes habilitar la compresión GZIP en tu sitio usando tanto mod_gzip como mod_deflate. La compresión usando mod_deflate generalmente se recomienda para tener una mejor conversión de algoritmo y cuando el modulo es compatible con una versión más reciente de apache.

Opción 1: Editar el archivo .htaccess

La compresión gzip vía mod_deflate puede ser habilitada al implementar el siguiente código dentro de tu archivo .htaccess, el cual generalmente se encuentra en la carpeta raíz de tu hosting (public_html) o en el directorio donde instalaste tu sitio.

Agrega el siguiente código:

<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/opentype

# For Older Browsers Which Can't Handle Compression
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
</IfModule>

En caso de que tu servidor no soporte mod_deflate, entonces puedes probar con mod_gzip:

<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_include mime ^text/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_include handler ^cgi-script$
</ifModule>

Una vez que guardes los cambios en el archivo, tu compresión debería de estar habilitada.

Opción 2: Usar plugins en tu CMS

Los usuarios de varios CMS pueden usar plugins para hacerlo, en el caso de los usuarios de WordPress pueden hacerlo usando plugins como Gzip Ninja Speed Compression.

Mientras que los usuarios de Joomla pueden hacerlo en Sistema > Configuración Global > Servidor.

Opción 3: Usando el cPanel

Si tienes acceso al cPanel, entonces puedes habilitar GZIP para todos tus sitios desde tu cuenta de hosting usando la opción Optimizar Sitio Web o Optimize Website. Esta es muy sencilla de usar y conforme vayas usando la herramienta notaras que no tiene ninguna dificultad.

Comprobar la compresión Gzip

Hay algunas web y herramientas que sirven para medir el tiempo de carga de tu página y saber si la compresión por GZIP está habilitada. Nosotros recomendamos usar páginas como GTMetrix y WebPageTest.