SlideShare ist ein Scribd-Unternehmen logo
1 von 17
Downloaden Sie, um offline zu lesen
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 Stuttgart




Dieses Paper soll einen Überblick über mögliche Automatisierungen von Client-seitigen
Performance Optimierungen von Webseiten geben. Dabei werden kommerzielle als auch freie
Lösungen betrachtet und einen Ausblick in die Zukunft der Performance-Optimierungen
gegeben.
System Engineering und Management                                            Automatisierung von Client-seitigen Performance-Optimierungen



Inhaltsverzeichnis

1         Die Bedeutung der Website-Performance ............................................................................... 3
    1.1         Automatische Performance-Optimierungen ...................................................................5
2         Optimierung im Deployment-Prozess .................................................................................... 6
    2.1         Build-Tools ....................................................................................................................... 6
    2.2         Framework-spezifische Build-Tools .................................................................................7
3         „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 ............................................................................................................................. 12
4         Zukunft: Google SPDY als HTTP-Erweiterung ...................................................................... 14
5         Zusammenfassung .................................................................................................................. 15
Literatur .......................................................................................................................................... 16




Jakob Schröter | Hochschule der Medien Stuttgart                                                                                                       2
System Engineering und Management                       Automatisierung von Client-seitigen Performance-Optimierungen




1    Die Bedeutung der Website-Performance
Zum Erfolg eines Webprojekts tragen neben der Qualität des Angebots auch maßgeblich die
User Experience und damit die Performance der Webseite bei.

Mehrere große Anbieter haben in Studien festgestellt, dass sich die Geschwindigkeit der
Webseite direkt auf die Webseiten-Zugriffe und den Umsatz auswirken. Zudem kann durch
Performance-Optimierungen oft auch Hardware eingespart werden.

Die folgende Tabelle zeigt einige Ergebnisse:

Amazon                  +100 ms                            1% weniger Verkäufe
Yahoo                   +400 ms                            5-9% weniger Zugriffe
Google                  +500 ms                            20% weniger Zugriffe
Bing                    +2000 ms                           4,3% weniger Umsatz/Nutzer (Schurman &
                                                           Brutlag, 2009)
Shopzilla               -5000 ms                           25 % mehr Zugriffe
                                                           7-12% mehr Umsatz
                                                           50% weniger Hardware (Souders, O'Reilly
                                                           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 auf
das Geschäft haben können. (Website Optimization, LLC, 2008) Seit April 2010 lässt Google
sogar 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-Client
verschiebt sich die Wartezeit von der Server- auf die Client-seite. Entwickler von Yahoo
stellten 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                                    Client




Wasserfall-Diagramm von web.de, generiert mit webpagetest.org

Jakob Schröter | Hochschule der Medien Stuttgart                                                           3
System Engineering und Management                  Automatisierung von Client-seitigen Performance-Optimierungen



Am Beispiel des Wasserfall-Diagramms wird deutlich, dass das Laden und Verarbeiten der
Webseiten-Ressourcen wie Grafiken, JavaScript- und CSS-Dateien wesentlich länger dauert als
die reine Generierung der HTML-Seite auf dem Server.

Demnach muss die Performance nicht nur im Backend sondern auch im Frontend optimiert
werden. Auf der Client-Seite besteht ein sehr hohes Optimierungspotential. Für die Nutzer des
Webprojekts zählt dabei vor allem die gefühlte Ladezeit bis die Webseite aufgebaut und für
den Nutzer nutzbar ist. Die tatsächliche und die wahrgenommene Ladezeit können unter
anderem 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
System Engineering und Management                  Automatisierung von Client-seitigen Performance-Optimierungen



1.1 Automatische Performance-Optimierungen
Nun 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 zu
integrieren. So würden die Optimierungen automatisch vor der Auslieferung bzw. Live-
Installation des Projektes durchgeführt werden. Dadurch kann viel Zeit gespart und garantiert
werden, dass immer die Optimierungen vorgenommen werden. Ebenso müssen die einzelnen
Entwickler des Projekts keine besondere Rücksicht auf die Optimierungen nehmen. Dies
resultiert wiederum in einer geringeren Fehlerrate durch die vorgenommenen Optimierungen.

In den letzten Jahren wurden zudem einige Unternehmen gegründet, welche sich auf die
Automatisierung von Web-Performance-Optimierung spezialisiert haben. Alternativ zur
eigenen Integration in den Build/Deployment-Prozess versprechen die Produkte
vollautomatische 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 hierbei
meist über ein CDN statt. So kann der eigene Betrieb eines global verteilten CDNs gespart
werden.

Im folgenden Kapitel werden die verschiedenen Varianten der automatischen Performance-
Optimierung näher betrachtet.




Jakob Schröter | Hochschule der Medien Stuttgart                                                      5
System Engineering und Management                  Automatisierung von Client-seitigen Performance-Optimierungen




2    Optimierung im Build/Deployment-Prozess
Der Build/Deployment-Prozess großer Projekte bietet sich an um dort automatisierte
Performance-Optimierungen zu integrieren. Folgende der in Kapitel 1 genannten
Optimierungen 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 Dateien


In diesem Kapitel sollen frei verfügbare Lösungen, d.h. vorwiegend Open Source Lösungen
betrachtet werden.



2.1 Build-Tools
Das Zusammenfassen und komprimieren von JavaScript- und CSS-Dateien kann beispielsweise
mit Tools wie YUICompressor1 oder UglifyJS2 vorgenommen werde. Wichtig ist hierbei, einen
möglichst gut wartbaren Prozess zu entwickeln. Während der Entwicklung sollen diese
Dateien möglichst modular (das heißt in getrennten Dateien) und dokumentiert (das heißt
mit Kommentaren) verwendet werden. Gut lesbarer Code ist auch wichtig um JavaScript-Code
im Browser zu debuggen. Um Fehler zu vermeiden ist es wichtig, die Reihenfolge der
Einbindung 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 ein
Minify-Tool anwendet. Anschließend erstellt das Script eine angepasste Version der index-
Seite welche nur einen einzelnen Aufruf auf die zusammengefasste CSS- und JavaScript-Datei
beinhaltet.

Während es schwierig ist, die optimale Wahl der Grafikformate und Auflösungen zu
automatisieren 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/UglifyJS
3
  http://pmt.sourceforge.net/pngcrush/
4
  http://jpegclub.org/

Jakob Schröter | Hochschule der Medien Stuttgart                                                      6
System Engineering und Management                  Automatisierung von Client-seitigen Performance-Optimierungen



Auch lässt sich die Verwendung von CSS-Sprites teilweise automatisieren. Das Tool
SmartSprites 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-Tools
Viele 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üft
werden, 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 um
einen an die eigenen Bedürfnisse angepassten Build des Sencha ExtJS-Frameworks zu
erzeugen. Dabei werden unter Anderem die für das eigene Projekt benötigten JavaScript- und
CSS-Dateien automatisch zusammengefasst und komprimiert.




5
  beispielsweise http://mathew-davies.co.uk/2010/01/01/smushit-php-class.html
6
  http://csssprites.org/
7
  http://www.sencha.com/products/extjs/download/
8
  http://www.sencha.com/products/jsbuilder

Jakob Schröter | Hochschule der Medien Stuttgart                                                      7
System Engineering und Management                  Automatisierung von Client-seitigen Performance-Optimierungen




3    „On-the-fly“-Optimierung
Bei der „On-the-fly“-Optimierung werden die Optimierungen während des Zugriffs
durchgeführt und ggf. für die nächsten Zugriffe im Cache gespeichert. Bei Projekten mit sehr
hohen Zugriffszahlen muss die durch die „Live-Optimierung“ zusätzliche Belastung der Server
berücksichtigt werden. Jedoch sind oft keine oder nur geringe Anpassungen an der eigenen
Anwendung nötig.



3.1 mod_deflate
Das weit verbreitete Apache-Modul mod_deflate 9 kann dazu verwendet werden, alle
textbasierten Dateien wie HTML, CSS, JavaScript, XML und JSON automatisch mit dem
Deflate-Algorithmus 10 zu komprimieren. Alle aktuellen Browser unterstützten diese
Kompressionstechnik. An der eigenen Anwendung müssen hierfür keine Anpassungen
vorgenommen werden und die zusätzliche Server-Belastung ist gering. Das Modul sollte daher
bei jedem Webprojekt aktiviert werden, das Optimierungspotential ist enorm. Für andere
Webserver sind vergleichbare Module verfügbar.

Zu beachten ist allerdings, dass die aktuellen Browser die Kompression nur für den
Transferweg vom Server zum Browser, nicht aber für den Weg vom Browser zum Server
unterstützen. So können Daten, die per GET/POST-Request vom Browser an den Server
gesendet werden nicht komprimiert werden, obwohl der Apache-Webserver die Unterstützung
dafür bereitstellt11.



3.2 mod_concat
Das Apache-Modul mod_concat12 erlaubt es, mehrere JavaScript- oder CSS-Dateien innerhalb
eines Requests dynamisch serverseitig zusammenzuführen und als eine einzelne Datei
auszuliefern.

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 Request
neu erzeugt werden.




9
   http://httpd.apache.org/docs/2.2/mod/mod_deflate.html
10
   Der Deflate-Algorithmus findet unter anderem auch im ZIP-Dateiformat Verwendung.
11
   http://httpd.apache.org/docs/2.2/mod/mod_deflate.html#input
12
   http://code.google.com/p/modconcat/

Jakob Schröter | Hochschule der Medien Stuttgart                                                      8
System Engineering und Management                  Automatisierung von Client-seitigen Performance-Optimierungen



Ähnlich wie mod_concat funktioniert das PHP-basierte Tool combine13. Allerdings basiert es
rein auf PHP und optional mod_rewrite und kann dadurch auch verwendet werden, wenn kein
Zugriff auf die volle Apache-Konfiguration besteht (z.B. bei einfachen Webhosting-Paketen).



3.3 Google mod_pagespeed
Google bietet mit der Page Speed 14 Familie mehrere Produkte an, mit deren Hilfe die
Performance von Webseiten gemessen und analysiert werden kann. Dazu zählt beispielsweise
das gleichnamige Page Speed Plugin für die Firefox-Erweiterung Firebug. Dieses analysiert eine
Webseite auf Basis verschiedener Best Practice Performance-Regeln und bietet Vorschläge, wie
die Performance der Webseite optimiert werden kann.

Im November 2010 veröffentliche Google das Apache-Modul mod_pagespeed15. Das Modul soll
Webseiten vollautomatisch auf bestmögliche Performance optimieren. An den eigenen
Webanwendungen müssten dazu keinerlei Änderungen vorgenommen werden. 16 Hierbei
kommen vorwiegend Optimierungen zum Einsatz, welche die Lade-, Anzeige- und
Ausführungszeit im Browser beeinflussen, das heißt Client-seitige Optimierungen. Dafür
kommen verschiedene Filter zum Einsatz welche die Ausführung von JavaScript, HTML und
den 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 CSS

13
   http://rakaz.nl/code/combine
14
   http://code.google.com/intl/de-DE/speed/page-speed/docs/overview.html
15
   vgl. (Google Inc., 2010)
16
   siehe (Google Inc.)

Jakob Schröter | Hochschule der Medien Stuttgart                                                      9
System Engineering und Management                      Automatisierung von Client-seitigen Performance-Optimierungen



              o Trim URLs
          Optimize Browser Rendering
              o Move CSS to Head
              o Optimize Images



Bei Webservern, die bislang in der Standardkonfiguration betrieben werden, kann durch
mod_pagespeed die Performance deutlich gesteigert werden. Der größte Performancegewinn
stammt dabei jedoch durch die Umkonfiguration des Apache-Servers. So aktiviert
mod_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 im
Webserver vorgenommen wird und die Grundregeln der Performance-Optimierungen bei der
Erstellung 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-Administratoren
geholfen die Performance zu verbessern.



3.4 WEBO Site SpeedUp
Mit dem Tool WEBO Site SpeedUp17 kann die Performance von PHP-basierten Projekten
automatisch verbessert werden. Das Tool wird lokal auf dem eigenen Webserver installiert und
klinkt sich in die eigene Anwendung ein. Neben PHP und ein paar PHP-Modulen werden
keine besonderen Anforderungen an den Webserver gestellt. WEBO Site SpeedUp stellt eine
Weboberfläche zur komfortablen Konfiguration bereit. Für viele verbreitete PHP-
Anwendungen wie Drupal, WordPress oder Magento sind speziell angepasste Versionen
verfügbar. Die Konfiguration ist sehr einfach, im Try&Error-Verfahren können verschiedene
Optimierungsmöglichkeiten aktiviert, getestet und die Performance verglichen werden.




                                    Abbildung 1: Quelle: WEBO Site SpeedUp

17
     http://www.webogroup.com/home/site-speedup/

Jakob Schröter | Hochschule der Medien Stuttgart                                                         10
System Engineering und Management                  Automatisierung von Client-seitigen Performance-Optimierungen



Das Tool analysiert die von der eigenen Anwendung erzeugte HTML-Ausgabe und kann
folgende 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 Optimizer
Die Firma Strangeloop Networks18 hat sich auf die Web Performance Optimierung spezialisiert
und bietet mit dem Site Optimizer eine kommerzielle Lösung an, welche die eigene Webseite
ohne jegliche Änderungen am Quellcode „on-thy-fly“ optimiert. Der Site Optimizer wird
zwischen die eigenen Server und die Browser-Client geschaltet. Dieser optimiert
vollautomatisch jeden Seitenzugriff auf Basis der Best Practices von Yahoo19 und Google20 und
eigenen Regeln der Firma Strangeloop. Der HTML-Code und alle Ressourcen werden nun
spezifisch für den Ziel-Browser und das -Endgerät optimiert.




18
   http://www.strangeloopnetworks.com/
19
   http://developer.yahoo.com/performance/rules.html
20
   http://code.google.com/intl/de-DE/speed/page-speed/docs/rules_intro.html

Jakob Schröter | Hochschule der Medien Stuttgart                                                      11
System Engineering und Management                       Automatisierung von Client-seitigen Performance-Optimierungen




                                        Abbildung 2: Quelle: Strangeloop

Besonderer Fokus liegt zudem auf der Optimierung der vom Nutzer wahrgenommenen
Ladezeit. Dafür analysiert der Site Optimizer das Nutzerverhalten und berechnet, welche
Seiten der eigenen Webpräsenz der Nutzer vermutlich als nächstes aufrufen wird. Während
der Nutzer noch mit dem Lesen der aktuellen Seite beschäftigt ist wird der Browser bereits
angewiesen die Ressourcen (JavaScript, CSS, Grafiken, …) der vermutlich nächsten Seite
herunter zu laden. Dadurch kann der nächste Seitenaufruf (wenn der Nutzer wirklich die
vermutete Seite aufruft) deutlich beschleunigt werden. Ebenso wird analysiert, welche
Ressourcen typischerweise für eine bestimmte Seite benötigt werden. Während der eigene
Anwendungs-Server noch mit der Generierung des HTML-Codes beschäftigt ist sendet der
Strangeloop Site Optimizer die vermuteten Ressourcen bereits an den Client. Sobald der Server
dann die Seite fertig generiert und den HTML-Code an den Client ausgeliefert hat kann die
Seite 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 im
Rechenzentrum, 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-Status
kontrolliert werden. Ebenso können statistische Daten über die Optimierungen in bereits
bestehende Tracking-Systeme wie Google Analytics, Omniture oder Web Trends eingespielt
werden.



3.6 Blaze.io
Das im Jahr 2010 gegründete Unternehmen Blaze Software Inc.21 hat sich ebenfalls auf die
Optimierung von Website-Performance spezialisiert. Die Lösung funktioniert wie folgt: Auf
dem eigenen Webserver wird der so genannte Blaze Agent installiert. Die leichtgewichtige
Anwendung prüft bei jedem Request, ob bereits eine optimierte Version der angeforderten
Seite vorliegt. Wenn nicht, wird die Webseite regulär an den Besucher ausgeliefert und
anschließend Informationen zum Request sowie eine Kopie der angeforderten Seite an die
Blaze-Cloud gesendet. Diese analysiert die Webseite und optimiert sie anhand verschiedener

21
     http://www.blaze.io/

Jakob Schröter | Hochschule der Medien Stuttgart                                                          12
System Engineering und Management                        Automatisierung von Client-seitigen Performance-Optimierungen



Regeln. Dabei kommen die Standard-Best Practices wie zusammenfassen, minimieren und
komprimieren 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 einem
Besucher angefordert, liefert der Blaze Agent die optimierte Seite aus. Ebenso werden statische
Ressourcen 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ächsten
Request nötigen Ressourcen zugespielt.

Große Vorteile der Cloud-basierten Lösung sind, dass an der eigenen Anwendung und auf den
eigenen Servern kaum Änderungen vorgenommen werden müssen. Ebenso benötigt der Blaze
Agent keine häufigen Update- und Wartungsarbeiten, da die eigentliche Analyse und
Optimierung der Webseiten extern in der Blaze-Cloud stattfindet. Daher werden die eigenen
Server auch kaum zusätzlich belastet.




Jakob Schröter | Hochschule der Medien Stuttgart                                                            13
System Engineering und Management                  Automatisierung von Client-seitigen Performance-Optimierungen




4    Zukunft: Google SPDY als HTTP-Erweiterung
Das von Google entwickelte Projekt SPDY kann zwar im Vergleich zu den in den vorherigen
Kapiteln genannten Lösungen nicht direkt für eigene Projekte verwendet werden, dennoch ist
das Projekt für die Zukunft der Web Performance Optimierungen sehr spannend: das bislang
experimentelle Protokoll könnte viele der heutigen Performance-Optimierungen überflüssig
machen.

Es ist bekannt, dass das HTTP-Protokoll für die mittlerweile sehr komplexen Webprojekte
einen relativ großen Overhead mitbringt. Für jede notwendige Datei muss eine eigene
Verbindung initialisiert werden, bei jedem Request werden einige (unkomprimierte) HTTP-
Header übertragen, …

Das SPDY-Application-Layer-Protokoll stellt eine interessante Verbesserung dar. Durch die
Reduzierung 22 und Komprimierung von HTTP-Headern, dem Senden und Verarbeiten
multipler Streams und einer konsequenten Abfrage-Priorisierung sollen im Test 25 der
beliebtesten 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 TCP
und benötigt daher keine Änderungen an der bestehenden Netzwerkinfrastruktur.

Um das Protokoll zu nutzen muss der Server als auch der Browser eine SPDY-Unterstützung
mitbringen. Anpassungen an den Webanwendungen selbst sind nicht notwendig. Viele der
heutigen Optimierungen wie etwa CSS-Sprites werden durch SPDY überflüssig. Durch CSS-
Sprites lässt sich die Anzahl der HTTP-Requests oft deutlich reduzieren – jedoch
verschlechtert sich dadurch die Wartbarkeit der Anwendung. Auf mobilen Geräten können
CSS-Sprites sogar zu Performance-Einbußen führen, da bei jeder Verwendung eines
Ausschnitts aus der Sprite-Grafik die komplette Grafik in den Speicher geladen und verarbeitet
werden 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 eine
Push-Funktion vor, über die Server Daten an den Browser senden können, noch bevor dieser
die Ressource angefragt hat. So können beispielsweise schon Ressourcen gesendet werden, die
auf der folgenden Seite benötigt werden.

Wie man es von Google erwartet, ist Google wiedermal Vorreiter: Google Chrome seit Version
11 und alle Google-Dienste wie Google Mail unterstützen bereits SPDY24. Nun ist die Frage, ob
und 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, da
es 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/spdy
27
   http://svn.apache.org/repos/asf/tomcat/trunk/modules/tomcat-lite
28
   https://github.com/igrigorik/spdy

Jakob Schröter | Hochschule der Medien Stuttgart                                                     14
System Engineering und Management                   Automatisierung von Client-seitigen Performance-Optimierungen




5      Zusammenfassung
Die Optimierung der Performance einer Webseite ist eine komplexe und zeitaufwändig
Aufgabe. Umso verlockender ist daher ein möglichst weit automatisierter
Optimierungsprozess. Wie in den vorhergehenden Kapiteln gezeigt wurde existieren bereits
einige Lösungen mit denen viele der Optimierungen automatisch angewendet werden können.
Dennoch gibt es bisher keine perfekte „One-Click“-Lösung. Der Wirkungsgrad dieser
Lösungen variiert stark von Projekt zu Projekt. So reicht es beispielsweise bei einer
weitgehendsten statischen Webseite aus, die Bilder im Deploymentprozess zu optimieren,
während bei einer Magazin-Webseite die Bildoptimierung vor jedem Veröffentlichen eines
Artikels durchgeführt werden sollte. Ebenso wird bei manchen Anwendungen der HTML-Code
der Seite dynamisch per JavaScript erzeugt. Automatische Tools haben hierbei kaum eine
Möglichkeit Optimierungen am HTML-Code vorzunehmen. Manuelle Optimierungen bringen
immer bessere Ergebnisse, da sie gezielt auf die speziellen Anforderungen der eigenen
Anwendung angepasst werden können. Auch die meisten kommerziellen Lösungen beinhalten
manuelle projektspezifische Analysen der bestmöglichen Performanceoptimierungen welche
die Grundlage für die Konfiguration der automatischen Tools darstellen. Anschließend können
die 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 anderen
Browserhersteller neben Google nachziehen und eine SPDY-Unterstützung in ihre Browser
integrieren, so könnte SPDY der neue Standard für den Transfer von Webseiten werden. Dabei
würden einige der aktuell empfehlenswerten Optimierungen wie das Zusammenfassen von
JavaScript- und CSS-Dateien sowie CSS-Sprites überflüssig werden.




29
     https://github.com/donnerjack13589/node-spdy

Jakob Schröter | Hochschule der Medien Stuttgart                                                       15
System Engineering und Management                  Automatisierung von Client-seitigen Performance-Optimierungen




Literatur


Belshe, 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.html

Cutler,     B. (März 2010). Von Blog of Metrix: Firefox & Page Load                             Speed:
          http://blog.mozilla.com/metrics/category/website-optimization/ abgerufen

golem.de. (08. April 2011). Chrome nutzt SPDY statt HTTP. Abgerufen am 08. April 2011 von
       http://www.golem.de/1104/82657.html

Google 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.html

Google Inc. (kein Datum). Page Speed Family. Abgerufen am 10. Februar 2011 von
      http://code.google.com/intl/de-DE/speed/page-speed/docs/overview.html

Nielsen, J. (Juni 2010). Von Website Response Times: http://www.useit.com/alertbox/response-
       times.html abgerufen

Schröter, J. (18. Januar 2011).           Client-side Performance Optimizations.                   Von
       http://slideshare.net/jakob.schroeter/Client-side-Performance-Optimizations
       abgerufen

Schurman, 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 abgerufen

Singhal, 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 abgerufen

Souders, S. (2007). High performance web sites: essential knowledge for frontend engineers.
       (O'Reilly, Hrsg.)

Souders, S. (Juli 2009). Von O'Reilly Radar: Velocity and the Bottom                              Line:
       http://radar.oreilly.com/2009/07/velocity-making-your-site-fast.html abgerufen

Theurer, 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/ abgerufen

Website 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
System Engineering und Management                  Automatisierung von Client-seitigen Performance-Optimierungen



Yang,     Z.    (August   2009).    Von    Facebook:    Every     Millisecond                  Counts:
        http://www.facebook.com/note.php?note_id=122869103919 abgerufen




Jakob Schröter | Hochschule der Medien Stuttgart                                                     17

Weitere ähnliche Inhalte

Andere mochten auch

Imprimante Fargo DTC 550
Imprimante Fargo DTC 550 Imprimante Fargo DTC 550
Imprimante Fargo DTC 550 Visu-ad
 
Facebook, Twitter & Co: Der Rechtsrahmen für Social Media Marketing
Facebook, Twitter & Co: Der Rechtsrahmen für Social Media MarketingFacebook, Twitter & Co: Der Rechtsrahmen für Social Media Marketing
Facebook, Twitter & Co: Der Rechtsrahmen für Social Media MarketingHenning Krieg
 
Agile Mëtteg series - Session 2
Agile Mëtteg series - Session 2Agile Mëtteg series - Session 2
Agile Mëtteg series - Session 2Agile Partner S.A.
 
Visite de propriétés à l'étranger
Visite de propriétés à l'étrangerVisite de propriétés à l'étranger
Visite de propriétés à l'étrangerRealty Gold World
 
DNX Workshop ★ So machst Du Geld mit Deinem Blog: Workshop zur Monetarisierun...
DNX Workshop ★ So machst Du Geld mit Deinem Blog: Workshop zur Monetarisierun...DNX Workshop ★ So machst Du Geld mit Deinem Blog: Workshop zur Monetarisierun...
DNX Workshop ★ So machst Du Geld mit Deinem Blog: Workshop zur Monetarisierun...DNX
 
Le secteur de l'energie
Le secteur de l'energieLe secteur de l'energie
Le secteur de l'energieJLL France
 
‘Fehler vorprogrammiert’ Paul Tours, Senior Consultant/Human Inference
‘Fehler vorprogrammiert’ Paul Tours, Senior Consultant/Human Inference‘Fehler vorprogrammiert’ Paul Tours, Senior Consultant/Human Inference
‘Fehler vorprogrammiert’ Paul Tours, Senior Consultant/Human InferenceDataValueTalk
 
Datenaustausch Bibliographie und Forschungsdatenbank
Datenaustausch Bibliographie und ForschungsdatenbankDatenaustausch Bibliographie und Forschungsdatenbank
Datenaustausch Bibliographie und ForschungsdatenbankSimanowski
 
Creation servicewebjavaee
Creation servicewebjavaeeCreation servicewebjavaee
Creation servicewebjavaeeOusmane Ciss
 
Kampagnen führen in Microsoft Dynamics CRM - topsoft 2010_03_25 11:00
Kampagnen führen in Microsoft Dynamics CRM - topsoft 2010_03_25 11:00Kampagnen führen in Microsoft Dynamics CRM - topsoft 2010_03_25 11:00
Kampagnen führen in Microsoft Dynamics CRM - topsoft 2010_03_25 11:00topsoft - inspiring digital business
 
Tipps für einen erfolgreichen Fotowettbewerb
Tipps für einen erfolgreichen FotowettbewerbTipps für einen erfolgreichen Fotowettbewerb
Tipps für einen erfolgreichen FotowettbewerbFastory
 
Université des CCI
Université des CCIUniversité des CCI
Université des CCIguest465cd0
 
Nuit Et Brouillard J Ferrat M
Nuit Et Brouillard J Ferrat MNuit Et Brouillard J Ferrat M
Nuit Et Brouillard J Ferrat Mguestc3c970
 
Carrefour de l_air2
Carrefour de l_air2Carrefour de l_air2
Carrefour de l_air2Phil75
 
0u trouver l_argent-cp
0u trouver l_argent-cp0u trouver l_argent-cp
0u trouver l_argent-cpdesintocx
 

Andere mochten auch (20)

Imprimante Fargo DTC 550
Imprimante Fargo DTC 550 Imprimante Fargo DTC 550
Imprimante Fargo DTC 550
 
1/4h R-Evolutionnaire - Alexis Mons Beyond Destinations #RTB8
1/4h R-Evolutionnaire - Alexis Mons Beyond Destinations #RTB81/4h R-Evolutionnaire - Alexis Mons Beyond Destinations #RTB8
1/4h R-Evolutionnaire - Alexis Mons Beyond Destinations #RTB8
 
Facebook, Twitter & Co: Der Rechtsrahmen für Social Media Marketing
Facebook, Twitter & Co: Der Rechtsrahmen für Social Media MarketingFacebook, Twitter & Co: Der Rechtsrahmen für Social Media Marketing
Facebook, Twitter & Co: Der Rechtsrahmen für Social Media Marketing
 
Agile Mëtteg series - Session 2
Agile Mëtteg series - Session 2Agile Mëtteg series - Session 2
Agile Mëtteg series - Session 2
 
Visite de propriétés à l'étranger
Visite de propriétés à l'étrangerVisite de propriétés à l'étranger
Visite de propriétés à l'étranger
 
DNX Workshop ★ So machst Du Geld mit Deinem Blog: Workshop zur Monetarisierun...
DNX Workshop ★ So machst Du Geld mit Deinem Blog: Workshop zur Monetarisierun...DNX Workshop ★ So machst Du Geld mit Deinem Blog: Workshop zur Monetarisierun...
DNX Workshop ★ So machst Du Geld mit Deinem Blog: Workshop zur Monetarisierun...
 
Le secteur de l'energie
Le secteur de l'energieLe secteur de l'energie
Le secteur de l'energie
 
‘Fehler vorprogrammiert’ Paul Tours, Senior Consultant/Human Inference
‘Fehler vorprogrammiert’ Paul Tours, Senior Consultant/Human Inference‘Fehler vorprogrammiert’ Paul Tours, Senior Consultant/Human Inference
‘Fehler vorprogrammiert’ Paul Tours, Senior Consultant/Human Inference
 
Datenaustausch Bibliographie und Forschungsdatenbank
Datenaustausch Bibliographie und ForschungsdatenbankDatenaustausch Bibliographie und Forschungsdatenbank
Datenaustausch Bibliographie und Forschungsdatenbank
 
Creation servicewebjavaee
Creation servicewebjavaeeCreation servicewebjavaee
Creation servicewebjavaee
 
Xml tv
Xml tvXml tv
Xml tv
 
konzeptwerkstatt
konzeptwerkstattkonzeptwerkstatt
konzeptwerkstatt
 
Kampagnen führen in Microsoft Dynamics CRM - topsoft 2010_03_25 11:00
Kampagnen führen in Microsoft Dynamics CRM - topsoft 2010_03_25 11:00Kampagnen führen in Microsoft Dynamics CRM - topsoft 2010_03_25 11:00
Kampagnen führen in Microsoft Dynamics CRM - topsoft 2010_03_25 11:00
 
Tipps für einen erfolgreichen Fotowettbewerb
Tipps für einen erfolgreichen FotowettbewerbTipps für einen erfolgreichen Fotowettbewerb
Tipps für einen erfolgreichen Fotowettbewerb
 
Xiben le retour
Xiben le retourXiben le retour
Xiben le retour
 
Français iii partiel 2
Français iii partiel 2Français iii partiel 2
Français iii partiel 2
 
Université des CCI
Université des CCIUniversité des CCI
Université des CCI
 
Nuit Et Brouillard J Ferrat M
Nuit Et Brouillard J Ferrat MNuit Et Brouillard J Ferrat M
Nuit Et Brouillard J Ferrat M
 
Carrefour de l_air2
Carrefour de l_air2Carrefour de l_air2
Carrefour de l_air2
 
0u trouver l_argent-cp
0u trouver l_argent-cp0u trouver l_argent-cp
0u trouver l_argent-cp
 

Ähnlich wie Automatisierung von Client-seitigen Web-Performance-Optimierungen

Site Speed EXTREME - SEOkomm 2014
Site Speed EXTREME - SEOkomm 2014Site Speed EXTREME - SEOkomm 2014
Site Speed EXTREME - SEOkomm 2014Bastian Grimm
 
Der Business-Case für Beschleunigung im digitalen Marketing
Der Business-Case für Beschleunigung im digitalen MarketingDer Business-Case für Beschleunigung im digitalen Marketing
Der Business-Case für Beschleunigung im digitalen MarketingThom. Poole
 
Back to the Frontend – aber nun mit Microservices
Back to the Frontend – aber nun mit MicroservicesBack to the Frontend – aber nun mit Microservices
Back to the Frontend – aber nun mit MicroservicesAndré Fleischer
 
PageSpeed für Einsteiger SEO Day 2014
PageSpeed für Einsteiger SEO Day 2014PageSpeed für Einsteiger SEO Day 2014
PageSpeed für Einsteiger SEO Day 2014Franz Hernschier
 
Google Analytics Konferenz 2013: Alexander Knett, e-dialog: Website Speed Ana...
Google Analytics Konferenz 2013: Alexander Knett, e-dialog: Website Speed Ana...Google Analytics Konferenz 2013: Alexander Knett, e-dialog: Website Speed Ana...
Google Analytics Konferenz 2013: Alexander Knett, e-dialog: Website Speed Ana...e-dialog GmbH
 
Wozu Portlets – reichen HTML5 und Rest nicht aus für moderne Portale?
Wozu Portlets – reichen HTML5 und Rest nicht aus für moderne Portale?Wozu Portlets – reichen HTML5 und Rest nicht aus für moderne Portale?
Wozu Portlets – reichen HTML5 und Rest nicht aus für moderne Portale?adesso AG
 
DWX 2016 - Load Testing mit Visual Studio richtig gemacht
DWX 2016 - Load Testing mit Visual Studio richtig gemachtDWX 2016 - Load Testing mit Visual Studio richtig gemacht
DWX 2016 - Load Testing mit Visual Studio richtig gemachtMarc Müller
 
Best practise 5 anwendungsfälle der google analytics api
Best practise 5 anwendungsfälle der google analytics apiBest practise 5 anwendungsfälle der google analytics api
Best practise 5 anwendungsfälle der google analytics apie-dialog GmbH
 
Ivory Soa Suite
Ivory Soa SuiteIvory Soa Suite
Ivory Soa SuitePredrag61
 
Clickstream Analysis with Spark—Understanding Visitors in Realtime by Josef A...
Clickstream Analysis with Spark—Understanding Visitors in Realtime by Josef A...Clickstream Analysis with Spark—Understanding Visitors in Realtime by Josef A...
Clickstream Analysis with Spark—Understanding Visitors in Realtime by Josef A...Spark Summit
 
Performance. Webmontag. Frankfurt.
Performance. Webmontag. Frankfurt.Performance. Webmontag. Frankfurt.
Performance. Webmontag. Frankfurt.Martin Kliehm
 
Skalierung & Performance
Skalierung & PerformanceSkalierung & Performance
Skalierung & Performanceglembotzky
 
HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg)
HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg)HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg)
HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg)André Krämer
 
AndroMDA - Einführung in eine Open Source Model Driven Architecture Lösung
AndroMDA - Einführung in eine Open Source Model Driven Architecture LösungAndroMDA - Einführung in eine Open Source Model Driven Architecture Lösung
AndroMDA - Einführung in eine Open Source Model Driven Architecture LösungEduard Hildebrandt
 
Enterprise UI
Enterprise UIEnterprise UI
Enterprise UIgedoplan
 
Office 365 Akademie News – Dezember 2020
Office 365 Akademie News – Dezember 2020Office 365 Akademie News – Dezember 2020
Office 365 Akademie News – Dezember 2020Thomas Maier
 

Ähnlich wie Automatisierung von Client-seitigen Web-Performance-Optimierungen (20)

Site Speed EXTREME - SEOkomm 2014
Site Speed EXTREME - SEOkomm 2014Site Speed EXTREME - SEOkomm 2014
Site Speed EXTREME - SEOkomm 2014
 
Der Business-Case für Beschleunigung im digitalen Marketing
Der Business-Case für Beschleunigung im digitalen MarketingDer Business-Case für Beschleunigung im digitalen Marketing
Der Business-Case für Beschleunigung im digitalen Marketing
 
Back to the Frontend – aber nun mit Microservices
Back to the Frontend – aber nun mit MicroservicesBack to the Frontend – aber nun mit Microservices
Back to the Frontend – aber nun mit Microservices
 
Shopleiter Magazin Nr. 3 - SEO-, SEM- und eCommerce-Tipps
Shopleiter Magazin Nr. 3 - SEO-, SEM- und eCommerce-TippsShopleiter Magazin Nr. 3 - SEO-, SEM- und eCommerce-Tipps
Shopleiter Magazin Nr. 3 - SEO-, SEM- und eCommerce-Tipps
 
Top 10 Internet-Trends
Top 10 Internet-TrendsTop 10 Internet-Trends
Top 10 Internet-Trends
 
PageSpeed für Einsteiger SEO Day 2014
PageSpeed für Einsteiger SEO Day 2014PageSpeed für Einsteiger SEO Day 2014
PageSpeed für Einsteiger SEO Day 2014
 
Google Analytics Konferenz 2013: Alexander Knett, e-dialog: Website Speed Ana...
Google Analytics Konferenz 2013: Alexander Knett, e-dialog: Website Speed Ana...Google Analytics Konferenz 2013: Alexander Knett, e-dialog: Website Speed Ana...
Google Analytics Konferenz 2013: Alexander Knett, e-dialog: Website Speed Ana...
 
Wozu Portlets – reichen HTML5 und Rest nicht aus für moderne Portale?
Wozu Portlets – reichen HTML5 und Rest nicht aus für moderne Portale?Wozu Portlets – reichen HTML5 und Rest nicht aus für moderne Portale?
Wozu Portlets – reichen HTML5 und Rest nicht aus für moderne Portale?
 
Camunda bpm 7.0-release-webinar-de
Camunda bpm 7.0-release-webinar-deCamunda bpm 7.0-release-webinar-de
Camunda bpm 7.0-release-webinar-de
 
DWX 2016 - Load Testing mit Visual Studio richtig gemacht
DWX 2016 - Load Testing mit Visual Studio richtig gemachtDWX 2016 - Load Testing mit Visual Studio richtig gemacht
DWX 2016 - Load Testing mit Visual Studio richtig gemacht
 
Best practise 5 anwendungsfälle der google analytics api
Best practise 5 anwendungsfälle der google analytics apiBest practise 5 anwendungsfälle der google analytics api
Best practise 5 anwendungsfälle der google analytics api
 
Ivory Soa Suite
Ivory Soa SuiteIvory Soa Suite
Ivory Soa Suite
 
Camunda BPM 7.2 - Deutsch
Camunda BPM 7.2 - DeutschCamunda BPM 7.2 - Deutsch
Camunda BPM 7.2 - Deutsch
 
Clickstream Analysis with Spark—Understanding Visitors in Realtime by Josef A...
Clickstream Analysis with Spark—Understanding Visitors in Realtime by Josef A...Clickstream Analysis with Spark—Understanding Visitors in Realtime by Josef A...
Clickstream Analysis with Spark—Understanding Visitors in Realtime by Josef A...
 
Performance. Webmontag. Frankfurt.
Performance. Webmontag. Frankfurt.Performance. Webmontag. Frankfurt.
Performance. Webmontag. Frankfurt.
 
Skalierung & Performance
Skalierung & PerformanceSkalierung & Performance
Skalierung & Performance
 
HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg)
HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg)HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg)
HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg)
 
AndroMDA - Einführung in eine Open Source Model Driven Architecture Lösung
AndroMDA - Einführung in eine Open Source Model Driven Architecture LösungAndroMDA - Einführung in eine Open Source Model Driven Architecture Lösung
AndroMDA - Einführung in eine Open Source Model Driven Architecture Lösung
 
Enterprise UI
Enterprise UIEnterprise UI
Enterprise UI
 
Office 365 Akademie News – Dezember 2020
Office 365 Akademie News – Dezember 2020Office 365 Akademie News – Dezember 2020
Office 365 Akademie News – Dezember 2020
 

Mehr von Jakob

Client-side Web Performance Optimization [paper]
Client-side Web Performance Optimization [paper]Client-side Web Performance Optimization [paper]
Client-side Web Performance Optimization [paper]Jakob
 
HTML5 Video vs. Flash Video [paper]
HTML5 Video vs. Flash Video [paper]HTML5 Video vs. Flash Video [paper]
HTML5 Video vs. Flash Video [paper]Jakob
 
Client-side Performance Optimizations
Client-side Performance OptimizationsClient-side Performance Optimizations
Client-side Performance OptimizationsJakob
 
Flash vs. Silverlight auf dem mobilen Endgerät
Flash vs. Silverlight auf dem mobilen EndgerätFlash vs. Silverlight auf dem mobilen Endgerät
Flash vs. Silverlight auf dem mobilen EndgerätJakob
 
Flash Video vs. HTML5 Video
Flash Video vs. HTML5 VideoFlash Video vs. HTML5 Video
Flash Video vs. HTML5 VideoJakob
 
Ruby On Rails - 1. Ruby Introduction
Ruby On Rails - 1. Ruby IntroductionRuby On Rails - 1. Ruby Introduction
Ruby On Rails - 1. Ruby IntroductionJakob
 
Ruby On Rails - 2. Rails Introduction
Ruby On Rails - 2. Rails IntroductionRuby On Rails - 2. Rails Introduction
Ruby On Rails - 2. Rails IntroductionJakob
 
Ruby On Rails - 3. Rails Addons
Ruby On Rails - 3. Rails AddonsRuby On Rails - 3. Rails Addons
Ruby On Rails - 3. Rails AddonsJakob
 

Mehr von Jakob (8)

Client-side Web Performance Optimization [paper]
Client-side Web Performance Optimization [paper]Client-side Web Performance Optimization [paper]
Client-side Web Performance Optimization [paper]
 
HTML5 Video vs. Flash Video [paper]
HTML5 Video vs. Flash Video [paper]HTML5 Video vs. Flash Video [paper]
HTML5 Video vs. Flash Video [paper]
 
Client-side Performance Optimizations
Client-side Performance OptimizationsClient-side Performance Optimizations
Client-side Performance Optimizations
 
Flash vs. Silverlight auf dem mobilen Endgerät
Flash vs. Silverlight auf dem mobilen EndgerätFlash vs. Silverlight auf dem mobilen Endgerät
Flash vs. Silverlight auf dem mobilen Endgerät
 
Flash Video vs. HTML5 Video
Flash Video vs. HTML5 VideoFlash Video vs. HTML5 Video
Flash Video vs. HTML5 Video
 
Ruby On Rails - 1. Ruby Introduction
Ruby On Rails - 1. Ruby IntroductionRuby On Rails - 1. Ruby Introduction
Ruby On Rails - 1. Ruby Introduction
 
Ruby On Rails - 2. Rails Introduction
Ruby On Rails - 2. Rails IntroductionRuby On Rails - 2. Rails Introduction
Ruby On Rails - 2. Rails Introduction
 
Ruby On Rails - 3. Rails Addons
Ruby On Rails - 3. Rails AddonsRuby On Rails - 3. Rails Addons
Ruby On Rails - 3. Rails Addons
 

Automatisierung von Client-seitigen Web-Performance-Optimierungen

  • 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 Stuttgart Dieses Paper soll einen Überblick über mögliche Automatisierungen von Client-seitigen Performance Optimierungen von Webseiten geben. Dabei werden kommerzielle als auch freie Lösungen betrachtet und einen Ausblick in die Zukunft der Performance-Optimierungen gegeben.
  • 2. System Engineering und Management Automatisierung von Client-seitigen Performance-Optimierungen Inhaltsverzeichnis 1 Die Bedeutung der Website-Performance ............................................................................... 3 1.1 Automatische Performance-Optimierungen ...................................................................5 2 Optimierung im Deployment-Prozess .................................................................................... 6 2.1 Build-Tools ....................................................................................................................... 6 2.2 Framework-spezifische Build-Tools .................................................................................7 3 „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 ............................................................................................................................. 12 4 Zukunft: Google SPDY als HTTP-Erweiterung ...................................................................... 14 5 Zusammenfassung .................................................................................................................. 15 Literatur .......................................................................................................................................... 16 Jakob Schröter | Hochschule der Medien Stuttgart 2
  • 3. System Engineering und Management Automatisierung von Client-seitigen Performance-Optimierungen 1 Die Bedeutung der Website-Performance Zum Erfolg eines Webprojekts tragen neben der Qualität des Angebots auch maßgeblich die User Experience und damit die Performance der Webseite bei. Mehrere große Anbieter haben in Studien festgestellt, dass sich die Geschwindigkeit der Webseite direkt auf die Webseiten-Zugriffe und den Umsatz auswirken. Zudem kann durch Performance-Optimierungen oft auch Hardware eingespart werden. Die folgende Tabelle zeigt einige Ergebnisse: Amazon +100 ms 1% weniger Verkäufe Yahoo +400 ms 5-9% weniger Zugriffe Google +500 ms 20% weniger Zugriffe Bing +2000 ms 4,3% weniger Umsatz/Nutzer (Schurman & Brutlag, 2009) Shopzilla -5000 ms 25 % mehr Zugriffe 7-12% mehr Umsatz 50% weniger Hardware (Souders, O'Reilly 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 auf das Geschäft haben können. (Website Optimization, LLC, 2008) Seit April 2010 lässt Google sogar 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-Client verschiebt sich die Wartezeit von der Server- auf die Client-seite. Entwickler von Yahoo stellten 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 Client Wasserfall-Diagramm von web.de, generiert mit webpagetest.org Jakob Schröter | Hochschule der Medien Stuttgart 3
  • 4. System Engineering und Management Automatisierung von Client-seitigen Performance-Optimierungen Am Beispiel des Wasserfall-Diagramms wird deutlich, dass das Laden und Verarbeiten der Webseiten-Ressourcen wie Grafiken, JavaScript- und CSS-Dateien wesentlich länger dauert als die reine Generierung der HTML-Seite auf dem Server. Demnach muss die Performance nicht nur im Backend sondern auch im Frontend optimiert werden. Auf der Client-Seite besteht ein sehr hohes Optimierungspotential. Für die Nutzer des Webprojekts zählt dabei vor allem die gefühlte Ladezeit bis die Webseite aufgebaut und für den Nutzer nutzbar ist. Die tatsächliche und die wahrgenommene Ladezeit können unter anderem 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. System Engineering und Management Automatisierung von Client-seitigen Performance-Optimierungen 1.1 Automatische Performance-Optimierungen Nun 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 zu integrieren. So würden die Optimierungen automatisch vor der Auslieferung bzw. Live- Installation des Projektes durchgeführt werden. Dadurch kann viel Zeit gespart und garantiert werden, dass immer die Optimierungen vorgenommen werden. Ebenso müssen die einzelnen Entwickler des Projekts keine besondere Rücksicht auf die Optimierungen nehmen. Dies resultiert wiederum in einer geringeren Fehlerrate durch die vorgenommenen Optimierungen. In den letzten Jahren wurden zudem einige Unternehmen gegründet, welche sich auf die Automatisierung von Web-Performance-Optimierung spezialisiert haben. Alternativ zur eigenen Integration in den Build/Deployment-Prozess versprechen die Produkte vollautomatische 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 hierbei meist über ein CDN statt. So kann der eigene Betrieb eines global verteilten CDNs gespart werden. Im folgenden Kapitel werden die verschiedenen Varianten der automatischen Performance- Optimierung näher betrachtet. Jakob Schröter | Hochschule der Medien Stuttgart 5
  • 6. System Engineering und Management Automatisierung von Client-seitigen Performance-Optimierungen 2 Optimierung im Build/Deployment-Prozess Der Build/Deployment-Prozess großer Projekte bietet sich an um dort automatisierte Performance-Optimierungen zu integrieren. Folgende der in Kapitel 1 genannten Optimierungen 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 Dateien In diesem Kapitel sollen frei verfügbare Lösungen, d.h. vorwiegend Open Source Lösungen betrachtet werden. 2.1 Build-Tools Das Zusammenfassen und komprimieren von JavaScript- und CSS-Dateien kann beispielsweise mit Tools wie YUICompressor1 oder UglifyJS2 vorgenommen werde. Wichtig ist hierbei, einen möglichst gut wartbaren Prozess zu entwickeln. Während der Entwicklung sollen diese Dateien möglichst modular (das heißt in getrennten Dateien) und dokumentiert (das heißt mit Kommentaren) verwendet werden. Gut lesbarer Code ist auch wichtig um JavaScript-Code im Browser zu debuggen. Um Fehler zu vermeiden ist es wichtig, die Reihenfolge der Einbindung 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 ein Minify-Tool anwendet. Anschließend erstellt das Script eine angepasste Version der index- Seite welche nur einen einzelnen Aufruf auf die zusammengefasste CSS- und JavaScript-Datei beinhaltet. Während es schwierig ist, die optimale Wahl der Grafikformate und Auflösungen zu automatisieren 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/UglifyJS 3 http://pmt.sourceforge.net/pngcrush/ 4 http://jpegclub.org/ Jakob Schröter | Hochschule der Medien Stuttgart 6
  • 7. System Engineering und Management Automatisierung von Client-seitigen Performance-Optimierungen Auch lässt sich die Verwendung von CSS-Sprites teilweise automatisieren. Das Tool SmartSprites 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-Tools Viele 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üft werden, 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 um einen an die eigenen Bedürfnisse angepassten Build des Sencha ExtJS-Frameworks zu erzeugen. Dabei werden unter Anderem die für das eigene Projekt benötigten JavaScript- und CSS-Dateien automatisch zusammengefasst und komprimiert. 5 beispielsweise http://mathew-davies.co.uk/2010/01/01/smushit-php-class.html 6 http://csssprites.org/ 7 http://www.sencha.com/products/extjs/download/ 8 http://www.sencha.com/products/jsbuilder Jakob Schröter | Hochschule der Medien Stuttgart 7
  • 8. System Engineering und Management Automatisierung von Client-seitigen Performance-Optimierungen 3 „On-the-fly“-Optimierung Bei der „On-the-fly“-Optimierung werden die Optimierungen während des Zugriffs durchgeführt und ggf. für die nächsten Zugriffe im Cache gespeichert. Bei Projekten mit sehr hohen Zugriffszahlen muss die durch die „Live-Optimierung“ zusätzliche Belastung der Server berücksichtigt werden. Jedoch sind oft keine oder nur geringe Anpassungen an der eigenen Anwendung nötig. 3.1 mod_deflate Das weit verbreitete Apache-Modul mod_deflate 9 kann dazu verwendet werden, alle textbasierten Dateien wie HTML, CSS, JavaScript, XML und JSON automatisch mit dem Deflate-Algorithmus 10 zu komprimieren. Alle aktuellen Browser unterstützten diese Kompressionstechnik. An der eigenen Anwendung müssen hierfür keine Anpassungen vorgenommen werden und die zusätzliche Server-Belastung ist gering. Das Modul sollte daher bei jedem Webprojekt aktiviert werden, das Optimierungspotential ist enorm. Für andere Webserver sind vergleichbare Module verfügbar. Zu beachten ist allerdings, dass die aktuellen Browser die Kompression nur für den Transferweg vom Server zum Browser, nicht aber für den Weg vom Browser zum Server unterstützen. So können Daten, die per GET/POST-Request vom Browser an den Server gesendet werden nicht komprimiert werden, obwohl der Apache-Webserver die Unterstützung dafür bereitstellt11. 3.2 mod_concat Das Apache-Modul mod_concat12 erlaubt es, mehrere JavaScript- oder CSS-Dateien innerhalb eines Requests dynamisch serverseitig zusammenzuführen und als eine einzelne Datei auszuliefern. 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 Request neu erzeugt werden. 9 http://httpd.apache.org/docs/2.2/mod/mod_deflate.html 10 Der Deflate-Algorithmus findet unter anderem auch im ZIP-Dateiformat Verwendung. 11 http://httpd.apache.org/docs/2.2/mod/mod_deflate.html#input 12 http://code.google.com/p/modconcat/ Jakob Schröter | Hochschule der Medien Stuttgart 8
  • 9. System Engineering und Management Automatisierung von Client-seitigen Performance-Optimierungen Ähnlich wie mod_concat funktioniert das PHP-basierte Tool combine13. Allerdings basiert es rein auf PHP und optional mod_rewrite und kann dadurch auch verwendet werden, wenn kein Zugriff auf die volle Apache-Konfiguration besteht (z.B. bei einfachen Webhosting-Paketen). 3.3 Google mod_pagespeed Google bietet mit der Page Speed 14 Familie mehrere Produkte an, mit deren Hilfe die Performance von Webseiten gemessen und analysiert werden kann. Dazu zählt beispielsweise das gleichnamige Page Speed Plugin für die Firefox-Erweiterung Firebug. Dieses analysiert eine Webseite auf Basis verschiedener Best Practice Performance-Regeln und bietet Vorschläge, wie die Performance der Webseite optimiert werden kann. Im November 2010 veröffentliche Google das Apache-Modul mod_pagespeed15. Das Modul soll Webseiten vollautomatisch auf bestmögliche Performance optimieren. An den eigenen Webanwendungen müssten dazu keinerlei Änderungen vorgenommen werden. 16 Hierbei kommen vorwiegend Optimierungen zum Einsatz, welche die Lade-, Anzeige- und Ausführungszeit im Browser beeinflussen, das heißt Client-seitige Optimierungen. Dafür kommen verschiedene Filter zum Einsatz welche die Ausführung von JavaScript, HTML und den 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 CSS 13 http://rakaz.nl/code/combine 14 http://code.google.com/intl/de-DE/speed/page-speed/docs/overview.html 15 vgl. (Google Inc., 2010) 16 siehe (Google Inc.) Jakob Schröter | Hochschule der Medien Stuttgart 9
  • 10. System Engineering und Management Automatisierung von Client-seitigen Performance-Optimierungen o Trim URLs  Optimize Browser Rendering o Move CSS to Head o Optimize Images Bei Webservern, die bislang in der Standardkonfiguration betrieben werden, kann durch mod_pagespeed die Performance deutlich gesteigert werden. Der größte Performancegewinn stammt dabei jedoch durch die Umkonfiguration des Apache-Servers. So aktiviert mod_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 im Webserver vorgenommen wird und die Grundregeln der Performance-Optimierungen bei der Erstellung 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-Administratoren geholfen die Performance zu verbessern. 3.4 WEBO Site SpeedUp Mit dem Tool WEBO Site SpeedUp17 kann die Performance von PHP-basierten Projekten automatisch verbessert werden. Das Tool wird lokal auf dem eigenen Webserver installiert und klinkt sich in die eigene Anwendung ein. Neben PHP und ein paar PHP-Modulen werden keine besonderen Anforderungen an den Webserver gestellt. WEBO Site SpeedUp stellt eine Weboberfläche zur komfortablen Konfiguration bereit. Für viele verbreitete PHP- Anwendungen wie Drupal, WordPress oder Magento sind speziell angepasste Versionen verfügbar. Die Konfiguration ist sehr einfach, im Try&Error-Verfahren können verschiedene Optimierungsmöglichkeiten aktiviert, getestet und die Performance verglichen werden. Abbildung 1: Quelle: WEBO Site SpeedUp 17 http://www.webogroup.com/home/site-speedup/ Jakob Schröter | Hochschule der Medien Stuttgart 10
  • 11. System Engineering und Management Automatisierung von Client-seitigen Performance-Optimierungen Das Tool analysiert die von der eigenen Anwendung erzeugte HTML-Ausgabe und kann folgende 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 Optimizer Die Firma Strangeloop Networks18 hat sich auf die Web Performance Optimierung spezialisiert und bietet mit dem Site Optimizer eine kommerzielle Lösung an, welche die eigene Webseite ohne jegliche Änderungen am Quellcode „on-thy-fly“ optimiert. Der Site Optimizer wird zwischen die eigenen Server und die Browser-Client geschaltet. Dieser optimiert vollautomatisch jeden Seitenzugriff auf Basis der Best Practices von Yahoo19 und Google20 und eigenen Regeln der Firma Strangeloop. Der HTML-Code und alle Ressourcen werden nun spezifisch für den Ziel-Browser und das -Endgerät optimiert. 18 http://www.strangeloopnetworks.com/ 19 http://developer.yahoo.com/performance/rules.html 20 http://code.google.com/intl/de-DE/speed/page-speed/docs/rules_intro.html Jakob Schröter | Hochschule der Medien Stuttgart 11
  • 12. System Engineering und Management Automatisierung von Client-seitigen Performance-Optimierungen Abbildung 2: Quelle: Strangeloop Besonderer Fokus liegt zudem auf der Optimierung der vom Nutzer wahrgenommenen Ladezeit. Dafür analysiert der Site Optimizer das Nutzerverhalten und berechnet, welche Seiten der eigenen Webpräsenz der Nutzer vermutlich als nächstes aufrufen wird. Während der Nutzer noch mit dem Lesen der aktuellen Seite beschäftigt ist wird der Browser bereits angewiesen die Ressourcen (JavaScript, CSS, Grafiken, …) der vermutlich nächsten Seite herunter zu laden. Dadurch kann der nächste Seitenaufruf (wenn der Nutzer wirklich die vermutete Seite aufruft) deutlich beschleunigt werden. Ebenso wird analysiert, welche Ressourcen typischerweise für eine bestimmte Seite benötigt werden. Während der eigene Anwendungs-Server noch mit der Generierung des HTML-Codes beschäftigt ist sendet der Strangeloop Site Optimizer die vermuteten Ressourcen bereits an den Client. Sobald der Server dann die Seite fertig generiert und den HTML-Code an den Client ausgeliefert hat kann die Seite 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 im Rechenzentrum, 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-Status kontrolliert werden. Ebenso können statistische Daten über die Optimierungen in bereits bestehende Tracking-Systeme wie Google Analytics, Omniture oder Web Trends eingespielt werden. 3.6 Blaze.io Das im Jahr 2010 gegründete Unternehmen Blaze Software Inc.21 hat sich ebenfalls auf die Optimierung von Website-Performance spezialisiert. Die Lösung funktioniert wie folgt: Auf dem eigenen Webserver wird der so genannte Blaze Agent installiert. Die leichtgewichtige Anwendung prüft bei jedem Request, ob bereits eine optimierte Version der angeforderten Seite vorliegt. Wenn nicht, wird die Webseite regulär an den Besucher ausgeliefert und anschließend Informationen zum Request sowie eine Kopie der angeforderten Seite an die Blaze-Cloud gesendet. Diese analysiert die Webseite und optimiert sie anhand verschiedener 21 http://www.blaze.io/ Jakob Schröter | Hochschule der Medien Stuttgart 12
  • 13. System Engineering und Management Automatisierung von Client-seitigen Performance-Optimierungen Regeln. Dabei kommen die Standard-Best Practices wie zusammenfassen, minimieren und komprimieren 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 einem Besucher angefordert, liefert der Blaze Agent die optimierte Seite aus. Ebenso werden statische Ressourcen 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ächsten Request nötigen Ressourcen zugespielt. Große Vorteile der Cloud-basierten Lösung sind, dass an der eigenen Anwendung und auf den eigenen Servern kaum Änderungen vorgenommen werden müssen. Ebenso benötigt der Blaze Agent keine häufigen Update- und Wartungsarbeiten, da die eigentliche Analyse und Optimierung der Webseiten extern in der Blaze-Cloud stattfindet. Daher werden die eigenen Server auch kaum zusätzlich belastet. Jakob Schröter | Hochschule der Medien Stuttgart 13
  • 14. System Engineering und Management Automatisierung von Client-seitigen Performance-Optimierungen 4 Zukunft: Google SPDY als HTTP-Erweiterung Das von Google entwickelte Projekt SPDY kann zwar im Vergleich zu den in den vorherigen Kapiteln genannten Lösungen nicht direkt für eigene Projekte verwendet werden, dennoch ist das Projekt für die Zukunft der Web Performance Optimierungen sehr spannend: das bislang experimentelle Protokoll könnte viele der heutigen Performance-Optimierungen überflüssig machen. Es ist bekannt, dass das HTTP-Protokoll für die mittlerweile sehr komplexen Webprojekte einen relativ großen Overhead mitbringt. Für jede notwendige Datei muss eine eigene Verbindung initialisiert werden, bei jedem Request werden einige (unkomprimierte) HTTP- Header übertragen, … Das SPDY-Application-Layer-Protokoll stellt eine interessante Verbesserung dar. Durch die Reduzierung 22 und Komprimierung von HTTP-Headern, dem Senden und Verarbeiten multipler Streams und einer konsequenten Abfrage-Priorisierung sollen im Test 25 der beliebtesten 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 TCP und benötigt daher keine Änderungen an der bestehenden Netzwerkinfrastruktur. Um das Protokoll zu nutzen muss der Server als auch der Browser eine SPDY-Unterstützung mitbringen. Anpassungen an den Webanwendungen selbst sind nicht notwendig. Viele der heutigen Optimierungen wie etwa CSS-Sprites werden durch SPDY überflüssig. Durch CSS- Sprites lässt sich die Anzahl der HTTP-Requests oft deutlich reduzieren – jedoch verschlechtert sich dadurch die Wartbarkeit der Anwendung. Auf mobilen Geräten können CSS-Sprites sogar zu Performance-Einbußen führen, da bei jeder Verwendung eines Ausschnitts aus der Sprite-Grafik die komplette Grafik in den Speicher geladen und verarbeitet werden 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 eine Push-Funktion vor, über die Server Daten an den Browser senden können, noch bevor dieser die Ressource angefragt hat. So können beispielsweise schon Ressourcen gesendet werden, die auf der folgenden Seite benötigt werden. Wie man es von Google erwartet, ist Google wiedermal Vorreiter: Google Chrome seit Version 11 und alle Google-Dienste wie Google Mail unterstützen bereits SPDY24. Nun ist die Frage, ob und 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, da es 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/spdy 27 http://svn.apache.org/repos/asf/tomcat/trunk/modules/tomcat-lite 28 https://github.com/igrigorik/spdy Jakob Schröter | Hochschule der Medien Stuttgart 14
  • 15. System Engineering und Management Automatisierung von Client-seitigen Performance-Optimierungen 5 Zusammenfassung Die Optimierung der Performance einer Webseite ist eine komplexe und zeitaufwändig Aufgabe. Umso verlockender ist daher ein möglichst weit automatisierter Optimierungsprozess. Wie in den vorhergehenden Kapiteln gezeigt wurde existieren bereits einige Lösungen mit denen viele der Optimierungen automatisch angewendet werden können. Dennoch gibt es bisher keine perfekte „One-Click“-Lösung. Der Wirkungsgrad dieser Lösungen variiert stark von Projekt zu Projekt. So reicht es beispielsweise bei einer weitgehendsten statischen Webseite aus, die Bilder im Deploymentprozess zu optimieren, während bei einer Magazin-Webseite die Bildoptimierung vor jedem Veröffentlichen eines Artikels durchgeführt werden sollte. Ebenso wird bei manchen Anwendungen der HTML-Code der Seite dynamisch per JavaScript erzeugt. Automatische Tools haben hierbei kaum eine Möglichkeit Optimierungen am HTML-Code vorzunehmen. Manuelle Optimierungen bringen immer bessere Ergebnisse, da sie gezielt auf die speziellen Anforderungen der eigenen Anwendung angepasst werden können. Auch die meisten kommerziellen Lösungen beinhalten manuelle projektspezifische Analysen der bestmöglichen Performanceoptimierungen welche die Grundlage für die Konfiguration der automatischen Tools darstellen. Anschließend können die 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 anderen Browserhersteller neben Google nachziehen und eine SPDY-Unterstützung in ihre Browser integrieren, so könnte SPDY der neue Standard für den Transfer von Webseiten werden. Dabei würden einige der aktuell empfehlenswerten Optimierungen wie das Zusammenfassen von JavaScript- und CSS-Dateien sowie CSS-Sprites überflüssig werden. 29 https://github.com/donnerjack13589/node-spdy Jakob Schröter | Hochschule der Medien Stuttgart 15
  • 16. System Engineering und Management Automatisierung von Client-seitigen Performance-Optimierungen Literatur Belshe, 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.html Cutler, B. (März 2010). Von Blog of Metrix: Firefox & Page Load Speed: http://blog.mozilla.com/metrics/category/website-optimization/ abgerufen golem.de. (08. April 2011). Chrome nutzt SPDY statt HTTP. Abgerufen am 08. April 2011 von http://www.golem.de/1104/82657.html Google 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.html Google Inc. (kein Datum). Page Speed Family. Abgerufen am 10. Februar 2011 von http://code.google.com/intl/de-DE/speed/page-speed/docs/overview.html Nielsen, J. (Juni 2010). Von Website Response Times: http://www.useit.com/alertbox/response- times.html abgerufen Schröter, J. (18. Januar 2011). Client-side Performance Optimizations. Von http://slideshare.net/jakob.schroeter/Client-side-Performance-Optimizations abgerufen Schurman, 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 abgerufen Singhal, 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 abgerufen Souders, S. (2007). High performance web sites: essential knowledge for frontend engineers. (O'Reilly, Hrsg.) Souders, S. (Juli 2009). Von O'Reilly Radar: Velocity and the Bottom Line: http://radar.oreilly.com/2009/07/velocity-making-your-site-fast.html abgerufen Theurer, 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/ abgerufen Website 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. System Engineering und Management Automatisierung von Client-seitigen Performance-Optimierungen Yang, Z. (August 2009). Von Facebook: Every Millisecond Counts: http://www.facebook.com/note.php?note_id=122869103919 abgerufen Jakob Schröter | Hochschule der Medien Stuttgart 17