@divriots/jampack

     __                                    __    
    |__|____    _____ ___________    ____ |  | __
    |  \__  \  /     \\____ \__  \ _/ ___\|  |/ /
    |  |/ __ \|  Y Y  \  |_> > __ \\  \___|    < 
/\__|  (____  /__|_|  /   __(____  /\___  >__|_ \
\______|    \/      \/|  |       \/     \/     \/
                      |__|

Jampack

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

Brought to you by

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, ./[e-mail] 3572w, ./[e-mail] 3272w, 
     ./[e-mail] 2972w, ./[e-mail] 2672w, ./[e-mail] 2372w,
     ./[e-mail] 2072w, ./[e-mail] 1772w, ./[e-mail] 1472w,
     ./[e-mail] 1172w, ./[e-mail] 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="./[e-mail] 1936w, ./[e-mail] 1636w,
                    ./[e-mail] 1336w, ./[e-mail] 1036w,
                    ./[e-mail] 736w">
    <source type="image/webp" 
            srcset="./[e-mail] 1936w, ./[e-mail] 1636w,
                    ./[e-mail] 1336w, ./[e-mail] 1036w,
                    ./[e-mail] 736w">
    <img src="./redpanda.jpg" 
         alt="Red panda" 
         loading="lazy" 
         decoding="async" 
         width="1936" 
         height="1296" 
         srcset="./redpanda.jpg 1936w, ./[e-mail] 1636w,
                 ./[e-mail] 1336w, ./[e-mail] 1036w,
                 ./[e-mail] 736w"
         sizes="100vw">
</picture>

Read more

CDN images become responsive

<img
      src="https://images.unsplash.com/photo-1513002749550-c59d786b8e6c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
      alt="Clouds in the sky by Taylor Van Riper"
      width="2848"
      height="4272"
    />

becomes

<img
      src="https://images.unsplash.com/photo-1513002749550-c59d786b8e6c?ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
      alt="Clouds in the sky by Taylor Van Riper"
      width="2848"
      height="4272"
      loading="lazy"
      decoding="async"
      srcset="
        https://images.unsplash.com/photo-1513002749550-c59d786b8e6c?ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&amp;w=2848&amp;fit=min&amp;auto=format 2848w,
        https://images.unsplash.com/photo-1513002749550-c59d786b8e6c?ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&amp;w=2548&amp;fit=min&amp;auto=format 2548w,
        https://images.unsplash.com/photo-1513002749550-c59d786b8e6c?ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&amp;w=2248&amp;fit=min&amp;auto=format 2248w,
        https://images.unsplash.com/photo-1513002749550-c59d786b8e6c?ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&amp;w=1948&amp;fit=min&amp;auto=format 1948w,
        https://images.unsplash.com/photo-1513002749550-c59d786b8e6c?ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&amp;w=1648&amp;fit=min&amp;auto=format 1648w,
        https://images.unsplash.com/photo-1513002749550-c59d786b8e6c?ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&amp;w=1348&amp;fit=min&amp;auto=format 1348w,
        https://images.unsplash.com/photo-1513002749550-c59d786b8e6c?ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&amp;w=1048&amp;fit=min&amp;auto=format 1048w
      "
      sizes="100vw"
    />

Read more

External images can be downloaded and optimized

<img
     src="https://images.unsplash.com/photo-1513002749550-c59d786b8e6c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=jpg&fit=crop&w=1287&q=80"
     alt="Clouds in the sky by Taylor Van Riper"
/>

becomes

<img
     src="_jampack/ab99b9d280ce4cf7cfc810b59f3a7739.jpg.webp"
     alt="Clouds in the sky by Taylor Van Riper"
     loading="lazy"
     decoding="async"
     width="1287"
     height="1931"
     srcset="
        _jampack/ab99b9d280ce4cf7cfc810b59f3a7739.jpg.webp  1287w,
        _jampack/[e-mail]  987w,
        _jampack/[e-mail]  687w
     "
     sizes="100vw"
    />

Read more

Above & below-the-fold

jampack optimizes assets above-the-fold ⬆️.

• Images are loaded with higher priority.
• Small images are embedded in HTML.

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

• Images and Iframes are lazy loaded.

Read more

Inline critical CSS

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

Read more

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.

Read more

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 a lot more!

Quick use

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

For more options see CLI options.

jampack used in the wild

• Powering all ‹div›RIOTS' websites
• keycloak.ch
• bayjs.org
• qwind.pages.dev
• Bloycey's Blog
• gxanshu.in
• cloudcannon.com
• groupsync.app

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.