Aujourd’hui, je vous parle d’un truc vraiment cool nommé Jampack. En gros, c’est un outil qui prend votre site statique généré par votre générateur préféré (Hugo, Jekyll, Eleventy… y’en a pour tous les goûts !) et qui le transforme en une bête de course optimisée pour une expérience utilisateur de folie et des scores Core Web Vitals à faire pâlir les GAFAM.
Comment ça marche ce truc ? Eh bien, Jampack va scanner votre site et appliquer tout un tas d’optimisations automatiquement. Par exemple, il va :
- Rendre vos images responsive avec des dimensions et des formats modernes comme le WebP ou l’AVIF. Fini les images qui mettent trois plombes à charger !
- Mettre la priorité sur les assets importants au-dessus de la ligne de flottaison et lazy-loader le reste. Comme ça, votre site s’affiche direct pendant que le reste charge tranquillou en arrière-plan.
- Inliner le CSS critique et virer le Flash of Unstyled Content (FOUC). Votre site aura la classe dès les premières millisecondes.
- Prefetcher les liens pour accélérer la navigation. Vos visiteurs surferont à la vitesse de la lumière sur votre site !
- Minifier et compresser tout ce qui traîne : HTML, CSS, JS, SVG… Que du bonheur pour votre bande passante.
Et tout ça sans que vous ayez à lever le petit doigt ! Juste un petit
npm install -D @divriots/jampacket hop, magie, votre site est optimisé de fou.
Bon, vous vous dites peut-être : « Ouais, ok, mais mon site il est déjà pas mal optimisé, hein« . Eh bah, sachez que même les experts de Keycloak.ch, BayJS.org ou CloudCannon.com utilisent Jampack pour squeeze encore plus de perf. Vous pensez vraiment faire mieux ? ^^
Et bien sûr, tout le code est open-source sur GitHub, sous licence MIT. Allez, sur ce, je vous laisse, j’ai un site à optimiser moi. See ya !