frontend-performance @ ipc
Post on 27-Jan-2015
175 Views
Preview:
DESCRIPTION
TRANSCRIPT
Frank Kleine, Nico Steiner
1&1 Internet AG
Frontend-Performance mit PHP
Frontend-Performance mit PHP
2
Vorstellung
Frank KleineHead of Web Infrastructure
Nico SteinerExperte für Frontend T&A
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
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
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
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
Frontend-Performance mit PHP
7
Die Testumgebung
Frontend-Performance mit PHP
8
Die Testumgebung
http://www.webpagetest.org/
Frontend-Performance mit PHP
9
Die Testumgebung
http://www.webpagetest.org/
Frontend-Performance mit PHP
10
Die Testumgebung
http://www.webpagetest.org/
Frontend-Performance mit PHP
11
Ohne Optimierung
Load Time Start Render
Requests Size
7,5 s 5,9 s 47 695 KB
Frontend-Performance mit PHP
12
Ohne Optimierung
Frontend-Performance mit PHP
13
Ohne Optimierung
HTML
Frontend-Performance mit PHP
14
Ohne Optimierung
HTML12%
Frontend-Performance mit PHP
15
Ohne Optimierung
CSS (9)
Frontend-Performance mit PHP
16
Ohne Optimierung
JS (7)
Frontend-Performance mit PHP
17
Ohne Optimierung
Grafiken (30)
Weniger HTTP-Request
Frontend-Performance mit PHP
19
Weniger HTTP-Request
• Erzwingt Kompromiss zwischen Performance und Produktdesign
• Kombinierte Scripte + Styles• CSS-Sprites• Inline-Images
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
+
+
+
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
Frontend-Performance mit PHP
22
JS/CSS-Dateien kombinieren
• Build-Prozess?• Erster Ansatz: Phing• Mit Bordmitteln möglich
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
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
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/
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
Frontend-Performance mit PHP
27
Kombiniertes CSS / JavaScript
CSS (1)
Frontend-Performance mit PHP
28
Kombiniertes CSS / JavaScript
JS (1)
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
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!
Frontend-Performance mit PHP
32
Weniger HTTP-Requests
buttons.png 24,7 KB
part-x.png 36,9 KB
+49%
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
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
Komprimierung
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
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
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.
Frontend-Performance mit PHP
40
Komprimiertes CSS / JavaScript
CSS
Frontend-Performance mit PHP
41
Komprimiertes CSS / JavaScript
JS
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%)
Stylesheets an den Anfang
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
Frontend-Performance mit PHP
45
Stylesheets an den Anfang
• Browser beginnt das Rendering erst nach dem Laden der Stylesheets
Start Render
CSS
Frontend-Performance mit PHP
46
Stylesheets an den Anfang
CSS im HeadStart Rendering 4,7 s
CSS im ContentStart Rendering 6,0 s
Frontend-Performance mit PHP
47
Stylesheets an den Anfang
http://www.webpagetest.org/video/view.php?id=100528_ee3c12b0eae75703456caa0dd5ccf098de3a5a48
JavaScript an das Ende
Frontend-Performance mit PHP
49
JavaScript im Head des DokumentsStart Render
Frontend-Performance mit PHP
50
JavaScript am Ende des DokumentsStart Render
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%)
Expires-Header
Frontend-Performance mit PHP
53
Ohne Expires-Header
Frontend-Performance mit PHP
54
Mit Expires-Header
• „Diese Ressource kann für die nächsten 15 Jahre immer aus dem Cache bezogen werden“
Frontend-Performance mit PHP
55
Mit Expires-Header
Facebook: Hash-Tags
Amazon: Versionierung
Content Delivery Network
Frontend-Performance mit PHP
56
Resultat
Mit OptimierungStart Rendering 2,5 s
Ohne OptimierungStart Rendering 9,0 s
Frontend-Performance mit PHP
57
Resultat
http://www.webpagetest.org/video/view.php?id=100528_91ecef9fae78adb38f3a100d41ad97e05809d18a
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
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
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
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
Entwicklertools
Frontend-Performance mit PHP
63
Entwicklertools
• Wordpress minify Plugin• http://wordpress.org/extend/
plugins/wp-minify/• BSD-Lizenz
Frontend-Performance mit PHP
64
Entwicklertools
• Symfony minify Plugin• http://www.symfony-project.org/
plugins/sfMinifyPlugin• BSD-Lizenz
Frontend-Performance mit PHP
65
Entwicklertools
• TYPO3-Plugin• http://typo3.org/extensions/
repository/view/minify/current/
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/
Frontend-Performance mit PHP
67
Entwicklertools
• Firefox-Extensions (Add-ons)• https://addons.mozilla.org/de/firefox/
• Firebug• YSlow• Live HTTP Headers• Firefox Throttle
Frontend-Performance mit PHP
68
Entwicklertools
• Firebug (Netzwerk Monitoring)– Fortschrittsanalyse– Filter nach Ressourcen-Typ– Cache-Analyse– HTTP Headers– XMLHttpRequest Monitoring
Frontend-Performance mit PHP
69
Entwicklertools
• Firebug (Netzwerk Monitoring)
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)
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)
Frontend-Performance mit PHP
72
Entwicklertools
• Firefox Throttle– Begrenzt Download/Upload
Geschwindigkeit– Simulation von Zugängen mit geringer
Bandbreite
Anmerkungen? Fragen?
Weiterführende Informationen
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
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
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
top related