Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/divriots/jampack
Optimizes static websites for best user experience and best Core Web Vitals scores.
https://github.com/divriots/jampack
blog jamstack node static-site static-site-building static-site-generator
Last synced: about 2 months ago
JSON representation
Optimizes static websites for best user experience and best Core Web Vitals scores.
- Host: GitHub
- URL: https://github.com/divriots/jampack
- Owner: divriots
- License: mit
- Created: 2022-09-19T07:38:37.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-05-15T14:00:25.000Z (4 months ago)
- Last Synced: 2024-05-16T05:34:59.640Z (4 months ago)
- Topics: blog, jamstack, node, static-site, static-site-building, static-site-generator
- Language: TypeScript
- Homepage: https://jampack.divriots.com/
- Size: 11.8 MB
- Stars: 1,542
- Watchers: 6
- Forks: 22
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
```
__ __
|__|____ _____ ___________ ____ | | __
| \__ \ / \\____ \__ \ _/ ___\| |/ /
| |/ __ \| Y Y \ |_> > __ \\ \___| <
/\__| (____ /__|_| / __(____ /\___ >__|_ \
\______| \/ \/| | \/ \/ \/
|__|
```
[](https://npmjs.org/package/@divriots/jampack)
[](https://discord.gg/XkQxSU9)
# 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)](https://jamstack.org/generators/) and optimizes it for best user experience and best [Core Web Vitals](https://web.dev/learn-core-web-vitals/) scores.
[Read the introduction blog post](https://divriots.com/blog/introducing-jampack/)
## What can `jampack` do?
### `![]()
`
```html
```
becomes responsive with dimensions:
```html
```
### ``
```html
```
becomes responsive with multiple formats including AVIF:
```html
```
[Read more](/features/optimize-images)
### CDN images become responsive
```html
```
becomes
```html
```
[Read more](/features/optimize-images-cdn)
### External images can be downloaded and optimized
```html
```
becomes
```html
```
[Read more](/features/optimize-images-external)
### 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](https://jampack.divriots.com/features/optimize-above-the-fold/)
## Inline critical CSS
Avoid [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content) while stylesheets are downloaded and parsed.
`jampack` will inline critical CSS and lazy-load the rest of CSS.
[Read more](https://jampack.divriots.com/features/inline-critical-css/)
## Prefetch links
Speedup the future page navigations by prefetching the links on the page.
Thanks to [quicklink](https://github.com/GoogleChromeLabs/quicklink), this can be done dynamically as links enter the viewport.
[Read more](https://jampack.divriots.com/features/prefetch-links/)
### 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`](https://github.com/terser/html-minifier-terser) |
| `.css` | [`lightningCSS`](https://lightningcss.dev) |
| `.js` | [`esbuild`](https://esbuild.github.io/) or [`swc`](https://swc.rs/) |
| `.svg` | [`svgo`](https://github.com/svg/svgo) |
| `.jpg`,`.jpeg` | [`sharp`](https://sharp.pixelplumbing.com/) |
| `.png` | [`sharp`](https://sharp.pixelplumbing.com/) |
| `.webp` | [`sharp`](https://sharp.pixelplumbing.com/) |
| `.avif` | [`sharp`](https://sharp.pixelplumbing.com/) |
### [And a lot more!](https://jampack.divriots.com/)
## Quick use
```sh
# Optimize static website in `dist` folder
npx @divriots/jampack ./dist
```
For more options see [CLI options](https://jampack.divriots.com/cli-options/).
## `jampack` used in the wild
- Powering all [‹div›RIOTS](https://divRIOTS.com)' websites
- [keycloak.ch](https://keycloak.ch)
- [bayjs.org](https://bayjs.org/)
- [qwind.pages.dev](https://qwind.pages.dev/)
- [Bloycey's Blog](https://bloycey.blog/)
- [gxanshu.in](https://gxanshu.in/)
- [cloudcannon.com](https://cloudcannon.com)
- [groupsync.app](https://groupsync.app)
> Add yours here
## Why is it called `jampack`?
- `jam`: From [Jamstack](https://en.wikipedia.org/wiki/Jamstack).
- `pack`: Reminescent of the [Executable Packers](https://en.wikipedia.org/wiki/Executable_compression#List_of_executable_packers) from the 90s.
## License
This software is released under the terms of the [MIT license](https://github.com/divriots/jampack/blob/main/LICENSE).