Einführung
Eine schnelle Webanwendung ist eine erfolgreiche Webanwendung. Ihre Arbeit als Entwickler ist erst getan, wenn Sie sowohl die tatsächliche als auch die wahrgenommene Leistung Ihrer App optimiert haben. Das ist nicht nur die richtige Maßnahme, um Ihren Nutzern eine hervorragende Nutzererfahrung zu bieten, sondern es gibt auch sehr praktische und wichtige geschäftliche Gründe für die Optimierung. Amazon verzeichnete einen Rückgang der Umsätze um 1% bei jeder 100 ms langen Websitelatenz und Google einen Rückgang der Zugriffe um 20% bei jeder 0, 5 Sekunden langen Verzögerung (Quelle). Das sind reale Zahlen mit realen Auswirkungen auf Ihr Unternehmen und Ihre Webanwendung.
Die Internetgeschwindigkeit ist so wichtig, dass Google sogar ein ganzes Projekt hat, das sich darauf konzentriert, das Web schneller zu machen. Falls Sie noch einen weiteren Grund zur Optimierung Ihrer App-Leistung benötigen: Google hat angekündigt, dass die Seitenladegeschwindigkeit in den Ranking-Algorithmus aufgenommen wurde.
Es gibt viele veröffentlichte Best Practices zur Optimierung der Leistung Ihrer Webanwendung, darunter zwei hervorragende Bücher: High Performance Web Sites und Even Faster Web Sites. Methoden auf dem Server (Implementieren der richtigen Cache-Kontroll-Header) und auf dem Client (Angeben von Bildbreite und -höhe) werden zu einer End-to-End-Strategie zur Leistungsoptimierung kombiniert. Bei so vielen Tipps und Tricks ist es manchmal schwierig zu beurteilen, wie sie sich auf die Praxis und Ihre reale Webanwendung übertragen lassen.
Glücklicherweise bieten die Chrome-Entwicklertools (in jeder Chrome-Instanz enthalten) ein hervorragendes Tool, mit dem Sie Ihre Webanwendung prüfen und personalisierte Empfehlungen zur Leistungssteigerung und zur Verringerung der Latenz erhalten können. In diesem Artikel erfahren Sie mehr über das Analyse-Dashboard, 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 davon aus, dass es aber auch in anderen WebKit-Browsern integriert wird.
Erste Schritte
Um zu veranschaulichen, wie das Steuerfeld für Analysen Verbesserungen bei der Leistung von Web-Apps empfehlen kann, wenden wir das Tool auf unsere eigene Website www.html5rocks.com an. Wir verwenden das Steuerfeld für Analysen, um unsere Website noch schneller zu machen.
Sie können die Entwicklertools ganz einfach starten, indem Sie auf das Chrome-Symbol rechts oben im Chrome-Fenster klicken und dann „Tools“ > „Entwicklertools“ auswählen.
Weitere Informationen zum Einstieg in DevTools finden Sie in der offiziellen Dokumentation.
Der Bereich „Audits“ (Analysen) befindet sich im Bereich mit den Haupttools. Sie werden feststellen, dass die Analyse Ihrer Webanwendung noch nicht durchgeführt wurde. Das Ausführen aller Heuristiken kann langsam sein, insbesondere bei einer großen Webanwendung wie Gmail. Daher ist das Tool standardmäßig deaktiviert.
Klicken Sie auf die Schaltfläche „Ausführen“, um die Webanwendung mit aktivierten Leistungsheuristiken neu zu laden. Nach dem Aktualisieren der Seite wird eine Liste mit Empfehlungen angezeigt, die dem Screenshot unten ähnelt.
Die Vorschläge werden im Bereich „Analysen“ nach Schweregrad klassifiziert. Die Vorschläge mit dem höchsten Schweregrad sind mit einem roten Punkt gekennzeichnet, die Vorschläge mit mittlerem Schweregrad mit einem gelben Punkt. Anhand dieser Farbcodierung können Sie die Vorschläge priorisieren und sich zuerst auf die wichtigsten (und größten) Verbesserungen konzentrieren.
Die Zahl in Klammern nach dem Vorschlag gibt an, wie viele Instanzen das Analysetool erkannt hat. Es gab beispielsweise 12 Instanzen von „Browser-Caching nutzen“. So erhalten Sie einen Eindruck davon, wie oft der Vorschlag angewendet werden kann.
Geschwindigkeitsstrategien
Wie bereits erwähnt, gibt es viele bekannte und intensiv getestete Strategien zur Optimierung der Leistung von Webanwendungen. In diesem Artikel werden wir sie nicht alle ausführlich behandeln, aber es ist ganz einfach, weitere Informationen und Details zu finden. Hilfreiche Ressourcen, um mehr über die Besonderheiten der Web-App-Optimierung zu erfahren, sind die Tutorials „Das Web schneller machen“ und High Scalability's Latency is Everywhere and It Costs You Sales.
Im Bereich „Analysen“ werden die Vorschläge in zwei Kategorien unterteilt: „Netzwerkauslastung“ und „Websiteleistung“.
Laut dem Bereich „Analysen“ sollten wir Folgendes tun, um die Netzwerkauslastung zu verbessern:
- Browser-Caching nutzen
- Proxy-Caching nutzen
- Cookie-Größe minimieren
- Statische Inhalte von einer domain ohne Cookies bereitstellen
- Bildabmessungen angeben
Was können wir tun, um die Leistung der Webseite zu verbessern?
- Reihenfolge von Stilen und Scripts optimieren
- Nicht verwendete CSS-Regeln entfernen
Sehen wir uns eine der Strategien an, mit denen wir die Leistung von htmlrocks.com verbessern können.
Browser-Caching nutzen
Sehen wir uns als Beispiel die Empfehlung zum Browser-Caching an. Was bedeutet das genau? Wenn wir die Option in der Benutzeroberfläche öffnen, werden die folgenden Details angezeigt:
- Für die folgenden Ressourcen fehlt ein Cache-Ablaufdatum. Ressourcen, für die kein Ablaufdatum angegeben ist, werden von Browsern möglicherweise nicht im Cache gespeichert.
- Die Aktualität der folgenden Cache-fähigen Ressourcen ist nur von kurzer Dauer.
- Die folgenden Ressourcen dürfen nicht im Cache gespeichert werden. Sie sollten sie nach Möglichkeit im Cache speichern können.
Das Caching von Ressourcen ist eine hervorragende Möglichkeit, die Netzwerknutzung zu verbessern. Dies führt zu geringeren Bandbreitenkosten für die Entwickler und schnelleren Antwortzeiten für die Nutzer. Leider wird im Tool nicht genau angegeben, was Sie tun müssen. Daher müssen wir uns die Empfehlungen genauer ansehen und unser Wissen über die Leistungsoptimierung von Webanwendungen nutzen, um diese Vorschläge umzusetzen.
Caching
Ohne ins Detail zum HTTP-Caching zu gehen, können wir einige der Grundlagen behandeln. Das HTTP-Protokoll enthält Caching-Anweisungen, mit denen der Server und der Client die Menge der Daten reduzieren können, die über die Verbindung übertragen werden müssen. Der Server kann dem Client beispielsweise mitteilen, die Ressource für einen bestimmten Zeitraum lokal zu speichern, sodass die Ressource nicht noch einmal angefordert werden muss. Der Client kann auch fragen, ob die Ressource des Servers neuer ist als die lokal gespeicherte. Wenn eine Ressource statisch ist, sollte der Server den Client idealerweise anweisen, die Ressource lokal zu speichern und den Server in Zukunft nicht mehr um die Ressource zu bitten. Wie Sie sich vorstellen können, gibt es eine unglaubliche Menge an Details zum HTTP-Caching. Das allgemeine Thema ist jedoch: „Verringern Sie die Menge der über das Netzwerk gesendeten Daten, indem Sie Ressourcen lokal auf dem Client speichern“.
Nicht im Cache ablegbare Ressourcen korrigieren
Sehen wir uns eine Empfehlung genauer an und lernen, wie Sie die Empfehlung der Analyse mit anderen Tools in DevTools verknüpfen. Sehen wir uns an, wie Sie das Problem beheben, dass „die folgenden Ressourcen explizit nicht im Cache gespeichert werden können“.
Da das Caching über das HTTP-Protokoll erfolgt, müssen wir uns die HTTP-Anfrage und ‑Antwort für die Ressource http://www.html5rocks.com/ ansehen. Klicken Sie einfach auf die Ressource, um die ursprünglichen Anfrage- und Antwortheader und -details aufzurufen.
Sie werden dann zum Bereich „Netzwerk“, „Ressourcen“ oder „Quellen“ (je nach Typ der angeklickten Ressource) mit weiteren Informationen weitergeleitet. In diesem Fall werden wir zum Bereich „Netzwerk“ weitergeleitet.
Wir möchten prüfen, ob der Server dem Client mitgeteilt hat, die Startseite von html5rocks.com nicht im Cache zu speichern. Dazu klicken wir auf die Ressource, um uns die Antwortheader anzusehen. Das sind die vom Server gesendeten Header und Anweisungen.
Cache-Control-HeaderTatsächlich hat der Server den Header „Cache-Control: no-cache“ an den Client gesendet. Das bedeutet, dass der Client immer nach der Ressource fragen und sie nicht lokal im Cache speichern soll. Die HTTP-Spezifikation für „no-cache“ lautet:
„Wenn in der no-cache-Anweisung kein Feldname angegeben ist, darf ein Cache die Antwort NICHT für die Erfüllung einer nachfolgenden Anfrage verwenden, ohne dass eine erfolgreiche erneute Validierung beim Ursprungsserver erfolgt ist. So kann ein Ursprungsserver das Caching auch durch Caches verhindern, die so konfiguriert sind, dass veraltete Antworten auf Clientanfragen zurückgegeben werden.“
Aus diesem Grund wird im Bereich „Analysen“ empfohlen, das Caching zu aktivieren, da andernfalls vom Server und vom Client potenziell redundante Informationen gesendet werden.
Nachdem wir die Ursache für den Analysevorschlag ermittelt haben, wie beheben wir das Problem? In diesem Fall umfasst die Lösung serverseitige Konfiguration oder Code. Je nach Konfiguration können Sie das Caching über die Konfiguration Ihres Webservers oder über Konfigurationen in Ihrem Web-App-Framework aktivieren. Insbesondere sollten Sie für jede Ressource, die im Cache gespeichert werden soll, einen Expires-Header und Cache-Control: private mit einem max-age-Parameter angeben.
Vorschläge sind nur Vorschläge
Denken Sie daran, dass im Bereich „Analysen“ Verbesserungen basierend auf allgemeinen Heuristiken empfohlen werden. Dabei werden Best Practices, die im Laufe der Jahre gesammelt wurden, auf Ihre spezifische Webanwendung angewendet. In den meisten Fällen sind diese Empfehlungen genau richtig und sollten beherzigt 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 einziges großes Bild enthält, wird im Bereich „Audits“ empfohlen, dem <img>-Tag die Attribute „width“ und „height“ hinzuzufügen, damit das Rendering-Engine die Bildabmessungen kennt, ohne das Bild herunterladen und prüfen zu müssen. Das ist zwar im Allgemeinen ein guter Rat, aber er hilft nicht viel, wenn das Bild das einzige Element auf der Seite ist.
Denken Sie daran, diese Vorschläge anzuwenden, sobald Sie sie verstanden haben. Und vergessen Sie nicht, die Leistung vor und nach den Änderungen zu messen, um sicherzustellen, dass es tatsächlich eine Verbesserung gibt.
Zusammenfassung
Das Steuerfeld für Analysen ist ein hervorragendes und einfach zu bedienendes Tool, mit dem Sie schnell sehen können, wie Sie die Leistung Ihrer Webanwendung optimieren. Die Geschwindigkeit ist ein wichtiges Attribut einer Webanwendung, da viele Unternehmen direkte Zusammenhänge zwischen Leistung und Umsatz oder Aktivität festgestellt haben. Die Leistung Ihrer App zu optimieren, ist nicht nur für Ihre Nutzer, sondern auch für den Gewinn Ihres Unternehmens von Vorteil.