[{"data":1,"prerenderedAt":378},["ShallowReactive",2],{"project-39816836":3},{"id":4,"name":5,"line":6,"line_source":7,"title":8,"url":9,"domain":10,"maker":11,"posted_at":12,"year":13,"points":14,"comments":15,"rank_in_year":16,"shown_in_year":17,"top":18,"tier":19,"category":20,"subcategory":21,"format":22,"keywords":23,"reception":29,"sentiment":30,"stance_mix":31,"scored_comments":36,"aspects":37,"strip":44,"post_text":46,"what":47,"said":74,"maker_in_thread":180,"shape":192,"grid":197,"attempts":340,"same_week":341,"maker_shows":39,"maker_hidden":370,"reader_version":371,"card":372},"39816836","Jampack","Optimizes static websites as a post-processing step","title","Show HN: Jampack – Optimizes static websites as a post-processing step","https:\u002F\u002Fgithub.com\u002Fdivriots\u002Fjampack","github.com","georges_gomes",1711377166,2024,328,58,171,3515,5,"legend","dev_tools","static site build tooling","cli",[24,25,26,27,28],"static site optimization","core web vitals","image optimization","critical css","lazy loading","mixed",0.125,{"positive":32,"neutral":33,"mixed":34,"critical":35},8,13,2,6,29,{"performance":38,"idea":40,"execution":42},{"positive":34,"critical":39},1,{"positive":18,"critical":41},4,{"positive":43,"critical":39},0,[18,43,43,43,43,43,45,45,43,43,43,45,18,45,45,39,39,45,43,18,45,45,43,43,43,45,45,43,43,18,39,45,39,18,39,43,45,45,45,18],3,"Hi!\n\nJampack 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.\n\nAs of today it can:\n\n- Optimize local images, CDN images or external images\n\n- Optimize above-the-fold vs below-the-fold\n\n- Limit images max width\n\n- Inline critical CSS\n\n- Prefetch links on scroll\n\n- Improve browser compatibility\n\n- Auto-fixes HTML issues\n\n- Warn for HTML accessibility issues\n\n- Compress all assets in the end\n\nIt processes directly the static output so it's compatible with any SSG or framework. We are ",{"problem":48,"audience":54,"pricing":58,"motivation":59,"time_to_build":58,"stack":63,"openness":72,"stage":72,"team_size":73},{"value":49,"source":50,"evidence":51},"Static site output is slow and not optimized for Core Web Vitals","maker",[52],{"id":53},"post",{"value":55,"source":50,"evidence":56},"Developers building static websites with any static site generator",[57],{"id":53},null,{"value":60,"source":50,"evidence":61},"Let developers focus on simple, maintainable code while the tool handles performance",[62],{"id":53},[64],{"value":65,"source":66,"evidence":67},"Node.js (run via npx)","commenter",[68],{"id":69,"by":70,"text":71},"39824433","turtlebits","You don't need a prebuilt docker container, just run the command from within a node image. ``` docker run -v ${PWD}:\u002Fdist node npx @divriots\u002Fjampack \u002Fdist ```","unknown","team",{"praise":75,"objections":101,"requests":128,"questions":150,"alternatives":162},[76,91],{"value":77,"source":66,"evidence":78},"Automates image and performance work that is tedious to do manually",[79,83,87],{"id":80,"by":81,"text":82},"39817741","dan_can_code","This is great! Having to handle these tasks manually can be very tedious, so this tool is a breath of fresh air.",{"id":84,"by":85,"text":86},"39818878","chambored","This is exactly what I've been looking for. I had been using my own scripts with Sharp for image optimizations like this, but this eliminates the need for the that entirely and…",{"id":88,"by":89,"text":90},"39819696","lispisok","As somebody who loathes doing webpage layout, refuses to learn it, but has to still do it sometimes this looks great",{"value":92,"source":66,"evidence":93},"Works with any static site generator",[94,98],{"id":95,"by":96,"text":97},"39818860","celicoo","Thanks for the project! Can I expect it to run out of the box for Next.js static-generated files? If so, any recommendations on how to set it up in a Next.js project?",{"id":99,"by":11,"text":100},"39819128","Hi! If the static output of your Next.js project is `.\u002Fbuild` then add `&& jampack .\u002Fbuild` to your build command. If the site is 100% static then it should play nice. If it's…",[102,117],{"value":103,"source":66,"evidence":104},"Can hurt performance or scores in some cases and changes output unexpectedly",[105,109,113],{"id":106,"by":107,"text":108},"39818516","KingOfCoders","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…",{"id":110,"by":111,"text":112},"39818835","sodality2","Hm, this didn't change anything hugely on one of my projects - for example, it reduced the total bundle size, but it increased the gzip'd size, so it's actually a net negative…",{"id":114,"by":115,"text":116},"39827249","account42","First example already shows a complete disregard for quality and backwards comaptibility. > Lazy-load assets below-the-fold ⬇. Ok so that seals it - this chases scores over…",{"value":118,"source":66,"evidence":119},"Critical CSS and lazy loading approaches are questionable",[120,124],{"id":121,"by":122,"text":123},"39820463","chrismorgan","If you have less than 50KB of CSS, inline it. (And if you have more than 50KB of CSS, you’re probably doing it wrong. Well, OK, maybe you’re inlining fonts too, that’s…",{"id":125,"by":126,"text":127},"39818287","kibwen","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…",[129,136,143],{"value":130,"source":66,"evidence":131},"Docker container for easier use",[132],{"id":133,"by":134,"text":135},"39822231","riddley","This is super cool. Any chance you'd make a Docker container for it to simplify usage for people who are scared of node?",{"value":137,"source":66,"evidence":138},"Font subsetting support",[139],{"id":140,"by":141,"text":142},"39817305","microflash","Would love to see a way to subset fonts based on unicode range of SSG output and freeze opentype axes based on font-feature-settings defined in the CSS.",{"value":144,"source":66,"evidence":145},"Option to preload below-the-fold images",[146],{"id":147,"by":148,"text":149},"39819450","rkagerer","This looks great! Although personally I hate it when I scroll a page beyond the 'fold' and have to wait for images to load. By default, does this load the remaining…",[151,155],{"value":152,"source":66,"evidence":153},"Does it work with Next.js static output",[154],{"id":95,"by":96,"text":97},{"value":156,"source":66,"evidence":157},"Does it help image-heavy hand-written sites",[158],{"id":159,"by":160,"text":161},"39820031","Solvency","If my website is an image-heavy portfolio that I wrote myself in pure HTML\u002FCSS\u002FJS with zero dependencies whatsoever... does a tool like this offer me any value? What could it do…",[163,170,174],{"value":164,"source":66,"evidence":165},"Google PageSpeed modules for Apache and Nginx",[166],{"id":167,"by":168,"text":169},"39817677","xnx","This reminds me of the PageSpeed modules for Apache and Nginx https:\u002F\u002Fdevelopers.google.com\u002Fspeed\u002Fpagespeed\u002Fmodule",{"value":171,"source":66,"evidence":172},"Critters for critical CSS inlining",[173],{"id":125,"by":126,"text":127},{"value":175,"source":66,"evidence":176},"Glyphhanger for font subsetting",[177],{"id":178,"by":141,"text":179},"39818183","> 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…",{"comments":181,"answered":41,"key":182},11,[183,186,189],{"id":184,"text":185},"39818952","Hi! Happy you enjoyed it! I would have expected better results for Performance metrics! If you don't mind sharing your static site output pre-jampack I would enjoy checking out.…",{"id":187,"text":188},"39817443","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…",{"id":190,"text":191},"39818633","Thanks for all the links! It's definitely bumping my excitement towards subset fonts!",{"commenters":193,"max_depth":194,"maker_replies":181,"first_comment_mins":195,"lifespan_hours":196},34,7,39,27,[198,200,202,206,209,211,214,216,219,221,225,227,228,231,234,237,241,245,247,249,251,252,254,256,259,260,261,264,267,268,269,271,273,275,278,281,284,287,290,292,294,296,298,299,302,304,306,310,312,314,315,319,323,325,327,329,331,335],[84,43,18,199,85,43],"project\u002Fpositive\u002Fperformance",[184,43,43,201,11,39],"maker\u002Fneutral\u002Fnone",[203,43,43,204,205,43],"39819055","other\u002Fneutral\u002Fnone","samstave",[207,43,43,204,208,43],"39819838","nolok",[210,43,43,204,205,43],"39819987",[212,43,43,204,213,43],"39820814","rrr_oh_man",[215,43,43,204,205,43],"39821103",[217,43,43,204,218,43],"39820125","joemi",[220,43,45,201,85,43],"39819257",[222,43,45,223,224,43],"39819587","project\u002Fneutral\u002Fperformance","lelandfe",[226,43,45,223,85,43],"39820521",[167,39,43,204,168,43],[229,39,43,204,230,43],"39820211","me_bx",[232,39,43,204,233,43],"39820819","aendruk",[235,39,43,204,236,43],"39821338","codetrotter",[238,34,18,239,240,43],"39817878","project\u002Fpositive\u002Fidea","pdimitar",[242,34,39,243,244,43],"39819068","project\u002Fcritical\u002Fidea","rthnbgrredf",[246,34,18,239,240,43],"39827243",[140,45,45,248,141,43],"project\u002Fneutral\u002Fidea",[187,45,43,250,11,39],"maker\u002Fneutral\u002Fidea",[178,45,45,248,141,43],[190,45,43,253,11,39],"maker\u002Fpositive\u002Fidea",[255,45,39,243,115,43],"39828176",[257,45,39,243,258,43],"39830649","lobsterthief",[125,41,45,248,126,43],[121,41,43,204,122,43],[262,41,43,263,11,39],"39821006","project\u002Fneutral\u002Fnone",[265,18,45,248,266,43],"39819156","notahacker",[88,35,18,239,89,43],[147,194,45,223,148,43],[270,194,45,223,224,43],"39820022",[272,194,43,204,148,43],"39821116",[274,194,43,204,224,43],"39821225",[276,194,43,277,11,39],"39820982","maker\u002Fpositive\u002Fperformance",[279,32,43,204,280,43],"39819698","spxneo",[282,32,43,204,283,43],"39819773","nine_k",[110,285,45,286,111,43],9,"project\u002Fmixed\u002Fperformance",[288,285,43,289,11,39],"39819006","maker\u002Fneutral\u002Fperformance",[159,291,45,248,160,43],10,[293,291,43,201,11,39],"39821336",[295,291,43,204,160,43],"39821562",[297,291,43,277,11,39],"39824463",[80,181,18,239,81,43],[106,300,39,301,107,43],12,"project\u002Fcritical\u002Fperformance",[303,300,43,201,11,39],"39818687",[305,300,45,286,107,43],"39818858",[307,300,39,308,309,43],"39819058","project\u002Fcritical\u002Fexecution","mousetree",[311,300,43,204,107,43],"39819185",[313,300,18,199,107,43],"39824763",[114,33,39,243,115,43],[316,33,43,317,318,43],"39827615","commenter\u002Fcritical\u002Fnone","5Qn8mNbc2FNCiVV",[320,321,43,322,11,39],"39820729",14,"maker\u002Fpositive\u002Fnone",[95,324,45,248,96,43],15,[99,324,43,326,11,39],"maker\u002Fneutral\u002Fexecution",[133,328,45,248,134,43],16,[69,328,45,330,70,43],"project\u002Fneutral\u002Fexecution",[332,333,18,239,334,43],"39820927",17,"jdthedisciple",[336,337,18,338,339,43],"39817612",18,"project\u002Fpositive\u002Fnone","Alifatisk",[],[342,347,351,356,361,365],{"id":343,"name":344,"points":345,"category":346},"39783223","Memories",797,"productivity",{"id":348,"name":349,"points":350,"category":20},"39778570","Dropflow",404,{"id":352,"name":353,"points":354,"category":355},"39836630","Explanations",391,"learning_science",{"id":357,"name":358,"points":359,"category":360},"39807912","Glossarie",363,"languages",{"id":362,"name":363,"points":364,"category":20},"39793513","magick.css",305,{"id":366,"name":367,"points":368,"category":369},"39819458","Tracecat",264,"security_privacy",false,"v2",{"id":373,"name":5,"line":6,"ai":370,"cat":20,"year":13,"points":14,"comments":15,"rec":29,"s":374,"top":18,"kw":375,"maker":11,"domain":10,"tier":19,"attempts":43,"strip":376,"url":9,"mix":377,"praise":77,"objection":103,"sub":21},39816836,0.13,[24,25,26,27,28],"5000003300035331130533000330051315103335",[32,33,34,35],1794036651802]