Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Frontend     Performance          Jakob Schröter20.01.2012 @ Hochschule der Medien Stuttgart
Frontend Engineer                                      Kajona CMSBachelor of Computer  Science in Media                Mas...
PERFORMANCE
FRONTEND PERFORMANCE
LADEZEIT?          Spalte2                    1000 ms          500 ms 100 ms50 ms
Einfluss der Ladezeit             Glückliche User               Mehr User              Mehr Umsatz   Kurze  Ladezeit
Einfluss der Ladezeit    Amazon                                  +100 ms                                                  ...
User Experience Empfohlene Ladezeit:           – vor 2006: unter 8 Sekunden Jupiter research           – 2006: unter 4 Sek...
10 Golden Principles of                                    Successful Web Apps                                            ...
SEO -> WPO• Ist Search Engine Optimization ist ein  Thema von gestern?• Performance beeinflusst Google Ranking  seit April...
„Das Internet ist nicht                                      schneller geworden“http://docs.google.com/a/chromium.org/view...
PERFORMANCE OPTIMIERENMessen: z.B. JMeterBottlenecks finden: Profiling des BackendsCode optimieren / mehr Server-Hardware ...
Was wollen wir messen?Wahrgenommene Wartezeit!   = Inhalt ist für den Nutzer sichtbar   = Nutzer denkt, er kann interagieren
Performance messen #1• HTML-Seite generiert und          • Definiertes DOM-Element  geladen                             si...
Performance messen #2• verschiedene Clients• verschiedene Locations• verschiedenen Anbindungen• Performance kontinuierlich...
20%      80%
Wahrgenommene Ladezeit      einer Webseite20%                   80%
Wahrgenommene Ladezeit         einer Webseite20%Server                      80%                      Client
Wahrgenommene Ladezeit         einer Webseite20%Server                      80%                      Client
WAS PASSIERT IM BROWSER?
Your best friends•   „F12“-Tools•   Firebug•   Yahoo YSlow•   Google PageSpeed• Speed limiter: Webscarab• WebPageTest.org•...
HTML (Server)   Resources (Client)
HTTP Requests are expensive!ANZAHL DER REQUESTS REDUZIEREN
HTTP Requests reduzieren• Redirects vermeiden• Dateien sinnvoll kombinieren  – base.js, dragndrop.js, upload.js, …  – base...
CSS Spritessprites.png                                        40px                              110px.button {  width: 10p...
Intelligentes Browser-Caching          Use HTTPs potential!• Achtung, ETag!                   GET File     Server         ...
Intelligentes Browser-Caching• Besser: Expires-Header                      GET File     Server                            ...
Supercache: Gemeinsames CDN• Google CDN  – //ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js• Aber: Single Point ...
Cache busters•   base-12.js•   styles-67.css•   background-890.png•   890/background.png•   background.png?890
HTTP Requests are expensive!REQUESTS VERKLEINERN
Compression & Minifying• alles was geht: HTML, CSS, JS, JSON, XML,  …aber keine Bilder, PDFs, SWFs, …• Komprimieren  – mod...
Compression & Minifyinghdm-stuttgart.de                                       Komprimiert         Original Minified Kompri...
Compression & Minifyinglaut.fm
Compression & Minifying                         netflix.com “Adopting a single optimization, gzip compression, resulted in...
IMAGEOPTIMIZATION
Image Optimization          JPG         PNG     GIF         Farbanzahl• Richtige Abmessungen + „Für Web speichern“• CSS-Sp...
smushit.comhdm-stuttgart.de              130 x 86 px
smushit.comspiegel.de
smushit.comkoeln.de
smushit.comlaut.de
smushit.comlaut.fm
HDM-STUTTGART.DE       -325 KB     Compression & Minifying        -97 KB     Image Optimization       -422 KB     -49%
HTTP Requests are expensive!REIHENFOLGE DER REQUESTS
Order of loading resources<script> blockiert weitere Downloads<script> blockiert Rendering-> Reihenfolge beachten-> defer/...
Order of loading resources                                  DOM-ready         onLoad                 Zwingend            S...
PRELOADING
Preloading• Z.B. Loginseite
LAZY-LOADING
Post-loading
Asynchrone Requests• Inhalte per AJAX nachladen• Testen! ;-)
Domain sharding / CDN• Schnellere Antwortzeiten/Übertragungsraten   – Schlanker Webserver   – Cookie-freie Domain• Paralle...
Usability• Kann die Nutzerführung optimiert werden?• Kann der Nutzer bereits etwas tun, während  er warten muss?
Advanced WPONOCH NICHT SCHNELL GENUG?
Rendering optimieren• Progressive Rendering / Early Flushing• Anzahl der DOM-Element reduzieren• Reflow optimieren
JavaScript optimieren• JavaScript Best Practices• DOM-Manipulationen• Memory Leaks fixen• Verzögertes Parsen / Ausführen<s...
CSS optimieren• Selektoren sind unterschiedlich schnell             .myStyle { }             ul li .myStyle { }• CSS brauc...
Chrome Speed Tracer
Strangeloop Site OptimizerFokus auf der vom Nutzer wahrgenommenen Ladezeit.Analysiert Nutzerverhalten und lädt Ressourcen ...
Web Performance Optimization„IST JA GANZ SCHÖNAUFWÄNDIG…“
Sehr gute Tools verfügbar• Yahoo YSlow• Google PageSpeed• Dynatrace AJAX Edition• WebPageTest.org
Vieles lässt sich automatisierenIntegration in den Deployment/Build-Prozess  – JS/CSS-Dateien kombinieren  – Compression &...
Auf dem Server• On-the-fly  – Mod_deflate  – Mod_pagespeed  – WEBO Site SpeedUp (PHP)
Externe (kommerzielle) Services• On-the-fly in der Cloud  – blaze.io  – strangeloop.com  – Google Page Speed Service• Moni...
HTML 5 + CSS 3 + JavaScript• CSS 3   – CSS statt Grafiken   – Canvas• HTML 5   –   Network Timing API   –   Web Storage st...
Multiplexed streams          Request prioritization      Server push & hint                            HTTP header compres...
Entlastet auch         Enorme                   die Server                 Basics sind einfach       Auswirkungen Best Pra...
Weiterführend• Bücher:   – Steve Souders: High Performance Websites   – Steve Souders: Even Faster Websites• Test-Webseite...
Beispiele aus der Praxis
Dynamische Bildauslieferung• /image.php?src=image.jpg&width=200• Standard:  – Kein Client-seitiges Caching  – Evtl. Server...
Dynamische Bildauslieferung• /image/w200/11259834/hdm-stuttgart.jpg• Optimale Lösung:  – Server-seitiges Caching  – Client...
Best practices• Nicht alles muss neu erfunden werden  – HTML5 Boilerplate verwenden• data-URLs• http://caniuse.com/• Memor...
Frontend     Performance        Jakob Schröterjakob.schroeter@seitenbau.com
Frontend Performance @ Hochschule der Medien Stuttgart
Frontend Performance @ Hochschule der Medien Stuttgart
Frontend Performance @ Hochschule der Medien Stuttgart
Frontend Performance @ Hochschule der Medien Stuttgart
Frontend Performance @ Hochschule der Medien Stuttgart
Frontend Performance @ Hochschule der Medien Stuttgart
Upcoming SlideShare
Loading in …5
×

Frontend Performance @ Hochschule der Medien Stuttgart

1,317 views

Published on

Vortrag zum Thema Frontend Performance vom 20.01.2012 an der Hochschule der Medien Stuttgart

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Frontend Performance @ Hochschule der Medien Stuttgart

  1. 1. Frontend Performance Jakob Schröter20.01.2012 @ Hochschule der Medien Stuttgart
  2. 2. Frontend Engineer Kajona CMSBachelor of Computer Science in Media Master of Computer Science and Media Wanderer Schlagzeuger
  3. 3. PERFORMANCE
  4. 4. FRONTEND PERFORMANCE
  5. 5. LADEZEIT? Spalte2 1000 ms 500 ms 100 ms50 ms
  6. 6. Einfluss der Ladezeit Glückliche User Mehr User Mehr Umsatz Kurze Ladezeit
  7. 7. Einfluss der Ladezeit Amazon +100 ms 1 % weniger Verkäufe1 Yahoo +400 ms 5-9 % weniger Zugriffe1 Google +500 ms 20 % weniger Zugriffe1 Bing +2000 ms 4,3 % weniger Umsatz/Nutzer2 Shopzilla -5000 ms 25 % mehr Zugriffe 7-12 % mehr Umsatz 50 % weniger Hardware3 Mozilla -2200 ms 15,4 % mehr Downloads41 http://www.websiteoptimization.com/speed/tweak/psychology-web-performance/2 http://www.slideshare.net/dyninc/the-user-and-business-impact-of-server-delays-additional-bytes-and-http-chunking-in-web-search-presentation3 http://radar.oreilly.com/2009/07/velocity-making-your-site-fast.html4 http://blog.mozilla.com/metrics/category/website-optimization/
  8. 8. User Experience Empfohlene Ladezeit: – vor 2006: unter 8 Sekunden Jupiter research – 2006: unter 4 Sekunden Jupiter research – 2009: unter 2 Sekunden Forrester Research „Jede Website, deren Ladezeit eine Sekunde überschreitet, tut dem Benutzer weh.“ Jakob Nielsenhttp://www.stevesouders.com/blog/2010/05/07/wpo-web-performance-optimization/
  9. 9. 10 Golden Principles of Successful Web Apps Speed Instant Utility Software is Media Less is More Make it Programmable Make it Personal RESTful Discoverabilty Clean Playfulhttp://thinkvitamin.com/web-apps/fred-wilsons-10-golden-principles-of-successful-web-apps/
  10. 10. SEO -> WPO• Ist Search Engine Optimization ist ein Thema von gestern?• Performance beeinflusst Google Ranking seit April 2010
  11. 11. „Das Internet ist nicht schneller geworden“http://docs.google.com/a/chromium.org/viewer?a=v&pid=sites&srcid=Y2hyb21pdW0ub3JnfGRldnxneDoxMzcyOWI1N2I4YzI3NzE2
  12. 12. PERFORMANCE OPTIMIERENMessen: z.B. JMeterBottlenecks finden: Profiling des BackendsCode optimieren / mehr Server-Hardware / bessere Server-Anbindung
  13. 13. Was wollen wir messen?Wahrgenommene Wartezeit! = Inhalt ist für den Nutzer sichtbar = Nutzer denkt, er kann interagieren
  14. 14. Performance messen #1• HTML-Seite generiert und • Definiertes DOM-Element geladen sichtbar• DOM-Ready-Event • „Above the Fold“ (AFT) DOM ist aufgebaut, Inhalt evtl. keine Änderungen mehr am sichtbar sichtbaren Inhalt• OnLoad-Event alle Ressourcen wurden geladen, Inhalt evtl. sichtbar
  15. 15. Performance messen #2• verschiedene Clients• verschiedene Locations• verschiedenen Anbindungen• Performance kontinuierlich messen…
  16. 16. 20% 80%
  17. 17. Wahrgenommene Ladezeit einer Webseite20% 80%
  18. 18. Wahrgenommene Ladezeit einer Webseite20%Server 80% Client
  19. 19. Wahrgenommene Ladezeit einer Webseite20%Server 80% Client
  20. 20. WAS PASSIERT IM BROWSER?
  21. 21. Your best friends• „F12“-Tools• Firebug• Yahoo YSlow• Google PageSpeed• Speed limiter: Webscarab• WebPageTest.org• ShowSlow.com
  22. 22. HTML (Server) Resources (Client)
  23. 23. HTTP Requests are expensive!ANZAHL DER REQUESTS REDUZIEREN
  24. 24. HTTP Requests reduzieren• Redirects vermeiden• Dateien sinnvoll kombinieren – base.js, dragndrop.js, upload.js, … – base.css, dashboard.css, lightbox.css• Auch Grafiken – CSS Sprites – button.png, button_hover.png, button_active.png, …
  25. 25. CSS Spritessprites.png 40px 110px.button { width: 10px; height: 10px; background-image: url(sprites.png); background-position: 100px 40px;}.button:hover { background-position: 110px 40px;}
  26. 26. Intelligentes Browser-Caching Use HTTPs potential!• Achtung, ETag! GET File Server Client File GET File, if modified Server Client 304 not modified File
  27. 27. Intelligentes Browser-Caching• Besser: Expires-Header GET File Server Client File Expires 01.01.2013 00:00 Server Client File
  28. 28. Supercache: Gemeinsames CDN• Google CDN – //ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js• Aber: Single Point Of Failure – Asynchron laden – Lokales Fallback
  29. 29. Cache busters• base-12.js• styles-67.css• background-890.png• 890/background.png• background.png?890
  30. 30. HTTP Requests are expensive!REQUESTS VERKLEINERN
  31. 31. Compression & Minifying• alles was geht: HTML, CSS, JS, JSON, XML, …aber keine Bilder, PDFs, SWFs, …• Komprimieren – mod_deflate• Minimieren – YUICompressor, UglifyJS, ...
  32. 32. Compression & Minifyinghdm-stuttgart.de Komprimiert Original Minified Komprimiert + Minified HTML 101 KB 97 KB 17 KB 16 KB CSS 90 KB 68 KB 19 KB 14 KB JS 243 KB 195 KB 73 KB 63 KB 434 KB 360 KB 109 KB 93 KB-341 KB ≈ -79%!
  33. 33. Compression & Minifyinglaut.fm
  34. 34. Compression & Minifying netflix.com “Adopting a single optimization, gzip compression, resulted in a 13-25% speedup and cut their outbound network traffic by 50%.”http://www.stevesouders.com/blog/2010/05/07/wpo-web-performance-optimization/
  35. 35. IMAGEOPTIMIZATION
  36. 36. Image Optimization JPG PNG GIF Farbanzahl• Richtige Abmessungen + „Für Web speichern“• CSS-Sprites
  37. 37. smushit.comhdm-stuttgart.de 130 x 86 px
  38. 38. smushit.comspiegel.de
  39. 39. smushit.comkoeln.de
  40. 40. smushit.comlaut.de
  41. 41. smushit.comlaut.fm
  42. 42. HDM-STUTTGART.DE -325 KB Compression & Minifying -97 KB Image Optimization -422 KB -49%
  43. 43. HTTP Requests are expensive!REIHENFOLGE DER REQUESTS
  44. 44. Order of loading resources<script> blockiert weitere Downloads<script> blockiert Rendering-> Reihenfolge beachten-> defer/async-Attribute bzw. Loading-Tools nutzen
  45. 45. Order of loading resources DOM-ready onLoad Zwingend Sichtbare Ergänzende CSS notwendige Scripts Pre-/Lazy-Loading Grafiken Scriptsbase.css modernizr.min.js background.jpg dragndrop.js button.png lightbox.js <head> <body> Dynamisch per JS
  46. 46. PRELOADING
  47. 47. Preloading• Z.B. Loginseite
  48. 48. LAZY-LOADING
  49. 49. Post-loading
  50. 50. Asynchrone Requests• Inhalte per AJAX nachladen• Testen! ;-)
  51. 51. Domain sharding / CDN• Schnellere Antwortzeiten/Übertragungsraten – Schlanker Webserver – Cookie-freie Domain• Parallele Downloads (für ältere Browser) – nur 2 Requests per Host s-static.ak.facebook.com
  52. 52. Usability• Kann die Nutzerführung optimiert werden?• Kann der Nutzer bereits etwas tun, während er warten muss?
  53. 53. Advanced WPONOCH NICHT SCHNELL GENUG?
  54. 54. Rendering optimieren• Progressive Rendering / Early Flushing• Anzahl der DOM-Element reduzieren• Reflow optimieren
  55. 55. JavaScript optimieren• JavaScript Best Practices• DOM-Manipulationen• Memory Leaks fixen• Verzögertes Parsen / Ausführen<script> /* function weNeedThisLater () {} var weNeedThisLater2 = 123; */</script>
  56. 56. CSS optimieren• Selektoren sind unterschiedlich schnell .myStyle { } ul li .myStyle { }• CSS braucht Rechenleistung – border-radius, box-shadow, text-shadow, background-image, …http://perfectionkills.com/profiling-css-for-fun-and-profit-optimization-notes/
  57. 57. Chrome Speed Tracer
  58. 58. Strangeloop Site OptimizerFokus auf der vom Nutzer wahrgenommenen Ladezeit.Analysiert Nutzerverhalten und lädt Ressourcen bereits vor.
  59. 59. Web Performance Optimization„IST JA GANZ SCHÖNAUFWÄNDIG…“
  60. 60. Sehr gute Tools verfügbar• Yahoo YSlow• Google PageSpeed• Dynatrace AJAX Edition• WebPageTest.org
  61. 61. Vieles lässt sich automatisierenIntegration in den Deployment/Build-Prozess – JS/CSS-Dateien kombinieren – Compression & Minifying – Caching und Cache busters – Bildoptimierung – Verteilung auf CDN
  62. 62. Auf dem Server• On-the-fly – Mod_deflate – Mod_pagespeed – WEBO Site SpeedUp (PHP)
  63. 63. Externe (kommerzielle) Services• On-the-fly in der Cloud – blaze.io – strangeloop.com – Google Page Speed Service• Monitoring – Gomez
  64. 64. HTML 5 + CSS 3 + JavaScript• CSS 3 – CSS statt Grafiken – Canvas• HTML 5 – Network Timing API – Web Storage statt Cookies – Web Workers – Web Sockets• JavaScript!!!
  65. 65. Multiplexed streams Request prioritization Server push & hint HTTP header compressionWas Google hat, was wir (noch) nicht haben…GOOGLE + CHROME use SPDY An experimental protocol for a faster web ~50% reduction in page load time
  66. 66. Entlastet auch Enorme die Server Basics sind einfach Auswirkungen Best Practices Frontend Performance beachten &weiter optimieren matters! Kosten/Nutzen abwägen Direkte Verbesserung für die Nutzer don‘t fiddle – analyse first Mobiles Internet RIA
  67. 67. Weiterführend• Bücher: – Steve Souders: High Performance Websites – Steve Souders: Even Faster Websites• Test-Webseite: http://stevesouders.com/cuzillion• http://developer.yahoo.com/performance/• http://code.google.com/intl/de-DE/speed/
  68. 68. Beispiele aus der Praxis
  69. 69. Dynamische Bildauslieferung• /image.php?src=image.jpg&width=200• Standard: – Kein Client-seitiges Caching – Evtl. Server-seitiges Caching – PHP wird ausgeführt – Evtl. Session + Datenbank-Verbindung
  70. 70. Dynamische Bildauslieferung• /image/w200/11259834/hdm-stuttgart.jpg• Optimale Lösung: – Server-seitiges Caching – Client-seitiges Caching • Cache Header + Expires Header + HTTP 304 Not Modified • Cache buster + Redirect für alte URLs – PHP nur wenn wirklich benötigt • Mod_rewrite
  71. 71. Best practices• Nicht alles muss neu erfunden werden – HTML5 Boilerplate verwenden• data-URLs• http://caniuse.com/• Memory Leaks im Client• Messen was auf dem Client passiert
  72. 72. Frontend Performance Jakob Schröterjakob.schroeter@seitenbau.com

×