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 HTML-Bereich entfernen

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

Das schließende </html>-Element kann auch alleine weggelassen werden, erst recht wenn das Ende eines HTML-Dokumentes erreicht ist und keine Anweisungen mehr folgen.

<!DOCTYPE html>
<html lang="de">
 <head>
  <meta charset="utf-8">
  <title>Seitentitel</title>
  <meta name="description" content="Seitenbeschreibung ...">
  <meta name="keywords" content="element, html, entfernen">
  <meta name="generator" content="SteveMoto PHP-Framework">
  <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>
   html {
     padding: 125px;
   }
   body {
     font-size: 40px;
   }
   .inline-css {
     color: #000000;
   }
  </style>
 </head>
 <body>
  <h1>Überschrift</h1>
  <p>Text im Absatz...</p>
  <ul>
   <li>Auflistung</li>
    <ul>
     <li>Listen-Eintrag 1</li>
     <li>Listen-Eintrag 2</li>
    </ul>
   </li>
  </ul>
  <script type="text/javascript" src="script_3.js"></script>
  <!-- ein Kommentar noch zum Schluß -->
 </body>
</html>

Hinweis zur Content-Language: Vonseiten des W3C wird empfohlen, die Sprache (z. B. Sprachkürzel "de" für Deutsch), die für das gesamte HTML-Dokument weit gelten soll, bereits im öffnenden <html>-Tag mit zu definieren. Möchte man also das öffnende <html>-Tag entfernen, so sollte man sicherstellen, dass man die "Content-Language: xy" für das HTML-Dokument über den HTTP-Header serverseitig (z. B. mittels .htaccess) oder server-/dokumentenseitig (z. B. mittels PHP-Script am Anfang des HTML-/PHP-Dokumentes) an die Browser-Render-Engine ausliefert.

Hinweis zum CSS: Selbst wenn der <html>-Bereich im HTML-Quelltext komplett entfernt wurde, funktionieren die Definitionen im CSS für <html>, da die modernen Browser-Render-Engines den öffnenden <html>- und den schließenden </html>-Tag im HTML-Quelltext des DOM wieder einsetzen.
Wenn man aber auf Nummer sicher gehen möchte, sollte man entweder zumindest den öffnenden <html>-Tag im HTML stehen lassen, oder aber auf die CSS-Definitionen für den <html>-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>html{padding:125px}body{font-size:40px}.inline-css{color:#000}</style>

<h1>Überschrift</h1>
<p>Text im Absatz...
<ul>
 <li>Auflistung
  <ul>
   <li>Listen-Eintrag 1
   <li>Listen-Eintrag 2
  </ul>
</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.