Frontend-Performance @ IPC

Frank Kleine, Nico Steiner

1&1 Internet AG

Frontend-Performance mit PHP


2

Vorstellung

Frank KleineHead of Web Infrastructure

Nico SteinerExperte für Frontend T&A


3

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


4

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


5


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


6

HTTP Protokoll

Client Server

Request

Response

URL Header

Header BodySC

GET /xml/shop/home.htmlHost: kunden.1und1.deUser-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 OKDate: Thu, 27 May 2010 07:40:50 GMTServer: Apache[…]Content-Type: text/html;charset=UTF-8

http://livehttpheaders.mozdev.org/

LiveHTTPHeaders


7

Die Testumgebung


8

Die Testumgebung

http://www.webpagetest.org/




9

Die Testumgebung





10

Die Testumgebung





11

Ohne Optimierung

Load Time Start Render

Requests Size

7,5 s 5,9 s 47 695 KB


12

Ohne Optimierung


13

Ohne Optimierung

HTML


14

Ohne Optimierung

HTML12%


15

Ohne Optimierung

CSS (9)


16

Ohne Optimierung

JS (7)


17

Ohne Optimierung

Grafiken (30)

Weniger HTTP-Request


19


• Erzwingt Kompromiss zwischen Performance und Produktdesign

• Kombinierte Scripte + Styles• CSS-Sprites• Inline-Images


20


• Zeiten verkürzen sich deutlich durch weniger HTTP-Overhead

Bandbreite des Endanwenders

Internet Service Provider

Nähe zu Peering-Punkten

Distanz

+

+

+


21

Live-Umgebung

Kombiniertes CSS / JavaScript

• Software-Design bedingt Modularisierung– 30 Stylesheets– 15 Scripte

• HTTP-Overhead (Round-trip time)

Build-Prozess


22

JS/CSS-Dateien kombinieren

• Build-Prozess?• Erster Ansatz: Phing• Mit Bordmitteln möglich


23



• Aber: Unpraktisch– Jede JS/CSS-Änderung erfordert einen Build


24



• Aber: Unpraktisch– Jede JS/CSS-Änderung erfordert einen Build


25

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/


26

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


27


CSS (1)


28


JS (1)


29



Requests Size

7,5 s 5,9 s 47 695 KB

5,3 s (-30%) 3,7 s (-37%) 33 (-14) 631 KB


30

Weniger HTTP-Requests

http://dsl.1und1.de

http://dsl.1und1.de/


31


„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

36Requests!



http://www.peterbe.com/plog/button-tag-in-IE


32


buttons.png 24,7 KB

part-x.png 36,9 KB

+49%


33


http://login.1und1.de

http://login.1und1.de/


34

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/

NichtimIE7


35

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">';

NichtimIE7

Komprimierung


37

Komprimierung

• Kleinere Response = weniger Datenpakete = reduzierte Übertragungszeit

• Komprimierung z.B. mit gzip• Content Negotiation

GET /xml/shop/home.htmlHost: kunden.1und1.de[…]Accept-Encoding: gzip,deflate[…]

HTTP/1.1 200 OK[…]Vary: Accept-EncodingContent-Encoding: gzipKeep-Alive: timeout=15, max=97Connection: Keep-AliveTransfer-Encoding: chunked

http://livehttpheaders.mozdev.org/

LiveHTTPHeaders


38

Komprimierung

• Empfiehlt sich für jede Text-Response– HTML / CSS / JavaScript– AJAX (XML / JSON)

• Zusätzliche CPU-Zeit wird durch geringere Dateigröße aufgewogen


39

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.


40

Komprimiertes CSS / JavaScript

CSS


41


JS


42



Requests Size

7,5 s 5,9 s 47 695 KB

5,3 s (-30%) 3,7 s (-37%) 33 (-14) 631 KB

3,2 s (-57%) 2,1 s (-64%) 33 (-14) 254 KB (-63%)

Stylesheets an den Anfang


44


• Progressive Rendering– Browser stellt jegliche Inhalte sofort dar

wenn diese verfügbar sind– Schnelles visuelles Feedback fördert

User Experience


45


• Browser beginnt das Rendering erst nach dem Laden der Stylesheets

Start Render

CSS


46


CSS im HeadStart Rendering 4,7 s

CSS im ContentStart Rendering 6,0 s


47


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

JavaScript an das Ende


49

JavaScript im Head des DokumentsStart Render


50

JavaScript am Ende des DokumentsStart Render


51

JavaScript am Ende des Dokuments


Requests Size

7,5 s 5,9 s 47 695 KB

5,3 s (-30%) 3,7 s (-37%) 33 (-14) 631 KB (-9%)

3,2 s (-57%) 2,1 s (-64%) 33 (-14) 254 KB (-63%)

2,4 s (-68%) 1,1 s (-81%) 33 (-14) 254 KB (-63%)

Expires-Header


53

Ohne Expires-Header


54

Mit Expires-Header

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


55

Mit Expires-Header

Facebook: Hash-Tags

Amazon: Versionierung

Content Delivery Network


56

Resultat

Mit OptimierungStart Rendering 2,5 s

Ohne OptimierungStart Rendering 9,0 s


57

Resultat

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


58

Resultat

http://www.flickr.com/photos/ppz/47473793/

• 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


59

Nutzen

Quelle: Fronteers "fast by default" 2009

Google• +0,4 Sekunden• 0,6% weniger Suchanfragen

Yahoo!• +0,4 Sekunden• 5-9% weniger Traffic

Bing• +2 Sekunden• 4,3% weniger Umsatz


60

Nutzen


Shopzilla• -5 Sekunden • 12% mehr Umsatz• 50% weniger Hardware

Netflix• 43% weniger Bandbreite


61

Nutzen


Shopzilla• -5 Sekunden • 12% mehr Umsatz• 50% weniger Hardware

Netflix• 43% weniger Bandbreite

Entwicklertools


63

Entwicklertools

• Wordpress minify Plugin• http://wordpress.org/extend/

plugins/wp-minify/• BSD-Lizenz


64

Entwicklertools

• Symfony minify Plugin• http://www.symfony-project.org/

plugins/sfMinifyPlugin• BSD-Lizenz


65

Entwicklertools

• TYPO3-Plugin• http://typo3.org/extensions/

repository/view/minify/current/


66

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/


67

Entwicklertools

• Firefox-Extensions (Add-ons)• https://addons.mozilla.org/de/firefox/

• Firebug• YSlow• Live HTTP Headers• Firefox Throttle

https://addons.mozilla.org/de/firefox/


68

Entwicklertools

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


69

Entwicklertools

• Firebug (Netzwerk Monitoring)


70

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)


71

https://addons.mozilla.org/en-US/firefox/addon/3829/

GET /en-US/firefox/addon/3829/ HTTP/1.1Host: addons.mozilla.orgUser-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.8Accept-Language: de-de,de;q=0.8,en-us;q=0.5,en;q=0.3Accept-Encoding: gzip,deflateAccept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7Keep-Alive: 115Connection: keep-aliveReferer: http://www.google.com/search?q=firefox+extensionsCookie: dloadday=212.227.66.8.1248158487731077; Cache-Control: max-age=0

HTTP/1.1 200 OK

Entwicklertools

• Live HTTP Headers– Zeigt HTTP Header aller Komponenten

einer Seite in Echtzeit– Manipulation von Request-Daten (Beta)


72

Entwicklertools

• Firefox Throttle– Begrenzt Download/Upload

Geschwindigkeit– Simulation von Zugängen mit geringer

Bandbreite

Anmerkungen? Fragen?

Weiterführende Informationen


75


Yahoo: Best Practices for Speeding Up Your Web Sitehttp://developer.yahoo.com/performance/rules.html

Google: Web Performance Best Practiceshttp://code.google.com/speed/page-speed/docs/rules_intro.html

YouTube: „site performance“http://www.youtube.com/results?search_query=site+performance

http://developer.yahoo.com/performance/rules.html

http://code.google.com/speed/page-speed/docs/rules_intro.html

http://www.youtube.com/results?search_query=site+performance


76


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

http://oreilly.com/catalog/9780596529307

http://icons.mysitemyway.com

Vielen Dank!

Frank Kleinehttp://frankkleine.de/

http://www.stubbles.org/http://twitter.com/mikey179

Nico Steinerhttp://www.nicosteiner.de/http://www.slideshare.net/n.steinerhttp://twitter.com/sensationalseo

http://frankkleine.de/

http://www.stubbles.org/

Frontend-Performance @ IPC

Technology

Transcript of Frontend-Performance @ IPC