Ein Leitfaden zur Optimierung leistungsstarker Websites

Goldene Regeln der Leistung:

Nur 10 bis 20 % der Reaktionszeit des Endbenutzers werden mit dem Herunterladen von HTML-Dokumenten verbracht. Die restlichen 80 % bis 90 % der Zeit werden für das Herunterladen aller Komponenten auf der Seite benötigt.

Regel 1: Reduzieren Sie HTTP-Anfragen

Dies kann durch die Verwendung von Imagemaps, CSS-Sprites (Vor- und Nachteile), Inline-Bildern (Daten: URL-Modus, der vom Internet Explorer nicht unterstützt wird und nicht zwischengespeichert werden kann) und dem Zusammenführen von Skripten und Stylesheets erfolgen.

Regel 2: Nutzen Sie ein Content-Distribution-Netzwerk

Wenn sich der Anwendungs-Webserver näher am Benutzer befindet, verkürzt sich die Antwortzeit einer HTTP-Anfrage.
Wenn sich die Komponenten-Webserver näher am Benutzer befinden, verkürzt sich die Antwortzeit für mehrere HTTP-Anfragen.
Ein Content Delivery Network (CDN) ist eine Gruppe von Webservern, die über mehrere geografische Standorte verteilt sind und dazu dienen, Inhalte effizienter an Benutzer zu übermitteln.

Regel 3: Expires-Header hinzufügen

Der Expires-Header wird von einem Webserver verwendet, um einem Webclient mitzuteilen, dass er die aktuelle Kopie einer Komponente bis zu einem bestimmten Zeitpunkt verwenden kann. Erfordert eine strikte Synchronisierung der Server- und Client-Uhren und die Angabe eines neuen Datums in der Serverkonfiguration nach Ablauf der Zeit.
Max-Age und mod_expires können die Mängel von Expires ausgleichen.

Regel 4: Komponenten komprimieren

Ab HTTP 1.1

Regel 5: Platzieren Sie Ihr Stylesheet an oberster Stelle

Progressive Darstellung zur Vermeidung eines weißen Bildschirms

Regel 6: Platzieren Sie Skripte am Ende

Die HTTP 1.1-Spezifikation empfiehlt, dass Browser von jedem Hostnamen zwei Komponenten parallel herunterladen. Beim Herunterladen von Skripts ist das parallele Herunterladen tatsächlich deaktiviert.
Ein Grund hierfür besteht darin, dass das Skript möglicherweise document.write verwendet, um den Seiteninhalt zu ändern. Der Browser wartet daher, um sicherzustellen, dass das Seitenlayout richtig gestaltet werden kann.
Der zweite Grund besteht darin, sicherzustellen, dass die Skripte in der richtigen Reihenfolge ausgeführt werden. Wenn mehrere Skripte parallel heruntergeladen werden, besteht keine Garantie dafür, dass die Antworten in einer bestimmten Reihenfolge beim Browser ankommen.
Wenn Sie das Skript oben platzieren, wird die Darstellung des darauf folgenden Inhalts sowie das Herunterladen der darauf folgenden Komponenten blockiert.

Regel 7: Vermeiden Sie CSS-Ausdrücke

Die Ausdrucksmethode wird von anderen Browsern ignoriert, ist für den IE jedoch ein nützliches Tool. Möglichkeit, Eigenschaften im Internet Explorer festzulegen und so für ein einheitliches Erlebnis in allen Browsern zu sorgen. Beispielsweise unterstützt IE [IE6, IE7 (Quirk), IE8 (Quirk]] die Eigenschaft min-width nicht. Dieses Problem kann mithilfe der Ausdrucksmethode gelöst werden:

Das Problem mit Ausdrücken besteht darin, dass sie häufiger ausgewertet werden, als man möchte. Sie werden nicht nur ausgewertet, wenn die Seite gerendert und in der Größe geändert wird, sondern auch, wenn die Seite gescrollt wird und sogar, wenn der Benutzer die Maus über die Seite bewegt. Um den Überblick zu behalten, können wir unserem CSS-Ausdruck einen Zähler hinzufügen.
Beispiel für einen Ausdruckszähler:
http://stevesouders.com/hpws/expression-counter.php

Eine Alternative zu Ausdrücken: Event Handler
Beheben Sie das Problem mit der Mindestbreite, indem Sie die Breiteneigenschaft des Stils im Onresize-Ereignis festlegen.
Beispiel für einen Eventhandler:
http://stevesouders.com/hpws/event-handler.php
In diesem Beispiel wird die Funktion setMinWidth() verwendet, um die Größe aller Absatzelemente zu ändern, wenn sich die Browsergröße ändert:

Dadurch wird die Breite dynamisch festgelegt, wenn der Browser die Größe ändert. Allerdings wird die Größe des Absatzes beim ersten Rendern nicht richtig angepasst. Daher muss die Seite auch einen „Einmalausdruck“ verwenden, um die anfängliche Breite festzulegen.

Regel 8: Externes JavaScript und CSS verwenden

Regel 9: Reduzieren Sie DNS-Lookups

Regel 10: Halten Sie Ihr JavaScript klein

Rationalisierung vs. Verschleierung vs. Komprimierung

Regel 11: Weiterleitungen vermeiden

Wenn ein Webserver eine Umleitung an einen Browser sendet, hat die Antwort einen Statuscode im 3xx-Bereich. Dies zeigt an, dass der Benutzeragent weitere Aktionen ausführen muss, um die Anforderung abzuschließen.

Weiterleitungen wirken sich auf den Download von HTML-Dokumenten aus.

Regel 12: Entfernen Sie doppelte Skripte

Regel 13: ETag konfigurieren

Regel 14: Machen Sie Ajax zwischenspeicherbar

Abschließend finden Sie hier eine Übersicht über den Inhalt dieses Buches zu Ihrer Durchsicht!