Episodio #104

HTTP/2

En este episodio hablamos con entusiasmo sobre uno de los protocolos más viejos e importantes del internet; el HTTP. Descubre las ventajas de su nueva versión y cómo beneficia al desempeño de nuestros sitios.

Links de Recursos

Transcripción

Natalia El día de hoy vamos a hablar de HTTP2 o bien H2 que es su abreviación oficial, más sencillo, más fácil de decir. Y es más que nada la evolución del HTTP, uno de los protocolos más importantes que hacen posible el web.

Angel Y también uno de los más viejos ¿no?, es el protocolo que inventó Tim Berners Lee para hacer posible el World Wide Web ¿no?

Natalia Así es, y ¡Vaya que es viejo!

Angel De hecho fue creado a inicios de los 90’s.

Natalia Sí, como no recuerdo bien la fecha exacta, vamos a dejarle ahí, a inicios de los 90’s.

Angel Ajá, eso es suficiente para decir que es algo viejo ¿no?

Natalia Y Aquí lo irónico del asunto es que en muchas ocasiones hemos mencionado que nuestras tecnologías cambian tan rápido que a veces es muy difícil seguirles el paso. E irónicamente llevábamos 20 años utilizando este HTTP1, versión 1.1, sin que se le hiciera una mayor revisión. [La versión 1.1 que es la previa al HTTP1, data de 1997, cumpliéndose 20 años este 2017]

A. Sí, como mencionas, nuestras tecnologías tal vez, llamémosle de FrontEnd. Esa parte evoluciona muy, muy rápido y no es para nada a como era hace 20 años. ¡No es para nada igual a como era hace 5 años!, mucho menos hace 20.

Y sin embargo el protocolo del cual todos estos archivos son transportados, es una tecnología, o lo fue durante mucho tiempo, que no vio ninguna evolución, que no vio ninguna revisión principal. Se quedó en esta época de los 90’s y fue creada con otras cosas en mente.

Natalia Otras necesidades diferentes.

Angel Exactamente, otras necesidades que hoy en día…

Natalia Ya no satisface nuestras necesidades, ya nos queda corto.

Angel Exacto, pues vamos a entrar ahorita a ¿Cuáles son estas diferencias? ¿Cuáles son estas nuevas necesidades? Y al hablar de ellas, podemos también ver cuáles son las limitantes de este antiguo protocolo ¿no?

Y por qué su nueva versión, H2, es mucho mejor y nos va a ayudar bastante en cuestiones de desempeño con nuestros sitios web. Aquí en hablemos de web siempre estamos como disco rayado: desempeño, desempeño esto, desempeño aquello y esta nueva versión de protocolo nos va a ayudar bastante, casi mágica, con muy poco esfuerzo de nuestra parte a tener páginas web o aplicaciones web más rápidas que nuestros usuarios van a poder disfrutar mejor.

Natalia Descargar más rápido y que tampoco se acabe su saldo tan rápido.

Angel ¡No, al contrario! Sí no somos cuidadosos se va a acabar su saldo más rápido porque aprovecha mejor el ancho de banda.

Natalia Ah ok, y ahora descarga todos los archivos… No, no, está bien. Cierto, cierto, qué bueno que lo hiciste notar.

Angel Bueno, entonces, para entender una de las ventajas principales de H2, tenemos que ver cómo funciona H1. Entonces voy a requerir un poquito de tu ayuda Natalia en este aspecto. ¿Qué pasa cuando tú estás en tu navegador, en tu cliente, y visitas un sitio web?

Natalia Pues bueno, una vez que tú accedes a un sitio web, o sea tu cliente [que en este caso es el navegador], que le haya pedido al servidor el HTML, ya después de que se lo haya enviado y lo haya parseado, comienza a haber una petición más… sí, son peticiones de los demás recursos de esa página web. En ese caso, pues hablando de recursos, estamos pensando en lo que son fuentes, en lo que son imágenes, en lo que es el CSS en lo que es el Javascript, etc.

Y se inician las peticiones al servidor: [el cliente dice] Mándame todo esto para armar lo que es esta página web. Aquí lo curioso es que la anterior versión de HTTP, la que estábamos utilizando, o séase la 1.1, lo que hacía era mandar pedir estos recursos de 6 en 6. [En paquetes de 6 recursos a la vez]

Esto era porque, bueno yo me imagino en 1997 las páginas web eran diferentes, no se pensaba que fueran a tener tantas cosas [como las actuales]. Pero aquí lo importante que debemos estar viendo es que, por ejemplo, si yo tengo una página web que tiene muchas imágenes o muchas fuentes, etc.

Digamos, tenemos 6 - 18. Era de que mandaba pedir primero 6 y luego una vez que ya regresaban esas 6 [más bien que ya se las mandaba el servidor], voy a, iba a pedir…

Angel Las siguientes 6…

Natalia …el otro paquete de 6. Y si tenía 18 entonces eran como 3 veces ¿no? [Era mandar pedir los recursos en 3 instancias para completar las 18 transferencias]

Angel Ajá, a esta parte es a la que quería llegar. Una de las desventajas principales de HTTP1 es esta limitante de las 6 conexiones al mismo tiempo.

Natalia Ujum.

Angel Y si ustedes por ejemplo, se van a su navegador y abren el inspector de web, ya ven que todos los navegadores tienen herramientas de desarrollo, no importa si están usando Safari, Internet Explorer, Firefox, todas ellas tienen “un tab”, una pestañita de conexión o de network. Y aquí nosotros podemos ir viendo qué está pasando con estos archivos ¿no?

¿Qué está pasando con los archivos que estamos mandando pedir?. Si es un sitio que sea [transferido por] HTTP1, entonces vamos a ver en esta cascada de archivos bonchecitos de 6 en 6, como mencionó Natalia.

Y este es un problema ¿no?. Porque hoy en día por ejemplo, tenemos un sitio promedio, tiene como 100 recursos [hagan cuentas de cuántas instancias se ocupan para obtenerlos. 100/6=16.66 o sea 17 instancias]

Natalia El problema principal de esta manera de trabajar de este antiguo protocolo era que se hacía… se llegaba a hacer como un cuello de botella. Era uno de los factores que afectaban el desempeño (la latencia), o el web performance.

Angel Ajá, si para que un sitio esté completamente cargado, requiere de todos sus archivos necesarios, y esos archivos son de 6 en 6, podemos ver por qué es un problema. Es como, imagínate intentar mudarte de casa o de departamento y sólo puedes llevar 6 cosas a la vez en tu camioneta. ¡Pues nunca vas a…

Natalia ¡Te vas a tardar muchísimo tiempo! Y ahora, también estaba pensando en esa clase… por ejemplo los scripts, que en ocasiones, cuando una vez que los descarga, a veces detiene el navegador el rendereo de la página, hasta que el script termina de correr por completo. Entonces, súmale ese problema.

Angel Ajá, tenemos estos archivos que son render blocking elements, o sea, elementos que bloquean el rendereo de nuestro sitio. Y en general esta limitante de 6 archivos a la vez o 6 conexiones a la vez, podemos empezar a ver cómo afectó la manera en la que nosotros empezamos a desarrollar sitios para tratarle de dar la vuelta a esta limitante.

Natalia Ujum. Hay varias técnicas que se utilizan para ayudar a tener un buen desempeño web, un buen web performance, como lo son los image sprites, que se crearon precisamente para poder darle la vuelta a esta limitante del protocolo.

Los image sprites, si recuerdan, son poder juntar todo un sistema de imágenes o de íconos que se van a estar utilizando muy recurrentemente en un sitio web. Ponerlos todos en una misma imagen en vez de imágenes independientes. Ahora, si en algún momento han estado utilizando esta técnica y no saben por qué, pues este es el motivo, el [iba a decir principal, pero no aplica porque es el único] motivo.

Angel Siempre hemos mencionado, cada que la ves, te dicen: No, es que esto es mejor porque así en vez de pedir varias imágenes, pides una sola imagen y eso es más rápido.

Pero es por eso, porque en lugar de pedir, o sea si tienes a lo mejor 10 imágenes, en lugar de pedir 10 imágenes que van a estar…

Natalia Ajá, o sea, estamos hablando de que si tiene un sitio web, que tiene su sistema de íconos que tiene que flechitas, que no sé, [imágenes en su] sistema de navegación, etc.

Angel Algo… Imágenes relacionadas entre sí.

Natalia Ajá, y tienes 30, a lo mejor. Dices, bueno, haz la cuenta, si manejas esos íconos por separado, 30/6 son… [pensando]

Angel ¡Varios!

Natalia [risas] ¿5? Paquetes de 5. Imagínate [la latencia que se va a estar causando], todo lo que vas a tener que estar deteniendo la conexión para que todas esas imágenes se descarguen. Mejor junta esas 30 imágenes en una sola imagen, en vez de tener que dividirlo en 6 paquetes, pues mejor utiliza una sola imagen que va a estar en 1 solo paquete.

Angel Ajá y esta misma idea la podemos ver aplicada en otras técnicas, por ejemplo la concatenación de archivos. Por ejemplo CSSs, cuando tenemos varios CSS y que a veces los ponemos en un solo archivo de CSS porque están relacionados o que tenemos diferentes Plug-Ins de Javascript y en lugar de pedirlos por separado, los tenemos en un solo archivo de Plug-Ins de Javascript.

Estas técnicas son para disminuir el número de conexiones. Y pues de cierta manera dis… No, no, de cierta manera…

Natalia Evitar ese cuello de botella que luego se puede hacer.

Angel Ajá. Es como decir… la [pensando mientras truena los dedos para acordarse de algo]… ¿Cómo se dice?… La sabiduría común es: Menor número de archivos es mejor.

Y si bien eso es cierto, el menor número de archivos es mejor, en gran parte es por este asunto de las 6 conexiones. Lo cual nos lleva ahora a ver ¿Qué pasa con HTTP2 o qué pasa con H2? Porque aquí, esta limitante ya no existe.

Natalia Así es, creo que una de las mayores ventajas de este nuevo protocolo es que ya por fin, esta limitante que nos acompañó por muchísimo tiempo, se supera ¿no?. El protocolo se revisa y dice ok, que ya no sean en paquetes de 6, ahora que todos…

Angel Es constante y satura completamente la conexión.

Natalia Y aparte pues… Bueno, como acabas de mencionar, le puedes sacar mayor provecho a tu ancho de banda, porque antes, aunque tuvieras un gran ancho de banda pues no se podía notar porque todo era en paquetes de 6.

Angel Ajá, entonces, una manera muy fácil a lo mejor de ver esto, ahí les voy a dejar en los recursos de la página, hay varias personas que han puesto ejemplos de…

Tenemos un sitio que está dividido a la mitad y de un lado están cargando una imagen dividida en cuadritos usando protocolo de HTTP1. Del lado opuesto tienen exactamente la misma imagen dividida en el mismo número de sub-imágenes, de cuadritos, pero este está usando el protocolo H2, la versión nueva.

Entonces al momento de que ustedes carguen la página y se despliega, pueden ir viendo qué tan rápido es cargar archivos con HTTP1 vs cargarlo con H2. Y lo ven porque la versión de H2 carga de volada, casi instantáneo porque todos los cuadritos están descargándose al mismo tiempo.

Mientras que en la otra imagen, la que está conformada de muchas imágenes pequeñas que están siendo mandadas pedir a través de HTTP1, pues están apareciendo de 6 en 6 a la vez ¿no? Y puedes ver muy claro, de que dices: No, ¡SSSHH [renegando] HTTP1, está mal!.

Entonces esta es una de las ventajas de H2, que podemos levantar esta limitante anterior. Podemos tener más archivos al mismo tiempo simultáneos, y esto satura la conexión. Y cuando digo satura la conexión, es nada más para reafirmar lo que dijo Natalia ¿no?, lo que, si tenemos mucho ancho de banda, creo que lo van a notar, la va a aprovechar al máximo porque eso es algo que también antes nos daba una sensación de que pudiera cargar más lento.

Porque a lo mejor pudiéramos tener una conexión rápida y todo lo que queramos, pero estamos pidiendo de 6 en 6, pues nos retrasa ¿no? Y de esta otra manera podemos usarlo al 100%.

Por eso te decía hace rato que también te podías acabar más rápido el ancho de banda, porque si tu sitio está mal hecho y tienes unas imagensotas bien grandotas no optimizadas, etc, etc. Pues van a descargar más rápido…

Natalia Sí, aquí lo que hay que reflexionar y tomar en cuenta es que este H2 haya superado la limitante de su predecesor, no nos da carta blanca para poder utilizar todos los archivos, o utilizar [una cantidad] de archivos a diestra y siniestra, porque también tenemos que tomar en cuenta la conexión de nuestro usuario [más bien su plan de datos].

Aquí yo me estaba confundiendo al inicio, pero pues ya, gracias a que Angel lo hizo notar, dije, wow, o sea, si supera esto [de las conexiones lentas] pero también es peligroso porque si pongo todos esos archivos [pesados], ¡PUM!, rapidísimo, o mi teléfono o donde quiera que lo esté viendo, descarga todo esto y yo ni cuenta me di. Y me quedo sin saldo.

Angel Esta habilidad, pues, de descargar simultáneamente estos archivos, de poder tener tu ancho de banda aprovechado al máximo, es más que nada para que puedan descargarse rápidamente. Pero tenemos que seguir siendo conscientes de cuántas imágenes les estamos poniendo, si son necesarias, tenemos que optimizarlas bien, los archivos de fuentes, etc.

O sea no bloquea pues, que no sigas estas buenas prácticas.

Natalia Sí, [yo sigo pensando en la página que se pueda agotar mi plan de datos] Ahorita estaba pensando, antes por lo menos empezabas a ver que la página web se empezaba a tardar y decías ¡Ah, no! Se va a acabar mi saldo. Pero a lo mejor ahorita ya supera eso y tal vez sí se siga tardando en cargar pero el usuario puede no notarlo [te vas con la finta y te quedas ahí, en vez de cerrarle]. ¡Aguas con eso!

Y por otro lado, tomar en cuenta que estas antiguas técnicas que se utilizaban como los image sprites o la concatenación de archivos de CSS o de Javascript, pues ya van a ser irrelevantes [con H2]. A lo mejor tienen un sitio web [hecho con las antiguas prácticas para HTTP1] y no necesitan hacer nada, para digamos, “optimizarlo” [me refería, regresar y deshacer las otras prácticas] para H2, pero ya no es necesario que para los sitios siguientes que vayan a hacer, si ya están usando H2, vayan a utilizar image sprites o concatenar sus archivos porque ya es irrelevante.

Angel Por ejemplo, en este caso, una desventaja principal del image sprite es que, si necesitas, pues cambiar, una imagen de esta serie de imágenes que están todas metidas en una sola, pues lo haces, pero puedes volver a generar toda la imagen, y tu cliente, tu persona, tu usuario, a lo mejor ya tenía cacheada esa imagen grande, pues la va a tener que volver a descargar toooda la imagen, con todos los bytes que haya pesado, en lugar de nada más mandarle la imagen que cambió ¿no?

No necesitamos estar haciendo estas optimizaciones de ese estilo, de juntar muchos en uno solo como, bien mencionas, ya pierde ese sentido, gracias a la manera en que H2 transfiere los datos.

Ahora, eso es en cuestión de una mejora que hubo respecto a cómo funcionaba antes, pero también hay cosas nuevas que puedes hacer a través de HTTP2 desde el lado del servidor.

Hace rato cuando estabas describiendo cómo funciona cuando pides un sitio web, pues dijiste ¿no?: Pide el HTML, regresa al navegador, el navegador lo parsea, se fija qué cosas va a requerir, imágenes, CSSs, etc. Y las manda pedir al servidor ¿verdad?

Natalia Ujum, las va pidiendo conforme las vaya viendo.

Angel Ujum. Con HTTP2 hay una cosa que se llama PUSH, del lado del servidor. Esto es algo que nosotros tendríamos que configurar.

¿Y en qué consiste el PUSH del servidor?. Bueno, consiste en instruir al servidor en mandarte archivos proactivamente sin que tú los hayas pedido en base a reglas que tú hayas establecido. Por ejemplo, yo puedo decir: Cuando alguien pida index.html, yo sé que va a necesitar también el CSS y este Javascript. Estos 2 archivos, entonces mándaselos junto con el HTML.

Natalia Y entonces en el momento en el que el cliente esté parseando eso y diga: ¡Ah ok! En este momento también ocupo un CSS, entonces se lo voy a… ¡Ah, ya está aquí! Ya no se lo tengo que pedir.

Angel Ajá, ya está en caché porque el servidor ya lo mandó. Ya no tuvo que… ya el navegador ya no tuvo que leer y decir: Ok, necesito esto, déjame se lo pido al servidor. Y el servidor de que: OK, necesitas esto, déjame te lo mando…

¡No! Ya te lo mandé, ya está en caché [gracias al PUSH]

Y esto nos va a ayudar a esa impresión de velocidad, a decir, ¡Wow, qué rápido cargó!. Sin embargo, lamentablemente PUSH es una tecnología que los servidores, no todos lo tienen implementado y como mencioné, es algo que nosotros tenemos que configurar ahí.

Eso es algo que sí, ya involucra algo de nuestra parte, un esfuerzo de nuestra parte. Es algo que tendríamos que ser muy cuidadosos de no abusar, porque, en teoría suena tentador decir. ¡Ah! Pues entonces le digo que le mande tooodos los archivos del sitio de una vez ¿no?, cuando alguien pida el index.

Sin embargo, hay que recordar que los navegadores son buenísimos para saber cómo organizar y pedir los archivos al servidor de una manera muy óptima. Entonces si nosotros instruimos al servidor cuando alguien pida nuestra página de inicio, le mandemos todos, todos, la carga puede ser más lenta a que si el navegador lo hiciera.

Natalia Esto me recuerda mucho a lo de las imágenes responsivas [srcset y sizes]. Que es precisamente dejarle al navegador que tome decisiones, porque luego ellos son más inteligentes y tomarían una mejor decisión que la que tomaríamos nosotros.

Angel Ajá, cuando tú especificas con imágenes responsivas, te refieres a poner, diferentes tamaños de fuentes… ¡NO! Diferentes tamaños de imágenes dentro del elemento Picture ¿y así, no?

Natalia Aaaa [pensando], en el caso de imágenes responsivas es que, luego hay ocasiones en las que tú le dices, no sé, que tú eres el que determina qué imagen que tú pusiste ahí, cortada, optimizada, la que sea. Tú le dices al navegador exactamente cuáles cargar en cuáles condiciones [esto se logra con Picture], pero tú no sabes, o sea, tú no puedes saber cuáles son las condiciones que va a haber. Entonces en este caso es mejor dejarle al navegador, va a tener las condiciones, va a evaluar y va a tomar la mejor decisión que la que nosotros pudiéramos tomar asumiendo las cosas [Esto se logra con srcet y sizes].

Angel Ujum, como dices, muy similar, simplemente que en este caso, pues esta tecnología de PUSH es meramente, exclusivamente más esencial.

Natalia Lo más obvio.

Angel Ajá, y hacer pruebas. A final de cuentas con todas las tecnologías nacientes, nuevas, etc. A pesar de que HTTP2 no es nuevo, fue establecido ya por fin el estándar hace 2 años en el 2015.

Natalia Ujum

Angel En este punto, ahorita en el 2017 es cuando ya hay un muy buen soporte. No solamente de los navegadores que prácticamente todos lo soportan, sino también de los servidores, que ya también lo están soportando. Es como de 2 partes.

Entonces ahorita ya podemos estar muy confiados en que hay un buen soporte para usar esta tecnología.

Natalia Aquí lo que quería decir era… como mencionas ¿no? Que todavía necesitamos probar y experimentar. Como habíamos dicho, varias de las técnicas de HTTP1, como los image sprites, como la concatenación y oootras, todas esas se hicieron en base de que tuvimos ¡20 años! acompañando este protocolo, conocerlo y saber cómo funcionaba para experimentar y, fue así como salieron estas técnicas.

Ahorita estamos entrando a un territorio nuevo. Conocemos estas ventajas del H2, pero todavía tenemos un largo camino para conocerlo bien, experimentar y poder ver… ¡y crear nuevas técnicas!. Nuevas buenas prácticas.

Angel Ajá, ya que estás hablando de esto, ¿Por qué no entramos a esta parte de consideraciones especiales a la hora de estar usando HTTP2?

Una de ellas, tú ya la habías mencionado. Por ejemplo, con los image sprites, ya no es necesario usarlos si nuestro sitio está siendo transferido a través de HTTP2. Porque ya pierde el sentido ¿no? Ya no vas a obtener una ventaja, al contrario, tu sitio podría cargar más rápido estas imágenes si las dejas por separado a que si las ponen en uno solo.

Y de la misma manera, esto aplica por ejemplo a la concatenación de archivos que habíamos mencionado antes. Ya no ocuparíamos pues juntar varios CSSs en un solo CSS o varios archivos Javascript separados en un solo archivo Javascript. Ahora nos beneficiamos de tenerlos por separado.

De todos modos, si hay algunas cosas ahí, que a lo mejor son 2 Plug-Ins bien chiquitos y aparte están relacionados uno con otro, pudiéramos juntarlos por practicidad si nos ayuda a ordenarnos mejor, etc, etc.

Pero ya no es estrictamente necesario tratar de poner la mayor cantidad de archivos similares en uno solo.

Natalia Ujum.

Angel Y… hay otra técnica, fíjate, que usualmente se desarrolló para tratar de darle la vuelta al asunto de las 6 conexiones simultáneas, porque son 6 conexiones simultáneas a un servidor. Entonces, si pides archivos a diferentes servidores, por ejemplo los CDNs, las redes de distribución de contenido, entonces podías cargar 6, 6, 6, de acuerdo al número de servidores que tuvieras al mismo tiempo.

Porque pido 6 archivos de este servidor, ¡6 archivos de este otro servidor!…

Natalia Era como mencionabas, el ejemplo de la camioneta ¿no? En vez de tener una camioneta que se lleve una cosa a la vez, tienes varias camionetas y cada camioneta se lleva una cosa a la vez.

Angel O seis a la vez. Ajá, entonces era muy común eso, tener CDNs o servidores aparte para estar pidiendo archivos de eso. De que, el servidor de fuentes, el servidor de las imágenes y el servidor del video, y el servidor , y así. Para estar pidiendo más seises simultáneos.

Ahora con H2, esto ya no es necesario, y al contrario, es dañino. Nos va a impedir disfrutar al máximo los beneficios de esta nueva manera de transferir datos.

Entonces esta técnica también, de hecho pasa de ser una recomendación, a ser una especie de…

Natalia Pasó de ser buena a ser mala.

Angel Sí, iba a decir “des-recomendación”, pero no creo que esa palabra exista. Sí, ya pasa a ser algo malo ¿no?. Entonces, cómo con la evolución de algo así tan sencillo, una buena práctica se puede convertir en una mala práctica.

Natalia Sí, aquí lo que hay que prestar mucha atención, es que, por lo menos lo que son los image sprites y la concatenación, pues solamente se vuelven irrelevantes, lo que que son los CDNs ya se vuelve malo [No el CDN, la técnica que mencionó Angel anteriormente].

En este caso si tenemos un sitio web que tenemos optimizado de esa manera y está utilizando H2, hay que regresar y deshacer esa práctica. Y por otro lado, si vamos a crear nuevos sitios, pues también, utilizando H2, pues también hay que empezar a decirle al equipo y cambiar nuestra forma de trabajo, de que esta práctica ya no se use.

Angel Aquí nada más quería aclarar, los CDNs no son malos, porque un CDN es una red de distribución de contenido. Ahí significa que hay servidores por todas partes del mundo, y el servidor que esté más cerca, es el que te va a dar los archivos. Lo que es malo, es pedirlo de varios.

Ahora nos beneficiamos de tenerlos en la menor cantidad de servidores. En lugar de tener nuestros archivos con varios CDNs a lo mejor los metemos a…

Natalia A uno solo.

Angel Ajá. Estas son algunas cosas que tenemos que estar considerando a la hora de empezar a estar manejando HTTP2. Y ya que estamos hablando de manejando HTTP2, yo me imagino que más de uno de ustedes van a estar diciendo, qué necesito ¿no?

¿Qué necesito para empezar a gozar de esta multitud de maravillosas ventajas?

Esta es la parte en donde se vuelve un poquito más truculento, tal vez. Porque esta es una tecnología de 2 partes. Por un lado, es el navegador, que como dijimos hace rato, hay excelente soporte hoy en día. Y por el otro lado es el servidor.

Entonces aquí es donde empieza esta parte que nosotros vamos a tener que investigar un poco. Si yo estoy con un hosting, digamos, de marca ¿no?. Una compañía como… MediaTemple, o como…

Natalia SiteGround.

Angel SiteGround, o, no sé cuál. Es algo que ustedes van a tener que checar si su proveedor de hosting ya lo activó en el servidor. La manera más sencilla es poner el nombre de su hosting y poner HTTP2 y darle buscar en Google para ver si ya tienen ahí alguna noticia en el blog del hosting diciendo: ¿Saben qué? Ya activamos HTTP2 en servidor, entonces ya pueden disfrutar de estos beneficios.

Una vez activado, ustedes no tienen que hacer…

Natalia Nada…

Angel Nada, ajá. Si ustedes, por el otro lado están, teniendo un servidor, están pagando a una compañía para ustedes tener un servidor, pues, de la misma manera, van a tener que ver si el software de servidor que están usando soporta HTTP2 y cómo activarlo de acuerdo al software que ustedes estén usando. Que no creo que vaya a ser ningún problema si ya tienen un servidor, seguramente ya son increíblemente hábiles para esto y seguramente ya lo tienen activado ¿verdad?

Natalia Habías mencionado que, para poder disfrutar de las ventajas y beneficios de H2, no era necesario hacer nada… Yo creo que sí es necesario hacer por lo menos una cosa.

Y no lo hemos mencionado, pero resulta que H2 solamente va a funcionar con conexiones encriptadas. Esto quiere decir que si su conexión no tiene la s en el HTTP, entonces H2 no va a funcionar.

Angel Ahhh, sí es cierto. Tan importante y ya íbamos a cerrar el episodio sin ello… [risas]

… Y luego nos iban a mandar quejas y diciendo ¡No funciona!.

Si es cierto, necesita una conexión encriptada. El servidor puede ya tener activo HTTP2, pero no vamos a disfrutar de ese beneficio.

Natalia Ajá, o sea el navegador, el cliente ya puede soportar HTTP2, el servidor ya puede soportar H2, pero si la conexión no es encriptada, se va a hacer por medio de H1.

Angel Uhum.

Natalia Entonces, habíamos ya mencionado, tenemos un episodio de encriptación, ¿me parece que es el 102? HTTPS [En realidad es el 101], si todavía no lo han escuchado, todavía tienen dudas al respecto, les invito a que lo chequen. Por otro lado si ya quieren hacer el cambio a H2 y todavía no cuentan con su conexión encriptada, utilicen Let’s Encrypt.

Angel De hecho, de esto pueden aprender más en el otro episodio. El de Let’s Encrypt es un servicio gratuito para poder nosotros tener el certificado de seguridad que nos va a permitir encriptar nuestra conexión.

Entonces, sí es un requisito muy importante y sin él no van a poder usar HTTP2. Ya que nos estamos acercando al final, también nada más quisiera comentar, a lo mejor estoy con un proveedor de hosting, tengo mi sitio ahí y mi proveedor de hosting no ha actualizado el software del servidor, no tiene activado HTTP2 y a lo mejor no sé cuándo lo va a hacer.

¿Qué puedo hacer al respecto? Es muy importante saber que, creo que al inicio de este episodio mencionaba, un sitio promedio tiene como 100 archivos hoy en día. El HTML es el contenido usualmente nada más, pero las imágenes, el Javascript, el todo eso, no tiene que estar en el mismo servidor donde está nuestro HTML.

Puede estar en un CDN y la mayoría de los CDNs, si es un CDN que se respete, ya tiene activado HTTP2. Entonces, si bien nuestro sitio a lo mejor pudiera estar hosteado en un servidor sin HTTP2, nuestros recursos como imágenes, Javascripts, CSSs, lo que ustedes quieran, pueden estar archivados o pueden estar metidos en un servidor que sí soporte HTTP2 y de todos modos vamos a recibir, pues un beneficio parcial.

Y por otro lado también pueden enviarle una carta a la persona que tiene el servidor y decirle: ¡Oye vato, pues ponte las pilas, que onda con esto!

Natalia ¡O me cambio!

Angel Ajá, porque es un beneficio, no quiero decir gratuito, pero ¡es casi gratuito! Es como desempeño gratis, por el puro mérito de la manera en la que se transfieren los archivos ahora a través de esta nueva tecnología, ya van a notar ustedes una ventaja.

Ahora, si localmente, quisiéramos nosotros “jugar” con HTTP2, o sea, ver por ejemplo cómo funciona esto de que se hagan las múltiples conexiones simultáneas y… no sé, no se me ocurre ahorita un ejemplo más allá de ir experimentando…

Natalia Que quieran ir experimentando con el PUSH de que: Ah, si mando pedir todos estos archivos, tarda tanto… y si mando pedir estos, tanto, y etc… Y ahí hacen sus notas.

Angel Ajá, hay maneras de probarlo localmente. Por ahí, me parece que hay un ingeniero de Google, voy a dejar el link en los recursos, que creó un pequeño programita para tener un servidor local de HTTP2.

Muy importante, este servidor local es meramente para hacer pruebas básicas…

Natalia Experimentos.

Angel Ajá, las cosas de verdad siempre háganlas sobre el servidor porque es el que… el servidor real, porque es el que va a tener la última palabra.

Entonces ahí lo tienen, eso es HTTP2, no es nuevo, sin embargo ahorita ya tiene muy buen soporte y pues es algo que, como dijimos, es desempeño gratis básicamente.

Entonces, esperamos que les haya sido de utilidad, sería todo de nuestra parte el día de hoy, ¡Hasta la Próxima!