Aprenda a acelerar los sitios web con Nginx y el módulo Gzip

Incluso en un momento en el que se dispone de velocidades de Internet significativas en todo el mundo, todos los esfuerzos para optimizar los tiempos de carga del sitio web son bienvenidos con los brazos abiertos.

En este artículo analizaremos un método para aumentar la velocidad de transferencia al reducir el tamaño de los archivos mediante la compresión. Este enfoque aporta un beneficio adicional, ya que también reduce la cantidad de ancho de banda utilizado en el proceso y lo hace más económico para el propietario del sitio web que lo paga.

Para lograr el objetivo indicado en el párrafo anterior, usaremos Nginx y su módulo gzip incorporado en este artículo. Como dice la documentación oficial, este módulo es un filtro que comprime las respuestas utilizando el conocido método de compresión gzip. Esto asegura que el tamaño de los datos transmitidos se comprimirá a la mitad o incluso más.

Para cuando llegue al final de esta publicación, tendrá otra razón más para considerar el uso de Nginx para atender sus sitios web y aplicaciones.

Instalación del servidor web Nginx

Nginx está disponible para todas las principales distribuciones modernas. Aunque usaremos una máquina virtual CentOS 7 (IP 192.168.0.29) para este artículo.

Las instrucciones proporcionadas a continuación también funcionarán con pequeñas modificaciones (si las hay) en otras distribuciones. Se asume que su VM es una instalación nueva; de lo contrario, deberá asegurarse de que no haya ningún otro servidor web (como Apache) ejecutándose en su máquina.

Para instalar Nginx junto con sus dependencias requeridas, use el siguiente comando:

----------- On CentOS/RHEL 7 and Fedora 22-24 ----------- 
# yum update && yum install nginx

----------- On Debian and Ubuntu Distributions ----------- 
# apt update && apt install nginx

Para verificar que la instalación se haya completado con éxito y que Nginx pueda servir archivos, inicie el servidor web:

# systemctl start nginx
# systemctl enable nginx

y luego abra un navegador web y vaya a http://192.168.0.29 (no olvide reemplazar 192.168.0.29 con la dirección IP o el nombre de host de su servidor). Debería ver la página de bienvenida:

Debemos tener en cuenta que algunos tipos de archivos se pueden comprimir mejor que otros. Los archivos de texto sin formato (como HTML, CSS y JavaScript) se comprimen muy bien, mientras que otros (archivos .iso, tarballs e imágenes, por nombrar algunos) no lo hacen, ya que ya están comprimidos por naturaleza.

Por lo tanto, es de esperar que la combinación de Nginx y gzip nos permita aumentar las velocidades de transferencia del primero, mientras que el segundo puede mostrar poca o ninguna mejora.

También es importante tener en cuenta que cuando el módulo gzip está habilitado, los archivos HTML SIEMPRE están comprimidos, pero otros tipos de archivos que se encuentran comúnmente en sitios web y aplicaciones (a saber, CSS y JavaScript) no lo están.

Prueba de las velocidades del sitio web de Nginx SIN el módulo gzip

Para comenzar, descarguemos una plantilla Bootstrap completa, una excelente combinación de archivos HTML, CSS y JavaScript.

Después de descargar el archivo comprimido, lo descomprimiremos en el directorio raíz de nuestro bloque de servidor (recuerde que este es el equivalente en Nginx de la directiva DocumentRoot en una declaración de host virtual de Apache):

# cd /var/www/html
# wget https://github.com/BlackrockDigital/startbootstrap-creative/archive/gh-pages.zip
# unzip -a gh-pages.zip
# mv startbootstrap-creative-gh-pages tecmint

Debe tener la siguiente estructura de directorio dentro de /var/www/html/tecmint :

# ls -l /var/www/html/tecmint

Ahora vaya a http://192.168.0.29/tecmint y asegúrese de que la página se cargue correctamente. La mayoría de los navegadores modernos incluyen un conjunto de herramientas de desarrollo. En Firefox, puede abrirlo a través del menú Herramientas → Desarrollador web .

Estamos particularmente interesados en el submenú Network , que nos permitirá monitorear todas las solicitudes de red que ocurren entre nuestra computadora y la red local e Internet.

Un atajo para abrir el menú Red en las herramientas de desarrollador es Ctrl + Shift + Q . Presione esa combinación de teclas o use la barra de menú para abrirla.

Dado que estamos interesados en examinar la transferencia de archivos HTML, CSS y JavaScript, haga clic en los botones en la parte inferior y actualice la página. En la pantalla principal verá el detalle de la transferencia de todos los archivos HTML, CSS y JavaScript:

A la derecha de la columna Tamaño (que muestra los tamaños de los archivos individuales) verá los tiempos de transferencia individuales. También puede hacer doble clic en cualquier archivo para ver más detalles en la pestaña Tiempos .

Asegúrese de tomar notas de los tiempos que se muestran en la imagen de arriba para que pueda compararlos con la misma transferencia una vez que hayamos habilitado el módulo gzip.

Habilitar y configurar el módulo gzip en Nginx

Para habilitar y configurar el módulo gzip, abra /etc/nginx/nginx.conf , ubique el bloque del servidor principal como se muestra en la imagen de abajo y agregue o modifique las siguientes líneas (no olvide el punto y coma al final o Nginx devolverá un mensaje de error al reiniciar más tarde)

root     	/var/www/html;
gzip on;
gzip_types text/plain image/jpeg image/png text/css text/javascript;

La directiva gzip enciende o apaga el módulo gzip, mientras que gzip_types se usa para listar todos los tipos MIME que el módulo debe manejar.

Para obtener más información sobre los tipos MIME y ver los tipos disponibles, vaya a Basics_of_HTTP_MIME_types.

Prueba de las velocidades del sitio web de Nginx con el módulo de compresión Gzip

Una vez que hayamos completado los pasos anteriores, reiniciemos Nginx y recarguemos la página presionando Ctrl + F5 (nuevamente, esto funciona en Firefox, así que si estás usando un navegador diferente consulta primero la documentación correspondiente) para anular el caché y observemos los tiempos de transferencia:

# systemctl restart nginx

La pestaña de solicitudes de red muestra algunas mejoras significativas. Compare los tiempos para verlo usted mismo, teniendo en cuenta que son las transferencias entre nuestra computadora y 192.168.0.29 (las transferencias entre los servidores de Google y las CDN están fuera de nuestro alcance):

Por ejemplo, consideremos los siguientes ejemplos de transferencia de archivos antes/después de habilitar gzip. Los tiempos se dan en milisegundos:

index.html (representado por /tecmint/ en la parte superior de la lista): 15/4
Creative.min.css : 18/8
jquery.min.js : 17/7

¿No te hace amar aún más Nginx? En lo que a mí respecta, ¡lo hace!

Resumen

En este artículo hemos demostrado que puede utilizar el módulo gzip de Nginx para acelerar las transferencias de archivos. La documentación oficial del módulo gzip enumera otras directivas de configuración que es posible que desee consultar.

Además, el sitio web de la Red de desarrolladores de Mozilla tiene una entrada sobre el Monitor de red que explica cómo usar esta herramienta para comprender lo que sucede detrás de escena en una solicitud de red.

Como siempre, no dude en utilizar el formulario de comentarios a continuación si tiene alguna pregunta sobre este artículo. ¡Siempre estamos deseando tener noticias tuyas!