Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

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

github.com

Post reply on HN
Print view View original

51–60 of 65 posts

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

#51

Post by lelandfe »

rkagerer wrote: post #50
lelandfe wrote: post #36

Earlier quoted context omitted.

It does not. It leverages native lazy loading. All major browsers treat a `loading="lazy"` attribute as meaning "do not load this image/iframe until it is nearly in view." https://developer.mozilla.org/en-US/docs/Web/HTML/Element/im... However, this does inline aspect ratios, so the layout won't change after they're done loading - the cardinal sin of lazy loading.

Thanks. 10+ years ago I wrote a GreaseMonkey userscript for a dating site that collected all your results into one scrollable table. It exercised very explicit control over the image loading sequence. If I recall (and my memory might be spotty), it grabbed 1 thumbnail image per match initially, in the order they were displayed, to populate the table. Once all the thumbnails were pulled (which didn't take very long),…

Great story.

> Once all the thumbnails were pulled... it would start downloading full sized images

LQIP, Low-Quality Image Placeholder – that was pretty new stuff circa 2014. Facebook also popularized fetching a tiny version, and blurring it: https://engineering.fb.com/2015/08/06/android/the-technology...

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

#52

Post by georges_gomes »

Solvency wrote: post #37

If my website is an image-heavy portfolio that I wrote myself in pure HTML/CSS/JS with zero dependencies whatsoever... does a tool like this offer me any value? What could it do here? My site consists of a project grid (large thumbnails) and project page with hi-rez (3200x2000) images in a JS slideshow I wrote.

Do you have a link you can share? I think the project grid with thumbnails could benefit greatly from Jampack but I would need to see the page to confirm.

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

#53

Post by codetrotter »

me_bx wrote: post #40
xnx wrote: post #5

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

I believe the project is not maintained anymore. Github repository is archived: https://github.com/apache/incubator-pagespeed-ngx . Or has it perhaps moved to some other location?

That repository links to a site https://www.modpagespeed.com/ which in turn links to a different repository https://github.com/we-amp/ngx_pagespeed

It only has one extra commit, which deletes RETIRED.txt which was added in the repo you linked.

So at the moment it seems someone is intending to continue development. And might even be working on it, but haven’t pushed any work to the main branch.

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

#54

Post by Solvency »

georges_gomes wrote: post #52
Solvency wrote: post #37

If my website is an image-heavy portfolio that I wrote myself in pure HTML/CSS/JS with zero dependencies whatsoever... does a tool like this offer me any value? What could it do here? My site consists of a project grid (large thumbnails) and project page with hi-rez (3200x2000) images in a JS slideshow I wrote.

Do you have a link you can share? I think the project grid with thumbnails could benefit greatly from Jampack but I would need to see the page to confirm.

https://tinonyman.com/archive

Not my site, but mine (in progress) is almost exactly the same UX/UI but with zero dependencies or libraries/frameworks.

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

#56

Post by turtlebits »

riddley wrote: post #55

This is super cool. Any chance you'd make a Docker container for it to simplify usage for people who are scared of node?

You don't need a prebuilt docker container, just run the command from within a node image.

    docker run -v ${PWD}:/dist node npx @divriots/jampack /dist

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

#57

Post by georges_gomes »

Solvency wrote: post #54
georges_gomes wrote: post #52

Earlier quoted context omitted.

Do you have a link you can share? I think the project grid with thumbnails could benefit greatly from Jampack but I would need to see the page to confirm.

https://tinonyman.com/archive Not my site, but mine (in progress) is almost exactly the same UX/UI but with zero dependencies or libraries/frameworks.

Yes, this is a perfect use case for Jampack. You have simple large images in HTML . Jampack would make them responsive with multiple sizes so mobile phone get small images and desktop larger images. And images would be made lazy when outside the screen. Mobile phone would download 1/10th of the data I guess.

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

#58

Post by KingOfCoders »

KingOfCoders wrote: post #10

After trying this (JS always amazing, 47 vulnerabilities (19 moderate, 24 high, 4 critical)), my web vitals went down from 84 to 77. So not sure about that one. Also some svg images went missing.

[Update] Played with the settings (it seems to problems with above the fold loading of external images (svgs)), I'm now at 93, bravo! (Also there were problems with svg fonts, I removed them)

[Edit] A little bit more tuning, 93/92/100/100

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

#60

Post by mattkoevort »

microflash wrote: post #8
georges_gomes wrote: post #3

Earlier quoted context omitted.

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?

> Is it what you call "freeze opentype axes based on font-feature-settings" or is it something else? I was talking in context of variable fonts which come with lots of features mapped to opentype tags and axes. font-feature-settings property selects (or activates) those features. Usually this is done at few CSS selector levels. The variable fonts can be trimmed by freezing those features. I did something like this wi…

[dead]
Post reply on HN