frank kleine, nico steiner 1&1 internet agtalks.frankkleine.de/frontend-performance-php.pdf ·...
TRANSCRIPT
Frank Kleine, Nico Steiner
1&1 Internet AG
Frontend-Performance mit PHP
Frontend-Performance mit PHP 2
Vorstellung
Frank Kleine
Head of Web Infrastructure
Nico Steiner
Experte 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.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/
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
695 KB475,9 s7,5 s
SizeRequestsStart RenderLoad Time
Frontend-Performance mit PHP 12
Ohne Optimierung
Frontend-Performance mit PHP 13
Ohne Optimierung
HTML
Frontend-Performance mit PHP 14
Ohne Optimierung
HTML
12%
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
631 KB33 (-14)3,7 s (-37%)5,3 s (-30%)
695 KB475,9 s7,5 s
SizeRequestsStart RenderLoad Time
Frontend-Performance mit PHP 30
Weniger HTTP-Requests
http://dsl.1und1.de
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 33
Weniger HTTP-Requests
http://login.1und1.de
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-Encoding
Content-Encoding: gzip
Keep-Alive: timeout=15, max=97
Connection: Keep-Alive
Transfer-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
254 KB (-63%)33 (-14)2,1 s (-64%)3,2 s (-57%)
631 KB33 (-14)3,7 s (-37%)5,3 s (-30%)
695 KB475,9 s7,5 s
SizeRequestsStart RenderLoad Time
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
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 KB475,9 s7,5 s
SizeRequestsStart RenderLoad Time
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.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
• 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 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
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