Frontend-Performance @ IPC

Frank Kleine, Nico Steiner 1&1 Internet AG Frontend-Performance mit PHP

Vorstellung
Frank Kleine
Head of Web Infrastructure
Nico Steiner
Experte für Frontend T&A

Vorstellung
1&1 Shopsysteme
Ca. 30 verschiedene Shops mit zahlreichen Tarifen
Mehrere Millionen Requests täglich
Mehrere Terabyte Traffic
Aufgeteilt auf verschiedene Cluster
Anbindung: 210 Gbit/s

Vorstellung
Web Performance und Open Source Evangelist
Google (früher Yahoo)
Erschaffer von YSlow
Stanford-Dozent
Sprecher auf internationalen Konferenzen
2007 2009 Steve Souders YSlow Firebug Extension

Frontend-Performance mit PHP
HTTP-Protokoll
Die Testumgebung
Weniger HTTP Requests
Kombinierung / Komprimierung
Stylesheets an den Anfang
Scripte an das Ende
Expires-Header
Entwicklertools

HTTP Protokoll Client Server Request Response URL Header Header Body SC GET /xml/shop/home.html Host: kunden.1und1.de User-Agent: Mozilla/5.0 (Windows; U; […]) Gecko/20100401 Firefox/3.6.3 ( .NET CLR 3.5.30729) Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 […] HTTP/1.1 200 OK Date: Thu, 27 May 2010 07:40:50 GMT Server: Apache […] Content-Type: text/html;charset=UTF-8 http://livehttpheaders.mozdev.org/ Liv e HTTP Headers

Die Testumgebung

Die Testumgebung http://www.webpagetest.org /

Ohne Optimierung 695 KB 47 5,9 s 7,5 s Size Requests Start Render Load Time

Ohne Optimierung

Ohne Optimierung HTML

Ohne Optimierung HTML 12%

Ohne Optimierung CSS (9)

Ohne Optimierung JS (7)

Ohne Optimierung Grafiken (30)

Weniger HTTP-Request

Erzwingt Kompromiss zwischen Performance und Produktdesign
Kombinierte Scripte + Styles
CSS-Sprites
Inline-Images

Zeiten verkürzen sich deutlich durch weniger HTTP-Overhead
Bandbreite des Endanwenders Internet Service Provider Nähe zu Peering-Punkten Distanz + + +

Kombiniertes CSS / JavaScript
Software-Design bedingt Modularisierung
30 Stylesheets
15 Scripte
HTTP-Overhead (Round-trip time)
Live-Umgebung Build-Prozess

JS/CSS-Dateien kombinieren
Build-Prozess?
Erster Ansatz: Phing
Mit Bordmitteln möglich

JS/CSS-Dateien kombinieren
Build-Prozess?
Erster Ansatz: Phing
Mit Bordmitteln möglich
Aber: Unpraktisch
Jede JS/CSS-Änderung erfordert einen Build

JS/CSS-Dateien kombinieren, Versuch 2
Kombinieren on the fly
minify
Kombiniert Ressourcen on Demand
Erlaubt Gruppierung von Ressourcen
Ab PHP 5.2, BSD-lizensiert
http://code.google.com/p/minify /

JS/CSS-Dateien kombinieren, Versuch 2
Kombinieren on the fly
minify
Kombiniert Ressourcen on Demand
Erlaubt Gruppierung von Ressourcen
Ab PHP 5.2, BSD-lizensiert
http://code.google.com/p/minify /
PHP zum Ausliefern von JS/CSS?
Schnell genug für www.1und1.de, also auch für andere

Kombiniertes CSS / JavaScript CSS (1)

Kombiniertes CSS / JavaScript JS (1)

Kombiniertes CSS / JavaScript 631 KB 33 (-14) 3,7 s (-37%) 5,3 s (-30%) 695 KB 47 5,9 s 7,5 s Size Requests Start Render Load Time

Weniger HTTP-Requests http://dsl.1und1.de

Weniger HTTP-Requests „ Sliding Doors of CSS“ by Douglas Bowman (2003) http://www.alistapart.com/articles/slidingdoors / <a class=„btn-yellow-medium“> <span>prüfen</span> </a> <button class=„btn-yellow-medium“> <span>auswählen</span> </button> Probleme mit IE6: http://www.peterbe.com/plog/button-tag-in-IE 36 Requests!

Weniger HTTP-Requests buttons.png 24,7 KB part-x.png 36,9 KB +49%

Weniger HTTP-Requests http://login.1und1.de

Inline Images
data:[<mediatype>][;base64],<data>
<img src="data:image/gif;base64, R0lGODlhEAAQANUAAPr7/PL09mhoaA4ODk1NTVxcXAoKCvf4+iwsLDg4ODs7O/T2+IaGhnBwcPX3+ZSUlJycnOPl5ri4uMTExKysrPj5+vj6+0RERPr6+87P0V9fXwYGBlFRUby+v05OT3JycvL19/b4+RsbG8vLyxgYGCoqKgICAtbY2iEhIbq6usDCw6+wsN7e3nt7e9fX16CfoJiYmLS0tYiIiJCQkIODgxcXF1dXVzc3N7u9vnV1dYmJieXl5fv8/GZmZgAAAP///yH5BAAAAAAALAAAAAAQABAAAAajQJ5wSCwKJbqkcikZAmijUW9Knc5igGxr8qp5WTCBqzaRrQCYT+pxa7vbj9QHYxFQGLa8Ps+gCCwVBRA5hIWGEAUVBxwNIj6PkI8iDRwHIRcaPj+bnJs+GhchDgkEmjunqD8+BAkOCwgKmp2cPgoICyAoJaaop6olKCABNSSys6okNQEBAwbGsz4GAwEnHhsmkZEmGx4nERkqHTjj5OMdKhkRQQA7" width="16" height="16" alt="embedded disc icon">
Online: http://www.opinionatedgeek.com/dotnet/tools/base64encode/
Nicht im IE7

Inline Images
data:[<mediatype>][;base64],<data>
<img src="data:image/gif;base64, R0lGODlhEAAQANUAAPr7/PL09mhoaA4ODk1NTVxcXAoKCvf4+iwsLDg4ODs7O/T2+IaGhnBwcPX3+ZSUlJycnOPl5ri4uMTExKysrPj5+vj6+0RERPr6+87P0V9fXwYGBlFRUby+v05OT3JycvL19/b4+RsbG8vLyxgYGCoqKgICAtbY2iEhIbq6usDCw6+wsN7e3nt7e9fX16CfoJiYmLS0tYiIiJCQkIODgxcXF1dXVzc3N7u9vnV1dYmJieXl5fv8/GZmZgAAAP///yH5BAAAAAAALAAAAAAQABAAAAajQJ5wSCwKJbqkcikZAmijUW9Knc5igGxr8qp5WTCBqzaRrQCYT+pxa7vbj9QHYxFQGLa8Ps+gCCwVBRA5hIWGEAUVBxwNIj6PkI8iDRwHIRcaPj+bnJs+GhchDgkEmjunqD8+BAkOCwgKmp2cPgoICyAoJaaop6olKCABNSSys6okNQEBAwbGsz4GAwEnHhsmkZEmGx4nERkqHTjj5OMdKhkRQQA7" width="16" height="16" alt="embedded disc icon">
Online: http://www.opinionatedgeek.com/dotnet/tools/base64encode/
Oder mit PHP 
echo '<img src="data:image/gif;base64,' . base64_encode(file_get_contents($file)) . '" width="16" height="16" alt="embedded disc icon">';
Nicht im IE7

Komprimierung

Komprimierung
Kleinere Response = weniger Datenpakete = reduzierte Übertragungszeit
Komprimierung z.B. mit gzip
Content Negotiation
GET /xml/shop/home.html Host: kunden.1und1.de […] Accept-Encoding: gzip,deflate […] HTTP/1.1 200 OK […] Vary: Accept-Encoding Content-Encoding: gzip Keep-Alive: timeout=15, max=97 Connection: Keep-Alive Transfer-Encoding: chunked http://livehttpheaders.mozdev.org/ Liv e HTTP Headers

Komprimierung
Empfiehlt sich für jede Text-Response
HTML / CSS / JavaScript
AJAX (XML / JSON)
Zusätzliche CPU-Zeit wird durch geringere Dateigröße aufgewogen

Komprimierung
minify liefert Content per default mit gzip oder deflate aus
Natürlich nur mit Content Negotation
HTML kann man auch komprimieren
CMS oder Framework
Nativ in PHP: ob_start('gz_handler');
Benötigt ext/zlib
Apache: mod_gzip, mod_deflate
http://phpperformance.de/mod_gzip-mod_deflate-und-sonstige-komprimierungsverfahren-fuer-web-inhalte/
Last? Applikationsabhängig.

Komprimiertes CSS / JavaScript CSS

Komprimiertes CSS / JavaScript JS

Komprimiertes CSS / JavaScript 254 KB (-63%) 33 (-14) 2,1 s (-64%) 3,2 s (-57%) 631 KB 33 (-14) 3,7 s (-37%) 5,3 s (-30%) 695 KB 47 5,9 s 7,5 s Size Requests Start Render Load Time

Progressive Rendering
Browser stellt jegliche Inhalte sofort dar wenn diese verfügbar sind
Schnelles visuelles Feedback fördert User Experience

Browser beginnt das Rendering erst nach dem Laden der Stylesheets
Start Render CSS

Stylesheets an den Anfang CSS im Head Start Rendering 4,7 s CSS im Content Start Rendering 6,0 s

Stylesheets an den Anfang http://www.webpagetest.org/video/view.php?id=100528_ee3c12b0eae75703456caa0dd5ccf098de3a5a48

JavaScript an das Ende

JavaScript im Head des Dokuments Start Render

JavaScript am Ende des Dokuments Start Render

JavaScript am Ende des Dokuments 254 KB (-63%) 33 (-14) 1,1 s (-81%) 2,4 s (-68%) 254 KB (-63%) 33 (-14) 2,1 s (-64%) 3,2 s (-57%) 631 KB (-9%) 33 (-14) 3,7 s (-37%) 5,3 s (-30%) 695 KB 47 5,9 s 7,5 s Size Requests Start Render Load Time

Expires-Header

Ohne Expires-Header

Mit Expires-Header
„Diese Ressource kann für die nächsten 15 Jahre immer aus dem Cache bezogen werden“

Mit Expires-Header Facebook: Hash-Tags Amazon: Versionierung C ontent D elivery N etwork

Resultat Mit Optimierung Start Rendering 2,5 s Ohne Optimierung Start Rendering 9,0 s

Resultat http://www.webpagetest.org/video/view.php?id=100528_91ecef9fae78adb38f3a100d41ad97e05809d18a

Resultat
Dokument wird 5,1 Sekunden schneller geladen
Browser beginnt 4,8 Sekunden früher zu rendern
Es werden 14 Requests gespart
Es werden 441 KB weniger Daten übertragen
http://www.flickr.com/photos/ppz/47473793/

Nutzen
Google
+0,4 Sekunden
0,6% weniger Suchanfragen
Yahoo!
+0,4 Sekunden
5-9% weniger Traffic
Bing
+2 Sekunden
4,3% weniger Umsatz
Quelle: Fronteers "fast by default" 2009

Nutzen
Shopzilla
-5 Sekunden
12% mehr Umsatz
50% weniger Hardware
Netflix
43% weniger Bandbreite
Quelle: Fronteers "fast by default" 2009

Entwicklertools

Entwicklertools
Wordpress minify Plugin
http://wordpress.org/extend/plugins/wp-minify/
BSD-Lizenz

Entwicklertools
Symfony minify Plugin
http://www.symfony-project.org/plugins/sfMinifyPlugin
BSD-Lizenz

Entwicklertools
TYPO3-Plugin
http://typo3.org/extensions/repository/view/minify/current/

Entwicklertools
CSS Sprite Generator
ZIP mit mehreren Bildern hochladen
Generiert Sprite und passendes CSS
Online nutzen oder lokal installieren
PHP 5.2 + GD, BSD-Lizenz
http://spritegen.website-performance.org /

Entwicklertools
Firefox-Extensions (Add-ons)
https://addons.mozilla.org/de/firefox/
Firebug
YSlow
Live HTTP Headers
Firefox Throttle

Entwicklertools
Firebug (Netzwerk Monitoring)
Fortschrittsanalyse
Filter nach Ressourcen-Typ
Cache-Analyse
HTTP Headers
XMLHttpRequest Monitoring

Entwicklertools
Firebug (Netzwerk Monitoring)

Entwicklertools
YSlow
Entwickelt von Yahoo!
Bewertet eine Webseite unter Berücksichtigung der „Rules for high performance websites“
Zeigt performancerelevante Komponenten einer Seite
Statistiken / Tools
Alternative: Page Speed (Google)
Alternative: Speed Tracer (Chrome)

Entwicklertools
Live HTTP Headers
Zeigt HTTP Header aller Komponenten einer Seite in Echtzeit
Manipulation von Request-Daten (Beta)
https://addons.mozilla.org/en-US/firefox/addon/3829/ GET /en-US/firefox/addon/3829/ HTTP/1.1 Host: addons.mozilla.org User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; de; rv:1.9.2.3) Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 Accept-Language: de-de,de;q=0.8,en-us;q=0.5,en;q=0.3 Accept-Encoding: gzip,deflate Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 Keep-Alive: 115 Connection: keep-alive Referer: http://www.google.com/search?q=firefox+extensions Cookie: dloadday=212.227.66.8.1248158487731077; Cache-Control: max-age=0 HTTP/1.1 200 OK

Entwicklertools
Firefox Throttle
Begrenzt Download/Upload Geschwindigkeit
Simulation von Zugängen mit geringer Bandbreite

Anmerkungen? Fragen?

Weiterführende Informationen

Yahoo: Best Practices for Speeding Up Your Web Site
http://developer.yahoo.com/performance/rules.html
Google: Web Performance Best Practices
http://code.google.com/speed/page-speed/docs/rules_intro.html
YouTube: „site performance“
http://www.youtube.com/results?search_query=site+performance

Steve Souders: High Performance Web Sites (O‘Reilly 2007)
http://oreilly.com/catalog/9780596529307
Steve Souders: Even Faster Web Sites (O‘Reilly 2009)
http://oreilly.com/catalog/9780596522315

Vielen Dank! http://icons.mysitemyway.com Frank Kleine http://frankkleine.de/ http://www.stubbles.org/ http://twitter.com/mikey179 Nico Steiner http://www.nicosteiner.de/ http://www.slideshare.net/n.steiner http://twitter.com/sensationalseo

http://blog.schst.net	723
http://www.nicosteiner.de	40
http://schstblog.tauntaun.de	29
http://www.slideshare.net	26
http://translate.googleusercontent.com	2
http://webcache.googleusercontent.com	1

Frontend-Performance @ IPC

by Nico Steiner on Jun 02, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

6 Embeds 821

Statistics

Frontend-Performance @ IPC — Presentation Transcript