byte budget
permacomputing principle: every resource must justify its existence.
pick a budget. allocate bytes. see what fits.
constraint is the design tool.
what fits in the remaining budget
war and peace (full text)
median web page (2024)
jquery 3 minified
react + react-dom minified
tailwind full CSS
one system-font paragraph (500 chars)
void/audit page
one base64 favicon
1kb
pick a budget and start allocating.
about this tool
permacomputing treats computing resources as finite and shared.
a byte budget is the simplest expression of that idea: you have this much. decide what matters.
the reference sizes are real. react+react-dom minified is ~136KB. the median web page in 2024 is ~2.5MB. war and peace is 3.2MB of plain text. most web pages are heavier than a novel and say less.
the 50KB default is the void standard. if your page can't fit in 50KB, ask why. the answer is usually: fonts, frameworks, or images that could be smaller.
this page uses ~460 bytes of inline javascript. the sliders need it — range inputs don't display their own values. CSS cannot read an input's value. this is the minimum viable script.
the reference sizes are real. react+react-dom minified is ~136KB. the median web page in 2024 is ~2.5MB. war and peace is 3.2MB of plain text. most web pages are heavier than a novel and say less.
the 50KB default is the void standard. if your page can't fit in 50KB, ask why. the answer is usually: fonts, frameworks, or images that could be smaller.
this page uses ~460 bytes of inline javascript. the sliders need it — range inputs don't display their own values. CSS cannot read an input's value. this is the minimum viable script.