Yahoo Fourteen: 14 Prinzipien für die Front-End-Webseitenoptimierung einer Website

Die goldene Regel zur Leistungsoptimierung von Webanwendungen: Optimieren Sie zuerst die Leistung des Front-End-Programms (Front-End), denn hier werden 80 % oder mehr der Reaktionszeit des Endbenutzers aufgewendet .

Regel 1. Reduzieren Sie die Anzahl der HTTP-Anfragen

80 % der Reaktionszeit des Endbenutzers wird für Frontend-Programme aufgewendet, und die meiste Zeit wird für das Herunterladen verschiedener Seitenelemente wie Bilder, Stylesheets, Skripte, Flash usw. aufgewendet. Durch die Reduzierung von Seitenelementen wird die Anzahl der HTTP-Anfragen reduziert. Dies ist der Schlüssel zur schnellen Anzeige der Seite.

Eine Möglichkeit, die Anzahl der Seitenelemente zu reduzieren, besteht darin, das Seitendesign zu vereinfachen. Aber gibt es eine andere Möglichkeit, sowohl reichhaltige Inhalte als auch schnelle Reaktionszeiten zu erreichen? Hier sind einige solcher Techniken:

BildkartenKombinieren Sie mehrere Bilder zu einem Bild. An der Gesamtdateigröße ändert sich nicht viel, allerdings verringert sich die Anzahl der HTTP-Anfragen und die Seite wird schneller angezeigt. Diese Methode eignet sich nur für fortlaufende Bilder; gleichzeitig ist die Definition der Koordinaten eine lästige und fehleranfällige Arbeit.

CSS Sprites ist ein besserer Weg. Es kombiniert Bilder von einer Seite in einer einzigen Datei und verwendet die CSS-Eigenschaften „Hintergrundbild“ und „Hintergrundposition“, um den erforderlichen Teil des Bildes zu implementieren.

Inline-Bilder verwenden das data: URL-Schema, um Bilder in die Seite einzubetten. Dadurch wird die Größe der HTML-Datei erhöht. Das Kombinieren von Inline-Bildern in Ihren (zwischengespeicherten) Stylesheets ist eine Möglichkeit, HTTP-Anfragen zu reduzieren und eine Vergrößerung Ihrer HTML-Dateien zu vermeiden.

Kombinierte Dateien reduzieren die Anzahl der HTTP-Anfragen, indem sie mehrere Skriptdateien in einer einzigen Datei kombinieren. Auf ähnliche Weise kann auch mit Stylesheets umgegangen werden. Obwohl diese Methode einfach ist, wurde sie noch nicht in großem Maßstab eingesetzt. Die Top-10-Websites in den USA verfügen im Durchschnitt über 7 Skriptdateien und 2 Stylesheets pro Seite. Dieser Ansatz kann eine Herausforderung darstellen, wenn Skripte und Stylesheets von Seite zu Seite erheblich variieren. Wenn er jedoch durchgeführt wird, kann er die Antwortzeiten verkürzen.

Die Reduzierung der Anzahl der HTTP-Anfragen ist der Ausgangspunkt für die Leistungsoptimierung. Dies spielt eine wichtige Rolle bei der Verbesserung der Effizienz des ersten Besuchs. Laut dem Artikel „Browser Cache Usage – Exposed!“ von Tenni Theurer handelt es sich bei 40–60 % der täglichen Besuche um Erstbesuche. Daher ist die Beschleunigung des Seitenzugriffs für Erstbesucher der Schlüssel zum Benutzererlebnis.

Unsere Apps:

Außenhandel: Führen Sie Dutzende kleiner Symbole auf der Homepage zu einem zusammen, steuern Sie deren Anzeige über CSS und reduzieren Sie die Anzahl der HTTP-Anfragen.

Regel 2. Verwenden Sie CDN (Content Delivery Network, Content Delivery Network)

Auch die Entfernung des Benutzers zum Webserver hat einen großen Einfluss auf die Antwortzeit. Aus Benutzersicht führt die Bereitstellung von Inhalten auf mehreren geografisch verteilten Servern zu einer effektiven Erhöhung der Seitenladegeschwindigkeit. Aber wo soll ich anfangen?

Als ersten Schritt zur geografischen Verteilung Ihrer Inhalte sollten Sie nicht versuchen, Ihre Webanwendung umzugestalten, um sie an die Verteilungsarchitektur anzupassen. Das Ändern des Schemas führt zu mehreren regelmäßigen Aufgaben, wie z. B. der Synchronisierung des Sitzungsstatus und der Replikation von Datenbanktransaktionen zwischen mehreren Servern. Solche Versuche, die Distanz zwischen Benutzern und Inhalten zu verkürzen, können durch Änderungen in der Anwendungsarchitektur verzögert oder blockiert werden.

Wir erinnern uns auch daran, dass 80–90 % der Reaktionszeit des Endbenutzers für das Herunterladen verschiedener Elemente auf der Seite aufgewendet wird, z. B. Bilddateien, Stylesheets, Skripte, Flash usw. Anstatt die schwierige Aufgabe der Umgestaltung des Systems aufzuwenden, verteilen Sie zuerst statische Inhalte. Dadurch wird nicht nur die Reaktionszeit erheblich verkürzt, sondern dank des CDN ist auch die Verteilung statischer Inhalte sehr einfach zu implementieren.

CDN ist eine Sammlung geografisch verteilter Webserver, die zur effizienteren Veröffentlichung von Inhalten verwendet werden. Der Webserver, der bestimmte Benutzer bedient, wird normalerweise basierend auf der Netzwerkentfernung ausgewählt.

Einige große Websites verfügen über ein eigenes CDN, es wäre jedoch kostengünstig, die Dienste eines CDN-Dienstanbieters wie Akamai Technologies, Mirror Image Internet oder Limelight Networks zu nutzen. Bei Yahoo! reduziert die Verteilung statischer Inhalte an ein CDN die Zeit, die der Benutzer erreicht, um 20 % oder mehr. Das Ändern des Codes für den Wechsel zu einem CDN ist einfach, kann jedoch die Geschwindigkeit Ihrer Website erhöhen.

Unsere App:

Es wurde noch nicht verwendet, aber laut Kundenberichten sind die Netzwerkbedingungen in Guangdong, Shandong und anderen Orten relativ schlecht. Wenn die statischen Ressourcen, die die Hauptbandbreite belegen, über CDN freigegeben werden können, glaube ich, dass dies sehr gut möglich ist Linderung des aktuellen Problems mit der Geschwindigkeit des Website-Zugriffs.

Regel 3. Expires-Header hinzufügen

Webinhalte werden immer umfangreicher, was mehr Skriptdateien, Stylesheets, Bilddateien und Flash bedeutet. Erstbesucher müssen sich mehreren HTTP-Anfragen stellen, aber durch die Verwendung des Expires-Headers können Sie diese Elemente auf der Clientseite zwischenspeichern. Dadurch werden unnötige HTTP-Anfragen bei Folgebesuchen vermieden. Der Expires-Header wird am häufigsten für Bilddateien verwendet, sollte aber auch für Skriptdateien, Stylesheets und Flash verwendet werden.

Browser (und Proxys) verwenden Caching, um die Anzahl und Größe von HTTP-Anfragen zu reduzieren, sodass Webseiten schneller geladen werden. Der Webserver teilt dem Client über den Expires-Header mit, wie lange ein Element zwischengespeichert werden kann.

Wenn der Server Apache ist, können Sie ExpiresDefault verwenden, um das Ablaufdatum basierend auf dem aktuellen Datum festzulegen, wie zum Beispiel:

ExpiresDefault „Zugriff plus 10 Jahre“ legt die Ablaufzeit auf 10 Jahre ab dem Zeitpunkt der Anforderung fest.

Denken Sie daran, dass Sie bei einer sehr langen Ablaufzeit den Dateinamen ändern müssen, wenn sich der Inhalt ändert. Bei Yahoo! benennen wir häufig als Schritt im Veröffentlichungsprozess um: Die Versionsnummer ist in den Dateinamen eingebettet, z. B. yahoo_2.0.6.js.

Unsere App:

Außenhandel: Der Cache von JS, CSS und Image wird in Apache konfiguriert. Wenn die statischen Ressourcen aktualisiert werden müssen, wird die Lösung übernommen, die Dateiversionsnummer zu ändern, um sicherzustellen, dass der Client die neueste Version erhält 🎜>

E-Network: Die Probe-Regeln (JS) von E-Network werden gemäß den Einstellungen des Kunden generiert, sie ändern sich jedoch grundsätzlich über einen längeren Zeitraum hinweg nicht. Hängen Sie daher beim Generieren der Regeln einen Expires-Antwortheader an um die Anzahl der Client-Anfragen und die Generierung von Prüfregeln zu minimieren.

Regel 4. Seitenelemente komprimieren

Reduzieren Sie die Seitenantwortzeit durch Komprimieren des HTTP-Antwortinhalts. Ab HTTP/1.1 gibt der Webclient den unterstützten Komprimierungstyp über den Accept-Encoding-Header in der HTTP-Anfrage an, z. B.:

Accept-Encoding: gzip, deflate.

Wenn der Webserver den Accept-Encoding-Header überprüft, verwendet er die vom Client unterstützte Methode, um die HTTP-Antwort zu komprimieren und den Content-Encoding-Header festzulegen, z. B.: Content-Encoding: gzip.

Gzip ist derzeit die beliebteste und effektivste Komprimierungsmethode. Andere Methoden wie Deflate sind weniger effektiv und nicht beliebt genug. Mit Gzip kann der Inhalt typischerweise um 70 % reduziert werden. Wenn es sich um Apache handelt, müssen Sie unter Version 1.3 das Modul mod_gzip und unter Version 2.x mod_deflate verwenden.

Der Webserver bestimmt anhand des Dateityps, ob eine Komprimierung durchgeführt werden soll. Die meisten Websites komprimieren HTML-Dateien. Es lohnt sich aber auch, Skriptdateien und Stylesheets zu komprimieren. Tatsächlich lohnt es sich, Aufgabentextinformationen, einschließlich XML und JSON, zu komprimieren. Bilddateien und PDF-Dateien sollten nicht komprimiert werden, da sie von Natur aus komprimiert sind. Ihre Komprimierung verschwendet nicht nur CPU, sondern kann auch die Dateigröße erhöhen.

Das Komprimieren möglichst vieler Dateitypen ist also eine einfache Möglichkeit, die Seitengröße zu reduzieren und die Benutzererfahrung zu verbessern.

Unsere App:

Außenhandel, E-Net-Erschöpfung, K-Plan: Ext2-Paket mit mehr als 600 KB, die Leute werden daran denken, es zu komprimieren. Der Komprimierungseffekt ist nicht schlecht, nur mehr als 150 KB. Darüber hinaus werden auch JS, CSS und HTML so weit wie möglich komprimiert. Sie müssen wissen, dass viele unserer Kunden immer noch 1M ADSL verwenden.

Regel 5. Platzieren Sie das Stylesheet über Ihrem Kopf

Wir haben festgestellt, dass das Verschieben des Stylesheets in den HEAD-Bereich die Ladegeschwindigkeit der Benutzeroberfläche verbessern kann, sodass Seitenelemente nacheinander angezeigt werden können.

In vielen Browsern, wie z. B. IE, besteht das Problem beim Platzieren des Stylesheets am Ende des Dokuments darin, dass es die sequentielle Anzeige von Webseiteninhalten verhindert. Der Browser blockiert die Anzeige, um ein Neuzeichnen von Seitenelementen zu vermeiden, und der Benutzer sieht nur eine leere Seite. Firefox blockiert die Anzeige nicht. Dies bedeutet jedoch, dass einige Seitenelemente nach dem Herunterladen des Stylesheets möglicherweise neu gezeichnet werden müssen, was zu Problemen mit dem Flackern führt.

HTML-Spezifikation erfordert ausdrücklich die Definition von Stylesheets in HEAD. Um Probleme mit leerem Bildschirm oder Flackern zu vermeiden, ist es daher am besten, der HTML-Spezifikation zu folgen und das Stylesheet in HEAD zu platzieren .

Unsere App:

Haben Sie jemals die Situation erlebt, dass Stylesheets am Ende des Dokuments eingefügt wurden?

Regel 6. Platzieren Sie die Skriptdatei unten

Wie bei Stildateien müssen wir auf den Speicherort von Skriptdateien achten. Wir müssen versuchen, sie am Ende der Seite zu platzieren, damit sie einerseits nacheinander angezeigt werden können und andererseits ein maximales paralleles Herunterladen möglich ist.

Der Browser blockiert die Anzeige, bis das Stylesheet heruntergeladen wurde. Daher müssen wir das Stylesheet in den HEAD-Bereich einfügen. Bei Skripten wird die sequentielle Anzeige von Inhalten hinter dem Skript blockiert. Wenn Sie das Skript also so weit wie möglich unten platzieren, können schnell mehr Inhalte angezeigt werden.

Das zweite durch das Skript verursachte Problem besteht darin, dass es die Anzahl paralleler Downloads blockiert. Die HTTP/1.1-Spezifikation empfiehlt, dass Browser die Anzahl paralleler Downloads pro Host auf nicht mehr als 2 begrenzen. Wenn Sie also die Bilddateien auf mehrere Maschinen verteilen, können Sie mehr als 2 parallele Downloads erreichen. Aber wenn die Skriptdatei heruntergeladen wird, initiiert der Browser keine weiteren parallelen Downloads, nicht einmal Downloads von anderen Hosts.

In manchen Fällen ist es nicht einfach, das Skript nach unten zu verschieben. Beispielsweise verwendet das Skript die Methode document.write, um Seiteninhalte einzufügen. Möglicherweise liegen auch Domänenprobleme vor. In vielen Fällen gibt es jedoch Methoden.

Eine Alternative ist die Verwendung eines verzögerten Skripts. Das DEFER-Attribut gibt an, dass das Skript document.write nicht enthält, und weist den Browser an, es sofort weiter anzuzeigen. Leider unterstützt Firefox das DEFER-Attribut nicht. Im IE können sich Skripte verzögern, aber nicht unbedingt so lange wie nötig. Aber aus einer anderen Perspektive: Wenn das Skript verzögert werden kann, kann es unten platziert werden.

Unsere App:

Das ist Ihnen vielleicht noch nicht aufgefallen, aber wir haben diese Regel in unserem XCube XUI implementiert und ich glaube, dass sie die Seitenzugriffsleistung weiter verbessern kann.

Regel 7. Vermeiden Sie CSS-Ausdrücke

CSS-Ausdrücke sind eine leistungsstarke (und gefährliche) Möglichkeit, CSS-Eigenschaften dynamisch festzulegen. IE unterstützt ab Version 5 CSS-Ausdrücke wie backgourd-color: expression((new Date()).getHours()%2?“#B8D4FF“:“#F08A00“), also die Änderung der Hintergrundfarbe jede Stunde.

Das Problem mit CSS-Ausdrücken besteht darin, dass sie öfter ausgeführt werden, als den meisten Menschen lieb ist. Ausdrücke werden nicht nur ausgewertet, wenn die Seite angezeigt und in der Größe geändert wird, sondern auch, wenn auf der Seite gescrollt wird und sogar, wenn die Maus über die Seite bewegt wird.

Eine Möglichkeit, die Häufigkeit der Ausführung eines CSS-Ausdrucks zu reduzieren, besteht darin, einmalige Ausdrücke zu verwenden, die den Ausdruck bei der ersten Ausführung durch einen expliziten Wert ersetzen. Wenn es dynamisch gesetzt werden muss, können stattdessen Event-Handler verwendet werden. Wenn Sie CSS-Ausdrücke verwenden müssen, denken Sie daran, dass diese möglicherweise tausende Male ausgeführt werden, was sich auf die Seitenleistung auswirkt.

Unsere App:

Derzeit liegen CSS-Wartungsarbeiten hauptsächlich in der Verantwortung des UI-Personals, und sie haben ihr Bestes getan, um diese Situation zu vermeiden.

Regel 8. Fügen Sie JavaScript und CSS in externe Dateien ein

Viele der oben genannten Leistungsoptimierungsregeln werden basierend auf externen Dateien optimiert. Nun müssen wir uns die Frage stellen: Sollen JavaScript und CSS in externe Dateien oder in die Auslagerungsdatei eingebunden werden?

In der Praxis beschleunigt die Verwendung externer Dateien die Seitenanzeige, da externe Dateien vom Browser zwischengespeichert werden. Wenn JavaScript und CSS in die Seite integriert sind, verringert sich zwar die Anzahl der HTTP-Anfragen, die Seite wird jedoch größer. Andererseits werden bei der Verwendung externer Dateien vom Browser zwischengespeichert und die Seitengröße verringert, ohne dass sich die Anzahl der HTTP-Anfragen erhöht.

Im Allgemeinen sind externe Dateien also der praktikablere Weg. Die einzige Ausnahme besteht darin, dass die Inline-Methode für Homepages effektiver ist, da Yahoo! und My Yahoo! beide die Inline-Methode verwenden. Im Allgemeinen gibt es in einer Sitzung zu diesem Zeitpunkt weniger Homepage-Besuche, sodass mit der Inline-Methode eine schnellere Benutzerreaktionszeit erreicht werden kann.

Unsere App:

Außenhandel, E-Net, K-Plan: Ext2-Code bietet einen guten Leitfaden. Derzeit legen Front-End-Entwickler großen Wert auf die Kapselung und Wiederverwendung von Client-Modulen und versuchen, die Wiederverwendung von Code durch externes JS zu verbessern. Natürlich müssen Sie auch darauf achten, nicht zu viele externe Ressourcen einzuführen, da dies gegen Regel 1 verstößt.
Die aktuelle CSS-Kapselung ist ebenfalls gut, aber sie ist hauptsächlich eine Lösung für die IE-Serie. Sie können die Einführung von CSS-Frameworks wie YAML und Blueprint in Betracht ziehen, um Probleme mit der Browserkompatibilität einfach zu lösen.

Regel 9. Reduzieren Sie die Anzahl der DNS-Abfragen

DNS wird zur Zuordnung von Hostnamen und IP-Adressen verwendet. Im Allgemeinen dauert eine Auflösung 20 bis 120 Millisekunden. Um eine höhere Leistung zu erzielen, wird die DNS-Auflösung normalerweise auf mehreren Ebenen zwischengespeichert, z. B. auf dem vom ISP oder LAN verwalteten Caching-Server, im Cache des Betriebssystems des lokalen Computers (z. B. dem DNS-Clientdienst unter Windows) und im Browser. Die Standard-DNS-Cache-Zeit von IE beträgt 30 Minuten und die Standard-Pufferzeit von Firefox beträgt 1 Minute.

Das Reduzieren des Hostnamens kann die Anzahl der DNS-Abfragen verringern, kann jedoch zu einer Verringerung der Anzahl paralleler Downloads führen. Das Vermeiden von DNS-Abfragen kann die Antwortzeit verkürzen, während die Verringerung der Anzahl paralleler Downloads die Antwortzeit verlängern kann. Ein praktikabler Kompromiss besteht darin, Inhalte auf mindestens zwei und höchstens vier verschiedene Hostnamen zu verteilen.

Unsere App:

Außenhandel: Um die Browserbeschränkung für die Anzahl der Download-Threads zu umgehen, haben wir mehrere Domänennamen für statische Ressourcen aktiviert, was jedoch gegen diese Regel verstößt. Bei Windows IE kann DNS-Caching dieses Problem jedoch lindern.

Regel 10. JavaScript-Code minimieren

JavaScript-Code zu minimieren bedeutet, unnötige Zeichen im JS-Code zu entfernen und dadurch die Downloadzeit zu verkürzen. Zwei beliebte Tools sind #JSMin und YUI Compressor.

Verschleierung ist eine alternative Möglichkeit, den Quellcode zu minimieren. Wie minify reduziert es die Größe des Quellcodes durch das Entfernen von Kommentaren und Leerzeichen und kann außerdem den Code verschleiern. Im Rahmen der Verschleierung werden Funktions- und Variablennamen durch kurze Zeichenfolgen ersetzt, wodurch der Code kompakter und weniger lesbar wird und ein Reverse Engineering erschwert wird. Dojo Compressor (ShrinkSafe) ist das am häufigsten verwendete Verschleierungstool.

Minimierung ist ein sicherer und unkomplizierter Prozess, während Verschleierung komplexer und anfälliger für Probleme ist. Laut einer Umfrage unter den Top-10-Websites in den Vereinigten Staaten können durch Minimierung die Dateien um 21 % und die Verschleierung um 25 % reduziert werden.

Neben der Minimierung externer Skriptdateien sollte auch der eingebettete Skriptcode minimiert werden. Auch wenn das Skript für die Übertragung gemäß Regel 4 komprimiert ist, führt die Minimierung des Skripts zu einer Reduzierung der Dateigröße um 5 % oder mehr.

Unsere App:

Wir verwenden die JS-Komprimierung nicht direkt, aber viele von uns verwendete Komponenten wie ext2, jquery usw. praktizieren diese Regel bereits für uns.

Regel 11. Vermeiden Sie Weiterleitungen

Die Umleitungsfunktion wird durch die beiden HTTP-Statuscodes 301 und 302 abgeschlossen, wie zum Beispiel:

      HTTP/1.1 301 Moved Permanently

<span style="color: #000000">      Location: http://example.com/newuri</span>

      Content-Type: text/html

Der Browser leitet die Anfrage automatisch an die durch „Standort“ angegebene URL weiter. Das Hauptproblem der Umleitung besteht darin, dass sie das Benutzererlebnis beeinträchtigt.

Eine der ressourcenintensivsten, häufigsten und leicht zu übersehenden Weiterleitungen ist das fehlende / am Ende der URL. Wenn Sie beispielsweise auf http://astrology.yahoo.com/astrology zugreifen, werden Sie auf http umgeleitet :/ /astrology.yahoo.com/astrology/. Unter Apache kann dieses Problem durch Alias, mod_rewrite oder DirectorySlash gelöst werden.

Unsere App:

Erfahrene SAs haben dieses Problem für uns berücksichtigt. Interessierte Studenten können einen Blick auf die Apache-Konfigurationsdatei für die Online-Umgebung werfen: httpd.conf.

Regel 12. Löschen Sie doppelte Skriptdateien

Das Einfügen doppelter JS-Skriptdateien in eine Seite wirkt sich auf die Leistung aus, d. h. es führt zu unnötigen HTTP-Anfragen und zusätzlichen JS-Ausführungen.

Unnötige HTTP-Anfragen treten unter IE auf, während Firefox keine unnötigen HTTP-Anfragen generiert. Es erfolgt eine zusätzliche JS-Ausführung, unabhängig davon, ob sie unter IE oder Firefox erfolgt.

Eine Möglichkeit, doppelte Skriptdateien zu vermeiden, besteht darin, ein Vorlagensystem zum Erstellen von Skriptverwaltungsmodulen zu verwenden. Dieses Modul verhindert nicht nur doppelte Skriptdateien, sondern implementiert auch eine Abhängigkeitsprüfung und fügt Versionsnummern zu Skriptdateinamen hinzu, was extrem lange Ablaufzeiten ermöglicht.

Unsere App:

Dieses Problem ist in der alten Version von Xplatform schwerwiegender, aber ich glaube, dass die neue Version von XCube denselben Fehler nicht wiederholen wird.

Regel 13. ETags konfigurieren

ETags ist ein Mechanismus, der verwendet wird, um zu bestimmen, ob Elemente im Browser-Cache mit Elementen im Webserver übereinstimmen. Es handelt sich um einen flexibleren Elementüberprüfungsmechanismus als das Datum der letzten Änderung. Ein ETag ist eine Zeichenfolge, die die Version eines Elements eindeutig darstellt und in Anführungszeichen gesetzt werden muss. Der Webserver gibt zunächst das ETag in der Antwort an:

      HTTP/1.1 200 OK

      Last-Modified: Tue, 12 Dec 2006 03:03:59 GMT

      ETag: "10c24bc-4ab-457e1c1f"

      Content-Length: 12195

Wenn der Browser später ein Element überprüfen muss, verwendet er den If-None-Match-Header, um das ETag an den Webserver zurückzugeben. Wenn das ETag übereinstimmt, gibt der Server einen 304-Code zurück und spart so den Download Zeit:

      GET /i/yahoo.gif HTTP/1.1

      Host: us.yimg.com

      If-Modified-Since: Tue, 12 Dec 2006 03:03:59 GMT

      If-None-Match: "10c24bc-4ab-457e1c1f"

      HTTP/1.1 304 Not Modified

Das Problem mit ETags besteht darin, dass sie auf der Grundlage bestimmter, für den Server eindeutiger Attribute wie Apache1.3 und 2.x erstellt werden und ihr Format Inode-Größe-Zeitstempel ist, während sie unter IIS5.0 und 6.0, sein Format ist Filetimestamp:ChangeNumber. Auf diese Weise ist der ETag desselben Elements auf verschiedenen Webservern unterschiedlich. Auf diese Weise fordert der Browser in einer Umgebung mit mehreren Webservern zuerst ein Element von Server1 an und überprüft das Element dann mit Server2. Da das ETag unterschiedlich ist, wird der Cache ungültig und muss erneut heruntergeladen werden.

Wenn Sie daher den flexiblen Überprüfungsmechanismus des ETags-Systems nicht nutzen, ist es am besten, den ETag zu löschen. Durch das Entfernen des ETag wird die Größe der HTTP-Antwort und der HTTP-Header nachfolgender Anfragen reduziert. Ein Microsoft-Supportartikel beschreibt, wie man ETags entfernt und unter Apache einfach FileETag none in der Konfigurationsdatei einstellt.

Unsere App:

E-Net: Passen Sie die ETag-Generierungsstrategie an, um die Anzahl der Prüfregelgenerierungen zu minimieren. Da das Standard-ETag des Servers nicht verwendet wird, besteht dieses Problem nicht.

Andere Produktlinien: Bitte beachten Sie, dass dies niemand beachtet hat. Überprüfen Sie schnell die Konfiguration in Apache.

Regel 14. Ajax zwischenspeichern

Regeln zur Leistungsoptimierung gelten auch für Web 2.0-Anwendungen. Die wichtigste Möglichkeit, die Leistung von Ajax zu verbessern, besteht darin, die Antwort zwischenspeicherbar zu machen, wie in „Regel 3: Expires-Header hinzufügen“ erläutert. Die folgenden weiteren Regeln gelten auch für Ajax, natürlich ist Regel 3 der effektivste Weg:

Regel 4. Seitenelemente komprimieren

Regel 9. Reduzieren Sie die Anzahl der DNS-Abfragen

Regel 10. Skriptdateien minimieren

Regel 11. Vermeiden Sie Weiterleitungen

Regel 13. ETags konfigurieren.

Unsere App:

In weiteren Fällen möchten wir nicht, dass die Ajax-Anfrage zwischengespeichert wird. Hängen Sie zu diesem Zeitpunkt einfach einen Zeitstempel an die URL jeder Ajax-Anfrage an.