Qu’est-ce que jampack ?
jampack n’est ni un bundler ni un framework, mais un outil de post-traitement qui optimise la sortie des générateurs de sites statiques (SSG) afin d’améliorer l’expérience utilisateur et les scores Core Web Vitals.
Que peut faire jampack ?
- Les images des balises
<img> sont converties en images responsives prenant en charge différentes résolutions, et les attributs loading="lazy" et decoding="async" sont ajoutés pour améliorer les performances.
- Les images sont converties en images responsives utilisant la balise
<picture> pour inclure plusieurs formats, avec prise en charge du format AVIF.
- Les images provenant d’un CDN sont converties en images responsives, avec des images de différentes résolutions fournies via
srcset.
- Il peut télécharger des images externes afin de les optimiser, et stocke les fichiers image optimisés dans le dossier
_jampack.
- Les images immédiatement visibles à l’écran (above-the-fold) sont chargées avec une priorité élevée, tandis que celles visibles après défilement (below-the-fold) sont chargées en lazy loading.
CSS critique inline
- Pour éviter le FOUC (Flash of Unstyled Content) qui peut se produire pendant le téléchargement et le parsing des feuilles de style,
jampack inline le CSS critique et charge le reste du CSS de manière différée.
Préchargement des liens
- Il précharge les liens présents dans la page afin d’accélérer la navigation future. Grâce à quicklink, il est possible de précharger dynamiquement les liens qui entrent dans le viewport.
Compression de tous les assets
- Lors d’un second passage,
jampack compresse tous les assets encore inchangés, en conservant le même nom et le même format. Il utilise des outils de compression différents selon les extensions de fichier.
Et bien plus encore !
jampack permet d’optimiser un site web statique dans le dossier dist via la commande npx @divriots/jampack ./dist.
Cas d’usage de jampack
jampack est utilisé sur divers sites web, dont le site de ‹div›RIOTS, keycloak.ch, bayjs.org, entre autres.
Origine du nom jampack
jam : dérivé de Jamstack.pack : évoque les packers d’exécutables des années 1990.
Licence
- Ce logiciel est publié sous les termes de la licence MIT.
L’avis de GN⁺
jampack peut être un outil utile pour les ingénieurs logiciel débutants qui s’intéressent de près à l’optimisation des performances web. Il semble particulièrement utile pour les développeurs qui accordent de l’importance à des indicateurs comme les Core Web Vitals.- Au-delà de l’optimisation des images, cet outil propose diverses fonctions d’optimisation web, comme la compression du CSS et du JavaScript, ce qui peut réduire le temps de chargement des pages et améliorer l’expérience utilisateur.
- D’un point de vue critique, l’usage d’un outil comme
jampack peut accroître la complexité d’un site web et, en cas de mauvaise utilisation, provoquer au contraire des problèmes de performance. Des tests et une revue suffisants sont donc nécessaires avant son adoption.
- Il existe déjà de nombreux outils pour l’optimisation des performances web, par exemple Google Lighthouse ou WebPageTest. Utilisé avec ces outils,
jampack peut aider à analyser et à améliorer les performances d’un site de manière globale.
- Lors de l’adoption de
jampack, il faut définir une stratégie d’optimisation en tenant compte de la structure du site web et de la stack technique utilisée. De plus, l’usage d’un outil open source apporte l’avantage du support de la communauté, mais impose aussi de prendre en compte la responsabilité liée à la pérennité et à la maintenance du projet.
1 commentaires
Commentaires sur Hacker News
Un utilisateur indique avoir trouvé exactement ce qu’il cherchait. Il optimisait auparavant les images avec son propre script utilisant Sharp, mais après avoir adopté Jampack, cela n’a plus été nécessaire. Après avoir généré un site statique avec Quarto puis exécuté Jampack, la taille du dossier a diminué de 32 %, et il n’a encore constaté aucun inconvénient notable. Il partage des métriques de performance avant et après l’utilisation de Jampack via PageSpeed Insights.
Un autre utilisateur mentionne que cette fonctionnalité lui rappelle le module PageSpeed pour Apache et Nginx.
Un utilisateur dit apprécier Jampack et être prêt à l’utiliser, et demande quels défauts pourraient être relevés par des personnes plus critiques. Il estime que Jampack fait un peu l’équivalent de la compilation d’un code C en assembleur optimisé, en prenant en charge des tâches qu’il n’a personnellement pas envie de faire.
Un autre utilisateur s’intéresse au concept consistant à identifier le CSS « critique » et à l’inliner. Il espérait qu’il existe une méthode de principe pour identifier le CSS non critique, mais la bibliothèque utilisée semble plutôt rendre la page et détecter au mieux quelles règles sont importantes.
Un utilisateur aimerait voir une méthode permettant de sous-sélectionner les polices en fonction des plages Unicode présentes dans la sortie du SSG, et de figer les axes OpenType selon les
font-feature-settingsdéfinis dans le CSS.Un utilisateur qui trouve Jampack très impressionnant demande s’il serait possible de créer un conteneur Docker pour simplifier son utilisation pour les personnes qui hésitent à utiliser Node.js.
Un utilisateur qui n’aime pas la mise en page web et refuse de l’apprendre tout en devant parfois s’en occuper mentionne que Jampack a l’air excellent.
Un utilisateur demande quels générateurs de sites statiques sont réellement utilisés en production. Il pense que ce type d’outil pourrait encore optimiser la sortie. Par exemple, il essaie depuis toute une journée, sans succès, de convertir un site React créé avec Divjoy en HTML simple pouvant être servi depuis un bucket S3. Il a besoin d’un outil capable de déployer automatiquement sur un bucket S3 et de pointer un domaine dessus.
Un utilisateur remarque que Jampack semble couvrir plusieurs cas d’usage que les SSG et leurs plugins essaient de traiter. Il se demande si cela constitue une raison de préférer une étape post-build séparée à des outils comme Astro ou Eleventy. Il pourrait y avoir un compromis entre des rebuilds rapides pendant le développement et le risque de laisser passer des bugs subtils introduits par des éléments comme la déclaration de la largeur des images.
Un utilisateur exprime sa gratitude envers les personnes qui lui envoient de vrais exemples par e-mail. Il dit être très reconnaissant pour ce soutien.