Excessive White Space VS Performance

Discussion in 'HTML & Website Design' started by sykes3d, Dec 3, 2012.

  1. #1
    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&iacute;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&atilde;o obrigat&oacute;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:
     
    Solved! View solution.
    sykes3d, Dec 3, 2012 IP
  2. #2
    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.
     
    JamesColin, Dec 3, 2012 IP
  3. sykes3d

    sykes3d Greenhorn

    Messages:
    16
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #3
    Excellent reply!!!

    Thanks for your time!!!!!
     
    sykes3d, Dec 3, 2012 IP