HTTP/2 vs. HTTP/1.1: ¿Cómo afectan al rendimiento web?

HTTP/2 permite que los desarrolladores personalicen la priorización, o el orden en el que se cargan los activos web. HTTP/2 también ofrece otras mejoras de rendimiento respecto a HTTP/1.

Objetivos de aprendizaje

Después de leer este artículo podrás:

  • Más información sobre qué es HTTP y las diferencias entre las versiones de HTTP
  • Entender cómo funciona la priorización en HTTP/2
  • Explorar las formas en que HTTP/2 mejora el rendimiento de la web

Copiar enlace del artículo

¿Qué es HTTP? ¿Por qué HTTP/2 es más rápido que HTTP/1.1?

HTTP significa protocolo de transferencia de hipertexto, y es la base de casi todas las aplicaciones web. Más en concreto, HTTP es el método que utilizan los ordenadores y servidores para solicitar y enviar información. Por ejemplo, cuando alguien visita cloudflare.com en su ordenador portátil, su navegador web envía una solicitud HTTP a los servidores de Cloudflare para el contenido que aparece en la página. Luego, los servidores de Cloudflare envían respuestas HTTP con el texto, las imágenes y el formato que el navegador muestra al usuario.

La primera versión utilizable de HTTP se creó en 1997. Como pasó por varias etapas de desarrollo, esta primera versión de HTTP se llamó HTTP/1.1. Esta versión se sigue utilizando en la web. En 2015, se creó una nueva versión de HTTP llamada HTTP/2 .

HTTP/2 resuelve varios problemas que no habían previsto los creadores de HTTP/1.1. En particular, HTTP/2 es mucho más rápido y eficiente que HTTP/1.1. Una de las formas en las que HTTP/2 es más rápido es en cómo prioriza el contenido durante el proceso de carga.

¿Qué es la priorización?

En el contexto del rendimiento web, la priorización hace referencia al orden en que se cargan las piezas de contenido. Supongamos que un usuario visita un sitio web de noticias y navega hasta un artículo. ¿Debe cargarse primero la foto de la parte superior del artículo? ¿Debe cargarse primero el texto del artículo? ¿Deben cargarse primero los anuncios publicitarios?

La priorización afecta al tiempo de carga de una página web. Por ejemplo, ciertos recursos, como los archivos JavaScript grandes, pueden bloquear la carga del resto de la página si tienen que cargarse primero. Una mayor parte de la página puede cargarse a la vez si estos recursos que bloquean la renderización se cargan en último lugar.

Además, el orden en el que se cargan estos recursos de la página afecta a la forma en que el usuario percibe el tiempo de carga de la página. Si solo se carga primero el contenido que está en segundo plano (como un archivo CSS), o el contenido que el usuario no puede ver inmediatamente (como los anuncios de la parte inferior de la página), el usuario pensará que la página no se está cargando. Si se carga primero el contenido más importante para el usuario, como la imagen de la parte superior de la página, el usuario percibirá que la página se carga más rápido.

¿Cómo afecta la priorización en HTTP/2 al rendimiento?

En HTTP/2, los desarrolladores tienen un control práctico y detallado sobre la priorización. Esto les permite maximizar la velocidad de carga percibida y real de la página de una manera que no era posible en HTTP/1.1.

HTTP/2 ofrece una función llamada priorización ponderada. Esto permite a los desarrolladores decidir cada vez qué recursos de la página se cargarán primero. En HTTP/2, cuando un cliente hace una solicitud a una página web, el servidor envía varios flujos de datos al cliente a la vez, en lugar de enviar una cosa después de otra. Este método de entrega de datos se conoce como multiplexación. Los desarrolladores pueden asignar a cada uno de estos flujos de datos un valor ponderado diferente, y el valor indica al cliente qué flujo de datos debe entregar primero.

Imaginemos que Alice quiere leer una novela que ha escrito su amigo Bob, pero tanto Alice como Bob solo se comunican por correo postal. Alice envía una carta a Bob y le pide que le envíe su novela. Bob decide enviar la novela al estilo HTTP/1.1: envía por correo un capítulo cada vez, y solo envía el siguiente después de haber recibido una carta de respuesta de Alice en la que le confirma que ha recibido el capítulo anterior. Con este método de entrega de contenido, Alice tarda muchas semanas en leer la novela de Bob.

Ahora imagina que Bob decide enviar a Alice su novela al estilo HTTP/2: en este caso, envía cada capítulo de la novela por separado (para no sobrepasar los límites de tamaño del servicio de correos), pero todos al mismo tiempo. También numera cada capítulo: Capítulo 1, Capítulo 2, etc. En este caso, Alice recibe la novela de una sola vez y puede montarla en el orden correcto cuando lo considere. En caso de que faltara un capítulo, puede enviar una respuesta rápida pidiéndole ese capítulo concreto, pero por lo demás el proceso está completo, y Alice puede leer la novela en pocos días.

En HTTP/2, se envían todos los datos, como cuando Bob envía a Alice varios capítulos a la vez. Y al igual que Bob, los desarrolladores pueden numerar los capítulos en HTTP/2. Pueden decidir si se carga primero el texto de una página web, o los archivos CSS, o el JavaScript, o lo que consideren más importante para la experiencia del usuario.

¿Qué otras diferencias hay entre HTTP/2 y HTTP/1.1 que afecten al rendimiento?

Multiplexación: HTTP/1.1 carga los recursos uno después del otro, así que si un recurso no puede cargarse, bloquea el resto de recursos que hay detrás. En cambio, HTTP/2 es capaz de utilizar una única conexión TCP para enviar varios flujos de datos a la vez, de modo que ningún recurso bloquee a otro. HTTP/2 hace esto al dividir los datos en mensajes de código binario y numerar estos mensajes para que el cliente sepa a qué flujo pertenece cada mensaje binario.

Server push: normalmente, un servidor solo sirve contenido a un dispositivo cliente si el cliente lo solicita. Sin embargo, este enfoque no siempre es práctico para las páginas web modernas, que a menudo tienen varias docenas de recursos distintos que el cliente debe solicitar. "HTTP/2 resuelve este problema al permitir que un servidor "pase" el contenido a un cliente antes de que este lo solicite. El servidor también envía un mensaje para que el cliente sepa qué contenido que se ha pasado debe esperar, como si Bob hubiera enviado a Alice un índice de su novela antes de enviársela completa.

Compresión de encabezado: los archivos pequeños se cargan más rápido que los grandes. Para acelerar el rendimiento de la web, tanto HTTP/1.1 como HTTP/2 comprimen los mensajes HTTP para hacerlos más pequeños. Sin embargo, HTTP/2 utiliza un método de compresión más avanzado llamado HPACK, que elimina la información redundante en los paquetes del encabezado HTTP. Esto elimina algunos bytes de cada paquete HTTP. Dado el volumen de paquetes HTTP que implica la carga de una sola página web, esos bytes se suman rápidamente, lo que resulta en una carga más rápida.

¿Qué es HTTP/3?

HTTP/3 es la siguiente versión propuesta del protocolo HTTP. HTTP/3 todavía no está muy extendido en la web, pero está aumentando su uso. La diferencia clave entre HTTP/3 y las versiones anteriores del protocolo es que HTTP/3 se ejecuta sobre QUIC en lugar de TCP. QUIC es un protocolo de capa de transporte más rápido y seguro, diseñado para las necesidades de la Internet moderna.

¿Cómo ayuda Cloudflare a los desarrolladores a implementar HTTP/2 para un rendimiento más rápido?

Cloudflare es compatible con todas las funciones de HTTP/2. Las propiedades web en Cloudflare pueden activar HTTP/2 de forma gratuita con un solo clic. Cloudflare es compatible con HTTP/3 y HTTP/2.