Jampack

Optimizes static websites for best user experience and best Core Web Vitals scores.

What is `jampack`?

Not a bundler. Not a framework.

jampack is a post-processing tool that takes the output of your Static Site Generator (aka SSG) and optimizes it for best user experience and best Core Web Vitals scores.

Read the introduction blog post

What can `jampack` do?

`<img>`

<img src="./redpanda.jpg" alt="Red panda">

becomes responsive with dimensions:

<img src="./redpanda.jpg.webp" alt="Red panda" 
     srcset="
     ./redpanda.jpg.webp 3872w, ./redpanda@3572w.jpg.webp 3572w, ./redpanda@3272w.jpg.webp 3272w, 
     ./redpanda@2972w.jpg.webp 2972w, ./redpanda@2672w.jpg.webp 2672w, ./redpanda@2372w.jpg.webp 2372w,
     ./redpanda@2072w.jpg.webp 2072w, ./redpanda@1772w.jpg.webp 1772w, ./redpanda@1472w.jpg.webp 1472w,
     ./redpanda@1172w.jpg.webp 1172w, ./redpanda@872w.jpg.webp 872w"
     sizes="100vw"
     loading="lazy"
     decoding="async"
     width="3872" 
     height="2592">

`<picture>`

<picture>
    <img src="./redpanda.jpg" alt="Red panda">
</picture>

becomes responsive with multiple formats including AVIF:

<picture>
    <source type="image/avif" 
            srcset="./redpanda@1936w.avif 1936w, ./redpanda@1636w.avif 1636w,
                    ./redpanda@1336w.avif 1336w, ./redpanda@1036w.avif 1036w,
                    ./redpanda@736w.avif 736w">
    <source type="image/webp" 
            srcset="./redpanda@1936w.webp 1936w, ./redpanda@1636w.webp 1636w,
                    ./redpanda@1336w.webp 1336w, ./redpanda@1036w.webp 1036w,
                    ./redpanda@736w.webp 736w">
    <img src="./redpanda.jpg" 
         alt="Red panda" 
         loading="lazy" 
         decoding="async" 
         width="1936" 
         height="1296" 
         srcset="./redpanda.jpg 1936w, ./redpanda@1636w.jpg 1636w,
                 ./redpanda@1336w.jpg 1336w, ./redpanda@1036w.jpg 1036w,
                 ./redpanda@736w.jpg 736w"
         sizes="100vw">
</picture>

Above & below-the-fold

jampack optimizes assets above-the-fold ⬆️.

Images are loaded with higher priority.
Images are compress as Progressive JPEG.
Small images are embedded in HTML.

Lazy-load assets below-the-fold ⬇️.

Images and Iframes are lazy loaded.

See Above-the-fold optimisations for details.

Inline critical CSS

Avoid FOUC while stylesheets are downloaded and parsed. jampack will inline critical CSS and lazy-load the rest of CSS.

See Inline critical CSS for details.

Prefetch links

Speedup the future page navigations by prefetching the links on the page. Thanks to quicklink, this can be done dynamically as links enter the viewport.

See Prefetch links for details.

All assets are compressed

In a 2nd PASS, jampack compresses all untouched assets and keep the same name and the same format.

Extension	Compressor
`.html`,`.htm`	`html-minifier-terser`
`.css`	`lightningCSS`
`.js`	`esbuild` or `swc`
`.svg`	`svgo`
`.jpg`,`.jpeg`	`sharp`
`.png`	`sharp`
`.webp`	`sharp`
`.avif`	`sharp`

And more!

See Documentation for all feature list and examples.

Quick use

# Optimize static website in `dist` folder
npx @divriots/jampack ./dist

For more options see CLI options.

`jampack` used in the wild

Add yours here

Why is it called `jampack`?

jam: From Jamstack.
pack: Reminescent of the Executable Packers from the 90s.

License

This software is released under the terms of the MIT license.