Cómo comprimir recursos para mejorar tu SEO

Cuando intentas cargar una página web, hay algunas cosas que suceden:

1. Tu navegador enví­a una solicitud al servidor del sitio.
2. El servidor encuentra la página y la enví­a a tu navegador.
3. Tu navegador descarga la página y la muestra en tu pantalla.

Dado que los usuarios web son impacientes, reducir el tiempo en que cada uno de estos pasos sucede te beneficiará en experiencia de usuario y rendimiento SEO.

Lo que mayores problemas causa es cuando el tamaño de tu página - con todas sus imágenes, CSS, JavaScript y otros archivos - comienza a aumentar tanto que enlentece el tercer paso.

Afortunadamente, existe una forma en que puedes configurar los archivos en tu servidor para reducir sus tamaños hasta en un 90%, lo cual significa que le llevará menos tiempo al navegador comenzar a mostrar la página a un usuario.

Esto se puede hacer al habilitar la compresión en tu servidor y enviar versiones comprimidas de archivos a los navegadores de los usuarios. Los archivos comprimidos son mucho más pequeños en tamaño que la versión normal, por lo cual la transferencia lleva mucho menos tiempo.

Los navegadores de los usuarios pueden descargar, descomprimir y mostrar estos archivos rápidamente.

En esta guí­a veremos:

• Qué es la compresión
• Por qué importa la compresión en SEO
• Cómo habilitar la compresión
• Cómo chequear la compresión

Qué es la compresión

La compresión es el proceso mediante el cual los archivos en un servidor son codificados para que ocupen menos espacio, haciendo más fácil y rápido su enví­o. En un nivel técnico, la compresión funciona escaneando un archivo, encontrando datos repetitivos y reemplazando duplicados con un identificador único que ocupa menos espacio que los datos originales. Cuando un archivo es descomprimido, esos identificadores únicos son reemplazados con datos originales.

Existen muchos formatos diferentes de compresión, pero no todos los navegadores ofrecerán compatibilidad con todos ellos. Excepto por uno: Gzip.

Todos los navegadores modernos son capaces de recibir automáticamente y procesar archivos comprimidos que usen el formato Gzip, por lo cual no debes preocuparte por usuarios incapaces de cargar tus archivos.

Por qué importa la compresión en SEO

La compresión importa en SEO porque la velocidad importa en SEO. A los usuarios web no les gusta esperar que las páginas carguen (como ya hemos discutido), por lo cual Google no está realmente interesado en recomendar páginas lentas a sus usuarios.

Así­, qué tan rápido puede Google conectar con tu sitio, acceder al contenido y la información y brindársela al usuario, tiene un impacto directo en tu posicionamiento.

Cómo habilitar la compresión

Cómo habilitas la compresión de tu servidor dependerá de tu servidor. Aquí­, veremos las formas más comunes de habilitar la compresión para diferentes servidores.

Habilitar compresión ví­a .htaccess

Para la mayorí­a de las personas, habilitar compresión significa agregar código al .htaccess en su servidor. Si tienes WordPress, puedes usar un plugin para editar este archivo. De lo contrario, puedes usar tu gestor de archivos para esto.

Agrega este código a tu archivo .htaccess para habilitar la compresión 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 handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>

Luego guarda tu archivo y actualiza tu página.

Habilitar compresión en servidores Apache

El método de más arriba solí­a funcionar con los servidores Apache. Sin embargo, los nuevos servidores Apache ahora usan un nuevo método llamado deflate.

Para usarlo, borra el código que has agregado arriba y reemplázalo por este:

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

El beneficio de usar deflate en vez de gzip es que deflate funciona automáticamente con servidores Apache, mientras que gzip debe ser instalado primero. Sin embargo, gzip comprime los archivos más que deflate, por lo cual si tienes muchas imágenes o archivos más grandes, probablemente valga la pena.

Habilitar compresión en servidores NGINX

Para habilitar la compresión Gzip en un servidor NGINX, abre el archivo de configuración principal de NGINX en tu editor de texto preferido. Encuentra la sección de configuraciones Gzip en el archivo. Esta sección deberí­a verse así­:

##
# undefined Settings
#
#
gzip on;
gzip_disable "msie6";

# gzip_vary on;
# gzip_proxied any;
# gzip_comp_level 6;
# gzip_buffers 16 8k;
# gzip_http_version 1.1;
# gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;

Por defecto, la compresión Gzip está habilitada (puedes ver esto en la directiva gzip on). Sin embargo, verás que muchas de las configuraciones han sido comentadas con un # al principio de la lí­nea. Para optimizar tu compresión Gzip, querrás hacer algunos cambios.

A este código agregaremos:

• La lí­nea gzip_min_length 256;. Esto le dice a NGINX que no comprima ningún archivo de menos de 256 bytes. Los archivos así­ de pequeños no se beneficiarán de Gzip.
• A la lí­nea gzip_types abajo del todo, agrega tipos de archivo adicionales: application/vnd.ms-fontobject application/x-font-ttf font/opentype image/svg+xml image/x-icon. Esto permitirá la compresión de fuentes web, iconos e imágenes SVG.

Una vez hecho esto, tus configuraciones Gzip deberí­an verse algo así­:

##
# undefined Settings
#
#
gzip on;
gzip_disable "msie6";

gzip_vary on;
gzip_proxied any;
gzip_comp_level 6;
gzip_buffers 16 8k;
gzip_http_version 1.1;
gzip_min_length 256;
gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript application/vnd.ms-fontobject application/x-font-ttf font/opentype image/svg+xml image/x-icon;

Ahora guarda y cierra este archivo. Habilita todos tus cambios reiniciando NGINX.

Testea la compresión

Una vez que hayas agregado la pieza de código correspondiente a tu servidor, deberí­as testearlo. Puedes realizar un informe WooRank para chequear si tus archivos están comprimidos o no.

También puedes usar la herramienta PageSpeed Insights de Google para buscar archivos no comprimidos.