Skip to content Skip to sidebar Skip to footer
Home / Html / Pagespeed / Performance

Number Of Hidden Inputs In HTML Doc Affecting Page Rendering Speed

Post a Comment
Does the number of hidden input fields in an HTML document affect the speed of page rendering in a browser? Yes or no? My guess is the answer is no since hidden fields aren't rende

Solution 1:

The rendering speed is affected on hidden <input> fields but only on a heavy amount of fields (> 500). But the loading speed of the website is more affected! You are loading unnecessary HTML elements. So this can be a factor on slow internet connections (like mobile internet).

I recommend to remove all HTML code you doesn't need to improve the loading speed. After this step you don't have to worry about the rendering speed.

I have now inspected and tested the behaviour in Google Chrome. I created different HTML files with a different amount of hidden <input> fields (0, 100, 1.000, 10.000). So I tracked some interesting factors (loading, rendering and painting speed) with the following result:

enter image description here

Note: all numbers in ms - milliseconds

I used the following template with the different amount of hidden input fields on a local file:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Title of the document</title>
  </head>
  <body>
    <form action="#" method="post">
      <input type="text"/>
      <input type="hidden"/> <!-- x times -->
    </form>
  </body>
</html>

Solution 2:

I personally don't think it will effect the page rendering for 100 hidden input fields (maybe 0.005s slower, so small that is consider negligible).

The reason it is slower is because of the extra html in the page but not the hidden fields. To make my statement clearer is like adding 100 paragraph elements but I set each with an CSS display:none;.


Post a Comment for "Number Of Hidden Inputs In HTML Doc Affecting Page Rendering Speed"