Cargas útiles HTML más pequeñas con trabajadores de servicios

Breve historia: Philip Walton tiene una idea inteligente para utilizar trabajadores de servicios para almacenar en caché la parte superior e inferior de los archivos HTML, lo que reduce mucho el peso de la red.

Pensamientos más extensos: cuando estás creando un sitio web realmente simple, puedes salirte con la tuya escribiendo literalmente HTML sin formato. No hace falta mucho tiempo para necesitar un poco más de abstracción que eso. Incluso si está creando un sitio de tres páginas, son tres archivos HTML y la mente de su programador buscará formas de no repetirse. Probablemente encontrará una manera de “incluir” todo el contenido en la parte superior e inferior del HTML y simplemente cambiar el contenido en el medio.

He tendido a recurrir a PHP para ese tipo de cosas en el pasado ( ?php include('header.php); ?), aunque hoy en día me siento mucho más Jamstack y probablemente lo haría con Eleventy y Nunjucks .

O bien, si lo desea, puede seguir la ruta SPA (aplicación de página única) solo para esta abstracción básica. Next y Nuxt son quizás un poco torpes para algunas inclusiones, pero bueno, al menos es fácil trabajar con ellos y el resultado es un buen sitio estático. Lo que pasa con estos marcos SPA impulsados ​​por JavaScript ( Gatsby también está aquí) es que se “hidratan” desde sitios estáticos a SPA a medida que se carga JavaScript. Parte de la razón es la velocidad . El navegador ya no necesita recargar y solicitar nuevamente una página HTML grande para renderizar; simplemente solicita la menor cantidad de datos que necesita y los reemplaza sobre la marcha.

Entonces, en cierto sentido, podrías crear un SPA porque tienes un encabezado y un pie de página comunes y solo deseas reemplazar las entrañas, en aras de la eficiencia.

Aquí está Phil:

En una configuración tradicional cliente-servidor, el servidor siempre necesita enviar una página HTML completa al cliente para cada solicitud (de lo contrario, la respuesta no sería válida). Pero si lo piensas bien, es un desperdicio. La mayoría de los sitios en Internet tienen muchas repeticiones en sus cargas HTML porque sus páginas comparten muchos elementos comunes (por ejemplo head, barras de navegación, pancartas, barras laterales, pies de página, etc.). Pero en un mundo ideal, no tendría que enviar tanto HTML, una y otra vez, con cada solicitud de página.

Con los trabajadores de servicios, existe una solución a este problema. Un trabajador de servicio puede solicitar sólo el mínimo de datos que necesita del servidor (por ejemplo, un contenido HTML parcial, un archivo Markdown, datos JSON, etc.) y luego puede transformar mediante programación esos datos en un documento HTML completo.

Entonces, en lugar de PHP, Eleventy, un marco de JavaScript o cualquier otra solución, la idea de Phil es que un trabajador de servicio (una tecnología de navegador nativa) pueda guardar un caché del encabezado y pie de página de un sitio. Luego, las solicitudes al servidor solo deben realizarse para las “tripas”, mientras que el documento HTML completo se puede crear sobre la marcha.

Es una idea muy elegante y no es ninguna broma implementarla, pero el hecho de que pueda hacerse con menos herramientas puede resultar atractivo para algunos. En el sitio de Phil:

En este sitio durante los últimos 30 días, las cargas de páginas realizadas por un trabajador de servicios tuvieron cargas útiles de red un 47,6 % más pequeñas y una primera pintura con contenido (FCP) mediana que fue un 52,3 % más rápida que las cargas de páginas sin un trabajador de servicios (416 ms frente a 851 ms). .

Aparte de configurar un trabajador de servicio, creo que la parte más complicada es tener que configurar su servidor/API para entregar una versión de solo contenido de sus cosas o crear dos versiones de archivo plano de todo.

Enlace directo →