Aprenda cómo acelerar los sitios web utilizando Nginx y el módulo Gzip


Incluso en un momento en que las velocidades importantes de Internet están disponibles en todo el mundo, todo esfuerzo para optimizar los tiempos de carga del sitio web es bienvenido con los brazos abiertos.

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

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

Cuando llegue al final de esta publicación, tendrá otra razón más para considerar el uso de Nginx para servir 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 funcionarán también con pequeñas modificaciones (si las hay) en otras distribuciones. Se supone que su VM es una instalación nueva; de lo contrario, deberá asegurarse de que no haya otros servidores 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 correctamente 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ías 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 los archivos HTML , CSS y JavaScript ) se comprimen muy bien mientras que otros ( .iso los archivos, archivos comprimidos y imágenes , por nombrar algunos) no, 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 este último puede mostrar poca o ninguna mejora todos.

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

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

Para comenzar, descarguemos una plantilla completa Bootstrap , una gran 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 servidores (recuerde que esto es el Nginx equivalente a 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. El navegador más moderno incluye un conjunto de herramientas para desarrolladores. 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 se producen entre nuestra computadora y la red local e Internet.

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

Ya 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á los detalles 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 archivo 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 Timings .

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

Habilitando y configurando 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 a continuación, y agregue o modifique lo siguiente líneas (¡no olvide el punto y coma al final o Nginx devolverá un mensaje de error mientras se reinicia más tarde!)

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

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

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

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

Una vez que hayamos completado los pasos anteriores, reinicie Nginx y vuelva a cargar la página presionando Ctrl + F5 (nuevamente, esto funciona en Firefox , por lo que Si está utilizando un navegador diferente, consulte primero la documentación correspondiente) para anular la memoria caché y observemos los tiempos de transferencia:

# systemctl restart nginx

La pestaña de solicitudes de red muestra algunas mejoras significativas. Compare los horarios para ver por sí mismo, teniendo en cuenta que son las transferencias entre nuestra computadora y 192.168.0.29 (las transferencias entre servidores de Google y 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:

  1. index.html (represented by /tecmint/ at the top of the list): 15 / 4
  2. Creative.min.css: 18 / 8
  3. jquery.min.js: 17 / 7

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

Resumen

En este artículo, hemos demostrado que puede usar el módulo gzip de Nginx para acelerar las transferencias de archivos. La documentación oficial para el módulo gzip de muestra una lista de otras directivas de configuración.

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 este herramienta para entender lo que está sucediendo 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 ansiosos por saber de usted!