Excessive white space in HTML source, can impair in the site performance? This doubt arose, when I was making the HTML source indentation so that stayed organized and easy to understand, but for that I needed use many white spaces. My HTML source: <!doctype html> <html lang="pt-br"> <head> <meta charset = "utf-8"> <title>Temp</title> <link href="global/css_reset/normalize.css" rel="stylesheet" type="text/css" media="all"> <link href="global/css_reset/reset.css" rel="stylesheet" type="text/css" media="all"> <link href="global/css_layout_style/layout_style_main_tags.css" rel="stylesheet" type="text/css" media="all"> <link href="sign_up_page/css_layout_style/sign_up.css" rel="stylesheet" type="text/css" media="all"> <link href="global/css_layout_style/style_nav.css" rel="stylesheet" type="text/css" media="all"> <link href="sign_up_page/css_layout_style/footer.css" rel="stylesheet" type="text/css" media="all"> <link href="sign_up_page/css_layout_style/effect.css" rel="stylesheet" type="text/css" media="all"> <link href="global/css_layout_style/style_img.css" rel="stylesheet" type="text/css" media="all"> <script type="text/javascript"> function formValidation() { if(document.cadastro.nome.value=="") { alert("O Campo nome é obrigatório!"); return false; } else /*if(document.cadastro.email.value=="") { alert("O Campo email é obrigatório!"); return false; } else*/ if(document.cadastro.cidade.value=="") { alert("O Campo Cidade é obrigatório!"); return false; } else if(document.cadastro.estado.value=="") { alert("O Campo Estado é obrigatório!"); return false; } else if(document.cadastro.pais.value=="") { alert("O Campo paÃs é obrigatório!"); return false; } else /*if(document.cadastro.senha.value=="") { alert("Digite uma senha!"); return false; } else*/ if(document.cadastro.password.value!=document.cadastro.password2.value) { alert("A senha digitada não confere."); return false; } else if(document.cadastro.termos.checked==false) { alert("É preciso estar de acordo com os termos de uso para continuar."); return false; } else return true; } </script> </head> <body> <div id="site_layout"> <div class="line_shadow"> <img src="global/img/line_shadow.png"> </div> <div class="sub_title"> <img src="global/img/sub_title.png"> </div> <div id="vertical_header_down"> </div> <div class="shadow_down_left"> <img src="global/img/shadow_left.png"> </div> <div class="shadow_down_right"> <img src="global/img/shadow_right.png"> </div> <div class="simple_line"> <img src="global/img/simple_line.png"> </div> <div id="sign_up_form"> <fieldset> <legend class="cad_title"><strong>Cadastro</strong></legend> <form name="cadastro" method="post" action="register.php" onsubmit="return formValidation(); return false;"> <table width="625" border="0"> <tr> <td width="69" style="font-family:vijaya; font-size:20px;">Nome:</td> <td width="546"><input name="nome" type="text" id="nome" size="70" maxlength="60" /> <span>*</span></td> </tr> <tr> <td width="69" style="font-family:vijaya; font-size:20px;">Sobrenome:</td> <td width="546"><input name="sobrenome" type="text" id="sobrenome" size="70" maxlength="60"/> </tr> <tr> <td style="font-family:vijaya; font-size:20px;">Email:</td> <td><input name="email" type="text" id="email" size="70" maxlength="60" value="<?php echo $_POST['email'];?>"/> <span>*</span></td> </tr> <tr> <td style="font-family:vijaya; font-size:20px;">Sexo:</td> <td><input name="sexo" type="radio" value="Masculino" checked="checked" /> Masculino <input name="sexo" type="radio" value="Feminino" /> Feminino <span>*</span> </td> </tr> <tr> <td style="font-family:vijaya; font-size:20px;">DDD:</td> <td><input name="ddd1" type="text" id="ddd1" size="4" maxlength="2" /> <span style="font-family:vijaya; font-size:20px; color:#000;">Telefone:</span> <input name="telefone" type="text" id="telefone" /> </tr> <tr> <td style="font-family:vijaya; font-size:20px;">DDD:</td> <td><input name="ddd2" type="text" id="ddd2" size="4" maxlength="2" /> <span style="font-family:vijaya; font-size:20px; color:#000;">Celular:</span> <input name="celular" type="text" id="celular" /> </tr> <tr> <td style="font-family:vijaya; font-size:20px;">Cidade:</td> <td><input name="cidade" type="text" id="cidade" maxlength="20" /> <span">*</span></td> </tr> <tr> <td style="font-family:vijaya; font-size:20px;">Estado:</td> <td><select name="estado" id="estado"> <option style="font-family:vijaya; font-size:20px;">Selecione...</option> <option value="AC">AC</option> <option value="AL">AL</option> <option value="AP">AP</option> <option value="AM">AM</option> <option value="BA">BA</option> <option value="CE">CE</option> <option value="ES">ES</option> <option value="DF">DF</option> <option value="MA">MA</option> <option value="MT">MT</option> <option value="MS">MS</option> <option value="MG">MG</option> <option value="PA">PA</option> <option value="PB">PB</option> <option value="PR">PR</option> <option value="PE">PE</option> <option value="PI">PI</option> <option value="RJ">RJ</option> <option value="RN">RN</option> <option value="RS">RS</option> <option value="RO">RO</option> <option value="RR">RR</option> <option value="SC">SC</option> <option value="SP">SP</option> <option value="SE">SE</option> <option value="TO">TO</option> </select> <span style="color:#F00;">*</span></td> </tr> <td style="font-family:vijaya; font-size:20px;">País:</td> <td><input name="pais" type="text" id="pais" maxlength="20" /> <span>*</span></td> </tr> <tr> <td style="font-family:vijaya; font-size:20px;">Username:</td> <td><input name="username" type="text" id="login" maxlength="12" value="<?php echo $_POST[ 'username'];?>"/> <span>*</span></td> </tr> <tr> <td style="font-family:vijaya; font-size:20px;">Senha:</td> <td><input name="password" type="password" id="senha" maxlength="12" value="<?php echo $_POST['password'];?>"/> <span>*</span></td> </tr> <tr> <td style="font-family:vijaya; font-size:20px;">Confirme a senha:</td> <td><input name="password2" type="password" id="senha2" maxlength="12"/> <span>*</span></td> </tr> <tr> <td colspan="2" style="font-family:vijaya; font-size:20px;"><input name="termos" type= "checkbox" id="termos" value="agree"/> <strong>Concordo com os termos de uso. <span><a href="termos.php">*</a></span></strong> </td> </tr> <tr> <td colspan="2"><p> <input name="Cadastrar" type="submit" id="cadastrar" value="Cadastrar" /> <div class="clear"> <input name="Limpar" type="reset" id="limpar" value="Limpar" /> </div> <div class="termos_msg"> <span style="color:#000;"><strong><span>*</a></span>Campos com <span>*</span> são obrigatórios!</ strong></span></p> </div> </td> </tr> </table> </form> </fieldset> </div> <nav> <strong><p><center>Cadastre-se</center></p></strong><br> <a class="home" href="home_page.php"><strong>Home</strong></a><br /> </nav> <footer> <p class="copyright">Copyright 2013 ... . Todos os direitos reservados.</p> </footer> <div class="white_footer"> </div> </body> </html> HTML:
It doesn't matter. You should use tab for indentation, it takes only one character for a tab instead of X characters for X space. But really it doesn't matter, text is VERY light, only one JPG image weights often more than all your white space in your html. Plus often the web servers send the html file with zip compression and it's very good on text files.