Faster websites

779 views

Published on

These are the slides for my talk at http://webandphp.com/conference/FasterWebsites
#webandphpcon

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

No Downloads
Views
Total views
779
On SlideShare
0
From Embeds
0
Number of Embeds
32
Actions
Shares
0
Downloads
9
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • Hallo Vorstellung Und mal ganz ehrlich: Jeder hasst langsame Websites. Was tun wir dagegen? Das was die Softwareentwickler immer machen: Wir erfinden eine 3-Buchstaben-Abkürzung
  • Es gibt auch jede Menge interessante Marktstudien zum Thema web performance. Ich hab' mal ein paar Hightlights zusammengetragen.
  • Pro Sekunde Studie von 2008, nicht besser geworden
  • Am spannendsten fand' ich diese Grafik, die die Emotionale Seite zeigt. Zuverlässigkeit? Aber durchaus vorstellbar
  • Auch Google hat sich damit beschäftigt. Sie behaupten sogar...
  • Schließlich haben sie vor 3 Jahren sogar Ihren Ranking-Algorithmus angepasst.
  • Tja … und dann hat sich in den letzen Jahren noch eine Änderung ergeben. AQ: (Hände oben lassen) 1. Wer besitzt ein IPhone? 2. Irgend eines mit Android? 3. Windows Mobile Phone? 4. Anderes Smartphone? 5. Wer von Ihnen findet dass Surfen auf dem Handy immer angenehm schnell? mobile Anbindungen hinken hinterher – deswegen ist hier PerformanceOptimierung noch wichtiger Die Gute Nachricht ist: Als Trainer und Consultant komme ich sehr viel herum und hab' festgestellt – Entwickler...
  • Es gibt auch jede Menge interessante Marktstudien zum Thema web performance. Ich hab' mal ein paar Hightlights zusammengetragen.
  • Also die meisten Entwickler
  • .. lieben Performance. Manche sind gerade zu besessen davon. Ferrari Notebook
  • Es wird also gebastelt und geschraubt: SQL Queries optimiert DB-Schema angepasst Funktionen ge-inlined Da wird optimiert bis zum umfallen um von 500 Req/s auf 510 Req/s zu kommen
  • Das Ergebnis ist allerdings nicht immer wünschenswert
  • Was leider immer noch oft vergessen wird. Wer kennt dieses Zitat? Wann war das?
  • D.h. Es hilft nicht vorab blind zu optimieren. Es kommt drauf an, an der richtigen Stelle zu optimieren
  • Dazu hat Steve Souders was zu sagen – speziell was den Web Bereich betrifft. Er hat nämlich 2007 festgestellt, dass 80%-90% der Wartzeit beim Anzeigen einer Webseite im Frontend verbrannt wird Er nennt das die
  • Verdeutlichung am sogenannten Wasserfalldiagramm Es zeigt... Generierung des HTML-Dokuments auf dem Server: SQL, Businesslogik... Der Ganze Rest: Laden von Bildern, JavaScript, CSS, Rendern passiert im Frontend
  • Auf dieser Basis Untersuchung letzes Jahr wiederholt … stellt fest, haut immer noch hin
  • Eine andere interessante Feststellung: Backend Opt. => Skalierung viele parallel Visitors Front Opt. => Single User exp. Beginnend mit dem 1. User! Viele Visitors oder Jeder Einzelne Quantität vs. Qualität Starting with First User
  • Schauen wir und mal typische Probleme an
  • Aber was tue ich, wenn die Ladezeit zu hoch ist? Das liegt ja nicht nur an meiner Hardware Kauf ich dann meinen Besuchern bessere Hardware? Oder eine schnelle Anbindung?
  • Anlehnung an SEO AQ: 1. Wer hat sich schon mal mit dem Thema beschäftigt → oder Aufklärungsarbeit 2. angewandt? 3. einige Erfahrung → (Raumwechsel :) Für die anderen: Warum ist web performance wichtig? Hören wir uns an, was Usability Experte Nielsen dazu zu sagen hat
  • Dazu erstmal ein paar Grundlagen Wie bei allen Optimerungen Nicht Blind, Spec first, Ziel, wo wollen wir hin? Wann können wir aufhören? Was ist gut genug? Sonst weiß ich nicht, wann ich aufhören muss zu optimieren Wenn wir das haben...
  • Dazu erstmal ein paar Grundlagen Wie bei allen Optimerungen Nicht Blind, Spec first, Ziel, wo wollen wir hin? Wann können wir aufhören? Was ist gut genug? Sonst weiß ich nicht, wann ich aufhören muss zu optimieren Wenn wir das haben... Spec first Know when to stop
  • Don't optimize just somewhere Find the bottleneck and remove it
  • Deswegen sind entsprechende Werkzeuge ganz wichtig. Das eine ist RUM – nein nicht das Getränk. Sondern Real User Metrics. Ich möchte wissen, wie lange dauert es wirklich bis meine Anwender eine Website sehen.
  • Deswegen sind entsprechende Werkzeuge ganz wichtig. Das eine ist RUM – nein nicht das Getränk. Sondern Real User Metrics. Ich möchte wissen, wie lange dauert es wirklich bis meine Anwender eine Website sehen.
  • Zum einen Latenz: Round Trip Time bedeuted: Die Zeit vom Absenden des Requests bis ich das erste Byte erhalte Und zum anderen Durchsatz
  • Zum einen Latenz: Round Trip Time bedeuted: Die Zeit vom Absenden des Requests bis ich das erste Byte erhalte Und zum anderen Durchsatz
  • Es gibt Unmengen an Optimierungstechniken und Optimierungs-Werkzeugen. Ich hab' für den Vortrag nur ein paar wenige ausgewählt
  • Souder Klassiker Oldi von 2007 Wird leider immer noch oft ignoriert Sehr leicht anzuwenden, Tolle Ergebnisse Vorführung
  • Sehr einfach .. zu einfach Business Kritische sind ok. Aber oft werden Snippets ohne Nachdenken gepastet. Externes JS, kostet oft viel Zeit
  • Eigentlich übertrieben das eine Technik zu nennen. Ok – sometimes there business critical, and you really really need them
  • Just don't overuse them – think about External code can be very expensive.
  • In den letzten Jahren ... 1 MB JS Script ist nicht ungewöhnlich Große Website, mehrere Teams, Jede hat ihre Lieblingsbibliothek
  • Das Problem hat auch TF erkannt Sammlung von JS-Mini Bibliotheken ins Leben gerufen Zum Anderen setzen viele Leute jQuery ein. Zepto ist ein API-Kompatibler jQuery-Ersatz
  • Souder Klassiker Oldi von 2007 Wird leider immer noch oft ignoriert Sehr leicht anzuwenden, Tolle Ergebnisse Vorführung
  • Ein Problem: Was ist wenn sich an den Dateien (z.b. Bildern) nun tatsächlich was ändert. Der Browser frägt sie jetzt nicht mehr an. Beeindruckende Sammlung von Buzzwords Aber ganz einfache Technik
  • Das ist gängige Praxis, aber... ...Nicht gut genug. JavaScript kann immer noch das rendering blockieren. Besser Async, kein document.writes! Das JS muss so programmiert sein, dass es nicht während des Seitenaufbaus benötigt wird SS hat die Technik nicht erfunden, aber eine sehr gute Variante in seinem Blog beschrieben Gesehen zum ersten mal bei Google Analytics
  • Ja
  • Das haben wir 1997 schon gemacht
  • Faster websites

    1. 1. Faster Websites by Optimizing on the Client Dipl.-Inf. (FH) Marco Emrich Sept. 2013
    2. 2. Slow Websites
    3. 3. http://www.flickr.com/photos/pyxopotamus/2758466665/sizes/o/in/photostream/
    4. 4. http://www.flickr.com/photos/reid_rosenberg/5616618789/sizes/l/
    5. 5. http://www.flickr.com/photos/decaf/31866493/sizes/l/
    6. 6. Jakob Nielsen http://en.wikipedia.org/wiki/File:Jakob_Nielsen_1.jpg http://www.nngroup.com/articles/website-response-times/ „Even a few seconds' delay is enough to create an unpleasant user experience“ http://visual.ly/your-brain-slow-website
    7. 7. http://www.nngroup.com/articles/website-response-times/ http://visual.ly/your-brain-slow-website
    8. 8. Studies
    9. 9. „67% of consumers cite slow websites as the main cause of basket abandonment“ http://econsultancy.com/de/blog/11274-67-of-consumers-cite-slow-websites-as-the-main-cause-of-basket-abandonment
    10. 10. http://www.aberdeen.com/Aberdeen-Library/5136/RA-performance-web-application.aspx https://thestrangeloop.com/ http://conversionxl.com/11-low-hanging-fruits-for-increasing-website-speed-and-conversions/#.
    11. 11. „57% of online shoppers will wait 3 seconds or less before abandoning the site“ http://connect.phocuswright.com/2010/06/phocuswrightakamai-study-on-travel-site-performance/
    12. 12. http://theultralinx.com/2012/11/people-react-slow-websites-infographic.html
    13. 13. „Google engineers found that users begin to get frustrated with a site after waiting just 400 milliseconds – literally the blink of an eye – for web pages to load.“ http://www.nytimes.com/2012/03/01/technology/impatient-web-users-flee-slow-loading-sites.html?_r=1
    14. 14. Google: „today we're including a new signal in our search ranking algorithms: site speed“ http://googlewebmastercentral.blogspot.de/2010/04/using-site-speed-in-web-search-ranking.html April 2010
    15. 15. The Mobile Challenge http://www.flickr.com/photos/cizake/4164756091/sizes/o/in/photostream/
    16. 16. Developers
    17. 17. http://www.flickr.com/photos/el_jardineiro/2086608055/
    18. 18. http://www.flickr.com/photos/philipbitnar/3194364095/sizes/o/in/photostream/
    19. 19. http://www.flickr.com/photos/takens/6163883707/sizes/o/in/photostream/
    20. 20. http://en.wikipedia.org/wiki/File:KnuthAtOpenContentAlliance.jpg „premature optimization is the root of all evil“
    21. 21. http://en.wikipedia.org/wiki/File:KnuthAtOpenContentAlliance.jpg „premature optimization is the root of all evil“ 1974
    22. 22. http://nextberlin.eu/person/steve-souders/ Steve Souders 2007 The Golden Performance Rule „80-90% of the end-user response time is spent on the frontend.“ http://www.stevesouders.com/blog/2012/02/10/the-performance-golden-rule/
    23. 23. http://www.stevesouders.com/blog/2012/02/10/the-performance-golden-rule/
    24. 24. http://www.stevesouders.com/blog/2012/02/10/the-performance-golden-rule/ 2012
    25. 25. Backend Frontend Sustain more Concurrent Users Better Experience Optimization at ...
    26. 26. Too much Concurrent Users ?
    27. 27. Too much Concurrent Users 1. Buy better hardware
    28. 28. Too much Concurrent Users 1. Buy better hardware 2. Optimize Backend
    29. 29. Bad Loading/Response Time 1. Buy better hardware 2. Optimize Backend ? Too much Concurrent Users
    30. 30. WPO Web Performance Optimization
    31. 31. Some Basics
    32. 32. Don't overengineerhttp://www.amazon.de/Wenger-Schweizer-Offiziersmesser-Messer-Schatulle/dp/B000R0JDSI
    33. 33. http://bit.ly/1dugfP0 start with a spec1 sec on empty cache Paris / DSL / Chrome
    34. 34. http://www.flickr.com/photos/cizake/4164756091/sizes/o/in/photostream/ Remove bottlenecks
    35. 35. Just one change at a time Measure WHAT Analyze WHY Optimize Repeat
    36. 36. Measure from the Outside
    37. 37. Don't trust lab results http://www.flickr.com/photos/janodecesare/9069301176/sizes/k/
    38. 38. Measure http://www.flickr.com/photos/ltdemartinet/2970944908/sizes/o/in/photostream/ Get RUM
    39. 39. Measure http://www.flickr.com/photos/ltdemartinet/2970944908/sizes/o/in/photostream/ Real User Metrics
    40. 40. Example Google Analytics
    41. 41. Example New Relic
    42. 42. Example WEBPAGETEST
    43. 43. Analyze from the Inside
    44. 44. Analyze Browser Developer Tools: Waterfall Diagram Chrome Developer Tools, Firebug, Dragonfly...
    45. 45. In-Browser Analytics https://developers.google.com/speed/pagespeed/ http://yslow.org/ YSLOW Page Speed Insights http://gtmetrix.com/ http://gtmetrix.com/
    46. 46. Latency (RTT) Optimize: Throughput vs. Latency Throughput
    47. 47. Latency (RTT) Throughput vs. Latency Client ServerRound Trip Time
    48. 48. Throughput vs. Latency Latency reduce requests
    49. 49. Throughput reduce file-size more parallel requests Throughput vs. Latency Latency reduce requests
    50. 50. Browser Caching
    51. 51. YSlow Statistic
    52. 52. Optimization Techniques & Tools
    53. 53. http://yslow.org/ https://developers.google.com/speed/ http://developer.yahoo.com/performance/rules.html
    54. 54. Technique 1: Less is More
    55. 55. Snippet Plague Facebook, Twitter, Google+, Google Analytics, Flickr, Youtube
    56. 56. Cure Don't use them
    57. 57. Cure Don't overuse them - think about it -
    58. 58. JavaScript-Explosion
    59. 59. Zepto & JS-Microframeworks http://microjs.com/ https://github.com/madrobby/zepto Thomas Fuchs
    60. 60. Technique 2: Far Future Expire Date http://developer.yahoo.com/performance/rules.html#expires
    61. 61. File.mtime(path).to_i.to_s Cachbusting per Creation TimeStamp Param <img alt="Header" height="304" src="/images/header.jpg?1337557561" width="996" /> http://www.sevenforge.com/2008/12/18/cache-busting-asset-id/
    62. 62. Cache Manifests <html manifest="example.appcache">   ... CACHE MANIFEST # 2010­06­18:v2 CACHE: /favicon.ico index.html stylesheet.css images/logo.png scripts/main.js NETWORK: login.php /myapi http://api.twitter.com FALLBACK: /main.py /static.html images/large/ images/offline.jpg *.html /offline.html http://www.html5rocks.com/en/tutorials/appcache/beginner/ http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html http://caniuse.com/offline-apps
    63. 63. Cache Manifests <html manifest="example.appcache">   ... CACHE MANIFEST # 2010­06­18:v2 CACHE: /favicon.ico index.html stylesheet.css images/logo.png scripts/main.js NETWORK: login.php /myapi http://api.twitter.com FALLBACK: /main.py /static.html images/large/ images/offline.jpg *.html /offline.html http://www.html5rocks.com/en/tutorials/appcache/beginner/ http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html http://caniuse.com/offline-apps All modern browsers &
    64. 64. Cache Manifests <html manifest="example.appcache">   ... CACHE MANIFEST # 2010­06­18:v2 CACHE: /favicon.ico index.html stylesheet.css images/logo.png scripts/main.js NETWORK: login.php /myapi http://api.twitter.com FALLBACK: /main.py /static.html images/large/ images/offline.jpg *.html /offline.html http://www.html5rocks.com/en/tutorials/appcache/beginner/ http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html http://caniuse.com/offline-apps All modern browsers &
    65. 65. Technique(s) 3: CSS & JS Merge, Minimize, Place, GZIP JsMin, Google Closure Compiler, UglifyJS, YUI Compressor... automatically in Rails
    66. 66. Technique 4: Async JavaScript-Loading http://calendar.perfplanet.com/2011/the-art-and-craft-of-the-async-snippet/ https://gist.github.com/1025811 http://mathiasbynens.be/notes/async-analytics-snippet https://developers.google.com/speed/docs/best-practices/rtt#PreferAsyncResources
    67. 67. <script>(function(d) {   var js = d.createElement('script');   js.src = "http://example.org/my.js";   (d.head || d.getElementsByTagName('head') [0]).appendChild(js); }(document));</script> for your scripts Stoyan Stefanov http://calendar.perfplanet.com/2011/the-art-and-craft-of-the-async-snippet/ Script Dom Element Technique
    68. 68. <script>(function(d, s, id) {   var js, fjs = d.getElementsByTagName(s)[0];   if (d.getElementById(id)) return;   js = d.createElement(s); js.id = id;   js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";   fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook­jssdk'));</script> external scripts Stoyan Stefanov http://calendar.perfplanet.com/2011/the-art-and-craft-of-the-async-snippet/
    69. 69. <script>  // Add a script element as a child of the body  function downloadJSAtOnload() {    var element = document.createElement("script");    element.src = "deferredfunctions.js";    document.body.appendChild(element);  }  // Check for browser support of event handling capability  if (window.addEventListener)    window.addEventListener("load", downloadJSAtOnload, false);  else if (window.attachEvent)    Window.attachEvent("onload", downloadJSAtOnload);  else window.onload = downloadJSAtOnload; </script> Async & Deferred https://developers.google.com/speed/docs/best-practices/payload#DeferLoadingJS
    70. 70. <script async src="http://example.org/my.js"></script> Async in HTML5 https://developer.mozilla.org/en/docs/Web/HTML/Element/script
    71. 71. <script async src="http://example.org/my.js"></script> Async in HTML5 https://developer.mozilla.org/en/docs/Web/HTML/Element/script 2228
    72. 72. Technique 5: Parallelize Requests
    73. 73. „There is a common misbelief that a single combined script performs best. Wrong“ http://headjs.com/
    74. 74. Parallel downloads are often faster 1000 kB 500 kB 500kb250 kB 250 kB
    75. 75. Parallel downloads are often faster No CDNs, like http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.0.min.js
    76. 76. Parallel downloads are often faster No CDNs, like http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.0.min.js iPhone3 caches 15kB, iPhone4/5: 25kB http://www.flickr.com/photos/miniyo73/8313902424/sizes/o/in/photostream/ http://www.yuiblog.com/blog/2008/02/06/iphone-cacheability/
    77. 77. head.js("/path/to/jquery.js",  "/google/analytics.js", "/js/site.js",  function() {      // all done   }); Headjs.com
    78. 78. RequireJS + Almond Optimize package-size Lazy Loading by AMD define(['jquery'] , function ($) { return function () {}; }); https://github.com/jrburke/almond http://requirejs.org/
    79. 79. Technique 6: CSS Sprites https://github.com/jakesgordon/sprite-factory https://github.com/flyerhzm/css_sprite http://www.hagenburger.net/BLOG/Lemonade-CSS-Sprites-for-Sass-Compass.html http://compass-style.org/help/tutorials/spriting/ http://csssprites.com/ http://csssprites.org/ http://documentcloud.github.com/jammit/ http://spriteme.org/
    80. 80. Video Demo Webpagetest.org http://www.webpagetest.org/video/compare.php?tests=130604_9V_174P,130604_SH_1746
    81. 81. marcoemrich77@googlemail.com https://github.com/marcoemrich/ @marcoemrich
    82. 82. http://www.flickr.com/photos/garyturner/4042962940/sizes/o/in/photostream/ wpc13.cnf.io
    83. 83. Technique 7: Preloading (Post-Onload Download) http://books.google.de/books?id=jRVlgNDOr60C&pg=PA59&lpg=PA59&dq="Post-Onload+Download"
    84. 84. feed the cache Async & Deferred with future expire headers (new Image()).src = '/path/to/image.png'
    85. 85. Google Analytics Visitor Flow
    86. 86. Google Analytics Visitor Flow
    87. 87. Future: Cache Manifests <html manifest="example.appcache">   ... http://docs.webplatform.org/wiki/tutorials/speed_best_practices „browsers can optimize that heavily, perhaps even precaching them ahead of your use.“ Paul Irish
    88. 88. http://www.flickr.com/photos/kins-garage/4025080233/sizes/z/in/photostream/Cover Bild:

    ×