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 responsiveavec 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/jampack

et 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.orgou CloudCannon.comutilisent 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 !

A découvrir ici.