Frontend-Performance @ IPC
-
Upload
nico-steiner -
Category
Technology
-
view
175 -
download
5
description
Transcript of Frontend-Performance @ IPC
![Page 1: Frontend-Performance @ IPC](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c7a5ac4a7959c0408b466a/html5/thumbnails/1.jpg)
Frank Kleine, Nico Steiner
1&1 Internet AG
Frontend-Performance mit PHP
![Page 2: Frontend-Performance @ IPC](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c7a5ac4a7959c0408b466a/html5/thumbnails/2.jpg)
Frontend-Performance mit PHP
2
Vorstellung
Frank KleineHead of Web Infrastructure
Nico SteinerExperte für Frontend T&A
![Page 3: Frontend-Performance @ IPC](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c7a5ac4a7959c0408b466a/html5/thumbnails/3.jpg)
Frontend-Performance mit PHP
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
![Page 4: Frontend-Performance @ IPC](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c7a5ac4a7959c0408b466a/html5/thumbnails/4.jpg)
Frontend-Performance mit PHP
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
![Page 5: Frontend-Performance @ IPC](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c7a5ac4a7959c0408b466a/html5/thumbnails/5.jpg)
Frontend-Performance mit PHP
5
Frontend-Performance mit PHP
• HTTP-Protokoll• Die Testumgebung• Weniger HTTP Requests• Kombinierung / Komprimierung• Stylesheets an den Anfang• Scripte an das Ende• Expires-Header• Entwicklertools
![Page 6: Frontend-Performance @ IPC](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c7a5ac4a7959c0408b466a/html5/thumbnails/6.jpg)
Frontend-Performance mit PHP
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
![Page 7: Frontend-Performance @ IPC](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c7a5ac4a7959c0408b466a/html5/thumbnails/7.jpg)
Frontend-Performance mit PHP
7
Die Testumgebung
![Page 8: Frontend-Performance @ IPC](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c7a5ac4a7959c0408b466a/html5/thumbnails/8.jpg)
Frontend-Performance mit PHP
8
Die Testumgebung
http://www.webpagetest.org/
![Page 9: Frontend-Performance @ IPC](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c7a5ac4a7959c0408b466a/html5/thumbnails/9.jpg)
Frontend-Performance mit PHP
9
Die Testumgebung
http://www.webpagetest.org/
![Page 10: Frontend-Performance @ IPC](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c7a5ac4a7959c0408b466a/html5/thumbnails/10.jpg)
Frontend-Performance mit PHP
10
Die Testumgebung
http://www.webpagetest.org/
![Page 11: Frontend-Performance @ IPC](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c7a5ac4a7959c0408b466a/html5/thumbnails/11.jpg)
Frontend-Performance mit PHP
11
Ohne Optimierung
Load Time Start Render
Requests Size
7,5 s 5,9 s 47 695 KB
![Page 12: Frontend-Performance @ IPC](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c7a5ac4a7959c0408b466a/html5/thumbnails/12.jpg)
Frontend-Performance mit PHP
12
Ohne Optimierung
![Page 13: Frontend-Performance @ IPC](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c7a5ac4a7959c0408b466a/html5/thumbnails/13.jpg)
Frontend-Performance mit PHP
13
Ohne Optimierung
HTML
![Page 14: Frontend-Performance @ IPC](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c7a5ac4a7959c0408b466a/html5/thumbnails/14.jpg)
Frontend-Performance mit PHP
14
Ohne Optimierung
HTML12%
![Page 15: Frontend-Performance @ IPC](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c7a5ac4a7959c0408b466a/html5/thumbnails/15.jpg)
Frontend-Performance mit PHP
15
Ohne Optimierung
CSS (9)
![Page 16: Frontend-Performance @ IPC](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c7a5ac4a7959c0408b466a/html5/thumbnails/16.jpg)
Frontend-Performance mit PHP
16
Ohne Optimierung
JS (7)
![Page 17: Frontend-Performance @ IPC](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c7a5ac4a7959c0408b466a/html5/thumbnails/17.jpg)
Frontend-Performance mit PHP
17
Ohne Optimierung
Grafiken (30)
![Page 18: Frontend-Performance @ IPC](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c7a5ac4a7959c0408b466a/html5/thumbnails/18.jpg)
Weniger HTTP-Request
![Page 19: Frontend-Performance @ IPC](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c7a5ac4a7959c0408b466a/html5/thumbnails/19.jpg)
Frontend-Performance mit PHP
19
Weniger HTTP-Request
• Erzwingt Kompromiss zwischen Performance und Produktdesign
• Kombinierte Scripte + Styles• CSS-Sprites• Inline-Images
![Page 20: Frontend-Performance @ IPC](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c7a5ac4a7959c0408b466a/html5/thumbnails/20.jpg)
Frontend-Performance mit PHP
20
Weniger HTTP-Request
• Zeiten verkürzen sich deutlich durch weniger HTTP-Overhead
Bandbreite des Endanwenders
Internet Service Provider
Nähe zu Peering-Punkten
Distanz
+
+
+
![Page 21: Frontend-Performance @ IPC](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c7a5ac4a7959c0408b466a/html5/thumbnails/21.jpg)
Frontend-Performance mit PHP
21
Live-Umgebung
Kombiniertes CSS / JavaScript
• Software-Design bedingt Modularisierung– 30 Stylesheets– 15 Scripte
• HTTP-Overhead (Round-trip time)
Build-Prozess
![Page 22: Frontend-Performance @ IPC](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c7a5ac4a7959c0408b466a/html5/thumbnails/22.jpg)
Frontend-Performance mit PHP
22
JS/CSS-Dateien kombinieren
• Build-Prozess?• Erster Ansatz: Phing• Mit Bordmitteln möglich
![Page 23: Frontend-Performance @ IPC](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c7a5ac4a7959c0408b466a/html5/thumbnails/23.jpg)
Frontend-Performance mit PHP
23
JS/CSS-Dateien kombinieren
• Build-Prozess?• Erster Ansatz: Phing• Mit Bordmitteln möglich
• Aber: Unpraktisch– Jede JS/CSS-Änderung erfordert einen Build
![Page 24: Frontend-Performance @ IPC](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c7a5ac4a7959c0408b466a/html5/thumbnails/24.jpg)
Frontend-Performance mit PHP
24
JS/CSS-Dateien kombinieren
• Build-Prozess?• Erster Ansatz: Phing• Mit Bordmitteln möglich
• Aber: Unpraktisch– Jede JS/CSS-Änderung erfordert einen Build
![Page 25: Frontend-Performance @ IPC](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c7a5ac4a7959c0408b466a/html5/thumbnails/25.jpg)
Frontend-Performance mit PHP
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/
![Page 26: Frontend-Performance @ IPC](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c7a5ac4a7959c0408b466a/html5/thumbnails/26.jpg)
Frontend-Performance mit PHP
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
![Page 27: Frontend-Performance @ IPC](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c7a5ac4a7959c0408b466a/html5/thumbnails/27.jpg)
Frontend-Performance mit PHP
27
Kombiniertes CSS / JavaScript
CSS (1)
![Page 28: Frontend-Performance @ IPC](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c7a5ac4a7959c0408b466a/html5/thumbnails/28.jpg)
Frontend-Performance mit PHP
28
Kombiniertes CSS / JavaScript
JS (1)
![Page 29: Frontend-Performance @ IPC](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c7a5ac4a7959c0408b466a/html5/thumbnails/29.jpg)
Frontend-Performance mit PHP
29
Kombiniertes CSS / JavaScript
Load Time Start Render
Requests Size
7,5 s 5,9 s 47 695 KB
5,3 s (-30%) 3,7 s (-37%) 33 (-14) 631 KB
![Page 31: Frontend-Performance @ IPC](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c7a5ac4a7959c0408b466a/html5/thumbnails/31.jpg)
Frontend-Performance mit PHP
31
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
36Requests!
![Page 32: Frontend-Performance @ IPC](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c7a5ac4a7959c0408b466a/html5/thumbnails/32.jpg)
Frontend-Performance mit PHP
32
Weniger HTTP-Requests
buttons.png 24,7 KB
part-x.png 36,9 KB
+49%
![Page 34: Frontend-Performance @ IPC](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c7a5ac4a7959c0408b466a/html5/thumbnails/34.jpg)
Frontend-Performance mit PHP
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
![Page 35: Frontend-Performance @ IPC](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c7a5ac4a7959c0408b466a/html5/thumbnails/35.jpg)
Frontend-Performance mit PHP
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
![Page 36: Frontend-Performance @ IPC](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c7a5ac4a7959c0408b466a/html5/thumbnails/36.jpg)
Komprimierung
![Page 37: Frontend-Performance @ IPC](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c7a5ac4a7959c0408b466a/html5/thumbnails/37.jpg)
Frontend-Performance mit PHP
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
![Page 38: Frontend-Performance @ IPC](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c7a5ac4a7959c0408b466a/html5/thumbnails/38.jpg)
Frontend-Performance mit PHP
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
![Page 39: Frontend-Performance @ IPC](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c7a5ac4a7959c0408b466a/html5/thumbnails/39.jpg)
Frontend-Performance mit PHP
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.
![Page 40: Frontend-Performance @ IPC](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c7a5ac4a7959c0408b466a/html5/thumbnails/40.jpg)
Frontend-Performance mit PHP
40
Komprimiertes CSS / JavaScript
CSS
![Page 41: Frontend-Performance @ IPC](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c7a5ac4a7959c0408b466a/html5/thumbnails/41.jpg)
Frontend-Performance mit PHP
41
Komprimiertes CSS / JavaScript
JS
![Page 42: Frontend-Performance @ IPC](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c7a5ac4a7959c0408b466a/html5/thumbnails/42.jpg)
Frontend-Performance mit PHP
42
Komprimiertes CSS / JavaScript
Load Time Start Render
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%)
![Page 43: Frontend-Performance @ IPC](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c7a5ac4a7959c0408b466a/html5/thumbnails/43.jpg)
Stylesheets an den Anfang
![Page 44: Frontend-Performance @ IPC](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c7a5ac4a7959c0408b466a/html5/thumbnails/44.jpg)
Frontend-Performance mit PHP
44
Stylesheets an den Anfang
• Progressive Rendering– Browser stellt jegliche Inhalte sofort dar
wenn diese verfügbar sind– Schnelles visuelles Feedback fördert
User Experience
![Page 45: Frontend-Performance @ IPC](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c7a5ac4a7959c0408b466a/html5/thumbnails/45.jpg)
Frontend-Performance mit PHP
45
Stylesheets an den Anfang
• Browser beginnt das Rendering erst nach dem Laden der Stylesheets
Start Render
CSS
![Page 46: Frontend-Performance @ IPC](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c7a5ac4a7959c0408b466a/html5/thumbnails/46.jpg)
Frontend-Performance mit PHP
46
Stylesheets an den Anfang
CSS im HeadStart Rendering 4,7 s
CSS im ContentStart Rendering 6,0 s
![Page 47: Frontend-Performance @ IPC](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c7a5ac4a7959c0408b466a/html5/thumbnails/47.jpg)
Frontend-Performance mit PHP
47
Stylesheets an den Anfang
http://www.webpagetest.org/video/view.php?id=100528_ee3c12b0eae75703456caa0dd5ccf098de3a5a48
![Page 48: Frontend-Performance @ IPC](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c7a5ac4a7959c0408b466a/html5/thumbnails/48.jpg)
JavaScript an das Ende
![Page 49: Frontend-Performance @ IPC](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c7a5ac4a7959c0408b466a/html5/thumbnails/49.jpg)
Frontend-Performance mit PHP
49
JavaScript im Head des DokumentsStart Render
![Page 50: Frontend-Performance @ IPC](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c7a5ac4a7959c0408b466a/html5/thumbnails/50.jpg)
Frontend-Performance mit PHP
50
JavaScript am Ende des DokumentsStart Render
![Page 51: Frontend-Performance @ IPC](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c7a5ac4a7959c0408b466a/html5/thumbnails/51.jpg)
Frontend-Performance mit PHP
51
JavaScript am Ende des Dokuments
Load Time Start Render
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%)
![Page 52: Frontend-Performance @ IPC](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c7a5ac4a7959c0408b466a/html5/thumbnails/52.jpg)
Expires-Header
![Page 53: Frontend-Performance @ IPC](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c7a5ac4a7959c0408b466a/html5/thumbnails/53.jpg)
Frontend-Performance mit PHP
53
Ohne Expires-Header
![Page 54: Frontend-Performance @ IPC](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c7a5ac4a7959c0408b466a/html5/thumbnails/54.jpg)
Frontend-Performance mit PHP
54
Mit Expires-Header
• „Diese Ressource kann für die nächsten 15 Jahre immer aus dem Cache bezogen werden“
![Page 55: Frontend-Performance @ IPC](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c7a5ac4a7959c0408b466a/html5/thumbnails/55.jpg)
Frontend-Performance mit PHP
55
Mit Expires-Header
Facebook: Hash-Tags
Amazon: Versionierung
Content Delivery Network
![Page 56: Frontend-Performance @ IPC](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c7a5ac4a7959c0408b466a/html5/thumbnails/56.jpg)
Frontend-Performance mit PHP
56
Resultat
Mit OptimierungStart Rendering 2,5 s
Ohne OptimierungStart Rendering 9,0 s
![Page 57: Frontend-Performance @ IPC](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c7a5ac4a7959c0408b466a/html5/thumbnails/57.jpg)
Frontend-Performance mit PHP
57
Resultat
http://www.webpagetest.org/video/view.php?id=100528_91ecef9fae78adb38f3a100d41ad97e05809d18a
![Page 58: Frontend-Performance @ IPC](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c7a5ac4a7959c0408b466a/html5/thumbnails/58.jpg)
Frontend-Performance mit PHP
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
![Page 59: Frontend-Performance @ IPC](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c7a5ac4a7959c0408b466a/html5/thumbnails/59.jpg)
Frontend-Performance mit PHP
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
![Page 60: Frontend-Performance @ IPC](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c7a5ac4a7959c0408b466a/html5/thumbnails/60.jpg)
Frontend-Performance mit PHP
60
Nutzen
Quelle: Fronteers "fast by default" 2009
Shopzilla• -5 Sekunden • 12% mehr Umsatz• 50% weniger Hardware
Netflix• 43% weniger Bandbreite
![Page 61: Frontend-Performance @ IPC](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c7a5ac4a7959c0408b466a/html5/thumbnails/61.jpg)
Frontend-Performance mit PHP
61
Nutzen
Quelle: Fronteers "fast by default" 2009
Shopzilla• -5 Sekunden • 12% mehr Umsatz• 50% weniger Hardware
Netflix• 43% weniger Bandbreite
![Page 62: Frontend-Performance @ IPC](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c7a5ac4a7959c0408b466a/html5/thumbnails/62.jpg)
Entwicklertools
![Page 63: Frontend-Performance @ IPC](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c7a5ac4a7959c0408b466a/html5/thumbnails/63.jpg)
Frontend-Performance mit PHP
63
Entwicklertools
• Wordpress minify Plugin• http://wordpress.org/extend/
plugins/wp-minify/• BSD-Lizenz
![Page 64: Frontend-Performance @ IPC](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c7a5ac4a7959c0408b466a/html5/thumbnails/64.jpg)
Frontend-Performance mit PHP
64
Entwicklertools
• Symfony minify Plugin• http://www.symfony-project.org/
plugins/sfMinifyPlugin• BSD-Lizenz
![Page 65: Frontend-Performance @ IPC](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c7a5ac4a7959c0408b466a/html5/thumbnails/65.jpg)
Frontend-Performance mit PHP
65
Entwicklertools
• TYPO3-Plugin• http://typo3.org/extensions/
repository/view/minify/current/
![Page 66: Frontend-Performance @ IPC](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c7a5ac4a7959c0408b466a/html5/thumbnails/66.jpg)
Frontend-Performance mit PHP
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/
![Page 67: Frontend-Performance @ IPC](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c7a5ac4a7959c0408b466a/html5/thumbnails/67.jpg)
Frontend-Performance mit PHP
67
Entwicklertools
• Firefox-Extensions (Add-ons)• https://addons.mozilla.org/de/firefox/
• Firebug• YSlow• Live HTTP Headers• Firefox Throttle
![Page 68: Frontend-Performance @ IPC](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c7a5ac4a7959c0408b466a/html5/thumbnails/68.jpg)
Frontend-Performance mit PHP
68
Entwicklertools
• Firebug (Netzwerk Monitoring)– Fortschrittsanalyse– Filter nach Ressourcen-Typ– Cache-Analyse– HTTP Headers– XMLHttpRequest Monitoring
![Page 69: Frontend-Performance @ IPC](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c7a5ac4a7959c0408b466a/html5/thumbnails/69.jpg)
Frontend-Performance mit PHP
69
Entwicklertools
• Firebug (Netzwerk Monitoring)
![Page 70: Frontend-Performance @ IPC](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c7a5ac4a7959c0408b466a/html5/thumbnails/70.jpg)
Frontend-Performance mit PHP
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)
![Page 71: Frontend-Performance @ IPC](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c7a5ac4a7959c0408b466a/html5/thumbnails/71.jpg)
Frontend-Performance mit PHP
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)
![Page 72: Frontend-Performance @ IPC](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c7a5ac4a7959c0408b466a/html5/thumbnails/72.jpg)
Frontend-Performance mit PHP
72
Entwicklertools
• Firefox Throttle– Begrenzt Download/Upload
Geschwindigkeit– Simulation von Zugängen mit geringer
Bandbreite
![Page 73: Frontend-Performance @ IPC](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c7a5ac4a7959c0408b466a/html5/thumbnails/73.jpg)
Anmerkungen? Fragen?
![Page 74: Frontend-Performance @ IPC](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c7a5ac4a7959c0408b466a/html5/thumbnails/74.jpg)
Weiterführende Informationen
![Page 75: Frontend-Performance @ IPC](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c7a5ac4a7959c0408b466a/html5/thumbnails/75.jpg)
Frontend-Performance mit PHP
75
Weiterführende Informationen
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
![Page 76: Frontend-Performance @ IPC](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c7a5ac4a7959c0408b466a/html5/thumbnails/76.jpg)
Frontend-Performance mit PHP
76
Weiterführende Informationen
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
![Page 77: Frontend-Performance @ IPC](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c7a5ac4a7959c0408b466a/html5/thumbnails/77.jpg)
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