HTML Gewichtsverlust Optimieren Sie HTML-Tags zum Erstellen von Webseiten

HTML 4

HTML (nicht XHTML), MIME-Typ ist text/html, einige Tags dürfen weggelassen werden. Mit HTML4-DTD können Sie die folgenden Tags weglassen (die sogenannten vermeidbaren Elemente sind durchgestrichen markiert):

 </Bereich>

 </base>

 <body>

 </body>

 </br>

 </col>

 </colgroup>

 </dd>

 </dt>

 <head>

 </head>

 </hr>

 <html>

 </html>

 </img>

 </Eingabe>

 </li>

 </link>

 </meta>

 </option>

 </p>

 </param>

 <tbody>

 </tbody>

 </td>

 </tfoot>

 </th>

 </thead>

 </tr>

Wenn Ihr Code beispielsweise

 <li>List item</li>

Es kann geschrieben werden als

 <li>List item

Absätze sollten beispielsweise

 </p>

Am Ende können Sie einfach schreiben

 <p>My paragraph

Sie können sogar HTML, Kopf und Text entfernen (stellen Sie sicher, dass Sie damit vertraut sind, bevor Sie es zu Ihrem Codierungsstandard machen).

Durch das Weglassen der Tags bleibt das HTML gültig und die Dateigröße wird reduziert. Bei typischen Seiten kann dies eine Einsparung von 5–20 % bedeuten.

HTML 5

Die fortlaufende Weiterentwicklung von HTML 5 bietet einige Methoden zur Reduzierung der Dateigröße.

Beispielsweise die Seitendokumenttypdeklaration

 <!DOCTYPE html>

Kontrast

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Offensichtlich ist die DTD von HTML 5 kürzer.

Beim Festlegen der Kodierung für eine Seite ist HTML 5 einfacher zu verwenden und kürzer:

 <meta charset="utf-8">

ersetzen

 <meta http-equiv="content-type" content="text/html; charset=utf-8">

Normalerweise verarbeiten Browser HTML korrekt.

Darüber hinaus können Sie in der heutigen HTML 5-Version das Typattribut entfernen, das den MIME-Typ deklariert, wie zum Beispiel

 type="text/css"

 oder type="text/javascript"
 Sie können
 <script>
 Alternative <script type="text/javascript">
 verwenden <style>
 Alternative <style type="text/css">
 Auf allen Seitentypen (auch XHTML) können Sie weglassen
 type="text/css"
 HTML 5 macht dies einfacher.
 Durch die gemeinsame Verwendung aller oben genannten Techniken können Sie je nach Codierstil und Textmenge auf Ihrer Seite 10–20 % (oder sogar mehr) Ihrer Dateigröße einsparen. Der Code wird übersichtlicher und Besucher gelangen schneller zum Inhalt Ihrer Site. Wir haben viele dieser Techniken im Privacy Center-Projekt verwendet und dadurch 20 % der ursprünglichen Dateigröße eingespart.

<<: So verwenden Sie CSS, um je nach Unterelementen unterschiedliche Stile zu schreiben

>>: JavaScript zum Implementieren einer einfachen Uhr

TD bei der Webseitenproduktion kann auch über die versteckte Anzeige hinauslaufen

Detaillierte Erläuterung des Prozesses zur Verwendung von Docker zum Erstellen einer PHP-Betriebssystemumgebung in der CentOS7-Umgebung

Artikel

So verwenden Sie JSX in Vue

Artikel

HTML Gewichtsverlust Optimieren Sie HTML-Tags zum Erstellen von Webseiten

TD bei der Webseitenproduktion kann auch über die versteckte Anzeige hinauslaufen

So erstellen, starten und stoppen Sie einen Docker-Container

CSS füllt das übergeordnete Container-Div mit img-Bildern und passt sich der Containergröße an

Methoden zum Bereitstellen von MySQL-Diensten in Docker und die dabei auftretenden Fallstricke

5 Tipps zum Schreiben von CSS, um Ihren Stil standardisierter zu gestalten

So überprüfen Sie die Version des Kali Linux-Systems

Analyse und Lösung des Grundes, warum das Frameset-Tag in HTML nicht normal angezeigt werden kann

Analyse des Problems der Hyper-V-Installation unter CentOS 8

Detaillierte Erläuterung des Prozesses zur Verwendung von Docker zum Erstellen einer PHP-Betriebssystemumgebung in der CentOS7-Umgebung

So verwenden Sie JSX in Vue

Artikel empfehlen

Spezifische Verwendung des Linux-Man-Befehls

Lösung für falsche Zeichenfolgenwerte in MySQL

So implementieren Sie die Komprimierung von Webseiten im Nginx-Optimierungsdienst

jQuery erzielt Vollbild-Scrolling-Effekt

GZIP-Komprimierung Tomcat und Prozessdiagramm zur Verbesserung der Web-Leistung

HTML + CSS + JS realisiert den Scroll-Gradienteneffekt der Navigationsleiste

So dockerisieren Sie eine Python-Django-Anwendung

Dieser Artikel zeigt Ihnen das Prinzip der MySQL Master-Slave-Synchronisation

Zusammenfassung gängiger Befehle zur Linux-Benutzer- und Gruppenverwaltung

So installieren Sie die Odoo12-Entwicklungsumgebung unter Windows 10

Zusammenfassung der Wissenspunkte im Zusammenhang mit Null (IFNULL, COALESCE und NULLIF) in MySQL

Detaillierte Installation und Verwendung von Docker-Compose

Wird der veraltete Docker durch Podman ersetzt?

Benutzerdefinierte Docker-Netzwerkcontainer-Verbindung

Detaillierte Erklärung des MySQL-Datenbankindex