Einführung
Eine schnelle Web-App ist eine erfolgreiche Webanwendung. Ihre Arbeit als Entwickler ist erst erledigt, wenn Sie sowohl die tatsächliche als auch die wahrgenommene Leistung Ihrer App optimiert haben. Es ist nicht nur richtig, für eine ausgezeichnete Nutzererfahrung zu sorgen, sondern es gibt auch sehr praktische und wichtige geschäftliche Gründe für eine Optimierung. Amazon hat einen Umsatzrückgang von 1% pro 100 ms Website-Latenz gemessen und Google einen Rückgang von 20% pro 0, 5 Sekunden Verzögerung (Zitat). Das sind reale Zahlen mit echten Auswirkungen für Ihr Unternehmen und Ihre Webanwendung.
Die Geschwindigkeit im Web ist so wichtig, dass Google sogar das Web schneller machen möchte. Wenn Sie noch einen Grund benötigen, um die Leistung Ihrer App zu optimieren, wurde die Seitengeschwindigkeit von Google in den Ranking-Algorithmus aufgenommen.
Es gibt viele veröffentlichten Best Practices zur Leistungsoptimierung Ihrer Webanwendung, darunter zwei hervorragende Bücher (Websites mit hoher Leistung und Noch schnellere Websites). Methoden auf dem Server (Implementierung der korrekten Cache-Steuerungs-Header) und auf dem Client (Geben Sie Bildbreite und -höhe an) werden in einer End-to-End-Strategie zur Leistungsoptimierung kombiniert. Bei so vielen Tipps und Tricks ist es manchmal schwierig, einzuschätzen, wie sich diese auf das tatsächliche Leben und Ihre echte Web-App beziehen.
Glücklicherweise bieten die Chrome-Entwicklertools, die in jeder Instanz von Chrome enthalten sind, ein hervorragendes Tool, mit dem Ihre Webanwendung geprüft werden kann. Außerdem erhalten Sie individuelle Empfehlungen zur Verbesserung der Leistung und Reduzierung der Latenz. In diesem Artikel geht es um das Audits Panel, das dem sehr beliebten Tool YSlow ähnelt. Außerdem erfahren Sie, wie Sie damit Ihre Website beschleunigen, die Latenz verringern und die Nutzerzufriedenheit steigern können.
Hinweis: Das Tool „Audits Panel“ ist derzeit nur in Chrome verfügbar. Wir gehen jedoch davon aus, dass es in Zukunft auch in anderen WebKit-Browsern integriert werden wird.
Erste Schritte
Um zu veranschaulichen, wie das Gremium für Audits Empfehlungen zur Leistungssteigerung von Webanwendungen erhalten kann, verwenden wir das Tool unter www.html5rocks.com. Mit dem Audits Panel möchten wir unsere Website noch schneller machen.
Sie können die Entwicklertools ganz einfach starten, indem Sie rechts oben im Chrome-Fenster auf das Chrome-Symbol klicken und „Tools“ > „Entwicklertools“ auswählen.
Weitere Informationen zu den ersten Schritten mit den Entwicklertools finden Sie in der offiziellen Dokumentation.
Der Bereich „Audits“ befindet sich im Hauptbereich der Schaltfläche „Tools“. Sie werden feststellen, dass der Bereich „Audits“ Ihre Webanwendung nach der Auswahl noch nicht analysiert hat. Die Ausführung aller Heuristiken kann langsam sein, insbesondere bei einer großen Web-App wie Gmail. Daher ist das Tool standardmäßig deaktiviert.
Wir beginnen mit einem Klick auf die Schaltfläche Run (Ausführen), wodurch die Web-App mit aktivierter Leistungsheuristik neu geladen wird. Nach dem Aktualisieren der Seite wird eine Liste mit Empfehlungen angezeigt, die dem Screenshot unten ähnelt.
Sie werden feststellen, dass die Vorschläge im Bereich „Audits“ nach Schweregrad klassifiziert sind, wobei der schwerwiegendste mit einem roten Punkt und die Vorschläge mittlerer Wichtigkeit mit einem gelben Punkt gekennzeichnet sind. Diese Farbcodierung hilft Ihnen, die Vorschläge zu priorisieren und sich auf die wichtigsten (und größten Vorteile) zu konzentrieren.
Die Zahl in Klammern gibt nach dem Vorschlag an, wie viele Instanzen das Audit-Tool erkannt hat. Es gab beispielsweise zwölf Instanzen von „Browser-Caching nutzen“. So erhalten Sie eine Vorstellung davon, wie oft der Vorschlag angewendet werden kann.
Strategien zur Geschwindigkeit
Wie bereits erwähnt, gibt es viele bekannte und ausgiebig getestete Strategien zur Optimierung der Leistung von Webanwendungen. Wir werden in diesem Artikel nicht auf alle diese Punkte eingehen, aber es ist ganz einfach, weitere Informationen und Details zu finden. Hilfreiche Ressourcen, um mehr über die Besonderheiten der Optimierung von Webanwendungen zu erfahren, sind unter anderem Tutorials für ein schnelleres Web im Web und High Scalability's latenz is Everywhere and It Costs You Sales.
Im Bereich „Audits“ sind die Vorschläge in zwei Kategorien unterteilt: „Netzwerkauslastung“ und „Webseitenleistung“.
Gemäß dem Audits Panel sollten wir zur Verbesserung der Netzwerkauslastung Folgendes tun:
- Browser-Caching nutzen
- Proxy-Caching nutzen
- Cookie-Größe minimieren
- Statische Inhalte über eine Domain ohne Cookies bereitstellen
- Bildabmessungen angeben
Zur Verbesserung der Leistung von Webseiten sollten wir Folgendes tun:
- Reihenfolge der Stile und Skripts optimieren
- Nicht verwendete CSS-Regeln entfernen
Sehen wir uns eine der Strategien an, auf die wir uns konzentrieren können, um die Leistung von htmlrocks.com zu verbessern.
Browser-Caching nutzen
Sehen wir uns zuerst einmal die Empfehlung an, Browser-Caching zu nutzen. Was bedeutet das konkret? Wenn wir die Option in der Benutzeroberfläche öffnen, sehen wir die folgenden Details:
- Bei den folgenden Ressourcen fehlt der Cache-Ablauf. Ressourcen, für die kein Ablaufdatum festgelegt ist, werden möglicherweise nicht von Browsern im Cache gespeichert.
- Die folgenden im Cache speicherbaren Ressourcen haben eine kurze Lebensdauer.
- Die folgenden Ressourcen können explizit nicht im Cache gespeichert werden. Erwägen Sie, sie wenn möglich im Cache zu speichern.
Das Caching von Ressourcen ist eine hervorragende Möglichkeit, die Netzwerkauslastung zu verbessern, was zu niedrigeren Bandbreitenkosten für den Entwickler und kürzeren Antwortzeiten für den Nutzer führt. Leider teilt Ihnen das Tool nicht genau mit, was Sie tun müssen. Daher müssen wir uns die Empfehlungen ein wenig genauer ansehen und unser Wissen über die Leistungsoptimierung von Webanwendungen nutzen, um diese Vorschläge anzuwenden.
Caching
Ohne uns näher mit HTTP-Caching zu befassen, können wir sicherlich einige der Grundlagen behandeln. Das HTTP-Protokoll enthält Anweisungen zum Caching, sodass der Server und der Client die Datenmenge reduzieren können, die über die Übertragung übertragen werden muss. Beispielsweise kann der Server den Client anweisen, die Ressource für einen bestimmten Zeitraum lokal zu speichern. Dadurch entfällt die Notwendigkeit, die Ressource erneut anzufordern. Der Client kann auch fragen, ob die Ressource des Servers neuer ist als die, die lokal gespeichert ist. Wenn eine Ressource statisch ist, sollte der Server den Client idealerweise anweisen, die Ressource lokal zu speichern, und vermeiden, den Server in Zukunft nach der Ressource zu fragen. Es gibt, wie Sie sich vorstellen können, unglaublich viele Details zum HTTP-Caching, aber das zentrale Thema ist: „Reduzieren Sie die Menge der über die Leitung gesendeten Daten, indem Sie Ressourcen lokal auf dem Client speichern“.
Probleme mit nicht im Cache speicherbaren Ressourcen beheben
Sehen wir uns eine Empfehlung genauer an und erfahren Sie, wie Sie die Audit-Empfehlung mit anderen Tools in den Entwicklertools verbinden. Sehen wir uns insbesondere an, wie das Problem „Die folgenden Ressourcen können explizit nicht im Cache gespeichert werden“ beheben.
Da das Caching über das HTTP-Protokoll erfolgt, müssen wir uns die HTTP-Anforderung und -Antwort für die Ressource http://www.html5rocks.com/ ansehen. Klicken Sie einfach auf die Ressource, um die ursprünglichen Anfrage- und Antwortheader sowie die zugehörigen Details aufzurufen.
Sie werden dann je nach angeklicktem Ressourcentyp zum Bereich „Netzwerk“, „Ressourcen“ oder „Quellen“ mit weiteren Informationen weitergeleitet. In diesem Fall werden wir zum Bereich „Network“ weitergeleitet.
Wir versuchen zu bestätigen, dass der Server dem Client mitgeteilt hat, dass die Startseite von html5rocks.com nicht zwischengespeichert wurde. Dazu klicken wir auf die Ressource und sehen uns die Antwortheader an, da dies die vom Server gesendeten Header und Anweisungen sind.
Cache-Control.Der Server hat den Header „Cache-Control: no-cache“ an den Client gesendet. So können Sie sich vorstellen, dass der Kunde immer nach der Ressource fragen und sie nicht lokal im Cache speichern soll. Die HTTP-Spezifikation für „no-cache“ lautet insbesondere:
"Wenn die no-cache-Anweisung keinen Feldnamen angibt, DARF der Cache die Antwort NICHT verwenden, um eine nachfolgende Anfrage ohne erfolgreiche Neuvalidierung mit dem Ursprungsserver zu erfüllen. Dadurch kann ein Ursprungsserver das Caching auch durch Caches verhindern, die so konfiguriert wurden, dass sie veraltete Antworten auf Clientanfragen zurückgeben.“
Genau aus diesem Grund empfiehlt das Audits Panel, das Caching zu aktivieren, da Server und Client sonst potenziell redundante Informationen senden.
Sie haben die Ursache des Prüfungsvorschlags gefunden. Wie können wir ihn beheben? In diesem Fall umfasst die Lösung serverseitige Konfiguration oder Code. Je nach Einrichtung können Sie das Caching über die Konfiguration Ihres Webservers oder über Konfigurationen in Ihrem Webanwendungs-Framework aktivieren. Insbesondere sollten Sie für jede Ressource, die im Cache gespeichert werden soll, einen expire-Header und einen Cache-Control: private mit einem max-age-Parameter angeben.
Vorschläge sind genau das, Vorschläge
Denken Sie daran, dass im Bereich „Audits“ Verbesserungen empfohlen werden, die auf allgemeinen Heuristiken basieren. Dabei werden Best Practices, die wir über viele Jahre gelernt haben, auf Ihre spezifische Web-App angewendet. Diese Empfehlungen sind in den meisten Fällen perfekt und sollten zu Herzen genommen werden.
Es gibt jedoch einige Fälle, in denen die Empfehlung zwar richtig ist, aber nicht zu einer Verbesserung führt. Wenn Ihre Seite beispielsweise nur ein einzelnes großes Bild enthält, wird im Bereich „Audits“ empfohlen, dem <img>-Tag Attribute für Breite und Höhe hinzuzufügen, damit das Rendering-Modul die Abmessungen des Bildes kennt, ohne das Bild herunterladen und prüfen zu müssen. Dies ist im Allgemeinen ein guter Ratschlag, aber es hilft nicht viel, wenn das Bild das einzige Element auf der Seite ist.
Wenden Sie die Vorschläge erst an, wenn Sie sie verstanden haben. Vergessen Sie nicht, die Leistung vor und nach den Änderungen zu messen, um sicherzustellen, dass tatsächlich eine Verbesserung erzielt wird.
Zusammenfassung
Das Audits Panel ist ein hervorragendes und nutzerfreundliches Tool, das Ihnen schnell zeigt, wie Sie die Leistung Ihrer Webanwendung optimieren können. Geschwindigkeit ist ein entscheidendes Attribut von Webanwendungen, da viele Unternehmen einen direkten Zusammenhang zwischen Leistung und Umsatz oder Aktivität festgestellt haben. Die Optimierung der Leistung Ihrer App ist nicht nur das Richtige für Ihre Nutzer, sondern auch der richtige Schritt für Ihr Unternehmen.