I have created a contact form page that is unfortunately kinda big. The HTML size is 200KB.
Although I know with everything else considered (images, scripts etc.) most pages are much heavier than this, can I face any issues here?
asked Jul 2, 2013 at 15:34
-
Breakdown for us what comprises that 200k size. i.e. how much is images, scripts, etc.– John Conde ♦Commented Jul 2, 2013 at 15:35
-
200 is just the html. Page itself and conditional input fields. (drop downs, check boxes, that type of stuff). Total page with scripts and images is 821Kb– riseagainstCommented Jul 2, 2013 at 15:54
-
821 Kb for a contact form seems way too much for me. Hope everything has a good reason to be there... Will you, as a user, complete the whole form?– Diego AgullóCommented Jul 2, 2013 at 18:32
-
No, 821 is the whole page, scripts, images the whole deal. The form itself, is actually 174Kb. There's a lot of conditional fields, So mostly, depending on one of the entries, the user may use between 6-10 fields.– riseagainstCommented Jul 2, 2013 at 19:49
-
1@dan Thanks. With gzip I was able to reduce the file to 19kb. 88%.– riseagainstCommented Jul 2, 2013 at 23:45
|
Show 1 more comment
1 Answer
200KB of pure text should be fine, unless a lot of it is javascript that the browser has to execute. Some browsers or users on slower connections (don't forget about mobile users!) may only see part of the page load initially if the browser takes longer to parse the DOM and figure out what everything is and where it goes. The only real way to find out is to test it on a variety of connections, browsers, and devices.
Generally, though, HTML does not need to be that large, so I would review your code to see if you are following best practices. See if there is any inline CSS that could be converted into style sheets. If you have 100 lines with <input style="width:100px;color:black"> you could cut out a lot of text with a input{width:100px;color:black}, or whatever the case may be. Look into tools for "minifying" your content. There are some other tips for reducing HTML size at this question.
You could also look into splitting the form into multiple steps or using AJAX to load less urgent elements or elements farther down the page. I used to have a page on an e-commerce website that tried to load 10,000 elements into javascript arrays to dynamically change one dropdown based on a change in another. It always took several seconds to load, and it was actually much faster to simply load the initial values and use AJAX to change the contents based on the user's input.
