Tutorials / Webentwicklung / Webseiten-Optimierung / Ladezeit verbessern / HTML / HTML-Elemente entfernen

Mit HTML die übertragene Datenmenge reduzieren

Nicht notwendige HTML Elemente entfernen

Das HTML-Element für den Body-Bereich entfernen

Das <body>-HTML-Element im HTML-Quelltext ist nach W3C-Spezifikation ein optionales HTML-Element und kann weggelassen werden.

Das schließende </body>-HTML-Element kann auch alleine weggelassen werden, erst recht wenn ein schließendes </html>-Element im Quelltext folgen sollte.

<!DOCTYPE html>
<html lang="de">
 <head>
  <meta charset="utf-8">
  <title>Seitentitel</title>
  <meta name="description" content="Seitenbeschreibung ...">
  <link type="text/css" href="style_a.css" rel="stylesheet">
  <link type="text/css" href="style_b.css" rel="stylesheet">
  <script type="text/javascript" src="script_1.js"></script>
  <script type="text/javascript" src="script_2.js"></script>
  <meta name="robots" content="index, follow">
  <style>
   body {
     font-size: 40px;
   }
   .inline-css {
     margin: 0;
     padding: 0;
   }
  </style>
 </head>
 <body>
  <h1>Überschrift</h1>
  <p>Text im Absatz...</p>
  <ul>
   <li>Listen-Eintrag 1</li>
   <li>Listen-Eintrag 2</li>
  </ul>
  <script type="text/javascript" src="script_3.js"></script>
  <!-- ein Kommentar noch zum Schluß -->
 </body>
</html>

Die modernen Browser-Render-Engines verstehen anhand der Inhalte des HTML-Quelltextes welche Daten in den <head>-Bereich und welche Daten in den <body>-Bereich einer Webseite gehören und setzen automatisch die entsprechenden HTML-Tags in den HTML-Quelltext des DOM an den richtigen Stellen wieder ein.
Dies kann man mit einer entsprechenden Webmaster-Browser-Erweiterung überprüfen.

Selbst am Ende des HTML-Quelltextes absichtlich platziertes Javascript (um die Render-Zeit der Webseite zu beschleunigen) wird von den modernen Browser-Render-Engines dem <body>-Bereich zugeordnet.

Hinweis zum CSS: Wenn der <body>-Bereich im HTML-Quelltext komplett entfernt wurde, funktionieren die Definitionen im CSS für <body> trotzdem, da die modernen Browser-Render-Engines den öffnenden <body>- und den schließenden </body>-Tag im HTML-Quelltext des DOM wieder einsetzen.
Wenn man aber auf Nummer sicher gehen möchte, sollte man entweder zumindest den öffnenden <body>-Tag im HTML stehen lassen, oder aber auf die CSS-Definitionen für den <body>-Bereich verzichten.

<!DOCTYPE html>

<title>Seitentitel</title>
<meta name=description content='Seitenbeschreibung ...'>

 <link type=text/css href=style_a_b.css rel=stylesheet>
 <script type=text/javascript src=script_1_2.js></script>
 <style>body{font-size:40px}.inline-css{margin:0;padding:0}</style>

<h1>Überschrift</h1>
<p>Text im Absatz...
 <ul>
  <li>Listen-Eintrag 1
  <li>Listen-Eintrag 2
 </ul>

 <script type=text/javascript src=script_3.js></script>

Entfernte HTML-Elemente, die nicht benötigt werden, reduzieren die zu übertragende Datenmenge und können somit das Laden von Webseiten verbessern.