PHP Kongress 2010 - Web-Performance

1,080 views

Published on

My talk at PHP Kongress 2010 about rules and practices considering web performance.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,080
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

PHP Kongress 2010 - Web-Performance

  1. 1. Web-Performance Regeln und LösungenRegeln und Lösungen PHP World Kongress 2010 | München
  2. 2. Hi! • Seit 2003 bei der 1&1 Internet AG • Abteilung betreut die Bestellsysteme der 1&1 (Shops) • Experte für Frontend-Technologien • HTML, XML, CSS, JavaScript • Accessibility, Website Performance, AJAX, Suchmaschinenoptimierung Nico
  3. 3. Eigenschaften der 1&1 Shops • Ca. 30 verschieden große Webapplikationen • Hunderte Seiten pro Applikation • Tausende von Grafiken • Hunderte Stylesheets und Scripte• Hunderte Stylesheets und Scripte • Täglicher Abruf von mehreren Terabyte an Ressourcen
  4. 4. Performance-Optimierung 20092007 Steve Souders www.stevesouders.com
  5. 5. 10% Server + Client
  6. 6. CSS IMG Script HTML
  7. 7. Reduziere die Anzahl der HTTP-Requests
  8. 8. Wenige HTTP-Requests Internet Service Provider + Bandbreite des AnwendersBandbreite des Anwenders + Nähe zu Peering-Punkten + Distanz
  9. 9. Wenige HTTP-Requests Client Server ?
  10. 10. Wie schnell surft denn Deutschland so?
  11. 11. http://www.akamai.com/stateoftheinternet/
  12. 12. Deutschland • In keiner Top 10 vertreten • Landesweite Verbindungsgeschwindigkeit durchschnittlich unter 5 Mbit/s • Baden-Baden als einzige deutsche Stadt auf Platz 61• Baden-Baden als einzige deutsche Stadt auf Platz 61 mit durchschnittlich 7,6 Mbit/s • Platz 1: Südkorea/Masan mit durchschnittlich 17 / 20,9 Mbit/s • Global durchschnittlich 1,8 Mbit/s
  13. 13. 0 17< 51,8
  14. 14. www.zeit.de
  15. 15. Frankfurt / IE7 / 1,5 Mbit/s 13 Sekunden First View
  16. 16. Start Render 6,3 Sekunden
  17. 17. Frankfurt / IE7 / 1,5 Mbit/s Second View 9 Sekunden
  18. 18. http://www.webperformancetoday.com/2010/07/01/the-best-graphs-of-velocity/
  19. 19. Google runs expirements on the search results page to understand and improve search expirience. Our expiriment injected server-side delay 100 bis 400 ms 0,2% bis 0,6% weniger Suchanfragen
  20. 20. It comes down just one factor – speed. 2,2 Sekunden schneller 15% mehr Downloads 10,8 Mio/Jahr
  21. 21. www.watchmouse.com
  22. 22. http://status.mozilla.com/
  23. 23. http://www.forbes.com/2010/10/25/internet-korea-india-technology-emerging-markets.html http://googlewebmastercentral.blogspot.com/2010/04/using-site-speed-in-web-search-ranking.html
  24. 24. Was machen wir?
  25. 25. CSS IMG Script HTML
  26. 26. CSS IMG CDS Script HTML
  27. 27. CSS IMG Script HTML Pustefix Framework
  28. 28. CSS IMG Script HTML Jasmin
  29. 29. Jasmin Schönheit aus 1001 Nacht? http://www.flickr.com/photos/honma/4084355466
  30. 30. Jasmin • Nur ein Servlet ;-) • JavaScript Minifier
  31. 31. Modularisierung mit Dependencies Dependency Qooxdoo Autocompletion webservice.js autocompletion.js autocompletion.css
  32. 32. Modularisierung mit Dependencies <LINK href=“/xml/jasmin/dslorder+clearfix+autocompletion/css“> <SCRIPT src=“/xml/jasmin/dslorder+clearfix+autocompletion/js“>
  33. 33. Wenige HTTP Requests „Lade für alle Seiten die Ressourcen des DSL-Projekts und zusätzlich nur für die Seite DslCheck die Ressourcen der Autocompletion.“ DslStart DslMobile DslCheck dslorder dslorder dslorder autocompletion 1. Request 2. Request
  34. 34. Wenige HTTP Requests 1. Request 2. Request „Lade für alle Seiten die Ressourcen des DSL-Projekts und zusätzlich nur für die Seite DslCheck die Ressourcen der Autocompletion.“ 1. Request 2. Request gZip 1. Seite 2. Seite
  35. 35. Wenige HTTP-Requests 15 20 Requests 0 5 10 Vorher Nachher Requests*
  36. 36. Wenige HTTP-Requests Requests Vorher Nachher
  37. 37. Minimierung Original Optimierte Version /**** zip:/home/servlet/pfixschlundAS_b/style/reset.css */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote, pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s ,samp,small,strike,strong,sub,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,leg end,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0 ;font-weight:inherit;font-style:inherit;font-size:100%;font- family:inherit;vertical-align:baseline;} sup{line-height:0;font- size:60%;}body{line-height:1;color:black;background:white;}ol,ul{list- style:none;}table{border-collapse:separate;border-spacing:0;}caption, th,td{text-align:left;fontweight:normal;}blockquote:before,blockquotetable, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; /*outline: 0;*/ font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; } th,td{text-align:left;fontweight:normal;}blockquote:before,blockquote :after,q:before,q:after{content:"";}blockquote,q{quotes:"" "";}.clearfix: after{content:".";display:block;height:0;clear:both;visibility:hidden;}/* Hides from IE-mac */ .clearfix{display:block;}/* End hide from IE-mac */ #skipmenu{position:absolute;top:10px;left:10px;width:180px;z- index:100;}a.skiptarget{display:block;width:0;height:0;overflow:hidden;}a .skip{fontsize:11px;texttransform:uppercase;textdecoration:none;}a.skip, a.skip:link,a.skip:visited{position:absolute;top:999em;}a.skip:focus,a.skip: active{outline:1px dotted #fff;color:#fff;position:absolute;top:0;left:0;}
  38. 38. Komprimierung gZip
  39. 39. Minimierung + Komprimierung Einsparung: 70% Komprimierung
  40. 40. Jasmin • Ergänzt Far Future Expires Header
  41. 41. Content Delivery Server (CDS) CSS IMG CDS Script HTML
  42. 42. Content Delivery Server (CDS) • Liefert sämtliche Media-Daten wie Grafiken, Flash, PDF usw. aus
  43. 43. Content Delivery Server (CDS) htdocsApache CDShtdocsApache Internet CDS
  44. 44. Far Future Expires Header 2,5 Sekunden! Far Future Expires Header: „Diese Ressource verändert sich für die nächsten 15 Jahre nicht und kann immer aus dem Cache bezogen werden.“
  45. 45. Far Future Expires Header „Wie erzwinge ich ein Neuladen, wenn sich die Ressource doch verändern sollte?“verändern sollte?“
  46. 46. „Auf der 1und1.de gibt es einen Anzeigefehler bei Usern, die einen Browser-Cache aktiviert haben. Wie können wir solche Fehler vermeiden?“
  47. 47. Far Future Expires Header „Wie erzwinge ich ein Neuladen, wenn sich die Ressource doch verändern sollte?“
  48. 48. Far Future Expires Header /img/footer/ui-logo.gif Publish Internet MD5-Hash /img/footer/ui-logo.gif 32j4g23j4-ui-logo.gif Sync auf CDS <img src=„/img/footer/ui-logo.gif“> url(/img/footer/ui-logo.gif) <img src=„http://uicdn.net/32j4g23j4-ui-logo.gif“> url(http://uicdn.net/32j4g23j4-ui-logo.gif) CDS Expires Header HTML
  49. 49. Content Delivery Server (CDS) 3 3,5 4 4,5 Load Time* 0 0,5 1 1,5 2 2,5 3 Vorher Nachher Load Time * Aufruf mit Cache, Dulles (USA), IE7, 1.5 MBit
  50. 50. Content Delivery Server (CDS) 25 30 35 40 Requests* 0 5 10 15 20 25 Vorher Nachher Requests * Aufruf mit Cache, Dulles (USA), IE7, 1.5 MBit
  51. 51. Content Delivery Server (CDS) Vorher Nachher 82% weniger 304-Responses
  52. 52. Content Delivery Server (CDS) Sync auf CDSSync auf CDS CDS
  53. 53. Content Delivery Server (CDS) Optimierung + CDS Optimierung + Sync auf CDS
  54. 54. Smush.it http://developer.yahoo.com/yslow/
  55. 55. Smush.it http://developer.yahoo.com/yslow/smushit/faq.html
  56. 56. Smush.it http://developer.yahoo.com/yslow/smushit/faq.html
  57. 57. Smush.it http://sylvana.net/jpegcrop/jpegtran/ http://pmt.sourceforge.net/pngcrush/ http://sylvana.net/jpegcrop/jpegtran/ http://www.imagemagick.org/script/index.php
  58. 58. Parallele Downloads
  59. 59. Content Delivery Server (CDS) 4 5 6 Load Time* 0 1 2 3 4 Vorher Nachher Load Time * Aufruf ohne Cache, Dulles (USA), IE7, 1.5 MBit
  60. 60. Warum eine eigene Domain? Darum
  61. 61. Warum eine eigene Domain? StartseiteStartseite Mobile Internet Eigene Homepage DSL
  62. 62. Warum eine eigene Domain? Startseite Mobile Internet Eigene Homepage DSL CDN
  63. 63. Warum eine eigene Domain? home.1und1.de/header/logo.png mobile.1und1.de/header/logo.png dsl.1und1.de/header/logo.png homepage.1und1.de/header/logo.png www.uicdn.net/header/43j2hg35-logo.png
  64. 64. Content Delivery Network Lenexa Karlsruhe Europa Atlantik Karlsruhe USA Atlantik
  65. 65. Content Delivery Server (CDS) http://www.youtube.com/watch?v=IWWBnJEsUtU „Larry Page hat einmal die Vision geäußert, Webseiten so schnell browsen zu können, wie man die Seiten in einem Hochglanzmagazin umblättert.“
  66. 66. Content Delivery Server (CDS)
  67. 67. onLoad: Webservice.getNextGraphics(); „Image Prefetching“
  68. 68. Kennzahlen „Welche Größe haben die Daten, welche von den verschiedenen Seiten eines Projekts abgerufen werden?“ „Werden Daten angefragt, die nicht verfügbar sind (404)?“ http://zoompf.com/2010-state-of-web-performance-report
  69. 69. CSS IMG Script HTML
  70. 70. Progressive Rendering
  71. 71. Progressive Rendering CSS an den Anfang JavaScript ganz ans Ende
  72. 72. Nicholas C. Zakas Ross Harmes Steven Leviathan Stoyan Stefanov http://oreilly.com/catalog/9780596802806 Julien Lecomte Matt Sweeney
  73. 73. http://vimeo.com/channels/fronteers10#16241085 Nicholas Zakas | High Performance Javascript | Fronteers 2010
  74. 74. <html> <head> <link rel=„stylesheet“ type=„text/css“ href=„some-styles-1.css“ /> <link rel=„stylesheet“ type=„text/css“ href=„some-styles-2.css“ /> <script type=„text/javascript“ src=„some-scripts-1.js“></script> <script type=„text/javascript“ src=„some-scripts-2.js“></script> </head> <body> … Script
  75. 75. <html> <head> <link rel=„stylesheet“ type=„text/css“ href=„some-styles-1.css“ /> <link rel=„stylesheet“ type=„text/css“ href=„some-styles-2.css“ /> <script defer type=„text/javascript“ src=„some-scripts-1.js“></script> <script defer type=„text/javascript“ src=„some-scripts-2.js“></script> </head> <body> … 4+ 3.5+ Script
  76. 76. <body> … <script type="text/javascript" src="js/LAB.js"></script> <script type="text/javascript"><!— $LAB .script(„some-scripts-1.js“).wait() .script(„some-scripts-2.js“); //--></script> </body> </html> Script
  77. 77. “The thing it does differently than most others is it allows you to express via the API calls when it is necessary to preserve execution order for dependencies.” http://labjs.com/ <script type="text/javascript" src="js/LAB.js"></script> <script type="text/javascript"><!— $LAB .script(„some-scripts-1.js“).wait() .script(„some-scripts-2.js“); //--></script>
  78. 78. Tools
  79. 79. WEBPAGETEST www.webpagetest.org
  80. 80. WEBPAGETEST www.webpagetest.org
  81. 81. WEBPAGETEST www.webpagetest.org
  82. 82. WEBPAGETEST www.webpagetest.org
  83. 83. WEBPAGETEST www.webpagetest.org
  84. 84. WEBPAGETEST
  85. 85. WEBPAGETEST
  86. 86. WEBPAGETEST
  87. 87. WEBPAGETEST
  88. 88. YSlow http://developer.yahoo.com/yslow/
  89. 89. YSlow
  90. 90. Page Speed http://code.google.com/speed/page-speed/
  91. 91. Page Speed http://code.google.com/speed/page-speed/docs/rules_intro.html
  92. 92. HTTP Fox http://code.google.com/p/httpfox/
  93. 93. HTTP Fox
  94. 94. Firebug • Firebug (Netzwerk Monitoring) – Fortschrittsanalyse – Filter nach Ressourcen-Typ – Cache-Analyse– Cache-Analyse – HTTP Headers – XMLHttpRequest Monitoring
  95. 95. Firebug
  96. 96. Kennzahlen
  97. 97. CSS IMG Script HTML
  98. 98. Wie groß sind die ausgelieferten Ressourcen? Pro Seite Pro Applikation Gibt es Ausreißer? Werden Ressourcen nicht gefunden? Gibt es überflüssige Ressourcen?
  99. 99. Jasmin CSS / JS CDS Grafiken / Flash Apache HTML Größe Fehlende Ressourcen Größe Ungenutzte CSS-Selektoren JavaScript-Fehler Fehlende Ressourcen Überflüssige Ressourcen Größe Fehlende Seiten
  100. 100. Jasmin CSS / JS CDS Grafiken / Flash Apache HTML Größe Fehlende Ressourcen Größe Ungenutzte CSS-Selektoren JavaScript-Fehler Fehlende Ressourcen Überflüssige Ressourcen Größe Fehlende Seiten
  101. 101. JavaScript-Fehler
  102. 102. JavaScript-Fehler
  103. 103. JavaScript-Fehler
  104. 104. JavaScript-Fehler
  105. 105. Fehlende Seiten Location Referrer
  106. 106. Nö…
  107. 107. https://www.google.com/webmasters/tools/ http://code.google.com/apis/webmastertools/
  108. 108. To avoid overloading our servers, only 25 issues can be returned at a time. Return more than 25 crawling issues? Jonathan Simon: […] it‘s propably time to consider raising it. I‘ll discuss your feedback with the team.
  109. 109. http://code.google.com/apis/webmastertools/Logfiles
  110. 110. start = new Date(); time = new Date() - start; if (time > 30000) { log(page, time); }
  111. 111. Fragen? nico.steiner@1und1.de @sensationalseo www.nicosteiner.de www.slideshare.net/n.steiner
  112. 112. Vielen Dank für eure Aufmerksamkeit! nico.steiner@1und1.de @sensationalseo www.nicosteiner.de www.slideshare.net/n.steinerhttp://www.flickr.com/photos/ben30/4028840988/

×