Automatisierung von Client-seitigen Web-Performance-Optimierungen

17
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.

description

 

Transcript of Automatisierung von Client-seitigen Web-Performance-Optimierungen

Page 1: Automatisierung von Client-seitigen Web-Performance-Optimierungen

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.

Page 2: Automatisierung von Client-seitigen Web-Performance-Optimierungen

System Engineering und Management Automatisierung von Client-seitigen Performance-Optimierungen

Jakob Schröter | Hochschule der Medien Stuttgart 2

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

Page 3: Automatisierung von Client-seitigen Web-Performance-Optimierungen

System Engineering und Management Automatisierung von Client-seitigen Performance-Optimierungen

Jakob Schröter | Hochschule der Medien Stuttgart 3

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).

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

Server Client

Page 4: Automatisierung von Client-seitigen Web-Performance-Optimierungen

System Engineering und Management Automatisierung von Client-seitigen Performance-Optimierungen

Jakob Schröter | Hochschule der Medien Stuttgart 4

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, …)

Page 5: Automatisierung von Client-seitigen Web-Performance-Optimierungen

System Engineering und Management Automatisierung von Client-seitigen Performance-Optimierungen

Jakob Schröter | Hochschule der Medien Stuttgart 5

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.

Page 6: Automatisierung von Client-seitigen Web-Performance-Optimierungen

System Engineering und Management Automatisierung von Client-seitigen Performance-Optimierungen

Jakob Schröter | Hochschule der Medien Stuttgart 6

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/

Page 7: Automatisierung von Client-seitigen Web-Performance-Optimierungen

System Engineering und Management Automatisierung von Client-seitigen Performance-Optimierungen

Jakob Schröter | Hochschule der Medien Stuttgart 7

Auch lässt sich die Verwendung von CSS-Sprites teilweise automatisieren. Das Tool

SmartSprites6 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

Page 8: Automatisierung von Client-seitigen Web-Performance-Optimierungen

System Engineering und Management Automatisierung von Client-seitigen Performance-Optimierungen

Jakob Schröter | Hochschule der Medien Stuttgart 8

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/

Page 9: Automatisierung von Client-seitigen Web-Performance-Optimierungen

System Engineering und Management Automatisierung von Client-seitigen Performance-Optimierungen

Jakob Schröter | Hochschule der Medien Stuttgart 9

Ä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.)

Page 10: Automatisierung von Client-seitigen Web-Performance-Optimierungen

System Engineering und Management Automatisierung von Client-seitigen Performance-Optimierungen

Jakob Schröter | Hochschule der Medien Stuttgart 10

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/

Page 11: Automatisierung von Client-seitigen Web-Performance-Optimierungen

System Engineering und Management Automatisierung von Client-seitigen Performance-Optimierungen

Jakob Schröter | Hochschule der Medien Stuttgart 11

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

Page 12: Automatisierung von Client-seitigen Web-Performance-Optimierungen

System Engineering und Management Automatisierung von Client-seitigen Performance-Optimierungen

Jakob Schröter | Hochschule der Medien Stuttgart 12

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/

Page 13: Automatisierung von Client-seitigen Web-Performance-Optimierungen

System Engineering und Management Automatisierung von Client-seitigen Performance-Optimierungen

Jakob Schröter | Hochschule der Medien Stuttgart 13

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.

Page 14: Automatisierung von Client-seitigen Web-Performance-Optimierungen

System Engineering und Management Automatisierung von Client-seitigen Performance-Optimierungen

Jakob Schröter | Hochschule der Medien Stuttgart 14

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-Modul25, Python26, Java27, Ruby28 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

Page 15: Automatisierung von Client-seitigen Web-Performance-Optimierungen

System Engineering und Management Automatisierung von Client-seitigen Performance-Optimierungen

Jakob Schröter | Hochschule der Medien Stuttgart 15

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

Page 16: Automatisierung von Client-seitigen Web-Performance-Optimierungen

System Engineering und Management Automatisierung von Client-seitigen Performance-Optimierungen

Jakob Schröter | Hochschule der Medien Stuttgart 16

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/

Page 17: Automatisierung von Client-seitigen Web-Performance-Optimierungen

System Engineering und Management Automatisierung von Client-seitigen Performance-Optimierungen

Jakob Schröter | Hochschule der Medien Stuttgart 17

Yang, Z. (August 2009). Von Facebook: Every Millisecond Counts:

http://www.facebook.com/note.php?note_id=122869103919 abgerufen