Quieres una web más rápida? Consíguelo con HTTP2

Protocolo HTTP

HTTP (Hypertext Transfer Protocol) es el protocolo de comunicaciones que como se realiza la transferencia de información en la web. Fue desarrollado en 1996 y la versión más utilizada hasta ahora es HTTP 1.1

El proceso es simple, nuestro navegador realiza peticiones al servidor que aloja la página web y recibe como respuesta los diferentes archivos necesarios para visualizar su contenido en nuestro dispositivo. Tanto las peticiones como las respuestas tienen la siguiente estructura:

• Linea inicial: La usa el cliente para especificar la solicitud y el servidor para incluir el código de respuesta   
• Cabecera: Incluyen información adicional sobre la petición o el contenido devuelto, lo que aporta flexibilidad al protocolo
• Cuerpo del mensaje: Los datos a procesar, por ejemplo la información suministrada por el usuario en un formulario, un archivo solicitado al servidor, etc. Su presencia y tamaño dependen del tipo de petición y las cabeceras,

Las principales desventajas de HTTP 1.1 son:

• La información se trasmite como texto plano, legible por una persona. Esto facilita la depuración pero hace los mensajes más largos.
• Cada petición requiere el establecimiento de una conexión nueva con el servidor. Este proceso consume tiempo y recursos del servidor. Cualquier web consta de numerosos archivos (html, css, vídeos, scripts, etc) y esto penaliza el tiempo de carga.
• Las peticiones se hacen secuencialmente. Hay que esperar a que termine la actual para realizar la siguiente. El resultado es nuestro viejo conocido "bloqueo de renderizado", que Google y el resto de analizadores nos echa constantemente en cara.

Mejoras introducidas en HTTP2

HTTP2 se ha diseñado para solventar estas deficiencias, mientras mantiene una compatibilidad total con HTTP 1.1. De esta forma no tendremos necesidad de modificar nuestro código para aprovechar sus ventajas:

• Multiplexado: Los servidores pueden atender varias peticiones simultáneas usando una sola conexión. Esto soluciona también los problemas de bloqueo. Al usar la misma conexión, nos ahorramos tener que enviar la misma información una y otra vez.
• El servidores puede ser proactivo y enviar al cliente recursos adicionales que sabe son necesarios para visualizar correctamente el contenido. Por ejemplo puede enviar los css, imágenes y otros recursos incluidos en el html sin esperar que el navegador los solicite.
• Es un protocolo binario, orientado a la comunicación entre ordenadores. Esto lo hace más compacto y menos propenso a errores

Hay que señalar que la implementación de HTTP2 en la mayoría de los navegadores requiere cifrado y por lo tanto debemos implementar HTTPS en nuestro servidor. Sin embargo, esto es práctica habitual hoy en día y puede ser gestionado fácilmente con Let's Encrypt, entre otras opciones.

Actualmente el 95% de los navegadores actuales soportan HTTP2, como podemos comprobar en este enlace. Por otra parte, más del 40% de los sitios webs existentes ya implementa este protocolo como se puede comprobar aquí.

Implementando HTTP2 para conseguir una web más rápida

Si estamos en un hosting compartido o nuestro servidor es administrado por un tercero, probablemente estaremos de suerte y HTTP2 ya esté activo. Si no estuviese habilitado, podemos solicitarlo al soporte técnico de nuestro hosting.

Si no fuese el caso, tendremos que hacerlo nosotros. Por suerte, los pasos a seguir son sencillos. 

Preparacion del servidor Apache

Primero nos aseguramos de tener una versión de Apache igual o superior a la 2.4.26. También debemos tener HTTPS funcionando correctamente ya que los navegadores actuales implementan la versión segura del protocolo.

Como la implementación por defecto de PHP sobre Apache (mod_php) no es compatible con HTTP2; debemos cambiar al modo FastCGI activando el módulo php-fpm.

sudo apt install php7.3-fpm
sudo a2dismod php7.3
sudo a2enmod proxy_fcgi setenvif
sudo a2enconf php7.3-fpm
sudo service apache2 restart

Finalmente pasamos a "MPM event", ya que la implementación por defecto (prefork) no es compatible con HTTP2

sudo a2dismod mpm_prefork
sudo a2enmod mpm_event
sudo service apache2 restart
sudo service php7.3-fpm restart

En nuestro caso concreto debemos modificar las intrucciones por las adecuadas a la versión de PHP que tengamos instalada.

Una vez cumplidas estas premisas, solo tenemos que activar el soporte para http2 y reiniciamos el servidor:

sudo a2enmod http2
sudo service apache2 restart

Con el servidor listo, configuramos nuestra web para aprovechar las nuevas posibilidades

Configuracion de los sitios virtuales

Para activar HTTP2 en los sitios virtuales añadiremos al archivo de configuración:correspondiente las líneas: 

<IfModule http2_module>
   Protocols h2 http/1.1
   H2Direct on
</IfModule>

Basicamente comprobamos que el modulo http2 esté activo. Si es así, establecemos HTTP2 como protocolo por defecto y dejamos HTTP1.1 como protocolo de reserva. La directiva H2Direct nos puede ahorrar tiempo en la negociación de protocolos entre el navegador y nuestro servidor.

Si queremos aprovecharnos de los envios push, añadiremos también las líneas:

H2Push on
H2PushPriority * after
H2PushPriority text/css before
H2PushPriority image/jpg after 32
H2PushPriority image/jpeg after 32
H2PushPriority image/png after 32
H2PushPriority application/javascript interleaved

Comprobando que realmente tenemos una web más rápida

Aquí hay poco que decir. Solo tenemos que comparar la carga antes y después de activar HTTP2. En mi caso:

Como vemos hemos mejorado el Indice de velocidad en un 40%, la latencia se ha reducido a la mitad y el resultado global ha mejorado en 10 puntos. Los resultados para ordenador muestran mejoras similares y la evaluación general ha pasado de 94 a 99. No ha sido necesario modificar nada en la web.

Podemos comprobar que realmente estamos usando el protocolo HTTP2 con la extensión HTTP/2 and SPDY indicator para Chrome, o directamente en el panel Nertwork de las Herramientas para Desarrolladores en el navegador.