Automatisierung von Client-seitigen Web-Performance-Optimierungen

1,264 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,264
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
14
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Automatisierung von Client-seitigen Web-Performance-Optimierungen

  1. 1. Automatisierung von Client-seitigen Web-Performance-Optimierungen Vorlesung: System Engineering und Management, Prof. Walter Kriha Student: Jakob Schröter http://www.jakob-schroeter.de/ Juni 2011 Computer Science and Media Hochschule der Medien StuttgartDieses Paper soll einen Überblick über mögliche Automatisierungen von Client-seitigenPerformance Optimierungen von Webseiten geben. Dabei werden kommerzielle als auch freieLösungen betrachtet und einen Ausblick in die Zukunft der Performance-Optimierungengegeben.
  2. 2. System Engineering und Management Automatisierung von Client-seitigen Performance-OptimierungenInhaltsverzeichnis1 Die Bedeutung der Website-Performance ............................................................................... 3 1.1 Automatische Performance-Optimierungen ...................................................................52 Optimierung im Deployment-Prozess .................................................................................... 6 2.1 Build-Tools ....................................................................................................................... 6 2.2 Framework-spezifische Build-Tools .................................................................................73 „On-the-fly“-Optimierung ....................................................................................................... 8 3.1 mod_deflate ...................................................................................................................... 8 3.2 mod_concat ...................................................................................................................... 8 3.3 Google mod_pagespeed ................................................................................................... 9 3.4 WEBO Site SpeedUp ....................................................................................................... 10 3.5 Strangeloop Site Optimizer ............................................................................................. 11 3.6 Blaze.io ............................................................................................................................. 124 Zukunft: Google SPDY als HTTP-Erweiterung ...................................................................... 145 Zusammenfassung .................................................................................................................. 15Literatur .......................................................................................................................................... 16Jakob Schröter | Hochschule der Medien Stuttgart 2
  3. 3. System Engineering und Management Automatisierung von Client-seitigen Performance-Optimierungen1 Die Bedeutung der Website-PerformanceZum Erfolg eines Webprojekts tragen neben der Qualität des Angebots auch maßgeblich dieUser Experience und damit die Performance der Webseite bei.Mehrere große Anbieter haben in Studien festgestellt, dass sich die Geschwindigkeit derWebseite direkt auf die Webseiten-Zugriffe und den Umsatz auswirken. Zudem kann durchPerformance-Optimierungen oft auch Hardware eingespart werden.Die folgende Tabelle zeigt einige Ergebnisse:Amazon +100 ms 1% weniger VerkäufeYahoo +400 ms 5-9% weniger ZugriffeGoogle +500 ms 20% weniger ZugriffeBing +2000 ms 4,3% weniger Umsatz/Nutzer (Schurman & Brutlag, 2009)Shopzilla -5000 ms 25 % mehr Zugriffe 7-12% mehr Umsatz 50% weniger Hardware (Souders, OReilly Radar: Velocity and the Bottom Line, 2009)Mozilla -2200 ms 15,4% mehr Downloads (Cutler, 2010)Es wird deutlich, dass selbst kleine Unterschiede in der Ladezeit drastische Auswirkungen aufdas Geschäft haben können. (Website Optimization, LLC, 2008) Seit April 2010 lässt Googlesogar die Ladezeit einer Webseite mit in die Bewertung des Rankings einer Seite einfließen(Singhal & Cutts, 2010).Mit der Bewegung vom rein statischen Thin-Client zum immer komplexeren Rich-Clientverschiebt sich die Wartezeit von der Server- auf die Client-seite. Entwickler von Yahoostellten fest, dass 80-90% der Wartezeit auf dem Client stattfindet (Theurer, 2006) (Souders,High performance web sites: essential knowledge for frontend engineers, 2007, S. 5). Server ClientWasserfall-Diagramm von web.de, generiert mit webpagetest.orgJakob Schröter | Hochschule der Medien Stuttgart 3
  4. 4. System Engineering und Management Automatisierung von Client-seitigen Performance-OptimierungenAm Beispiel des Wasserfall-Diagramms wird deutlich, dass das Laden und Verarbeiten derWebseiten-Ressourcen wie Grafiken, JavaScript- und CSS-Dateien wesentlich länger dauert alsdie reine Generierung der HTML-Seite auf dem Server.Demnach muss die Performance nicht nur im Backend sondern auch im Frontend optimiertwerden. Auf der Client-Seite besteht ein sehr hohes Optimierungspotential. Für die Nutzer desWebprojekts zählt dabei vor allem die gefühlte Ladezeit bis die Webseite aufgebaut und fürden Nutzer nutzbar ist. Die tatsächliche und die wahrgenommene Ladezeit können unteranderem durch verschiedene Client-seitige Optimierungen verbessert werden (Schröter, 2011).Zu den typischen Optimierungstechniken zählen unter anderem:  Reduzierung der Datenmenge von Text-basierten Dateien (HTML, XML, JavaScript, JSON, CSS, …) o Inline-JavaScript und -Styles in externe Dateien auslagern o Mehrfach-Einbindungen von Scripts vermeiden o entfernen von unnötigen Kommentaren, Zeilenumbrüchen, … o JavaScript-Minification o GZIP-Kompression  Reduzierung der Datenmenge von Grafiken o Optimales Kompressionsformat wählen (JPG, PNG, GIF, WebP) o Optimale Auflösung o Entfernen unnötiger Meta-Daten  Reduzierung der HTTP-Requests o Zusammenfassung von JavaScript- und CSS-Dateien o Zusammenfassen von Grafiken in eine Datei (CSS-Sprites)  Richtige Konfiguration der HTTP-Header zur Optimierung des Browser-Caches o Expires-Header o ETag-Header  Verteilen der Ressourcen in ein Content Delivery Network o Optimierte Webserver für statische Dateien o Für jeden Nutzer optimale Netzwerk-Anbindung  Optimieren des Rendering-Prozesses (Progressive Rendering) o Optimale Ladereihenfolge (CSS-Dateien zuerst, JavaScript zuletzt) o Pre-/Post-Loading von Komponenten o Early Flushing o Anzahl der DOM-Element reduzieren  Anwenden von Best Practices o JavaScript optimieren o CSS optimieren (CSS-Selektoren, …)Jakob Schröter | Hochschule der Medien Stuttgart 4
  5. 5. System Engineering und Management Automatisierung von Client-seitigen Performance-Optimierungen1.1 Automatische Performance-OptimierungenNun stellt sich die Frage, ob und wie diese Optimierungen automatisiert werden können.Beispielsweise wäre es möglich den Optimierungsprozess in den Build/Deployment-Prozess zuintegrieren. So würden die Optimierungen automatisch vor der Auslieferung bzw. Live-Installation des Projektes durchgeführt werden. Dadurch kann viel Zeit gespart und garantiertwerden, dass immer die Optimierungen vorgenommen werden. Ebenso müssen die einzelnenEntwickler des Projekts keine besondere Rücksicht auf die Optimierungen nehmen. Diesresultiert wiederum in einer geringeren Fehlerrate durch die vorgenommenen Optimierungen.In den letzten Jahren wurden zudem einige Unternehmen gegründet, welche sich auf dieAutomatisierung von Web-Performance-Optimierung spezialisiert haben. Alternativ zureigenen Integration in den Build/Deployment-Prozess versprechen die Produktevollautomatische Optimierungen ohne jegliche Änderungen an der eigenen Webanwendung.Häufig funktioniert das Prinzip wie ein Proxy-Server. Die eigenen Domains werden per DNS-Änderung an die Server des Anbieters umgeleitet. Dort wird die eigene Webseite abgerufen,optimiert und anschließend an den Besucher ausgeliefert. Die Auslieferung findet hierbeimeist über ein CDN statt. So kann der eigene Betrieb eines global verteilten CDNs gespartwerden.Im folgenden Kapitel werden die verschiedenen Varianten der automatischen Performance-Optimierung näher betrachtet.Jakob Schröter | Hochschule der Medien Stuttgart 5
  6. 6. System Engineering und Management Automatisierung von Client-seitigen Performance-Optimierungen2 Optimierung im Build/Deployment-ProzessDer Build/Deployment-Prozess großer Projekte bietet sich an um dort automatisiertePerformance-Optimierungen zu integrieren. Folgende der in Kapitel 1 genanntenOptimierungen können problemlos automatisiert werden:  Reduzierung der Datenmenge von Text-basierten Dateien (HTML, XML, JavaScript, JSON, CSS, …) o entfernen von unnötigen Kommentaren, Zeilenumbrüchen, … o JavaScript-Minification  Reduzierung der Datenmenge von Grafiken o Entfernen unnötiger Meta-Daten  Reduzierung der HTTP-Requests o Zusammenfassung von JavaScript- und CSS-Dateien  Verteilen der Ressourcen in ein Content Delivery Network o Optimierte Webserver für statische DateienIn diesem Kapitel sollen frei verfügbare Lösungen, d.h. vorwiegend Open Source Lösungenbetrachtet werden.2.1 Build-ToolsDas Zusammenfassen und komprimieren von JavaScript- und CSS-Dateien kann beispielsweisemit Tools wie YUICompressor1 oder UglifyJS2 vorgenommen werde. Wichtig ist hierbei, einenmöglichst gut wartbaren Prozess zu entwickeln. Während der Entwicklung sollen dieseDateien möglichst modular (das heißt in getrennten Dateien) und dokumentiert (das heißtmit Kommentaren) verwendet werden. Gut lesbarer Code ist auch wichtig um JavaScript-Codeim Browser zu debuggen. Um Fehler zu vermeiden ist es wichtig, die Reihenfolge derEinbindung der Dateien beizubehalten.Wenn die Anwendung eine index-Seite beinhaltet, welche bereits alle JavaScript- und CSS-Dateien beinhaltet könnte ein Script geschrieben werden, welches den HTML-Code nach<script> und <link>-Tags durchsucht und diese Dateien zusammenfasst und darauf einMinify-Tool anwendet. Anschließend erstellt das Script eine angepasste Version der index-Seite welche nur einen einzelnen Aufruf auf die zusammengefasste CSS- und JavaScript-Dateibeinhaltet.Während es schwierig ist, die optimale Wahl der Grafikformate und Auflösungen zuautomatisieren lässt sich relativ einfach die Entfernung der Meta-Daten automatisch erledigen.So können alle im Projekt verwendeten Grafiken automatisch durch Tools wie pngcrush3,jpegtran4 oder auch dem API von smushit.com optimiert werden5.1 http://developer.yahoo.com/yui/compressor/2 https://github.com/mishoo/UglifyJS3 http://pmt.sourceforge.net/pngcrush/4 http://jpegclub.org/Jakob Schröter | Hochschule der Medien Stuttgart 6
  7. 7. System Engineering und Management Automatisierung von Client-seitigen Performance-OptimierungenAuch lässt sich die Verwendung von CSS-Sprites teilweise automatisieren. Das ToolSmartSprites 6 benötigt beispielsweise lediglich ein paar Meta-Informationen in den CSS-Dateien und erzeugt anschließend die CSS-Sprite-Dateien sowie die richtigen CSS-Definitionen automatisch.2.2 Framework-spezifische Build-ToolsViele JavaScript-Frameworks und –Tools stellen bereits eigene Build-Tools zur Verfügung.Diese verwenden beispielsweise Tools wie den YUICompressor um JavaScript- und CSS-Dateien zusammenzufassen.Bei der Verwendung von externen Frameworks und Tools sollte immer zunächst geprüftwerden, ob diese bereits eigene, für das Framework/Tool optimierte Build-Tools mitbringen.So bietet beispielsweise Sencha mit dem Sencha SDK7 bzw. JSBuilder8 eine gute Lösung umeinen an die eigenen Bedürfnisse angepassten Build des Sencha ExtJS-Frameworks zuerzeugen. Dabei werden unter Anderem die für das eigene Projekt benötigten JavaScript- undCSS-Dateien automatisch zusammengefasst und komprimiert.5 beispielsweise http://mathew-davies.co.uk/2010/01/01/smushit-php-class.html6 http://csssprites.org/7 http://www.sencha.com/products/extjs/download/8 http://www.sencha.com/products/jsbuilderJakob Schröter | Hochschule der Medien Stuttgart 7
  8. 8. System Engineering und Management Automatisierung von Client-seitigen Performance-Optimierungen3 „On-the-fly“-OptimierungBei der „On-the-fly“-Optimierung werden die Optimierungen während des Zugriffsdurchgeführt und ggf. für die nächsten Zugriffe im Cache gespeichert. Bei Projekten mit sehrhohen Zugriffszahlen muss die durch die „Live-Optimierung“ zusätzliche Belastung der Serverberücksichtigt werden. Jedoch sind oft keine oder nur geringe Anpassungen an der eigenenAnwendung nötig.3.1 mod_deflateDas weit verbreitete Apache-Modul mod_deflate 9 kann dazu verwendet werden, alletextbasierten Dateien wie HTML, CSS, JavaScript, XML und JSON automatisch mit demDeflate-Algorithmus 10 zu komprimieren. Alle aktuellen Browser unterstützten dieseKompressionstechnik. An der eigenen Anwendung müssen hierfür keine Anpassungenvorgenommen werden und die zusätzliche Server-Belastung ist gering. Das Modul sollte daherbei jedem Webprojekt aktiviert werden, das Optimierungspotential ist enorm. Für andereWebserver sind vergleichbare Module verfügbar.Zu beachten ist allerdings, dass die aktuellen Browser die Kompression nur für denTransferweg vom Server zum Browser, nicht aber für den Weg vom Browser zum Serverunterstützen. So können Daten, die per GET/POST-Request vom Browser an den Servergesendet werden nicht komprimiert werden, obwohl der Apache-Webserver die Unterstützungdafür bereitstellt11.3.2 mod_concatDas Apache-Modul mod_concat12 erlaubt es, mehrere JavaScript- oder CSS-Dateien innerhalbeines Requests dynamisch serverseitig zusammenzuführen und als eine einzelne Dateiauszuliefern.Statt folgendem Aufruf:<script src="js/base.js"></script><script src="js/uploader.js"></script>Könnte der Aufruf wie folgt aussehen:<script src="??js/base.js,js/uploader.js"></script>Intern werden die zusammengeführten Dateien gecached, sodass sie nicht bei jedem Requestneu erzeugt werden.9 http://httpd.apache.org/docs/2.2/mod/mod_deflate.html10 Der Deflate-Algorithmus findet unter anderem auch im ZIP-Dateiformat Verwendung.11 http://httpd.apache.org/docs/2.2/mod/mod_deflate.html#input12 http://code.google.com/p/modconcat/Jakob Schröter | Hochschule der Medien Stuttgart 8
  9. 9. System Engineering und Management Automatisierung von Client-seitigen Performance-OptimierungenÄhnlich wie mod_concat funktioniert das PHP-basierte Tool combine13. Allerdings basiert esrein auf PHP und optional mod_rewrite und kann dadurch auch verwendet werden, wenn keinZugriff auf die volle Apache-Konfiguration besteht (z.B. bei einfachen Webhosting-Paketen).3.3 Google mod_pagespeedGoogle bietet mit der Page Speed 14 Familie mehrere Produkte an, mit deren Hilfe diePerformance von Webseiten gemessen und analysiert werden kann. Dazu zählt beispielsweisedas gleichnamige Page Speed Plugin für die Firefox-Erweiterung Firebug. Dieses analysiert eineWebseite auf Basis verschiedener Best Practice Performance-Regeln und bietet Vorschläge, wiedie Performance der Webseite optimiert werden kann.Im November 2010 veröffentliche Google das Apache-Modul mod_pagespeed15. Das Modul sollWebseiten vollautomatisch auf bestmögliche Performance optimieren. An den eigenenWebanwendungen müssten dazu keinerlei Änderungen vorgenommen werden. 16 Hierbeikommen vorwiegend Optimierungen zum Einsatz, welche die Lade-, Anzeige- undAusführungszeit im Browser beeinflussen, das heißt Client-seitige Optimierungen. Dafürkommen verschiedene Filter zum Einsatz welche die Ausführung von JavaScript, HTML undden CSS-Stylesheets optimieren.Folgende Filter können bei mod_pagespeed aktiviert werden:  Optimize Caching o Extend Cache o Outline CSS o Outline JavaScript  Minimize Round Trip Times o Combine CSS o Inline CSS o Inline JavaScript o Configuration file directive to shard domains  Minimize Request Overhead o Configuration file directive to map domains  Minimize Payload Size o Collapse Whitespace o Combine Heads o Elide Attributes o Minify JavaScript o Optimize Images o Remove Comments o Remove Quotes o Rewrite CSS13 http://rakaz.nl/code/combine14 http://code.google.com/intl/de-DE/speed/page-speed/docs/overview.html15 vgl. (Google Inc., 2010)16 siehe (Google Inc.)Jakob Schröter | Hochschule der Medien Stuttgart 9
  10. 10. System Engineering und Management Automatisierung von Client-seitigen Performance-Optimierungen o Trim URLs  Optimize Browser Rendering o Move CSS to Head o Optimize ImagesBei Webservern, die bislang in der Standardkonfiguration betrieben werden, kann durchmod_pagespeed die Performance deutlich gesteigert werden. Der größte Performancegewinnstammt dabei jedoch durch die Umkonfiguration des Apache-Servers. So aktiviertmod_pagespeed unter Anderem das Apache-Modul mod_deflate. Das heißt das Page Speed-Modul selbst ist mehr oder weniger überflüssig wenn die richtige Konfiguration direkt imWebserver vorgenommen wird und die Grundregeln der Performance-Optimierungen bei derErstellung der Webseite bereits berücksichtigt wurden.Dennoch ist die Idee hinter mod_pagespeed gut, vor allem wird damit in Bezug auf Web-Performance-Optimierungen eher unerfahrenen Webentwicklern und Server-Administratorengeholfen die Performance zu verbessern.3.4 WEBO Site SpeedUpMit dem Tool WEBO Site SpeedUp17 kann die Performance von PHP-basierten Projektenautomatisch verbessert werden. Das Tool wird lokal auf dem eigenen Webserver installiert undklinkt sich in die eigene Anwendung ein. Neben PHP und ein paar PHP-Modulen werdenkeine besonderen Anforderungen an den Webserver gestellt. WEBO Site SpeedUp stellt eineWeboberfläche zur komfortablen Konfiguration bereit. Für viele verbreitete PHP-Anwendungen wie Drupal, WordPress oder Magento sind speziell angepasste Versionenverfügbar. Die Konfiguration ist sehr einfach, im Try&Error-Verfahren können verschiedeneOptimierungsmöglichkeiten aktiviert, getestet und die Performance verglichen werden. Abbildung 1: Quelle: WEBO Site SpeedUp17 http://www.webogroup.com/home/site-speedup/Jakob Schröter | Hochschule der Medien Stuttgart 10
  11. 11. System Engineering und Management Automatisierung von Client-seitigen Performance-OptimierungenDas Tool analysiert die von der eigenen Anwendung erzeugte HTML-Ausgabe und kannfolgende Optimierungen durchführen:  CSS/JavaScript zusammenfassen  GZIP-Kompression für HTML/CSS/JS/ICO Dateien auch wenn der Webserver kein mod_deflate bereit stellt  Dynamisches Nachladen von JavaScript  CSS/JavaScript/HTML Minification (per JSMin, YUICompressor oder Packer)  Vordefinierte optimale Einstellungen für die .htaccess-Datei für Apache Webserver (mod_deflate + mod_filter für GZIP, mod_mime + mod_rewrite für statisches GZIP, mod_expires oder mod_rewrite für Client-seitiges Caching, mod_headers)  Optimiertes Client-seitiges Caching  Server-seitiges Caching kann einzelne Teile oder die komplette Webseite zwischenspeichern  CSS Sprites (automatisches Zusammenfassen von CSS-Hintergrundgrafiken)  Bildoptimierung per smushit.com  CDN Unterstützung (statische Dateien können automatisch auf das CDN verteilt werden)  Inline-Grafiken (data:URI)WEBO Site SpeedUp kann mit reduziertem Funktionsumfang kostenlos verwendet werden.3.5 Strangeloop Site OptimizerDie Firma Strangeloop Networks18 hat sich auf die Web Performance Optimierung spezialisiertund bietet mit dem Site Optimizer eine kommerzielle Lösung an, welche die eigene Webseiteohne jegliche Änderungen am Quellcode „on-thy-fly“ optimiert. Der Site Optimizer wirdzwischen die eigenen Server und die Browser-Client geschaltet. Dieser optimiertvollautomatisch jeden Seitenzugriff auf Basis der Best Practices von Yahoo19 und Google20 undeigenen Regeln der Firma Strangeloop. Der HTML-Code und alle Ressourcen werden nunspezifisch für den Ziel-Browser und das -Endgerät optimiert.18 http://www.strangeloopnetworks.com/19 http://developer.yahoo.com/performance/rules.html20 http://code.google.com/intl/de-DE/speed/page-speed/docs/rules_intro.htmlJakob Schröter | Hochschule der Medien Stuttgart 11
  12. 12. System Engineering und Management Automatisierung von Client-seitigen Performance-Optimierungen Abbildung 2: Quelle: StrangeloopBesonderer Fokus liegt zudem auf der Optimierung der vom Nutzer wahrgenommenenLadezeit. Dafür analysiert der Site Optimizer das Nutzerverhalten und berechnet, welcheSeiten der eigenen Webpräsenz der Nutzer vermutlich als nächstes aufrufen wird. Währendder Nutzer noch mit dem Lesen der aktuellen Seite beschäftigt ist wird der Browser bereitsangewiesen die Ressourcen (JavaScript, CSS, Grafiken, …) der vermutlich nächsten Seiteherunter zu laden. Dadurch kann der nächste Seitenaufruf (wenn der Nutzer wirklich dievermutete Seite aufruft) deutlich beschleunigt werden. Ebenso wird analysiert, welcheRessourcen typischerweise für eine bestimmte Seite benötigt werden. Während der eigeneAnwendungs-Server noch mit der Generierung des HTML-Codes beschäftigt ist sendet derStrangeloop Site Optimizer die vermuteten Ressourcen bereits an den Client. Sobald der Serverdann die Seite fertig generiert und den HTML-Code an den Client ausgeliefert hat kann dieSeite sehr schnell darstellt werden, da viele benötigte Ressourcen schon verfügbar sind.Die Software von Strangeloop wird zum einen als Hardware-Lösung für die Installation imRechenzentrum, als auch als Cloud-basierte Lösung angeboten. Diese kann per DNS-Umleitung vor die eigenen Server geschaltet werden.Über eine Weboberfläche kann die Lösung konfiguriert und der Optimierungs-Statuskontrolliert werden. Ebenso können statistische Daten über die Optimierungen in bereitsbestehende Tracking-Systeme wie Google Analytics, Omniture oder Web Trends eingespieltwerden.3.6 Blaze.ioDas im Jahr 2010 gegründete Unternehmen Blaze Software Inc.21 hat sich ebenfalls auf dieOptimierung von Website-Performance spezialisiert. Die Lösung funktioniert wie folgt: Aufdem eigenen Webserver wird der so genannte Blaze Agent installiert. Die leichtgewichtigeAnwendung prüft bei jedem Request, ob bereits eine optimierte Version der angefordertenSeite vorliegt. Wenn nicht, wird die Webseite regulär an den Besucher ausgeliefert undanschließend Informationen zum Request sowie eine Kopie der angeforderten Seite an dieBlaze-Cloud gesendet. Diese analysiert die Webseite und optimiert sie anhand verschiedener21 http://www.blaze.io/Jakob Schröter | Hochschule der Medien Stuttgart 12
  13. 13. System Engineering und Management Automatisierung von Client-seitigen Performance-OptimierungenRegeln. Dabei kommen die Standard-Best Practices wie zusammenfassen, minimieren undkomprimieren von Ressourcen zum Einsatz. Ebenso werden alle statischen Ressourcen, d.h.Grafiken, CSS- und JS-Dateien im CDN abgelegt. Wird die Seite nun erneut von einemBesucher angefordert, liefert der Blaze Agent die optimierte Seite aus. Ebenso werden statischeRessourcen nun aus dem Blaze- oder einem beliebigen CDN an den Besucher geliefert. Abbildung 3: Quelle: blaze.ioÄhnlich wie bei Strangeloop werden dem Browser bereits die vermutlich für den nächstenRequest nötigen Ressourcen zugespielt.Große Vorteile der Cloud-basierten Lösung sind, dass an der eigenen Anwendung und auf deneigenen Servern kaum Änderungen vorgenommen werden müssen. Ebenso benötigt der BlazeAgent keine häufigen Update- und Wartungsarbeiten, da die eigentliche Analyse undOptimierung der Webseiten extern in der Blaze-Cloud stattfindet. Daher werden die eigenenServer auch kaum zusätzlich belastet.Jakob Schröter | Hochschule der Medien Stuttgart 13
  14. 14. System Engineering und Management Automatisierung von Client-seitigen Performance-Optimierungen4 Zukunft: Google SPDY als HTTP-ErweiterungDas von Google entwickelte Projekt SPDY kann zwar im Vergleich zu den in den vorherigenKapiteln genannten Lösungen nicht direkt für eigene Projekte verwendet werden, dennoch istdas Projekt für die Zukunft der Web Performance Optimierungen sehr spannend: das bislangexperimentelle Protokoll könnte viele der heutigen Performance-Optimierungen überflüssigmachen.Es ist bekannt, dass das HTTP-Protokoll für die mittlerweile sehr komplexen Webprojekteeinen relativ großen Overhead mitbringt. Für jede notwendige Datei muss eine eigeneVerbindung initialisiert werden, bei jedem Request werden einige (unkomprimierte) HTTP-Header übertragen, …Das SPDY-Application-Layer-Protokoll stellt eine interessante Verbesserung dar. Durch dieReduzierung 22 und Komprimierung von HTTP-Headern, dem Senden und Verarbeitenmultipler Streams und einer konsequenten Abfrage-Priorisierung sollen im Test 25 derbeliebtesten Webseiten um 55 Prozent schneller geladen werden als bisher23 – inklusive SSL-Verbindung, welche die Grundlage der Kommunikation darstellt um eine funktionierendeÜbertragung durch bestehende Proxy-Server hindurch zu ermöglichen. SPDY basiert auf TCPund benötigt daher keine Änderungen an der bestehenden Netzwerkinfrastruktur.Um das Protokoll zu nutzen muss der Server als auch der Browser eine SPDY-Unterstützungmitbringen. Anpassungen an den Webanwendungen selbst sind nicht notwendig. Viele derheutigen Optimierungen wie etwa CSS-Sprites werden durch SPDY überflüssig. Durch CSS-Sprites lässt sich die Anzahl der HTTP-Requests oft deutlich reduzieren – jedochverschlechtert sich dadurch die Wartbarkeit der Anwendung. Auf mobilen Geräten könnenCSS-Sprites sogar zu Performance-Einbußen führen, da bei jeder Verwendung einesAusschnitts aus der Sprite-Grafik die komplette Grafik in den Speicher geladen und verarbeitetwerden muss. Da SPDY ohnehin alle Ressource-Dateien in einem gemeinsamen Daten-Streamüberträgt müssen die Dateien nicht mehr kombiniert werden. Dabei sieht SPDY auch einePush-Funktion vor, über die Server Daten an den Browser senden können, noch bevor dieserdie Ressource angefragt hat. So können beispielsweise schon Ressourcen gesendet werden, dieauf der folgenden Seite benötigt werden.Wie man es von Google erwartet, ist Google wiedermal Vorreiter: Google Chrome seit Version11 und alle Google-Dienste wie Google Mail unterstützen bereits SPDY24. Nun ist die Frage, obund wann andere Browser und Webdienste nachziehen werden.Erste Implementierungen als Apache-Modul 25 , Python 26 , Java 27 , Ruby 28 oder für Node.js-Server29 befinden sich momentan in der Entwicklung.22 Der Header „User-Agent“ wird bei SPDY beispielsweise nur bei der ersten Verbindung mitgesendet, daes sehr unwahrscheinlich ist, dass sich der User-Agent während einer laufenden Session ändert.23 (Belshe & Peon, 2009)24 (golem.de, 2011)25 http://code.google.com/p/mod-spdy/26 http://github.com/mnot/nbhttp/tree/spdy27 http://svn.apache.org/repos/asf/tomcat/trunk/modules/tomcat-lite28 https://github.com/igrigorik/spdyJakob Schröter | Hochschule der Medien Stuttgart 14
  15. 15. System Engineering und Management Automatisierung von Client-seitigen Performance-Optimierungen5 ZusammenfassungDie Optimierung der Performance einer Webseite ist eine komplexe und zeitaufwändigAufgabe. Umso verlockender ist daher ein möglichst weit automatisierterOptimierungsprozess. Wie in den vorhergehenden Kapiteln gezeigt wurde existieren bereitseinige Lösungen mit denen viele der Optimierungen automatisch angewendet werden können.Dennoch gibt es bisher keine perfekte „One-Click“-Lösung. Der Wirkungsgrad dieserLösungen variiert stark von Projekt zu Projekt. So reicht es beispielsweise bei einerweitgehendsten statischen Webseite aus, die Bilder im Deploymentprozess zu optimieren,während bei einer Magazin-Webseite die Bildoptimierung vor jedem Veröffentlichen einesArtikels durchgeführt werden sollte. Ebenso wird bei manchen Anwendungen der HTML-Codeder Seite dynamisch per JavaScript erzeugt. Automatische Tools haben hierbei kaum eineMöglichkeit Optimierungen am HTML-Code vorzunehmen. Manuelle Optimierungen bringenimmer bessere Ergebnisse, da sie gezielt auf die speziellen Anforderungen der eigenenAnwendung angepasst werden können. Auch die meisten kommerziellen Lösungen beinhaltenmanuelle projektspezifische Analysen der bestmöglichen Performanceoptimierungen welchedie Grundlage für die Konfiguration der automatischen Tools darstellen. Anschließend könnendie konfigurierten Tools jedoch bei jedem Deployment des Projekts oder „on-the-fly“automatisch ausgeführt werden, wodurch viel Aufwand eingespart werden kann.Sehr spannend sind die Entwicklungen rund um Google SPDY. Sollten die anderenBrowserhersteller neben Google nachziehen und eine SPDY-Unterstützung in ihre Browserintegrieren, so könnte SPDY der neue Standard für den Transfer von Webseiten werden. Dabeiwürden einige der aktuell empfehlenswerten Optimierungen wie das Zusammenfassen vonJavaScript- und CSS-Dateien sowie CSS-Sprites überflüssig werden.29 https://github.com/donnerjack13589/node-spdyJakob Schröter | Hochschule der Medien Stuttgart 15
  16. 16. System Engineering und Management Automatisierung von Client-seitigen Performance-OptimierungenLiteraturBelshe, M., & Peon, R. (11. November 2009). A 2x Faster Web. Abgerufen am 21. März 2011 von Chromium Blog: http://blog.chromium.org/2009/11/2x-faster-web.htmlCutler, B. (März 2010). Von Blog of Metrix: Firefox & Page Load Speed: http://blog.mozilla.com/metrics/category/website-optimization/ abgerufengolem.de. (08. April 2011). Chrome nutzt SPDY statt HTTP. Abgerufen am 08. April 2011 von http://www.golem.de/1104/82657.htmlGoogle Inc. (03. November 2010). Make your websites run faster, automatically -- try mod_pagespeed for Apache. Abgerufen am 02. Februar 2011 von Official Google Webmaster Blog: http://googlewebmastercentral.blogspot.com/2010/11/make-your- websites-run-faster.htmlGoogle Inc. (kein Datum). Page Speed Family. Abgerufen am 10. Februar 2011 von http://code.google.com/intl/de-DE/speed/page-speed/docs/overview.htmlNielsen, J. (Juni 2010). Von Website Response Times: http://www.useit.com/alertbox/response- times.html abgerufenSchröter, J. (18. Januar 2011). Client-side Performance Optimizations. Von http://slideshare.net/jakob.schroeter/Client-side-Performance-Optimizations abgerufenSchurman, E., & Brutlag, J. (Juni 2009). Von Performance Related Changes and their User Impact: http://www.slideshare.net/dyninc/the-user-and-business-impact-of-server- delays-additional-bytes-and-http-chunking-in-web-search-presentation abgerufenSinghal, A., & Cutts, M. (April 2010). Von Official Google Webmaster Central Blog: Using site speed in web search ranking: http://googlewebmastercentral.blogspot.com/2010/04/using-site-speed-in-web-search- ranking.html abgerufenSouders, S. (2007). High performance web sites: essential knowledge for frontend engineers. (OReilly, Hrsg.)Souders, S. (Juli 2009). Von OReilly Radar: Velocity and the Bottom Line: http://radar.oreilly.com/2009/07/velocity-making-your-site-fast.html abgerufenTheurer, T. (November 2006). Von Yahoo! User Interface Blog: Performance Research, Part 1: What the 80/20 Rule Tells Us about Reducing HTTP Requests: http://www.yuiblog.com/blog/2006/11/28/performance-research-part-1/ abgerufenWebsite Optimization, LLC. (30. Mai 2008). The Psychology of Web Performance. Abgerufen am 10. September 2010 von http://www.websiteoptimization.com/speed/tweak/psychology-web-performance/Jakob Schröter | Hochschule der Medien Stuttgart 16
  17. 17. System Engineering und Management Automatisierung von Client-seitigen Performance-OptimierungenYang, Z. (August 2009). Von Facebook: Every Millisecond Counts: http://www.facebook.com/note.php?note_id=122869103919 abgerufenJakob Schröter | Hochschule der Medien Stuttgart 17

×