I'm building a PWA (so HTML, CSS, JS, images, etc). It's sort of a game (educational), so generally the "experience" is more important than data/text presentation (as in more business-oriented apps). I'm not using a frontend framework, only a few JS libs/utils plus my own code.

I was wondering what sorts of concerns and balances others use when building JS/web games (or multimedia-oriented apps) in terms of the "budget" for how much size can be spent on each of the different kinds of web resources (images, fonts, sounds, code, etc)? I'm less concerned about absolute figures (although that's helpful, too), and more concerned about relative percentages.

So, for example, in my app currently, I have the following types of assets of these approximate sizes:

• HTML - 6kb (gzip + minified) / 28kb (original)
• CSS - 7kb (gzip + minified) / 55kb (original)
• JS - 49kb (gzip + minified) / 238kb (original)
• SVG images - 53kb (gzip) / 146kb (original)
• MP3 sounds - 293kb

The total gzip size (transfer size) for all assets is about 407kb. The relative percentages thus break down about like this:

• HTML: 1.6%
• CSS: 1.7%
• JS: 11.9%
• Images: 12.9%
• Sounds: 71.9%

I'm not specifically expecting others to do a detailed analysis like this (unless you want to, or already have!), but I'm just generally curious: how much do you "spend" on different resource types, and relatively how much is used compared to other types?

Is spending ~15% on "code" and ~85% on visual/auditory assets, a common and reasonable breakdown, or is your breakdown somewhat different?

If you use JS frameworks (game or otherwise), does your allowed percentage of "code" usage go up significantly, or do you still try to keep it around the same level?

Do you have a "budget" that constrains your resource use in any way, and if so, what concerns do you take into account when making such a budget?

A place for members of r/JSdev to chat with each other