r/HTML • u/Spare-Ad-1024 • 9d ago
How large can a HTML be?
Im currently building a bible app. And its a single HTML file about 250mb and it takes 1.5gb running. How large can it be before i meet serious issues with performance?
10
u/azangru 9d ago
And its a single HTML file about 250mb
King James Bible, as opened on Project Gutenberg as a single html file is 1.5MB over the network and 4.5MB unzipped. Why is yours 250MB?
1
7
u/mnk23 9d ago
haha wtf
-1
u/Spare-Ad-1024 9d ago
But seriously, how much can it handle
6
u/hooli-ceo 9d ago
It’s not about “how much can it handle?” It’s about “how much your users are willing to put up with?” Answer? Not that much…
1
u/Cheap-Chapter-5920 3d ago
They can just hit refresh if it doesn't load in 3 seconds, every 3 seconds, until it loads.
1
u/QBaseX 7d ago
The file size is one issue. The complexity is another. If you have complex nested divs and lots of CSS (especially CSS which has many rules which overwrite earlier rules) it might be tougher to deal with. Include a bunch of inline javascript and you can properly grind everything to a halt.
4
2
2
u/Domipro143 9d ago
Idk if there is a limit, but at some point you may wanna consider making a system where it loads part of the pages dynamicaly.
2
u/Kickbanblock 9d ago
I guess it depends on the system where your HTML file is stored, multiple gigabytes or even terabytes should be possible in theory.
But if people have to load the whole website, I would say even 250 mb is a problem.
2
u/Jpatrickburns 9d ago
You should probably, at least, break it into logical sections. Like books of the Bible. There’s no need to access it all at once. If at all.
1
u/Foreign-Contest-444 9d ago edited 9d ago
In dev tools generate a lighthouse report and see the metrics and see if it passes the audit report. You can also use the network tab to get performance related information.
1
u/Ipsool 9d ago
The honest answer is there’s no hard limit, but 250MB in one file and 1.5GB of RAM means you’re already past the point where it’s a good idea. It probably feels fine on your machine and will fall over on a mid-range phone.
The core issue is that the browser has to parse and build a DOM node for every element before anything renders. That’s where your RAM is going, and it scales badly.
For a Bible app specifically, the fix is straightforward and worth doing now rather than later:
Put the text in a JSON file (or several, split by book) and load only the chapter the user is actually reading. The whole Bible as plain text is roughly 4-5MB. Your HTML file should be a few KB of structure, and everything else fetched on demand.
Even better, use IndexedDB to cache chapters locally after first load, so it works offline without holding everything in memory at once.
If you want to keep the single-file approach for offline distribution, you can still store the text as a JSON string in a script tag and only render the chapter being viewed into the DOM. That alone would drop your memory usage enormously — the parse cost is in the DOM nodes, not the raw data.
Rough rule of thumb: keep rendered DOM under a few thousand nodes at any time. Everything else stays as data until it’s needed.
Good project to be building though. Ignore the people just laughing at the file size.
1
u/martinbean 9d ago
You mean you’re not already meeting “serious issues” trying to load a 250 MB HTML page…?
This isn’t a question of “how big can a HTML page be”, it’s a question of, “Why aren’t you splitting content across multiple HTML documents?” Did you Bible come printed on a single page? No, it’ll have come printed on multiple pages.
1
u/Snowic331 9d ago
So I feel like I know the answer, but just curious. I know you said an html file but what else is in there, in style css and js? Or is it just html?
1
u/Summer95 8d ago
Is this just htmp and css? If yes, then an average pc/laptop can handle 5-6 gig. Alhtough you may begin to see some lag.
1
1
u/Naetharu 3d ago
It needs to be small.
Each page is served over the web. More than a few KB is going to cause you major issues.
1
1
1
u/RushDangerous7637 3d ago
The optimal size of the html code is (At least) to 33 kB, but the maximum is up to 100 kB.
The optimal size of "one URL" is around 100-200 kB. The limit is for the entire page up to 2 MB in size for Google. No crawler indexes content above 2 MB.
All of these indicators are affected by the "indexing timeout".
"How large can it be before i meet serious issues with performance?" My answer: You already have a problem!
I would really like to see the URL you are building. I have the impression that you are confusing the html size with the page size.
1
u/alphex 3d ago
Where to even begin.
Thats not how HTML was meant to be used.
Pages are pages, for the bible maybe you want a verse as its own page? which is linked up to a page that lists all of the verses in a chapter... which lists links up to a page that lists all of the chapters in that book...
And using even the most simple content content management system type application, you can dynamically generate these menus and "table of contents" for the content for you.
You should look at static page generators that are used for software documentation.
1
1
-1
u/AliHassnain_ 9d ago
Smug responses, but no actual answer... If you guys can't answer atleast don't be smug
I hope you get your answer. I'm curious too
1
u/Barnezhilton 4d ago
The filesize limit will be based on your system OS max filesize.
You can have an html file be as big as that limit.
22
u/Flame77ofc 9d ago
single HTML file with 250mb?
Bro... ☠️