Your SlideShare is downloading. ×
0
Frontend-Performance mit PHP
Frontend-Performance mit PHP
Frontend-Performance mit PHP
Frontend-Performance mit PHP
Frontend-Performance mit PHP
Frontend-Performance mit PHP
Frontend-Performance mit PHP
Frontend-Performance mit PHP
Frontend-Performance mit PHP
Frontend-Performance mit PHP
Frontend-Performance mit PHP
Frontend-Performance mit PHP
Frontend-Performance mit PHP
Frontend-Performance mit PHP
Frontend-Performance mit PHP
Frontend-Performance mit PHP
Frontend-Performance mit PHP
Frontend-Performance mit PHP
Frontend-Performance mit PHP
Frontend-Performance mit PHP
Frontend-Performance mit PHP
Frontend-Performance mit PHP
Frontend-Performance mit PHP
Frontend-Performance mit PHP
Frontend-Performance mit PHP
Frontend-Performance mit PHP
Frontend-Performance mit PHP
Frontend-Performance mit PHP
Frontend-Performance mit PHP
Frontend-Performance mit PHP
Frontend-Performance mit PHP
Frontend-Performance mit PHP
Frontend-Performance mit PHP
Frontend-Performance mit PHP
Frontend-Performance mit PHP
Frontend-Performance mit PHP
Frontend-Performance mit PHP
Frontend-Performance mit PHP
Frontend-Performance mit PHP
Frontend-Performance mit PHP
Frontend-Performance mit PHP
Frontend-Performance mit PHP
Frontend-Performance mit PHP
Frontend-Performance mit PHP
Frontend-Performance mit PHP
Frontend-Performance mit PHP
Frontend-Performance mit PHP
Frontend-Performance mit PHP
Frontend-Performance mit PHP
Frontend-Performance mit PHP
Frontend-Performance mit PHP
Frontend-Performance mit PHP
Frontend-Performance mit PHP
Frontend-Performance mit PHP
Frontend-Performance mit PHP
Frontend-Performance mit PHP
Frontend-Performance mit PHP
Frontend-Performance mit PHP
Frontend-Performance mit PHP
Frontend-Performance mit PHP
Frontend-Performance mit PHP
Frontend-Performance mit PHP
Frontend-Performance mit PHP
Frontend-Performance mit PHP
Frontend-Performance mit PHP
Frontend-Performance mit PHP
Frontend-Performance mit PHP
Frontend-Performance mit PHP
Frontend-Performance mit PHP
Frontend-Performance mit PHP
Frontend-Performance mit PHP
Frontend-Performance mit PHP
Frontend-Performance mit PHP
Frontend-Performance mit PHP
Frontend-Performance mit PHP
Frontend-Performance mit PHP
Frontend-Performance mit PHP
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Frontend-Performance mit PHP

4,292

Published on

Mehr und mehr entscheidet sich die Performance von Webanwendungen nicht mehr auf dem Server, sondern im Browser des Users. Die Session zeigt auf, warum nicht nur PHP-Performance eine Rolle spielt, …

Mehr und mehr entscheidet sich die Performance von Webanwendungen nicht mehr auf dem Server, sondern im Browser des Users. Die Session zeigt auf, warum nicht nur PHP-Performance eine Rolle spielt, sondern was wirklich zu einer schnellen Website beiträgt und welche Hilfsmittel man in der PHP-Welt zur Verfügung hat.

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,292
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • Frank: Willkommen
  • Frank: kurze Vorstellung Nico: kurze Vorstellung
  • Frank, danach Wechsel zu Nico
  • Nächste Folie: "Was wollen wir in unserem Vortrag vorstellen?"
  • "Wenn ihr Fragen habt…"
  • Bestandskundenshop AJAX-lastig Feedback über Lightboxen
  • + Enter Test URL + Warten auf Testgenerierung
  • Start des Rendering
  • Aus UK / Kleinste DSL-Geschwindigkeit
  • Nächste Folie: HTML
  • Nächste Folie: Goldene Regel
  • 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: "Unsere Seiten laden zu langsam." -> Chef: Macht's doppelt so schnell!
  • Komponenten aus realen 1&1 Anwendungen Wie schafft man das in PHP-Anwendungen? -> Frank
  • Nächste Folien: Wie ist das Ergebnis?
  • Nächste Folien: Wie ist das Ergebnis?
  • Erster Erfolg, aber das geht noch mehr. > Nico
  • Beispiel DSL-Bestellprozess Buttons in unterschiedlichen Farben, Zuständen, Größen
  • Inline-Images IE7! Oder mit PHP… -> Frank
  • Oder mit PHP… -> Frank Wir können aber noch mehr optimieren -> Komprimierung ab nächster Folie
  • Frank: Content Negotiation erklären
  • Wechsel zu Nico mit Ergebnissen
  • Gestrichelte Linie
  • Gestrichelte Linie Seite im Vergleich zu vorher
  • Da sind wir schon bei 50% weniger Ladezeit! Nächste Folie: Weitere Optimierung im Frontend
  • Um rauszubekommen, wie viel schneller -> Anderes Feature von WebPagetest Zeitlicher Verlauf Oben nachher / Unten vorher (Laser-Pointer) Nur Stylesheet-Optimierung
  • Abweichungen durch Videoaufzeichnung von US-Server Nächste Folie: Auch JavaScript spielt eine Rolle
  • 2/3 schneller! 2/3 der Datengröße eingespart! HTML unkomprimiert Sprites waren schon in der ursprünglichen Version (36 Requests!)
  • Wie sieht es mit der Optimierung an dem 2. Request aus?
  • Grafiken ohne Expires-Header Sind bereits im Cache, trotzdem Geschwätz zwischen Client und Server (1,4 Sekunden!)
  • Am besten beide Methoden
  • Hash -> kein Bezug zu urspünglicher Adresse Version: Aufwendig zu implementieren Cookie-freie Domain Verteilung über verschiedene Subdomains
  • Resultat Oben nachher / Unten vorher
  • Jede Menge Geld… Damit sind wir mit den wichtigsten Regeln durch. Webpagetest.org und minify sind nicht die einzigen Tools… -> Frank
  • Im Frontend -> Nico
  • Transcript

    • 1. Frank Kleine, Nico Steiner 1&1 Internet AG Frontend-Performance mit PHP
    • 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. 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. 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. 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. 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. Die Testumgebung
    • 8. Die Testumgebung http://www.webpagetest.org /
    • 9. Die Testumgebung http://www.webpagetest.org /
    • 10. Die Testumgebung http://www.webpagetest.org /
    • 11. Ohne Optimierung 695 KB 47 5,9 s 7,5 s Size Requests Start Render Load Time
    • 12. Ohne Optimierung
    • 13. Ohne Optimierung HTML
    • 14. Ohne Optimierung HTML 12%
    • 15. Ohne Optimierung CSS (9)
    • 16. Ohne Optimierung JS (7)
    • 17. Ohne Optimierung Grafiken (30)
    • 18. Weniger HTTP-Request
    • 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. 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. 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. 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. 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. 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. 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. 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. 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
    • 30. Weniger HTTP-Requests http://dsl.1und1.de
    • 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%
    • 33. Weniger HTTP-Requests http://login.1und1.de
    • 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. 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. Komprimierung
    • 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. 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. 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. 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
    • 43. Stylesheets an den Anfang
    • 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. Stylesheets an den Anfang <ul><li>Browser beginnt das Rendering erst nach dem Laden der Stylesheets </li></ul>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
    • 48. JavaScript an das Ende
    • 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
    • 52. Expires-Header
    • 53. Ohne Expires-Header
    • 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. 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
    • 57. Resultat http://www.webpagetest.org/video/view.php?id=100528_91ecef9fae78adb38f3a100d41ad97e05809d18a
    • 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. 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. 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. 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. Entwicklertools
    • 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. 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. Entwicklertools <ul><li>TYPO3-Plugin </li></ul><ul><li>http://typo3.org/extensions/repository/view/minify/current/ </li></ul>
    • 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. 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. 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. Entwicklertools <ul><li>Firebug (Netzwerk Monitoring) </li></ul>
    • 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. 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. 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. Anmerkungen? Fragen?
    • 74. Weiterführende Informationen
    • 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. 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. 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

    ×