Activando HTTP/2 en Nginx

Es la era de la web y cada milisegundo cuenta. Paradójicamente las conexiones son más rápidas, pero aun así, los usuarios esperan que las páginas se carguen rápidamente y respondan de manera eficiente a sus acciones.

Para lograrlo, la evolución de los protocolos de comunicación es fundamental y es aquí donde entra en juego HTTP/2, la versión más reciente del protocolo HTTP, que ha revolucionado la forma en que los servidores web como Nginx entregan contenido a los navegadores.

Hablo específicamente de Nginx porque en este artículo, te mostrare qué es HTTP/2, sus ventajas y por qué deberías considerar activarlo, pero más importante como aplicarlo en tu servidor de Nginx (te deberia funcionar sin problemas si tienes Ubuntu 20+ o Debian 12+).

¿Qué es HTTP/2 y por qué es importante?

HTTP/2 es la evolución natural del protocolo HTTP/1.1, que ha sido el pilar de la comunicación web durante casi dos décadas. Si bien HTTP/1.1 funcionó bien en su momento, pero las demandas actuales de velocidad y eficiencia en la transferencia de datos superan sus capacidades y es aquí donde HTTP/2 entra en acción.

HTTP/2 fue publicado como un estándar en mayo de 2015 por el Grupo de Trabajo de Ingeniería de Internet (IETF, por sus siglas en inglés). Su objetivo principal era abordar las limitaciones de HTTP/1.1, que había estado en uso durante más de una década.

Ventajas de HTTP/2

HTTP/2 introduce varias mejoras cruciales que tienen un impacto directo en el rendimiento de un sitio web:

1. Multiplexación: La multiplexación permite que varias solicitudes y respuestas se realicen simultáneamente en una única conexión TCP. Esto significa que las partes de una página web se pueden descargar al mismo tiempo, en lugar de esperar a que una solicitud se complete antes de comenzar otra.

Imagina una página web con muchos recursos, como imágenes, CSS y JavaScript. Con HTTP/1.1, cada recurso se descargaba de uno en uno, lo que aumentaba el tiempo de carga total. Con HTTP/2, todos estos recursos pueden descargarse en paralelo, lo que puede reducir significativamente el tiempo de carga de la página, a veces hasta en un 30%.

2. Compresión de Encabezados: HTTP/2 comprime los encabezados de solicitud y respuesta antes de enviarlos, lo que reduce el tamaño de los datos enviados entre el cliente y el servidor.

Supongamos que un sitio web tiene muchas solicitudes HTTP con encabezados largos. Con HTTP/1.1, estos encabezados ocuparían ancho de banda adicional y aumentarían el tiempo de carga. En cambio, HTTP/2 comprime estos encabezados, reduciendo la cantidad de datos transmitidos y acelerando la carga de la página.

3. Priorización de Recursos: HTTP/2 permite priorizar los recursos más importantes de una página, asegurando que se descarguen antes. Esto mejora la experiencia del usuario al cargar elementos críticos primero.

Supongamos que una página web tiene una imagen de alta resolución en la parte superior y algunos scripts en la parte inferior. Con HTTP/2, el servidor puede priorizar la descarga de la imagen, lo que permite que los visitantes vean el contenido principal más rápido, incluso antes de que se descarguen los scripts.

4. Server Push: Con HTTP/2, los servidores pueden enviar recursos adicionales al navegador antes de que sean solicitados por el cliente, lo que reduce la latencia y acelera la carga de la página.

En un sitio web de comercio electrónico, un usuario accede a la página de inicio. Con HTTP/2, el servidor puede "empujar" imágenes y hojas de estilo que sabe que se necesitarán en la página siguiente. Esto significa que cuando el usuario hace clic en un producto, esos recursos ya están en caché en el navegador, lo que acelera la carga de la página del producto.

5. Eficiencia en la Gestión de Conexiones: HTTP/2 resuelve problemas como el bloqueo de cabeza (head-of-line blocking) que se presentaba en HTTP/1.1, mejorando la eficiencia de las conexiones TCP.

En HTTP/1.1, si una solicitud se retrasa, puede bloquear otras solicitudes en la cola, lo que aumenta la latencia. HTTP/2 evita este problema, permitiendo que otras solicitudes continúen sin bloqueo, lo que mejora la eficiencia y reduce los tiempos de respuesta.

6. Seguridad: Aunque no es una característica exclusiva de HTTP/2, se alienta a usar conexiones seguras (HTTPS) con él, lo que mejora la seguridad de la transferencia de datos.

Al utilizar HTTPS con HTTP/2, los datos se cifran durante la transferencia, lo que protege la privacidad de los usuarios y reduce el riesgo de ataques de intermediarios.

¿Por qué activar HTTP/2 en Nginx?

Ahora, la adopción de HTTP/2 en tu servidor Nginx ofrece varias ventajas clave:

1. Mayor Velocidad: HTTP/2 acelera la carga de páginas al descargar recursos de manera más eficiente, lo que resulta en una experiencia de usuario más rápida.

2. Eficiencia de Recursos: La multiplexación y la compresión de encabezados reducen el uso de recursos tanto en el servidor como en el cliente.

3. Mejor SEO: Google y otros motores de búsqueda favorecen sitios web más rápidos, por lo que la adopción de HTTP/2 puede mejorar tu clasificación en los resultados de búsqueda.

4. Experiencia del Usuario: Los visitantes de tu sitio notarán una carga más rápida y una experiencia más fluida, lo que puede aumentar la retención y la satisfacción del usuario.

Yo sé, no son realmente puntos tan válidos para activarlo en Nginx, pero no dejan de ser importantes.

Activando HTTP/2 en Nginx

Ahora que tenemos clara la importancia de HTTP/2, es hora de ver como se puede habilitar en un servidor Nginx, mis pruebas estan basadas en Debian 12, y Ubuntu 20.04, así es que considera estos pasos y adáptalos a tu OS.

Paso 1: Configuración de Nginx para HTTP/2

Abre el archivo de configuración de tu bloque de servidor en Nginx:

sudo nano /etc/nginx/sites-available/dominio.com.conf

Reemplaza dominio.com.conf con el nombre de tu dominio. Luego, busca las líneas listen asociadas al puerto 443 (HTTPS) en el archivo. Deberías encontrar dos líneas, una para conexiones IPv4 y otra para conexiones IPv6, como estas:

listen [::]:443 ssl;
listen 443 ssl;

Modifica ambas líneas listen para incluir http2:

listen [::]:443 ssl http2;
listen 443 ssl http2;

Aunque HTTP/2 en sí mismo no requiere SSL, la combinación de HTTP/2 y SSL proporciona una capa adicional de seguridad. SSL cifra la comunicación entre el navegador del usuario y el servidor web, lo que garantiza que los datos transmitidos no sean interceptados ni manipulados por terceros. Esto es especialmente relevante para la privacidad y la seguridad de los usuarios cuando se intercambian datos sensibles a través de una conexión HTTP/2.

Paso 2: Configuración de Cifrado SSL

Uno de los aspectos fundamentales al habilitar SSL en tu servidor Nginx es la configuración de las directivas ssl_ciphers. Estas directivas determinan los algoritmos de cifrado que se utilizarán para asegurar las comunicaciones SSL.

Para ello, existen dos enfoques posibles, dependiendo de cómo hayas configurado tus certificados SSL:

Si utilizas Certificados SSL de Let's Encrypt (Certbot)

Si obtuviste tus certificados SSL a través de Let's Encrypt utilizando Certbot, se crea un archivo llamado options-ssl-nginx.conf que contiene una configuración de cifrado segura pero que es necesario ajustar para HTTP/2. Para ello, sigue estos pasos:

1. Abre el archivo de configuración de tu dominio:

   sudo nano /etc/nginx/sites-available/domain.com.conf

2. Encuentra la línea que incluye el archivo options-ssl-nginx.conf y coméntala agregando un # al principio de la línea:

   # include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot

3. Luego, debajo de esa línea, agrega una nueva línea con la configuración de cifrado para HTTP/2:

   ssl_ciphers EECDH+CHACHA20:EECDH+AES128:RSA+AES128:EECDH+AES256:RSA+AES256:EECDH+3DES:RSA+3DES:!MD5;

Si utilizas Certificados SSL Auto-firmado o de un Tercero

Si utilizas certificados SSL auto-firmados o de un tercero y configuraste manualmente tus certificados, entonces debes asegurarte de que la directiva ssl_ciphers esté configurada adecuadamente, generalmente en el archivo /etc/nginx/snippets/ssl-params.conf.

1. Abre el archivo /etc/nginx/snippets/ssl-params.conf:

   sudo nano /etc/nginx/snippets/ssl-params.conf

2. Asegúrate de que la línea ssl_ciphers contenga la configuración adecuada para HTTP/2. Debería verse así:

   ssl_ciphers EECDH+CHACHA20:EECDH+AES128:RSA+AES128:EECDH+AES256:RSA+AES256:EECDH+3DES:RSA+3DES:!MD5;

3. Guarda el archivo y sal de tu editor.

Paso 2: Verificando la sintaxis y reiniciando el servidor

Para verificar la sintaxis de la configuración de Nginx para asegurarte de que no haya errores, simplemente ejecuta en tu terminal:

sudo nginx -t

nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

Si la sintaxis es correcta, verás un mensaje de éxito. Ahora, reinicia Nginx para aplicar la configuración:

sudo systemctl restart nginx

Verificando HTTP/2

Para asegurarte de que HTTP/2 esté habilitado en tu servidor Nginx, puedes usar una herramienta en línea como https://tools.keycdn.com/http2-test. Simplemente ingresa la URL de tu sitio y la herramienta te mostrará si se está utilizando HTTP/2 correctamente.

Conclusión

Cabe mencionar que HTTP/3 es la evolución más reciente del protocolo HTTP. La diferencia clave es que HTTP/3 utiliza el protocolo de transporte QUIC en lugar de TCP, lo que reduce la latencia y mejora la velocidad de carga de las páginas web pero su adopción aún está en proceso y puede llevar algún tiempo antes de que esté tan extendido como HTTP/2. Por lo tanto, HTTP/2 sigue siendo relevante y ampliamente utilizado en la actualidad.

Habilitar HTTP/2 en tu servidor es una mejora esencial para la velocidad y la eficiencia de tu sitio web. Con las ventajas de HTTP/2, puedes brindar una experiencia de usuario más rápida y eficiente, al tiempo que mejoras la seguridad y el rendimiento de tu sitio. Podrías estarte preguntanto, ¿es todo?, y si, es súmamente sencillo habilitarlo, así es que porque no aprovechar esta nueva tecnología y mantener tu sitio seguro y actualizado según los nuevos estándares de la web, como siempre, espero que este artículo te haya ayudado.

Happy coding! :D

Photo by Marc Sendra Martorell on Unsplash