__ __
|__|____ _____ ___________ ____ | | __
| \__ \ / \\____ \__ \ _/ ___\| |/ /
| |/ __ \| Y Y \ |_> > __ \\ \___| <
/\__| (____ /__|_| / __(____ /\___ >__|_ \
\______| \/ \/| | \/ \/ \/
|__|
Optimizes static websites for best user experience and best Core Web Vitals scores.
Brought to you by
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
<img src="./redpanda.jpg" alt="Red panda">becomes responsive with dimensions:
<img src="./redpanda.jpg.webp" alt="Red panda"
srcset="
./redpanda.jpg.webp 3872w, ./[email protected] 3572w, ./[email protected] 3272w,
./[email protected] 2972w, ./[email protected] 2672w, ./[email protected] 2372w,
./[email protected] 2072w, ./[email protected] 1772w, ./[email protected] 1472w,
./[email protected] 1172w, ./[email protected] 872w"
sizes="100vw"
loading="lazy"
decoding="async"
width="3872"
height="2592"><picture>
<img src="./redpanda.jpg" alt="Red panda">
</picture>becomes responsive with multiple formats including AVIF:
<picture>
<source type="image/avif"
srcset="./[email protected] 1936w, ./[email protected] 1636w,
./[email protected] 1336w, ./[email protected] 1036w,
./[email protected] 736w">
<source type="image/webp"
srcset="./[email protected] 1936w, ./[email protected] 1636w,
./[email protected] 1336w, ./[email protected] 1036w,
./[email protected] 736w">
<img src="./redpanda.jpg"
alt="Red panda"
loading="lazy"
decoding="async"
width="1936"
height="1296"
srcset="./redpanda.jpg 1936w, ./[email protected] 1636w,
./[email protected] 1336w, ./[email protected] 1036w,
./[email protected] 736w"
sizes="100vw">
</picture><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&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&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&w=2848&fit=min&auto=format 2848w,
https://images.unsplash.com/photo-1513002749550-c59d786b8e6c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&w=2548&fit=min&auto=format 2548w,
https://images.unsplash.com/photo-1513002749550-c59d786b8e6c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&w=2248&fit=min&auto=format 2248w,
https://images.unsplash.com/photo-1513002749550-c59d786b8e6c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&w=1948&fit=min&auto=format 1948w,
https://images.unsplash.com/photo-1513002749550-c59d786b8e6c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&w=1648&fit=min&auto=format 1648w,
https://images.unsplash.com/photo-1513002749550-c59d786b8e6c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&w=1348&fit=min&auto=format 1348w,
https://images.unsplash.com/photo-1513002749550-c59d786b8e6c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&w=1048&fit=min&auto=format 1048w
"
sizes="100vw"
/><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/[email protected] 987w,
_jampack/[email protected] 687w
"
sizes="100vw"
/>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.
Avoid FOUC while stylesheets are downloaded and parsed.
jampack will inline critical CSS and lazy-load the rest of CSS.
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.
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 |
# Optimize static website in `dist` folder
npx @divriots/jampack ./distFor more options see CLI options.
- Powering all ‹div›RIOTS' websites
- keycloak.ch
- bayjs.org
- qwind.pages.dev
- Bloycey's Blog
- gxanshu.in
- cloudcannon.com
- groupsync.app
Add yours here
jam: From Jamstack.pack: Reminescent of the Executable Packers from the 90s.
This software is released under the terms of the MIT license.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent