¿Qué es jampack?
jampack no es ni un bundler ni un framework, sino una herramienta de posprocesamiento que optimiza la salida de los generadores de sitios estáticos (SSG) para mejorar la experiencia del usuario y las puntuaciones de Core Web Vitals.
¿Qué puede hacer jampack?
- Las imágenes de las etiquetas
<img> se convierten en responsivas para soportar distintas resoluciones, y se les agregan los atributos loading="lazy" y decoding="async" para mejorar el rendimiento.
- Se transforman en imágenes responsivas con múltiples formatos usando la etiqueta
<picture>, con soporte también para el formato AVIF.
- Las imágenes servidas desde CDN se convierten en responsivas, ofreciendo imágenes en varias resoluciones mediante
srcset.
- Puede descargar imágenes externas y optimizarlas, guardando los archivos de imagen optimizados dentro de la carpeta
_jampack.
- Las imágenes visibles de inmediato en pantalla (above-the-fold) se cargan con alta prioridad, mientras que las que aparecen al hacer scroll (below-the-fold) se cargan de forma diferida.
CSS crítico inline
- Para evitar FOUC (Flash of Unstyled Content) mientras la hoja de estilos se descarga y parsea,
jampack inserta el CSS crítico inline y carga de forma diferida el resto del CSS.
Prefetch de enlaces
- Precarga enlaces dentro de la página para mejorar la velocidad de navegación hacia páginas futuras. Gracias a quicklink, es posible hacer prefetch dinámico de los enlaces que entran en el viewport.
Compresión de todos los assets
jampack comprime en una segunda pasada todos los assets que no fueron tocados, manteniendo el mismo nombre y formato. Usa herramientas de compresión específicas según cada extensión de archivo.
¡Y muchas funciones más!
jampack puede optimizar el sitio web estático dentro de la carpeta dist mediante el comando npx @divriots/jampack ./dist.
Casos de uso de jampack
jampack se está usando en varios sitios web, como el sitio de ‹div›RIOTS, keycloak.ch y bayjs.org.
Origen del nombre jampack
jam: proviene de Jamstack.pack: evoca los packers de ejecutables de los años 90.
Licencia
- Este software se publica bajo los términos de la licencia MIT.
Opinión de GN⁺
jampack puede ser una herramienta útil para ingenieros de software principiantes con gran interés en la optimización del rendimiento web. En particular, parece ser de ayuda para quienes consideran importantes métricas de rendimiento como Core Web Vitals.- Además de la optimización de imágenes, esta herramienta ofrece diversas funciones de optimización web, como compresión de CSS y JavaScript, que pueden reducir el tiempo de carga de la página y mejorar la experiencia del usuario.
- Desde una mirada crítica, usar una herramienta como
jampack puede aumentar la complejidad del sitio web y, si se usa mal, incluso provocar problemas de rendimiento. Por eso, se necesita suficiente prueba y revisión antes de usarla.
- Ya existen muchas herramientas para optimizar el rendimiento web, por ejemplo Google Lighthouse o WebPageTest.
jampack puede usarse junto con estas herramientas para analizar y mejorar de forma integral el rendimiento de un sitio web.
- Al adoptar
jampack, conviene definir una estrategia de optimización considerando la estructura del sitio web y el stack tecnológico que se utiliza. Además, aunque usar una herramienta de código abierto tiene la ventaja del apoyo de la comunidad, también hay que considerar la responsabilidad sobre la continuidad y el mantenimiento del proyecto.
1 comentarios
Comentarios de Hacker News
Este usuario menciona que encontró justo lo que estaba buscando. Había estado optimizando imágenes con un script propio usando Sharp, pero después de usar Jampack ya no le hizo falta. Dice que, al ejecutar Jampack después de compilar un sitio estático de Quarto, el tamaño de la carpeta se redujo un 32%, y que todavía no ha notado desventajas evidentes. Comparte métricas de rendimiento usando PageSpeed Insights antes y después de usar Jampack.
Otro usuario menciona que esta funcionalidad le recuerda al módulo PageSpeed para Apache y Nginx.
Un usuario dice que Jampack le gusta y que estaría dispuesto a usarlo, y pregunta qué defectos podrían señalar quienes tienen una opinión crítica. Considera que Jampack hace algo parecido a compilar código C en ensamblador optimizado, es decir, realizar tareas que personalmente no quiere hacer.
Otro usuario está interesado en la idea de identificar el CSS "crítico" y procesarlo inline. Esperaba que existiera una forma más fundamentada de identificar el CSS no crítico, pero parece que la librería utilizada renderiza la página y detecta lo mejor que puede qué reglas son importantes.
Un usuario quiere ver una forma de seleccionar subconjuntos de fuentes según el rango Unicode de la salida del SSG, y de fijar ejes OpenType de acuerdo con
font-feature-settingsdefinidos en el CSS.Un usuario que piensa que Jampack es muy genial pregunta si sería posible crear un contenedor Docker para simplificar su uso para quienes tienen miedo de usar Node.js.
Un usuario que odia el layout de páginas web y se niega a aprenderlo, aunque a veces tiene que hacerlo, comenta que Jampack se ve excelente.
Hay un usuario que pregunta qué generadores de sitios estáticos se usan en entornos reales de producción. Cree que con este tipo de herramientas podría optimizar todavía más la salida. Por ejemplo, ha pasado todo el día intentando convertir un sitio web en React de Divjoy en HTML simple que pueda servirse desde un bucket de S3, pero le ha resultado difícil. Necesita una herramienta que pueda desplegar automáticamente a un bucket de S3 y apuntar un dominio.
Un usuario menciona que Jampack parece cubrir varios casos de uso que los SSG y sus plugins intentan resolver. Se pregunta si la razón para elegir Astro o Eleventy tiene que ver con preferir una etapa separada de post-build. Puede haber una compensación entre reconstrucciones rápidas durante el desarrollo y la posibilidad de pasar por alto bugs sutiles que podrían aparecer al introducir cosas como declarar el ancho de las imágenes.
Hay un usuario que expresa su agradecimiento a las personas que le envían ejemplos reales por correo electrónico. Dice que aprecia mucho ese apoyo.