Einige Tipps zum Schreiben leistungsstarker HTML-Anwendungen

Wie können Sie die Leistung einer Webseite verbessern?

Die meisten Entwickler nehmen die Optimierung über JavaScript und Bilder vor, über die Serverkonfiguration, das Komprimieren und Verketten von Dateien oder sogar über die Feinabstimmung von CSS (Kombinieren kleiner Bilder).

Schlechtes HTML wird oft übersehen, obwohl es schon immer die Kernsprache des Webs war.

HTML wird immer größer. Die meisten HTML-Seiten der Top-100-Websites sind etwa 40 KB groß. Amazon und Yahoo verwenden Tausende von HTML-Seiten. Auf der Hauptseite von youtube.com gibt es 3.500 HTML-Elemente.

Durch die Reduzierung der HTML-Komplexität und der Anzahl der Elemente auf einer Seite lässt sich die Analysezeit zwar nicht wesentlich verbessern, HTML ist jedoch ein entscheidender Faktor beim Erstellen schneller Webseiten, die sich an verschiedene Geräte anpassen und den Erfolg beeinflussen.
In diesem Artikel erfahren Sie, wie Sie prägnantes und übersichtliches HTML schreiben, mit dem Sie Websites erstellen können, die schnell geladen werden, mehrere Geräte unterstützen und leicht zu debuggen und zu warten sind.

Es gibt nicht nur eine Möglichkeit, Code zu schreiben – insbesondere HTML. Dies ist nur eine allgemeine Erfahrung, aber es ist nicht die einzig richtige Wahl.
HTML, CSS und JavaScript

HTML ist eine Auszeichnungssprache zur Darstellung von Struktur und Inhalt.

Zur Anzeige von Stil und Erscheinungsbild sollte kein HTML verwendet werden. Schreiben Sie keinen Text in Überschriften-Tags (h1-h6), nur um ihn „größer“ erscheinen zu lassen, und verwenden Sie keine Anführungszeichen nur um eine Einrückung zu erzielen. Verwenden Sie stattdessen CSS, um das Erscheinungsbild und Layout von Elementen zu ändern.

Das standardmäßige Erscheinungsbild von HTML-Elementen wird durch die Standardstile des Browsers erreicht: Firefox, Internet Explorer und Opera sind alle unterschiedlich. Beispielsweise wird in Chrome das Standard-h1-Element mit einer Größe von 32 Pixel gerendert.

Drei Grundprinzipien:

HTML wird zur Darstellung der Struktur verwendet und CSS dient zum Ausdruck verschiedener Stile und Themen. JavaScript, um auf Benutzeraktionen zu reagieren.

Verwenden Sie HTML, bei Bedarf mit CSS und bei Bedarf mit JavaScript. Beispielsweise verwenden Sie in vielen Fällen HTML-Formulare zur Validierung und CSS oder SVG für die Animation.

Trennen Sie CSS und JavaScript von Ihrem HTML-Code. Durch die Möglichkeit der Zwischenspeicherung lässt sich der Code leichter debuggen. In der Produktion können CSS und JavaScript minimiert und kombiniert werden und sollten Teil Ihres Build-Systems sein. Hinweis* Siehe JavaScript Build (Kompilierung) System Wettbewerb Dokumentstruktur

Verwenden des HTML5-Dokumenttyps:

Verweisen Sie oben auf der Seite auf die CSS-Datei, beispielsweise im Kopfelement:

Auf diese Weise kann der Browser die Stile vor dem Parsen des HTML vorladen, ohne dass ein unordentliches Seitenlayout entsteht.

Platzieren Sie JavaScript ganz unten auf der Seite, bevor Sie den Hauptteil schließen. Dadurch erhöht sich die Zeit zum Rendern der Seite, da der Browser die Seite rendern kann, bevor JavaScript geladen wird:

Fügen Sie die Ereignisbehandlung in JavaScript hinzu. Fügen Sie es nicht in HTML hinzu. Dies ist sehr schwierig aufrechtzuerhalten, zum Beispiel:

Das ist viel besser:

Gültiges HTML

Ein wesentlicher Faktor für den Erfolg von Webseiten ist die Fähigkeit des Browsers, ungültiges HTML zu verarbeiten. Browser verfügen außerdem über einige standardisierte Regeln für die Darstellung von ungültigem Code.

Dies ist jedoch kein Grund für Sie, darauf zu verzichten. Gültiges HTML lässt sich leichter debuggen, besteht tendenziell aus kleineren Dateien, ist schneller und verbraucht weniger Ressourcen, da es schneller gerendert wird. Ungültiges HTML erschwert die Implementierung von Responsive Design.

Das Schreiben von gültigem HTML ist besonders wichtig, wenn Sie Vorlagen verwenden.

Validieren Sie HTML in Ihrem BUILD-System: Verwenden Sie Validierungs-Plugins wie HTMLHint und SublimeLinter, um die Syntax Ihres HTML zu überprüfen.

Verwenden Sie den HTML5-Dokumenttyp.

Achten Sie darauf, die HTML-Hierarchie beizubehalten: Verschachteln Sie die Elemente richtig und stellen Sie sicher, dass keine offenen Elemente vorhanden sind. Es kann Debuggern helfen, Kommentare hinzuzufügen.

Achten Sie darauf, nach nicht selbstschließenden Elementen ein schließendes Tag hinzuzufügen. Folgendes funktioniert beispielsweise:

Die folgende Schreibweise kann jedoch Fehler vermeiden und die Absatzhierarchie deutlicher machen:

<p>Pesto ist gut zu essen...</p>
<p>…und Pesto ist einfach zuzubereiten.</p>

Das Elementeelement (li) muss nicht geschlossen sein, einige sehr kluge Programmierer schreiben es so, das Listenelement (ul) muss jedoch geschlossen sein.

Eine Sache, auf die Sie achten müssen, sind die Video- und Audioelemente. Sie sind nicht in sich geschlossen:

Im Gegenteil: Durch das Entfernen unnötigen Codes wird die HTML-Seite übersichtlicher.

Es ist nicht erforderlich, "/" zu selbstumschließenden Elementen wie img usw. hinzuzufügen.

Das Setzen der Eigenschaft hat keinen Wert, wenn Sie die Eigenschaft nicht hinzufügen (in diesem Fall erfolgt keine automatische Wiedergabe und es gibt keine Steuerelemente).

Video, das keine Attribute hat

Die folgenden beiden sind besser

Das ist besser lesbar

Die Stylet- und Script-Tags erfordern kein Typattribut. Die Standardwerte sind CSS und JavaScript.

Es ist besser, die Protokolladresse zu optimieren (http oder https entfernen, es wird automatisch entsprechend dem aktuellen Protokoll konfiguriert)

Verbessern Sie die Lesbarkeit, d. h. es sieht auf den ersten Blick wie ein Titel aus

Das ist wie ein Link

<a href="/contact"><h2>Kontakt</h1></a>

Sollte Kleinbuchstaben verwenden

Noch schlimmer sieht es aus, wenn Groß- und Kleinbuchstaben gemischt werden.

Semantische Auszeichnung

"Semantik" bedeutet bedeutungsbezogen

HTML sollte sinnvolle Inhalte markieren: Elemente sollten mit dem Inhalt übereinstimmen, den sie beschreiben.

HTML5 führt einige neue „semantische Elemente“ wie <header>, <footer> und <nav> ein.

Die Verwendung der richtigen Elemente für den richtigen Inhalt trägt zur Barrierefreiheit bei.

Verwenden Sie <h1>, <h2>, <h3> für Titel, <ul> oder <ol> für Listen

Beachten Sie, dass der Titel von <article> mit <h1> beginnen sollte

Verwenden von <header>, <footer>, <nav> und <aside>

Verwenden Sie <p>, um den Haupttext zu schreiben

Verwenden Sie zur Hervorhebung <em> und <strong> anstelle von <i> und <b>

Das Formular verwendet das Element <label>, Eingabetyp

Das Mischen von Text und Elementen kann zu Layoutproblemen führen

Am besten lässt es sich wie folgt ausdrücken

Layout

HTML sollte mit Bedeutung strukturiert sein, nicht mit Stil.

Verwenden Sie das <p>-Element für Text, nicht für Layout.

Vermeiden Sie die Verwendung von <br> zum Umbrechen von Zeilen. Verwenden Sie stattdessen Elemente auf Blockebene und CSS.

Vermeiden Sie die Verwendung horizontaler Trennlinien <hr>. Verwenden Sie zur Steuerung CSS-Rahmenstile.

Verwenden Sie keine unnötigen DIVs. W3C definiert DIV als letztes Element in der Sortierreihenfolge.

Achten Sie darauf, welche Elemente auf Blockebene sind, und vermeiden Sie die Platzierung unnötiger Elemente auf Blockebene in einem DIV. Es ist nicht notwendig, eine Liste in ein Div einzufügen.

Verwenden Sie keine Tabellen für das Layout.

Flexbox wird allgemein empfohlen, verwenden Sie sie also, wenn Sie können.

Verwenden Sie CSS-Füllung und -Ränder und machen Sie sich mit dem Boxmodell vertraut.
CSS

In diesem Beitrag geht es um HTML, aber hier sind einige grundlegende CSS-Tipps.

Vermeiden Sie Inline-CSS. Aus Leistungsgründen kann CSS zur BUILD-Zeit in Ihre Webseiten eingebettet werden.

Vermeiden Sie die Duplizierung von IDs.

Wenn Sie einen Stil auf mehrere Elemente anwenden möchten, verwenden Sie eine Klasse, vorzugsweise für das übergeordnete Element und nicht für die untergeordneten Elemente:

Zugänglichkeit

Semantische Elemente verwenden

Bietet Abwärtskompatibilität

Fügen Sie dem Link ein Titelattribut hinzu und vermeiden Sie, denselben Inhalt wie im Linktext zu verwenden.

Fügen Sie dem Eingabeelement Typ- und Platzhalterattribute hinzu