Show HN: Jampack – Optimizes static websites as a post-processing step

Hi!

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.

As of today it can:

- Optimize local images, CDN images or external images

- Optimize above-the-fold vs below-the-fold

- Limit images max width

- Inline critical CSS

- Prefetch links on scroll

- Improve browser compatibility

- Auto-fixes HTML issues

- Warn for HTML accessibility issues

- Compress all assets in the end

It processes directly the static output so it's compatible with any SSG or framework. We are intensively using it as a post-processing step to our Astro websites for example.

With Jampack, we end-up focusing more on how simple, readable and maintainable our code is, throw images of any size, and let it optimize for maximum performance.

We hope this can be helpful to lot of people! Cheers, Georges and the ‹div›RIOTS team!

Show HN: Jampack – Optimizes static websites as a post-processing step
github.com

Yes, lots of cool things to do around fonts! I have in TODO to add automatic system font fallback with the right metrics in order to improve CLS automatically. Is it what you call "freeze opentype axes based on font-feature-settings" or is it something else?

I would like to do the subset font optimization. I'm just not sure how much of an improvement it's going to be. Have you done it manually before?

This reminds me of the PageSpeed modules for Apache and Nginx https://developers.google.com/speed/pagespeed/module

Ohhh, I like this is a lot! Will use it!

Any unimpressed commenters willing to point any defects? To me this looks like the equivalent of compiling C to super-optimized assembly and is definitely doing things that I wouldn't want to do myself.

I'm interested in the notion of identifying "critical" CSS that should be inlined rather than live in its own stylesheet.

I was hoping there was some principled way of identifying critical and non-critical CSS (e.g. user interaction effects like :hover would always be considered non-critical), but it looks like the library it's using just tries to render your page and do a best-effort detection on which rules are considered critical, which IMO is a little unsatisfying: https://github.com/GoogleChromeLabs/critters