SlideShare ist ein Scribd-Unternehmen logo

Frontend-Performance @ IPC

•Als PPT, PDF herunterladen•
•
Nico Steiner
Nico Steiner

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.

Ähnliche diashows

PageSpeed Extreme für das große Speed Update 2021
PageSpeed Extreme für das große Speed Update 2021PageSpeed Extreme für das große Speed Update 2021
PageSpeed Extreme für das große Speed Update 2021
 
Site Speed EXTREME - SEOkomm 2014
Site Speed EXTREME - SEOkomm 2014Site Speed EXTREME - SEOkomm 2014
Site Speed EXTREME - SEOkomm 2014
 
Web Performance Optimization - Web Tech Conference 2011 Talk
Web Performance Optimization - Web Tech Conference 2011 TalkWeb Performance Optimization - Web Tech Conference 2011 Talk
Web Performance Optimization - Web Tech Conference 2011 Talk
 
1 von 77
Frank Kleine, Nico Steiner 1&1 Internet AG Frontend-Performance mit PHP
Vorstellung Frank Kleine Head of Web Infrastructure Nico Steiner Experte für Frontend T&A
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
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 HTTP-Protokoll Die Testumgebung Weniger HTTP Requests Kombinierung / Komprimierung Stylesheets an den Anfang Scripte an das Ende Expires-Header Entwicklertools
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
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 Erzwingt Kompromiss zwischen Performance und Produktdesign Kombinierte Scripte + Styles CSS-Sprites Inline-Images
Weniger HTTP-Request Zeiten verkürzen sich deutlich durch weniger HTTP-Overhead Bandbreite des Endanwenders Internet Service Provider Nähe zu Peering-Punkten Distanz + + +
Kombiniertes CSS / JavaScript Software-Design bedingt Modularisierung 30 Stylesheets 15 Scripte HTTP-Overhead (Round-trip time) Live-Umgebung Build-Prozess
JS/CSS-Dateien kombinieren Build-Prozess? Erster Ansatz: Phing Mit Bordmitteln möglich
JS/CSS-Dateien kombinieren Build-Prozess? Erster Ansatz: Phing Mit Bordmitteln möglich Aber: Unpraktisch Jede JS/CSS-Änderung erfordert einen Build
JS/CSS-Dateien kombinieren Build-Prozess? Erster Ansatz: Phing Mit Bordmitteln möglich Aber: Unpraktisch Jede JS/CSS-Änderung erfordert einen Build
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 /
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
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 Render Load Time
Weniger HTTP-Requests http://dsl.1und1.de
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!
Weniger HTTP-Requests buttons.png 24,7 KB part-x.png 36,9 KB +49%
Weniger HTTP-Requests http://login.1und1.de
Inline Images data:[<mediatype>][;base64],<data> <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;> Online: http://www.opinionatedgeek.com/dotnet/tools/base64encode/ Nicht im IE7
Inline Images data:[<mediatype>][;base64],<data> <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;> Online: http://www.opinionatedgeek.com/dotnet/tools/base64encode/ Oder mit PHP  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;>'; Nicht im IE7
Komprimierung
Komprimierung Kleinere Response = weniger Datenpakete = reduzierte Übertragungszeit Komprimierung z.B. mit gzip Content Negotiation 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
Komprimierung Empfiehlt sich für jede Text-Response HTML / CSS / JavaScript AJAX (XML / JSON) Zusätzliche CPU-Zeit wird durch geringere Dateigröße aufgewogen
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.
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 (-30%) 695 KB 47 5,9 s 7,5 s Size Requests Start Render Load Time
Stylesheets an den Anfang
Stylesheets an den Anfang Progressive Rendering Browser stellt jegliche Inhalte sofort dar wenn diese verfügbar sind Schnelles visuelles Feedback fördert User Experience
Stylesheets an den Anfang Browser beginnt das Rendering erst nach dem Laden der Stylesheets Start Render CSS
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%) 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
Expires-Header
Ohne Expires-Header
Mit Expires-Header „Diese Ressource kann für die nächsten 15 Jahre immer aus dem Cache bezogen werden“
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 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 http://www.flickr.com/photos/ppz/47473793/
Nutzen Google +0,4 Sekunden 0,6% weniger Suchanfragen Yahoo! +0,4 Sekunden 5-9% weniger Traffic Bing +2 Sekunden 4,3% weniger Umsatz Quelle: Fronteers &quot;fast by default&quot; 2009
Nutzen Shopzilla -5 Sekunden 12% mehr Umsatz 50% weniger Hardware Netflix 43% weniger Bandbreite Quelle: Fronteers &quot;fast by default&quot; 2009
Nutzen Shopzilla -5 Sekunden 12% mehr Umsatz 50% weniger Hardware Netflix 43% weniger Bandbreite Quelle: Fronteers &quot;fast by default&quot; 2009
Entwicklertools
Entwicklertools Wordpress minify Plugin http://wordpress.org/extend/plugins/wp-minify/ BSD-Lizenz
Entwicklertools Symfony minify Plugin http://www.symfony-project.org/plugins/sfMinifyPlugin BSD-Lizenz
Entwicklertools TYPO3-Plugin http://typo3.org/extensions/repository/view/minify/current/
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 /
Entwicklertools Firefox-Extensions (Add-ons) https://addons.mozilla.org/de/firefox/ Firebug YSlow Live HTTP Headers Firefox Throttle
Entwicklertools Firebug (Netzwerk Monitoring) Fortschrittsanalyse Filter nach Ressourcen-Typ Cache-Analyse HTTP Headers XMLHttpRequest Monitoring
Entwicklertools Firebug (Netzwerk Monitoring)
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)
Entwicklertools Live HTTP Headers Zeigt HTTP Header aller Komponenten einer Seite in Echtzeit Manipulation von Request-Daten (Beta) 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 Firefox Throttle Begrenzt Download/Upload Geschwindigkeit Simulation von Zugängen mit geringer Bandbreite
Anmerkungen? Fragen?
Weiterführende Informationen
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
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
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

Weitere ähnliche Inhalte

Frontend-Performance @ IPC

  • 1. Frank Kleine, Nico Steiner 1&1 Internet AG Frontend-Performance mit PHP
  • 2. Vorstellung Frank Kleine Head of Web Infrastructure Nico Steiner Experte 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. Frontend-Performance mit PHP 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 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
  • 11. Ohne Optimierung 695 KB 47 5,9 s 7,5 s Size Requests Start Render Load Time
  • 19. Weniger HTTP-Request Erzwingt Kompromiss zwischen Performance und Produktdesign Kombinierte Scripte + Styles CSS-Sprites Inline-Images
  • 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 + + +
  • 21. Kombiniertes CSS / JavaScript Software-Design bedingt Modularisierung 30 Stylesheets 15 Scripte HTTP-Overhead (Round-trip time) Live-Umgebung Build-Prozess
  • 22. JS/CSS-Dateien kombinieren Build-Prozess? Erster Ansatz: Phing Mit Bordmitteln möglich
  • 23. JS/CSS-Dateien kombinieren Build-Prozess? Erster Ansatz: Phing Mit Bordmitteln möglich Aber: Unpraktisch Jede JS/CSS-Änderung erfordert einen Build
  • 24. JS/CSS-Dateien kombinieren Build-Prozess? Erster Ansatz: Phing Mit Bordmitteln möglich 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. Kombiniertes CSS / JavaScript CSS (1)
  • 28. Kombiniertes CSS / JavaScript JS (1)
  • 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
  • 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. Weniger HTTP-Requests buttons.png 24,7 KB part-x.png 36,9 KB +49%
  • 34. Inline Images data:[<mediatype>][;base64],<data> <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;> Online: http://www.opinionatedgeek.com/dotnet/tools/base64encode/ Nicht im IE7
  • 35. Inline Images data:[<mediatype>][;base64],<data> <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;> Online: http://www.opinionatedgeek.com/dotnet/tools/base64encode/ Oder mit PHP  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;>'; Nicht im IE7
  • 37. Komprimierung Kleinere Response = weniger Datenpakete = reduzierte Übertragungszeit Komprimierung z.B. mit gzip Content Negotiation 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. 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. Komprimiertes CSS / JavaScript JS
  • 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
  • 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
  • 45. Stylesheets an den Anfang Browser beginnt das Rendering erst nach dem Laden der Stylesheets Start Render CSS
  • 46. Stylesheets an den Anfang CSS im Head Start Rendering 4,7 s CSS im Content Start Rendering 6,0 s
  • 47. Stylesheets an den Anfang http://www.webpagetest.org/video/view.php?id=100528_ee3c12b0eae75703456caa0dd5ccf098de3a5a48
  • 49. JavaScript im Head des Dokuments Start Render
  • 50. JavaScript am Ende des Dokuments Start Render
  • 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
  • 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 C ontent D elivery N etwork
  • 56. Resultat Mit Optimierung Start Rendering 2,5 s Ohne Optimierung Start Rendering 9,0 s
  • 58. Resultat 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 http://www.flickr.com/photos/ppz/47473793/
  • 59. Nutzen Google +0,4 Sekunden 0,6% weniger Suchanfragen Yahoo! +0,4 Sekunden 5-9% weniger Traffic Bing +2 Sekunden 4,3% weniger Umsatz Quelle: Fronteers &quot;fast by default&quot; 2009
  • 60. Nutzen Shopzilla -5 Sekunden 12% mehr Umsatz 50% weniger Hardware Netflix 43% weniger Bandbreite Quelle: Fronteers &quot;fast by default&quot; 2009
  • 61. Nutzen Shopzilla -5 Sekunden 12% mehr Umsatz 50% weniger Hardware Netflix 43% weniger Bandbreite Quelle: Fronteers &quot;fast by default&quot; 2009
  • 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
  • 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
  • 68. Entwicklertools Firebug (Netzwerk Monitoring) Fortschrittsanalyse Filter nach Ressourcen-Typ Cache-Analyse HTTP Headers XMLHttpRequest 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. Entwicklertools Live HTTP Headers Zeigt HTTP Header aller Komponenten einer Seite in Echtzeit Manipulation von Request-Daten (Beta) 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. Entwicklertools Firefox Throttle Begrenzt Download/Upload Geschwindigkeit Simulation von Zugängen mit geringer Bandbreite
  • 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
  • 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
  • 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

Hinweis der Redaktion

  1. Frank: Willkommen
  2. Frank: kurze Vorstellung Nico: kurze Vorstellung
  3. Frank, danach Wechsel zu Nico
  4. Nächste Folie: &amp;quot;Was wollen wir in unserem Vortrag vorstellen?&amp;quot;
  5. &amp;quot;Wenn ihr Fragen habt…&amp;quot;
  6. Bestandskundenshop AJAX-lastig Feedback über Lightboxen
  7. + Enter Test URL + Warten auf Testgenerierung
  8. Start des Rendering
  9. Aus UK / Kleinste DSL-Geschwindigkeit
  10. Nächste Folie: HTML
  11. Nächste Folie: Goldene Regel
  12. 12%: DNS-Lookup + Initialer Verbindungsaufbau + Generieren des Dokuments + Download Anmerkung Frank: PHP-Optimierungen im Millisekundenbereich, auch zusätzliche Hardware hilft hier nicht Typisches Feedback von Kollegen aus den USA: &amp;quot;Unsere Seiten laden zu langsam.&amp;quot; -&gt; Chef: Macht&apos;s doppelt so schnell!
  13. Komponenten aus realen 1&amp;1 Anwendungen Wie schafft man das in PHP-Anwendungen? -&gt; Frank
  14. Nächste Folien: Wie ist das Ergebnis?
  15. Nächste Folien: Wie ist das Ergebnis?
  16. Erster Erfolg, aber das geht noch mehr. &gt; Nico
  17. Beispiel DSL-Bestellprozess Buttons in unterschiedlichen Farben, Zuständen, Größen
  18. Inline-Images IE7! Oder mit PHP… -&gt; Frank
  19. Oder mit PHP… -&gt; Frank Wir können aber noch mehr optimieren -&gt; Komprimierung ab nächster Folie
  20. Frank: Content Negotiation erklären
  21. Wechsel zu Nico mit Ergebnissen
  22. Gestrichelte Linie
  23. Gestrichelte Linie Seite im Vergleich zu vorher
  24. Da sind wir schon bei 50% weniger Ladezeit! Nächste Folie: Weitere Optimierung im Frontend
  25. Um rauszubekommen, wie viel schneller -&gt; Anderes Feature von WebPagetest Zeitlicher Verlauf Oben nachher / Unten vorher (Laser-Pointer) Nur Stylesheet-Optimierung
  26. Abweichungen durch Videoaufzeichnung von US-Server Nächste Folie: Auch JavaScript spielt eine Rolle
  27. 2/3 schneller! 2/3 der Datengröße eingespart! HTML unkomprimiert Sprites waren schon in der ursprünglichen Version (36 Requests!)
  28. Wie sieht es mit der Optimierung an dem 2. Request aus?
  29. Grafiken ohne Expires-Header Sind bereits im Cache, trotzdem Geschwätz zwischen Client und Server (1,4 Sekunden!)
  30. Am besten beide Methoden
  31. Hash -&gt; kein Bezug zu urspünglicher Adresse Version: Aufwendig zu implementieren Cookie-freie Domain Verteilung über verschiedene Subdomains
  32. Resultat Oben nachher / Unten vorher
  33. Jede Menge Geld… Damit sind wir mit den wichtigsten Regeln durch. Webpagetest.org und minify sind nicht die einzigen Tools… -&gt; Frank
  34. Im Frontend -&gt; Nico