HTML-Optimierungstechniken, die Sie kennen müssen

Um die Leistung von Webseiten zu verbessern, beginnen viele Entwickler mit mehreren Aspekten wie JavaScript, Bildoptimierung, Serverkonfiguration, Dateikomprimierung oder der Anpassung von CSS.

Es ist klar, dass HTML einen Engpass erreicht hat, obwohl es die Kernsprache ist, die zur Entwicklung von Weboberflächen erforderlich ist. Auch die Belastung der HTML-Seiten nimmt zu. Die meisten Seiten benötigen durchschnittlich 40 KB Speicherplatz. Einige große Websites enthalten möglicherweise Tausende von HTML-Elementen, sodass die Seitengröße größer ist.

Wie lässt sich die Komplexität von HTML-Code und die Anzahl der Seitenelemente effektiv reduzieren? Dieser Artikel löst hauptsächlich dieses Problem und stellt aus mehreren Blickwinkeln vor, wie man prägnanten und klaren HTML-Code schreibt, der das Laden der Seite beschleunigt und dafür sorgt, dass sie auf mehreren Geräten gut läuft.

Während des Entwurfs- und Entwicklungsprozesses müssen die folgenden Grundsätze beachtet werden :

• Strukturelle Trennung: Verwenden Sie HTML, um Struktur hinzuzufügen, nicht um Inhalte zu formatieren.
  Halten Sie es sauber: Fügen Sie Ihrem Workflow Codevalidierungstools hinzu; verwenden Sie Tools oder Stilhandbücher, um die Struktur und das Format des Codes beizubehalten. Lernen Sie eine neue Sprache: Sorgen Sie für die richtige Elementstruktur und semantische Auszeichnung.
  Stellen Sie die Zugänglichkeit sicher: Verwenden Sie ARIA-Attribute und Fallback-Attribute usw. Testen Sie: Sorgen Sie dafür, dass die Website auf mehreren Geräten gut läuft, verwenden Sie Emulatoren und Leistungstools.

Die Beziehung zwischen HTML, CSS und JavaScript

HTML ist eine Auszeichnungssprache, die zur Koordinierung der Struktur und des Inhalts von Webseiten verwendet wird. HTML kann nicht zum Ändern von Stilinhalten verwendet werden, und in das Head-Tag kann kein Textinhalt eingegeben werden, was den Code langwierig und kompliziert macht. Stattdessen ist es besser, CSS zum Ändern von Layoutelementen und Erscheinungsbild zu verwenden. Das Standardaussehen von HTML-Elementen wird durch das Standard-Stylesheet des Browsers definiert. In Chrome wird das h1-Tag-Element beispielsweise als 32px Times fett dargestellt.

Drei allgemeine Gestaltungsregeln:

• Verwenden Sie HTML zum Erstellen der Seitenstruktur, CSS zum Ändern der Seitendarstellung und JavaScript zum Implementieren von Seitenfunktionen. CSS ZenGarden ist ein großartiges Beispiel für Verhaltenstrennung.
  Verwenden Sie weniger HTML-Code, wenn Sie dazu CSS oder JavaScript verwenden können.
  Speichern Sie CSS- und JavaScript-Dateien getrennt von HTML. Dies kann beim Zwischenspeichern und Debuggen hilfreich sein.

Die Dokumentstruktur kann außerdem wie folgt optimiert werden:

1. Verwenden Sie den HTML5-Dokumenttyp. Das Folgende ist eine leere Datei:

2. Referenzieren Sie die CSS-Datei am Anfang des Dokuments wie folgt:

Bei beiden Methoden bereitet der Browser die CSS-Informationen vor, bevor er den HTML-Code analysiert. Daher trägt es dazu bei, die Seitenladeleistung zu verbessern.

Das Einfügen von JavaScript-Code vor dem Body-Schließtag am unteren Seitenrand beschleunigt das Laden der Seite, da der Browser die Seite lädt, bevor er den JavaScript-Code analysiert. Die Verwendung von JavaScript wirkt sich positiv auf die Seitenelemente aus.

Bei Verwendung der Attribute „Defer“ und „async“ kann nicht garantiert werden, dass Skriptelemente mit dem Attribut „async“ in der richtigen Reihenfolge ausgeführt werden.

Handler können im JavaScript-Code hinzugefügt werden. Fügen Sie es niemals zu HTML-Inline-Code hinzu, wie zum Beispiel dem folgenden Code, der fehleranfällig und schwer zu warten ist:

Datei:

Besser ist folgendes:

Datei:

java.js/local.js:

verifizieren

Eine Möglichkeit zur Optimierung von Webseiten besteht darin, Browser in die Lage zu versetzen, unzulässigen HTML-Code zu verarbeiten. Legaler HTML-Code lässt sich leicht debuggen, benötigt weniger Speicher und Ressourcen, lässt sich leicht analysieren und rendern und läuft schneller. Unzulässiger HTML-Code erschwert die Umsetzung von Responsive Design enorm.

Bei der Verwendung von Templates ist ein legaler HTML-Code äußerst wichtig. Es kommt häufig vor, dass ein Template alleine gut läuft, bei der Integration mit anderen Modulen aber diverse Fehler gemeldet werden. Daher muss die Qualität des HTML-Codes gewährleistet sein. Folgende Maßnahmen können ergriffen werden:

• Fügen Sie Ihrem Workflow eine Validierung hinzu: Verwenden Sie Validierungs-Plugins wie HTMLHint oder SublineLinter, um Codierungsfehler zu erkennen.
  Verwenden Sie den HTML5-Dokumenttyp, um sicherzustellen, dass die HTML-Hierarchie einfach zu verwalten ist, und vermeiden Sie die Verschachtelung von Elementen im geöffneten Zustand.
  Stellen Sie sicher, dass Sie für jedes Element das schließende Tag hinzufügen.
  Löschen Sie unnötigen Code. Für selbstschließende Elemente müssen keine End-Tags hinzugefügt werden. Booleschen Attributen müssen keine Werte zugewiesen werden. Wenn sie vorhanden sind, sind sie „True“.

Codeformat

Durch die Formatkonsistenz ist HTML-Code leicht zu lesen, zu verstehen, zu optimieren und zu debuggen.

Semantische Auszeichnung

Semantik bezieht sich auf Dinge, die in ihrer Bedeutung zusammenhängen, und HTML kann in der Semantik des Seiteninhalts gesehen werden: Die Benennung von Elementen und Attributen drückt bis zu einem gewissen Grad die Rolle und Funktion des Inhalts aus. HTML5 führt neue semantische Elemente wie <header>, <footer> und <nav> ein.

Durch die Auswahl der richtigen Elemente zum Schreiben Ihres Codes wird sichergestellt, dass dieser leicht lesbar ist:

• Verwenden Sie <h1> (<h2>, <h3>…), um einen Titel anzugeben, und <ul> oder <ol>, um eine Liste zu implementieren.
  Beachten Sie, dass das <h1>-Tag vor der Verwendung des <article>-Tags hinzugefügt werden sollte.
  Wählen Sie geeignete semantische HTML5-Elemente wie <header>, <footer>, <nav>, <aside>;
  Verwenden Sie <p>, um den Haupttext zu beschreiben. Semantische Elemente in HTML5 können Inhalte bilden, umgekehrt gilt dies jedoch nicht.
  Verwenden Sie die Tags <em> und <strong> anstelle der Tags <i> und <b>.
  Verwenden Sie das <label>-Element, den Eingabetyp, den Platzhalter und andere Attribute, um die Validierung zu erzwingen.
  Das Mischen von Text mit Elementen als untergeordnete Elemente eines anderen Elements kann zu Layoutfehlern führen.

Zum Beispiel:

Es wäre besser, es anders zu schreiben:

1: <div>
2: <label for="name">Name:</label><input type="text" id="name">
3: </div>

Layout

Um die Leistung von HTML-Code zu verbessern, befolgen Sie den Grundsatz, dass HTML-Code eher auf Funktionalität als auf Stil ausgelegt sein sollte.

• Verwenden Sie das <p>-Element zum Dekorieren von Text, nicht zum Layout. Standardmäßig sorgt <p> automatisch für Ränder und andere Stile werden standardmäßig auch vom Browser bereitgestellt.
  Vermeiden Sie die Verwendung von <br> zum Umbrechen von Zeilen. Verwenden Sie stattdessen Blockelemente oder CSS-Anzeigeeigenschaften.
  Vermeiden Sie die Verwendung von <hr> zum Hinzufügen horizontaler Linien. Verwenden Sie stattdessen CSS border-bottom.
  Verwenden Sie keine Div-Tags, es sei denn, es handelt sich um einen kritischen Moment.
  Versuchen Sie, für das Layout so wenig Tabellen wie möglich zu verwenden.
  Sie können Flex Box mehr verwenden
  Verwenden Sie CSS, um Ränder usw. anzupassen.

CSS

Obwohl es in diesem Artikel um die Optimierung von HTML geht, finden Sie hier einige grundlegende Kenntnisse zur Verwendung von CSS:

• Vermeiden Sie Inline-CSS
  Verwenden Sie die ID-Klasse höchstens einmal. Wenn mehrere Elemente beteiligt sind, können Sie Class zur Implementierung verwenden.

Oben sind die in diesem Artikel vorgestellten Tipps zur Optimierung des HTML-Codes aufgeführt. Eine qualitativ hochwertige und leistungsstarke Website hängt oft von der Handhabung der Details ab.