Frank Kleine, Nico Steiner 1&1 Internet AG Frontend-Performance mit PHP
Vorstellung <ul><li>Frank Kleine </li></ul><ul><li>Head of Web Infrastructure </li></ul><ul><li>Nico Steiner </li></ul><ul...
Vorstellung <ul><li>1&1 Shopsysteme </li></ul><ul><li>Ca. 30 verschiedene Shops mit zahlreichen Tarifen </li></ul><ul><li>...
Vorstellung <ul><li>Web Performance und Open Source Evangelist </li></ul><ul><li>Google (früher Yahoo) </li></ul><ul><li>E...
Frontend-Performance mit PHP <ul><li>HTTP-Protokoll </li></ul><ul><li>Die Testumgebung </li></ul><ul><li>Weniger HTTP Requ...
HTTP Protokoll Client  Server Request Response URL Header Header Body SC GET /xml/shop/home.html Host: kunden.1und1.de Use...
Die Testumgebung
Die Testumgebung http://www.webpagetest.org /
Die Testumgebung http://www.webpagetest.org /
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
Weniger HTTP-Request <ul><li>Erzwingt Kompromiss zwischen Performance und Produktdesign </li></ul><ul><li>Kombinierte Scri...
Weniger HTTP-Request <ul><li>Zeiten verkürzen sich deutlich durch weniger HTTP-Overhead </li></ul>Bandbreite des Endanwend...
Kombiniertes CSS / JavaScript <ul><li>Software-Design bedingt Modularisierung </li></ul><ul><ul><li>30 Stylesheets </li></...
JS/CSS-Dateien kombinieren <ul><li>Build-Prozess? </li></ul><ul><li>Erster Ansatz: Phing </li></ul><ul><li>Mit Bordmitteln...
JS/CSS-Dateien kombinieren <ul><li>Build-Prozess? </li></ul><ul><li>Erster Ansatz: Phing </li></ul><ul><li>Mit Bordmitteln...
JS/CSS-Dateien kombinieren <ul><li>Build-Prozess? </li></ul><ul><li>Erster Ansatz: Phing </li></ul><ul><li>Mit Bordmitteln...
JS/CSS-Dateien kombinieren, Versuch 2 <ul><li>Kombinieren on the fly </li></ul><ul><li>minify </li></ul><ul><li>Kombiniert...
JS/CSS-Dateien kombinieren, Versuch 2 <ul><li>Kombinieren on the fly </li></ul><ul><li>minify </li></ul><ul><li>Kombiniert...
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 Rend...
Weniger HTTP-Requests http://dsl.1und1.de
Weniger HTTP-Requests „ Sliding Doors of CSS“ by Douglas Bowman (2003) http://www.alistapart.com/articles/slidingdoors / <...
Weniger HTTP-Requests buttons.png 24,7 KB part-x.png 36,9 KB +49%
Weniger HTTP-Requests http://login.1und1.de
Inline Images <ul><li>data:[<mediatype>][;base64],<data> </li></ul><ul><li><img src=&quot;data:image/gif;base64, R0lGODlhE...
Inline Images <ul><li>data:[<mediatype>][;base64],<data> </li></ul><ul><li><img src=&quot;data:image/gif;base64, R0lGODlhE...
Komprimierung
Komprimierung <ul><li>Kleinere Response = weniger Datenpakete = reduzierte Übertragungszeit </li></ul><ul><li>Komprimierun...
Komprimierung <ul><li>Empfiehlt sich für jede Text-Response </li></ul><ul><ul><li>HTML / CSS / JavaScript </li></ul></ul><...
Komprimierung <ul><li>minify liefert Content per default mit gzip oder deflate aus </li></ul><ul><ul><li>Natürlich nur mit...
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 ...
Stylesheets an den Anfang
Stylesheets an den Anfang <ul><li>Progressive Rendering </li></ul><ul><ul><li>Browser stellt jegliche Inhalte sofort dar w...
Stylesheets an den Anfang <ul><li>Browser beginnt das Rendering erst nach dem Laden der Stylesheets </li></ul>Start Render...
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...
Expires-Header
Ohne Expires-Header
Mit Expires-Header <ul><li>„Diese Ressource kann für die nächsten 15 Jahre immer aus dem Cache bezogen werden“ </li></ul>
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 <ul><li>Dokument wird 5,1 Sekunden schneller geladen </li></ul><ul><li>Browser beginnt 4,8 Sekunden früher zu ren...
Nutzen <ul><li>Google </li></ul><ul><li>+0,4 Sekunden </li></ul><ul><li>0,6% weniger Suchanfragen </li></ul><ul><li>Yahoo!...
Nutzen <ul><li>Shopzilla </li></ul><ul><li>-5 Sekunden  </li></ul><ul><li>12% mehr Umsatz </li></ul><ul><li>50% weniger Ha...
Nutzen <ul><li>Shopzilla </li></ul><ul><li>-5 Sekunden  </li></ul><ul><li>12% mehr Umsatz </li></ul><ul><li>50% weniger Ha...
Entwicklertools
Entwicklertools <ul><li>Wordpress minify Plugin </li></ul><ul><li>http://wordpress.org/extend/plugins/wp-minify/ </li></ul...
Entwicklertools <ul><li>Symfony minify Plugin </li></ul><ul><li>http://www.symfony-project.org/plugins/sfMinifyPlugin </li...
Entwicklertools <ul><li>TYPO3-Plugin </li></ul><ul><li>http://typo3.org/extensions/repository/view/minify/current/ </li></ul>
Entwicklertools <ul><li>CSS Sprite Generator </li></ul><ul><ul><li>ZIP mit mehreren Bildern hochladen </li></ul></ul><ul><...
Entwicklertools <ul><li>Firefox-Extensions (Add-ons) </li></ul><ul><li>https://addons.mozilla.org/de/firefox/ </li></ul><u...
Entwicklertools <ul><li>Firebug (Netzwerk Monitoring) </li></ul><ul><ul><li>Fortschrittsanalyse </li></ul></ul><ul><ul><li...
Entwicklertools <ul><li>Firebug (Netzwerk Monitoring) </li></ul>
Entwicklertools <ul><li>YSlow </li></ul><ul><ul><li>Entwickelt von Yahoo! </li></ul></ul><ul><ul><li>Bewertet eine Webseit...
Entwicklertools <ul><li>Live HTTP Headers </li></ul><ul><ul><li>Zeigt HTTP Header aller Komponenten einer Seite in Echtzei...
Entwicklertools <ul><li>Firefox Throttle </li></ul><ul><ul><li>Begrenzt Download/Upload Geschwindigkeit </li></ul></ul><ul...
Anmerkungen? Fragen?
Weiterführende Informationen
Weiterführende Informationen <ul><li>Yahoo:  Best Practices for Speeding Up Your Web Site </li></ul><ul><li>http://develop...
Weiterführende Informationen <ul><li>Steve Souders:  High Performance Web Sites (O‘Reilly 2007) </li></ul><ul><li>http://o...
Vielen Dank! http://icons.mysitemyway.com Frank Kleine http://frankkleine.de/ http://www.stubbles.org/ http://twitter.com/...
Nächste SlideShare
Wird geladen in …5
×

Frontend-Performance @ IPC

3.454 Aufrufe

Veröffentlicht am

Presentation at IPC 2010 in Berlin, Germany. Frank Kleine and me talked about how to accelerate page speed in general with a detailed look at PHP solutions.

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

Frontend-Performance @ IPC

  1. 1. Frank Kleine, Nico Steiner 1&1 Internet AG Frontend-Performance mit PHP
  2. 2. Vorstellung <ul><li>Frank Kleine </li></ul><ul><li>Head of Web Infrastructure </li></ul><ul><li>Nico Steiner </li></ul><ul><li>Experte für Frontend T&A </li></ul>
  3. 3. Vorstellung <ul><li>1&1 Shopsysteme </li></ul><ul><li>Ca. 30 verschiedene Shops mit zahlreichen Tarifen </li></ul><ul><li>Mehrere Millionen Requests täglich </li></ul><ul><li>Mehrere Terabyte Traffic </li></ul><ul><li>Aufgeteilt auf verschiedene Cluster </li></ul><ul><li>Anbindung: 210 Gbit/s </li></ul>
  4. 4. Vorstellung <ul><li>Web Performance und Open Source Evangelist </li></ul><ul><li>Google (früher Yahoo) </li></ul><ul><li>Erschaffer von YSlow </li></ul><ul><li>Stanford-Dozent </li></ul><ul><li>Sprecher auf internationalen Konferenzen </li></ul>2007 2009 Steve Souders YSlow Firebug Extension
  5. 5. Frontend-Performance mit PHP <ul><li>HTTP-Protokoll </li></ul><ul><li>Die Testumgebung </li></ul><ul><li>Weniger HTTP Requests </li></ul><ul><li>Kombinierung / Komprimierung </li></ul><ul><li>Stylesheets an den Anfang </li></ul><ul><li>Scripte an das Ende </li></ul><ul><li>Expires-Header </li></ul><ul><li>Entwicklertools </li></ul>
  6. 6. 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
  7. 7. Die Testumgebung
  8. 8. Die Testumgebung http://www.webpagetest.org /
  9. 9. Die Testumgebung http://www.webpagetest.org /
  10. 10. Die Testumgebung http://www.webpagetest.org /
  11. 11. Ohne Optimierung 695 KB 47 5,9 s 7,5 s Size Requests Start Render Load Time
  12. 12. Ohne Optimierung
  13. 13. Ohne Optimierung HTML
  14. 14. Ohne Optimierung HTML 12%
  15. 15. Ohne Optimierung CSS (9)
  16. 16. Ohne Optimierung JS (7)
  17. 17. Ohne Optimierung Grafiken (30)
  18. 18. Weniger HTTP-Request
  19. 19. Weniger HTTP-Request <ul><li>Erzwingt Kompromiss zwischen Performance und Produktdesign </li></ul><ul><li>Kombinierte Scripte + Styles </li></ul><ul><li>CSS-Sprites </li></ul><ul><li>Inline-Images </li></ul>
  20. 20. Weniger HTTP-Request <ul><li>Zeiten verkürzen sich deutlich durch weniger HTTP-Overhead </li></ul>Bandbreite des Endanwenders Internet Service Provider Nähe zu Peering-Punkten Distanz + + +
  21. 21. Kombiniertes CSS / JavaScript <ul><li>Software-Design bedingt Modularisierung </li></ul><ul><ul><li>30 Stylesheets </li></ul></ul><ul><ul><li>15 Scripte </li></ul></ul><ul><li>HTTP-Overhead (Round-trip time) </li></ul>Live-Umgebung Build-Prozess
  22. 22. JS/CSS-Dateien kombinieren <ul><li>Build-Prozess? </li></ul><ul><li>Erster Ansatz: Phing </li></ul><ul><li>Mit Bordmitteln möglich </li></ul>
  23. 23. JS/CSS-Dateien kombinieren <ul><li>Build-Prozess? </li></ul><ul><li>Erster Ansatz: Phing </li></ul><ul><li>Mit Bordmitteln möglich </li></ul><ul><li>Aber: Unpraktisch </li></ul><ul><ul><li>Jede JS/CSS-Änderung erfordert einen Build </li></ul></ul>
  24. 24. JS/CSS-Dateien kombinieren <ul><li>Build-Prozess? </li></ul><ul><li>Erster Ansatz: Phing </li></ul><ul><li>Mit Bordmitteln möglich </li></ul><ul><li>Aber: Unpraktisch </li></ul><ul><ul><li>Jede JS/CSS-Änderung erfordert einen Build </li></ul></ul>
  25. 25. JS/CSS-Dateien kombinieren, Versuch 2 <ul><li>Kombinieren on the fly </li></ul><ul><li>minify </li></ul><ul><li>Kombiniert Ressourcen on Demand </li></ul><ul><li>Erlaubt Gruppierung von Ressourcen </li></ul><ul><li>Ab PHP 5.2, BSD-lizensiert </li></ul><ul><li>http://code.google.com/p/minify / </li></ul>
  26. 26. JS/CSS-Dateien kombinieren, Versuch 2 <ul><li>Kombinieren on the fly </li></ul><ul><li>minify </li></ul><ul><li>Kombiniert Ressourcen on Demand </li></ul><ul><li>Erlaubt Gruppierung von Ressourcen </li></ul><ul><li>Ab PHP 5.2, BSD-lizensiert </li></ul><ul><li>http://code.google.com/p/minify / </li></ul><ul><li>PHP zum Ausliefern von JS/CSS? </li></ul><ul><li>Schnell genug für www.1und1.de, also auch für andere </li></ul>
  27. 27. Kombiniertes CSS / JavaScript CSS (1)
  28. 28. Kombiniertes CSS / JavaScript JS (1)
  29. 29. 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
  30. 30. Weniger HTTP-Requests http://dsl.1und1.de
  31. 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 36 Requests!
  32. 32. Weniger HTTP-Requests buttons.png 24,7 KB part-x.png 36,9 KB +49%
  33. 33. Weniger HTTP-Requests http://login.1und1.de
  34. 34. Inline Images <ul><li>data:[<mediatype>][;base64],<data> </li></ul><ul><li><img src=&quot;data:image/gif;base64, R0lGODlhEAAQANUAAPr7/PL09mhoaA4ODk1NTVxcXAoKCvf4+iwsLDg4ODs7O/T2+IaGhnBwcPX3+ZSUlJycnOPl5ri4uMTExKysrPj5+vj6+0RERPr6+87P0V9fXwYGBlFRUby+v05OT3JycvL19/b4+RsbG8vLyxgYGCoqKgICAtbY2iEhIbq6usDCw6+wsN7e3nt7e9fX16CfoJiYmLS0tYiIiJCQkIODgxcXF1dXVzc3N7u9vnV1dYmJieXl5fv8/GZmZgAAAP///yH5BAAAAAAALAAAAAAQABAAAAajQJ5wSCwKJbqkcikZAmijUW9Knc5igGxr8qp5WTCBqzaRrQCYT+pxa7vbj9QHYxFQGLa8Ps+gCCwVBRA5hIWGEAUVBxwNIj6PkI8iDRwHIRcaPj+bnJs+GhchDgkEmjunqD8+BAkOCwgKmp2cPgoICyAoJaaop6olKCABNSSys6okNQEBAwbGsz4GAwEnHhsmkZEmGx4nERkqHTjj5OMdKhkRQQA7&quot; width=&quot;16&quot; height=&quot;16&quot; alt=&quot;embedded disc icon&quot;> </li></ul><ul><li>Online: http://www.opinionatedgeek.com/dotnet/tools/base64encode/ </li></ul>Nicht im IE7
  35. 35. Inline Images <ul><li>data:[<mediatype>][;base64],<data> </li></ul><ul><li><img src=&quot;data:image/gif;base64, R0lGODlhEAAQANUAAPr7/PL09mhoaA4ODk1NTVxcXAoKCvf4+iwsLDg4ODs7O/T2+IaGhnBwcPX3+ZSUlJycnOPl5ri4uMTExKysrPj5+vj6+0RERPr6+87P0V9fXwYGBlFRUby+v05OT3JycvL19/b4+RsbG8vLyxgYGCoqKgICAtbY2iEhIbq6usDCw6+wsN7e3nt7e9fX16CfoJiYmLS0tYiIiJCQkIODgxcXF1dXVzc3N7u9vnV1dYmJieXl5fv8/GZmZgAAAP///yH5BAAAAAAALAAAAAAQABAAAAajQJ5wSCwKJbqkcikZAmijUW9Knc5igGxr8qp5WTCBqzaRrQCYT+pxa7vbj9QHYxFQGLa8Ps+gCCwVBRA5hIWGEAUVBxwNIj6PkI8iDRwHIRcaPj+bnJs+GhchDgkEmjunqD8+BAkOCwgKmp2cPgoICyAoJaaop6olKCABNSSys6okNQEBAwbGsz4GAwEnHhsmkZEmGx4nERkqHTjj5OMdKhkRQQA7&quot; width=&quot;16&quot; height=&quot;16&quot; alt=&quot;embedded disc icon&quot;> </li></ul><ul><li>Online: http://www.opinionatedgeek.com/dotnet/tools/base64encode/ </li></ul><ul><li>Oder mit PHP  </li></ul><ul><li>echo '<img src=&quot;data:image/gif;base64,' . base64_encode(file_get_contents($file)) . '&quot; width=&quot;16&quot; height=&quot;16&quot; alt=&quot;embedded disc icon&quot;>'; </li></ul>Nicht im IE7
  36. 36. Komprimierung
  37. 37. Komprimierung <ul><li>Kleinere Response = weniger Datenpakete = reduzierte Übertragungszeit </li></ul><ul><li>Komprimierung z.B. mit gzip </li></ul><ul><li>Content Negotiation </li></ul>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
  38. 38. Komprimierung <ul><li>Empfiehlt sich für jede Text-Response </li></ul><ul><ul><li>HTML / CSS / JavaScript </li></ul></ul><ul><ul><li>AJAX (XML / JSON) </li></ul></ul><ul><li>Zusätzliche CPU-Zeit wird durch geringere Dateigröße aufgewogen </li></ul>
  39. 39. Komprimierung <ul><li>minify liefert Content per default mit gzip oder deflate aus </li></ul><ul><ul><li>Natürlich nur mit Content Negotation </li></ul></ul><ul><li>HTML kann man auch komprimieren </li></ul><ul><ul><li>CMS oder Framework </li></ul></ul><ul><ul><li>Nativ in PHP: ob_start('gz_handler'); </li></ul></ul><ul><ul><li>Benötigt ext/zlib </li></ul></ul><ul><ul><li>Apache: mod_gzip, mod_deflate </li></ul></ul><ul><ul><li>http://phpperformance.de/mod_gzip-mod_deflate-und-sonstige-komprimierungsverfahren-fuer-web-inhalte/ </li></ul></ul><ul><li>Last? Applikationsabhängig. </li></ul>
  40. 40. Komprimiertes CSS / JavaScript CSS
  41. 41. Komprimiertes CSS / JavaScript JS
  42. 42. 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
  43. 43. Stylesheets an den Anfang
  44. 44. Stylesheets an den Anfang <ul><li>Progressive Rendering </li></ul><ul><ul><li>Browser stellt jegliche Inhalte sofort dar wenn diese verfügbar sind </li></ul></ul><ul><ul><li>Schnelles visuelles Feedback fördert User Experience </li></ul></ul>
  45. 45. Stylesheets an den Anfang <ul><li>Browser beginnt das Rendering erst nach dem Laden der Stylesheets </li></ul>Start Render CSS
  46. 46. Stylesheets an den Anfang CSS im Head Start Rendering 4,7 s CSS im Content Start Rendering 6,0 s
  47. 47. Stylesheets an den Anfang http://www.webpagetest.org/video/view.php?id=100528_ee3c12b0eae75703456caa0dd5ccf098de3a5a48
  48. 48. JavaScript an das Ende
  49. 49. JavaScript im Head des Dokuments Start Render
  50. 50. JavaScript am Ende des Dokuments Start Render
  51. 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 KB 47 5,9 s 7,5 s Size Requests Start Render Load Time
  52. 52. Expires-Header
  53. 53. Ohne Expires-Header
  54. 54. Mit Expires-Header <ul><li>„Diese Ressource kann für die nächsten 15 Jahre immer aus dem Cache bezogen werden“ </li></ul>
  55. 55. Mit Expires-Header Facebook: Hash-Tags Amazon: Versionierung C ontent D elivery N etwork
  56. 56. Resultat Mit Optimierung Start Rendering 2,5 s Ohne Optimierung Start Rendering 9,0 s
  57. 57. Resultat http://www.webpagetest.org/video/view.php?id=100528_91ecef9fae78adb38f3a100d41ad97e05809d18a
  58. 58. Resultat <ul><li>Dokument wird 5,1 Sekunden schneller geladen </li></ul><ul><li>Browser beginnt 4,8 Sekunden früher zu rendern </li></ul><ul><li>Es werden 14 Requests gespart </li></ul><ul><li>Es werden 441 KB weniger Daten übertragen </li></ul>http://www.flickr.com/photos/ppz/47473793/
  59. 59. Nutzen <ul><li>Google </li></ul><ul><li>+0,4 Sekunden </li></ul><ul><li>0,6% weniger Suchanfragen </li></ul><ul><li>Yahoo! </li></ul><ul><li>+0,4 Sekunden </li></ul><ul><li>5-9% weniger Traffic </li></ul><ul><li>Bing </li></ul><ul><li>+2 Sekunden </li></ul><ul><li>4,3% weniger Umsatz </li></ul>Quelle: Fronteers &quot;fast by default&quot; 2009
  60. 60. Nutzen <ul><li>Shopzilla </li></ul><ul><li>-5 Sekunden </li></ul><ul><li>12% mehr Umsatz </li></ul><ul><li>50% weniger Hardware </li></ul><ul><li>Netflix </li></ul><ul><li>43% weniger Bandbreite </li></ul>Quelle: Fronteers &quot;fast by default&quot; 2009
  61. 61. Nutzen <ul><li>Shopzilla </li></ul><ul><li>-5 Sekunden </li></ul><ul><li>12% mehr Umsatz </li></ul><ul><li>50% weniger Hardware </li></ul><ul><li>Netflix </li></ul><ul><li>43% weniger Bandbreite </li></ul>Quelle: Fronteers &quot;fast by default&quot; 2009
  62. 62. Entwicklertools
  63. 63. Entwicklertools <ul><li>Wordpress minify Plugin </li></ul><ul><li>http://wordpress.org/extend/plugins/wp-minify/ </li></ul><ul><li>BSD-Lizenz </li></ul>
  64. 64. Entwicklertools <ul><li>Symfony minify Plugin </li></ul><ul><li>http://www.symfony-project.org/plugins/sfMinifyPlugin </li></ul><ul><li>BSD-Lizenz </li></ul>
  65. 65. Entwicklertools <ul><li>TYPO3-Plugin </li></ul><ul><li>http://typo3.org/extensions/repository/view/minify/current/ </li></ul>
  66. 66. Entwicklertools <ul><li>CSS Sprite Generator </li></ul><ul><ul><li>ZIP mit mehreren Bildern hochladen </li></ul></ul><ul><ul><li>Generiert Sprite und passendes CSS </li></ul></ul><ul><ul><li>Online nutzen oder lokal installieren </li></ul></ul><ul><ul><ul><li>PHP 5.2 + GD, BSD-Lizenz </li></ul></ul></ul><ul><ul><li>http://spritegen.website-performance.org / </li></ul></ul>
  67. 67. Entwicklertools <ul><li>Firefox-Extensions (Add-ons) </li></ul><ul><li>https://addons.mozilla.org/de/firefox/ </li></ul><ul><li>Firebug </li></ul><ul><li>YSlow </li></ul><ul><li>Live HTTP Headers </li></ul><ul><li>Firefox Throttle </li></ul>
  68. 68. Entwicklertools <ul><li>Firebug (Netzwerk Monitoring) </li></ul><ul><ul><li>Fortschrittsanalyse </li></ul></ul><ul><ul><li>Filter nach Ressourcen-Typ </li></ul></ul><ul><ul><li>Cache-Analyse </li></ul></ul><ul><ul><li>HTTP Headers </li></ul></ul><ul><ul><li>XMLHttpRequest Monitoring </li></ul></ul>
  69. 69. Entwicklertools <ul><li>Firebug (Netzwerk Monitoring) </li></ul>
  70. 70. Entwicklertools <ul><li>YSlow </li></ul><ul><ul><li>Entwickelt von Yahoo! </li></ul></ul><ul><ul><li>Bewertet eine Webseite unter Berücksichtigung der „Rules for high performance websites“ </li></ul></ul><ul><ul><li>Zeigt performancerelevante Komponenten einer Seite </li></ul></ul><ul><ul><li>Statistiken / Tools </li></ul></ul><ul><ul><li>Alternative: Page Speed (Google) </li></ul></ul><ul><ul><li>Alternative: Speed Tracer (Chrome) </li></ul></ul>
  71. 71. Entwicklertools <ul><li>Live HTTP Headers </li></ul><ul><ul><li>Zeigt HTTP Header aller Komponenten einer Seite in Echtzeit </li></ul></ul><ul><ul><li>Manipulation von Request-Daten (Beta) </li></ul></ul>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
  72. 72. Entwicklertools <ul><li>Firefox Throttle </li></ul><ul><ul><li>Begrenzt Download/Upload Geschwindigkeit </li></ul></ul><ul><ul><li>Simulation von Zugängen mit geringer Bandbreite </li></ul></ul>
  73. 73. Anmerkungen? Fragen?
  74. 74. Weiterführende Informationen
  75. 75. Weiterführende Informationen <ul><li>Yahoo: Best Practices for Speeding Up Your Web Site </li></ul><ul><li>http://developer.yahoo.com/performance/rules.html </li></ul><ul><li>Google: Web Performance Best Practices </li></ul><ul><li>http://code.google.com/speed/page-speed/docs/rules_intro.html </li></ul><ul><li>YouTube: „site performance“ </li></ul><ul><li>http://www.youtube.com/results?search_query=site+performance </li></ul>
  76. 76. Weiterführende Informationen <ul><li>Steve Souders: High Performance Web Sites (O‘Reilly 2007) </li></ul><ul><li>http://oreilly.com/catalog/9780596529307 </li></ul><ul><li>Steve Souders: Even Faster Web Sites (O‘Reilly 2009) </li></ul><ul><li>http://oreilly.com/catalog/9780596522315 </li></ul>
  77. 77. 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

×