Airbnb mejora el rendimiento web con transmisión HTTP

InfoQ Inicio Noticias Airbnb mejora el rendimiento web con transmisión HTTP

20 de junio de 2023 Lectura de 2 minutos

por

Rafal Gancarz

Airbnb introdujo la transmisión HTTP para mejorar el rendimiento de carga de páginas de su sitio web. Redujeron la métrica First Contentful Paint (FCP) en aproximadamente 100 milisegundos en cada página probada, incluida la página de inicio. También minimizaron el impacto de las consultas de backend lentas en los tiempos de carga.

Airbnb ha estado buscando posibles mejoras en la presentación del contenido a los usuarios de su sitio web lo más rápido posible e identificó que enviar el cuerpo de la página solo después de que se haya renderizado por completo no ofrece la mejor experiencia de usuario, particularmente si el contenido del cuerpo depende de consultas de backend. Además, las páginas web suelen requerir que el navegador descargue muchos recursos adicionales, como archivos CSS y archivos Javascript externos, para mostrar el contenido al usuario correctamente. Estas dependencias a menudo resultan en cascadas de solicitudes de recursos, que se ilustran mejor en la vista de secuencia de red, como la Cascada de Chrome.

Fuente: https://medium.com/airbnb-engineering/improving-performance-with-http-streaming-ba9e72c66408

Una práctica bien conocida para permitir que el navegador descargue recursos externos antes es colocar todas las etiquetas que hacen referencia a ellos dentro de la etiqueta cerca del comienzo del documento HTML. El navegador descarga recursos externos cuando lee la etiqueta . Por lo general, esto solo sucede una vez que se entrega el documento HTML completo, lo que puede llevar algún tiempo si el contenido se basa en consultas de backend lentas.

La descarga anticipada es una técnica que utiliza la transmisión HTTP para que el navegador conozca los recursos externos incluso antes. Requiere dividir el documento HTML en dos partes y enviarlas por separado mediante codificación de transferencia fragmentada. El navegador puede comenzar a descargar recursos externos tan pronto como se recibe y analiza el fragmento inicial, que contiene solo el comienzo del documento HTML.

Aunque la técnica de descarga temprana no es nueva, no se ha utilizado ampliamente ya que requiere renderizar y enviar porciones incompletas de HTML sin etiquetas de cierre. Airbnb emplea un servidor NodeJS basado en Express para representar páginas web usando React y tuvo que reelaborar el componente único de React utilizado anteriormente para representar todo el documento HTML en tres distintos.

El uso de la descarga temprana ayuda a optimizar la cascada de la red para los recursos CSS y Javascript, pero no soluciona los retrasos en la representación del cuerpo de la página. Con los marcos de aplicaciones web modernos, es posible representar el contenido en el lado del cliente o del servidor (Representación del lado del servidor) y recuperar los datos por separado, pero esto requiere otra solicitud de red.

Airbnb llevó su enfoque de transmisión más allá al introducir el tercer fragmento, al que llamaron fragmento de datos diferidos, que contiene los datos requeridos por la página. Utilizaron MutationObserver para detectar cuándo se cargan los datos diferidos e inyectaron los datos en el almacén de datos de la red de la aplicación, reemplazando esencialmente la solicitud de red adicional.

Representación del lado del servidor (SSR) y recuperación de datos del lado del cliente ejecutadas en paralelo

Fuente: https://medium.com/airbnb-engineering/improving-performance-with-http-streaming-ba9e72c66408

El equipo tuvo que resolver algunos problemas para habilitar la transmisión HTTP en su pila de tecnología. Desactivaron el almacenamiento en búfer de respuestas en NGINX y el algoritmo de Nagle en su balanceador de carga haproxy para permitir que las respuestas fragmentadas lleguen al navegador sin modificaciones.

Victor Lin, ingeniero de software de Airbnb, resume las experiencias de su equipo y un ecosistema en crecimiento que admite la transmisión HTTP:

Si bien hubo desafíos en el camino, descubrimos que adaptar nuestra aplicación React existente para admitir la transmisión era muy factible y sólido, a pesar de no haber sido diseñada originalmente para ello. También estamos entusiasmados de ver la tendencia más amplia del ecosistema frontend en la dirección de priorizar la transmisión, desde @defer y @stream en GraphQL hasta la transmisión SSR en Next.js.

Obtenga consejos prácticos para sus desafíos de ingeniería. ¡Adopte las tendencias emergentes adecuadas en QCon San Francisco (del 2 al 6 de octubre de 2023)!

Escribir para InfoQ ha abierto muchas puertas y aumentado las oportunidades profesionales. para mí. Pude interactuar profundamente con expertos y líderes de opinión para aprender más sobre los temas que cubrí. Y también puedo difundir mis conocimientos a la comunidad tecnológica en general y comprender cómo se utilizan las tecnologías en el mundo real.

¡Descubrí el programa de colaboradores de InfoQ a principios de este año y lo he disfrutado desde entonces! Además de brindarme una plataforma para compartir aprendizaje con una comunidad global de desarrolladores de software, el sistema de revisión entre pares de InfoQ ha mejorado significativamente mi escritura. . Si está buscando un lugar para compartir su experiencia en software, comience a contribuir a InfoQ.

Comencé a escribir noticias para la cola InfoQ .NET como una forma de mantenerme actualizado con la tecnología, pero saqué mucho más provecho de ello. Conocí gente conocedora, obtuve visibilidad global y mejoré mis habilidades de escritura..

Convertirme en editor de InfoQ fue una de las mejores decisiones de mi carrera . Me ha desafiado y me ha ayudado a crecer de muchas maneras. . Nos encantaría tener más gente.Unete a nuestro equipo.

InfoQ busca un editor en jefe a tiempo completo para unirse al equipo internacional y siempre remoto de C4Media. Únase a nosotros para cubrir las tecnologías más innovadoras de nuestro tiempo, colabore con los profesionales de software más brillantes del mundo y ayude a más de 1,6 millones de equipos de desarrollo a adoptar nuevas tecnologías y prácticas que superan los límites de lo que el software y los equipos pueden ofrecer.

Todos los martes se envía un resumen del contenido de la semana pasada en InfoQ. Únase a una comunidad de más de 250.000 desarrolladores senior. Ver un ejemplo

Protegemos su privacidad.

Debe registrar una cuenta InfoQ o iniciar sesión o iniciar sesión para publicar comentarios. Pero hay mucho más detrás de estar registrado.

Aproveche al máximo la experiencia InfoQ.

HTML permitido: a,b,br,blockquote,i,li,pre,u,ul,p

HTML permitido: a,b,br,blockquote,i,li,pre,u,ul,p

HTML permitido: a,b,br,blockquote,i,li,pre,u,ul,p