Developer Convention 2011Web Performance Optimization   Jakob Schröter    http://www.jakob-schroeter.de/      http://www.s...
PERFORMANCE
WEB 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• Search Engine Optimization ist ein  Thema von gestern Steve Souders• Performance beeinflusst Google Ranking  s...
„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 ...
Aber: Was wollen wir messen?Wahrgenommene Wartezeit!   = Inhalt ist für den Nutzer sichtbar   = Nutzer denkt, er kann inte...
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.com•...
HTML (Server)   Ressources (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.6.4/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 ressources<script> blockiert weitere Downloads<script> blockiert Rendering-> Reihenfolge beachten-> defer...
Order of loading ressources                                  DOM-ready         onLoad                 Zwingend            ...
PRELOADING
Preloading• Z.B. Loginseite
LAZY-LOADING
Post-loading
Domain sharding / CDN• Schnellere Antwortzeiten/Übertragungsraten  – Schlanker Webserver  – Cookie-freie Domain• Parallele...
Advanced WPONOCH NICHT SCHNELL GENUG?
Advanced WPO• Rendering optimieren  – Progressive Rendering / Early Flushing  – Anzahl der DOM-Element reduzieren  – Reflo...
Chrome Speed Tracer
Strangeloop Site Optimizer                   Fokus auf der vom Nutzer wahrgenommenen Ladezeit.                   Analysier...
Web Performance Optimization„IST JA GANZ SCHÖNAUFWÄNDIG…“
Sehr gute Tools verfügbar• Yahoo YSlow• Google PageSpeed• Dynatrace AJAX Edition• WebPageTest.com
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  – strangeloopnetworks.com  – Google Page Speed Servi...
Multiplexed streams          Request prioritization      Server push & hint                            HTTP header compres...
Entlastet auch           Enorme                 die Server         Auswirkungen                               Basics sind ...
Weiterführend• Bücher:   – Steve Souders: High Performance Websites   – Steve Souders: Even Faster Websites• Test-Webseite...
Developer Convention 2011Web Performance Optimization   Jakob Schröter    http://www.jakob-schroeter.de/      http://www.s...
SDC2011: Web Performance Optimization
SDC2011: Web Performance Optimization
SDC2011: Web Performance Optimization
SDC2011: Web Performance Optimization
SDC2011: Web Performance Optimization
SDC2011: Web Performance Optimization
Upcoming SlideShare
Loading in …5
×

SDC2011: Web Performance Optimization

976 views

Published on

Warum ist die Performance mit für den Erfolg von Webprojekten entscheidend?
Welche Auswirkungen kann eine zusätzliche Sekunde Ladezeit in Bezug auf die Webseiten-Hits und den Umsatz haben? Und vor allem: wie können wir Entwickler die Performance deutlich verbessern? Und zwar ohne neue Hardware anzuschaffen.

Eine Einführung in die Web Performance Optimierung (SEITENBAU Developer Convention 2011 - 24.09.2011)
- Wie betrachtet ein Nutzer eine Webseite?
- Wie kann man die Performance messen?
- Welche Optimierungsmöglichkeiten gibt es?
- Client-seitige Optimierungen
- Server-seitige Optimierungen
- Automatisierung der Optimierungen
- Blick in die Zukunft (u.A.: Google SPDY)

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

  • Be the first to like this

No Downloads
Views
Total views
976
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

SDC2011: Web Performance Optimization

  1. 1. Developer Convention 2011Web Performance Optimization Jakob Schröter http://www.jakob-schroeter.de/ http://www.seitenbau.com/
  2. 2. PERFORMANCE
  3. 3. WEB PERFORMANCE
  4. 4. LADEZEIT? Spalte2 1000 ms 500 ms 100 ms50 ms
  5. 5. Einfluss der Ladezeit Glückliche User Mehr User Mehr Umsatz Kurze Ladezeit
  6. 6. 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/
  7. 7. 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/
  8. 8. 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/
  9. 9. SEO -> WPO• Search Engine Optimization ist ein Thema von gestern Steve Souders• Performance beeinflusst Google Ranking seit April 2010
  10. 10. „Das Internet ist nicht schneller geworden“http://docs.google.com/a/chromium.org/viewer?a=v&pid=sites&srcid=Y2hyb21pdW0ub3JnfGRldnxneDoxMzcyOWI1N2I4YzI3NzE2
  11. 11. PERFORMANCE OPTIMIERENMessen: z.B. JMeterBottlenecks finden: Profiling des BackendsCode optimieren / mehr Server-Hardware / bessere Server-Anbindung
  12. 12. Aber: Was wollen wir messen?Wahrgenommene Wartezeit! = Inhalt ist für den Nutzer sichtbar = Nutzer denkt, er kann interagieren
  13. 13. 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
  14. 14. Performance messen #2• verschiedene Clients• verschiedene Locations• verschiedenen Anbindungen• Performance kontinuierlich messen
  15. 15. 20% 80%
  16. 16. Wahrgenommene Ladezeit einer Webseite20% 80%
  17. 17. Wahrgenommene Ladezeit einer Webseite20%Server 80% Client
  18. 18. Wahrgenommene Ladezeit einer Webseite20%Server 80% Client
  19. 19. WAS PASSIERT IM BROWSER?
  20. 20. Your best friends• „F12“-Tools• Firebug• Yahoo YSlow• Google PageSpeed• Speed limiter: Webscarab• WebPageTest.com• ShowSlow.com
  21. 21. HTML (Server) Ressources (Client)
  22. 22. HTTP Requests are expensive!ANZAHL DER REQUESTS REDUZIEREN
  23. 23. 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, …
  24. 24. 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;}
  25. 25. Intelligentes Browser-Caching Use HTTPs potential!• Achtung, ETag! GET File Server Client File GET File, if modified Server Client 304 not modified File
  26. 26. Intelligentes Browser-Caching• Besser: Expires-Header GET File Server Client File Expires 01.01.2012 00:00 Server Client File
  27. 27. Supercache: Gemeinsames CDN• Google CDN – //ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js• Aber: Single Point Of Failure – Asynchron laden – Lokales Fallback
  28. 28. Cache busters• base-12.js• styles-67.css• background-890.png• 890/background.png• background.png?890
  29. 29. HTTP Requests are expensive!REQUESTS VERKLEINERN
  30. 30. Compression & Minifying• alles was geht: HTML, CSS, JS, JSON, XML, …aber keine Bilder, PDFs, SWFs, …• Komprimieren – mod_deflate• Minimieren – YUICompressor, UglifyJS, ...
  31. 31. 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%!
  32. 32. Compression & Minifyinglaut.fm
  33. 33. 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/
  34. 34. IMAGEOPTIMIZATION
  35. 35. Image Optimization JPG PNG GIF Farbanzahl• Richtige Abmessungen + „Für Web speichern“• CSS-Sprites
  36. 36. smushit.comhdm-stuttgart.de 130 x 86 px
  37. 37. smushit.comspiegel.de
  38. 38. smushit.comkoeln.de
  39. 39. smushit.comlaut.de
  40. 40. smushit.comlaut.fm
  41. 41. HDM-STUTTGART.DE -325 KB Compression & Minifying -97 KB Image Optimization -422 KB -49%
  42. 42. HTTP Requests are expensive!REIHENFOLGE DER REQUESTS
  43. 43. Order of loading ressources<script> blockiert weitere Downloads<script> blockiert Rendering-> Reihenfolge beachten-> defer/async-Attribute bzw. Loading-Tools nutzen
  44. 44. Order of loading ressources 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
  45. 45. PRELOADING
  46. 46. Preloading• Z.B. Loginseite
  47. 47. LAZY-LOADING
  48. 48. Post-loading
  49. 49. 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
  50. 50. Advanced WPONOCH NICHT SCHNELL GENUG?
  51. 51. Advanced WPO• Rendering optimieren – Progressive Rendering / Early Flushing – Anzahl der DOM-Element reduzieren – Reflow optimieren• JS & CSS Optimizations –…
  52. 52. Chrome Speed Tracer
  53. 53. Strangeloop Site Optimizer Fokus auf der vom Nutzer wahrgenommenen Ladezeit. Analysiert Nutzerverhalten und lädt Ressourcen bereits vor.http://www.strangeloopnetworks.com/
  54. 54. Web Performance Optimization„IST JA GANZ SCHÖNAUFWÄNDIG…“
  55. 55. Sehr gute Tools verfügbar• Yahoo YSlow• Google PageSpeed• Dynatrace AJAX Edition• WebPageTest.com
  56. 56. Vieles lässt sich automatisierenIntegration in den Deployment/Build-Prozess – JS/CSS-Dateien kombinieren – Compression & Minifying – Caching und Cache busters – Bildoptimierung – Verteilung auf CDN
  57. 57. Auf dem Server• On-the-fly – Mod_deflate – Mod_pagespeed – WEBO Site SpeedUp (PHP)
  58. 58. Externe (kommerzielle) Services• On-the-fly in der Cloud – blaze.io – strangeloopnetworks.com – Google Page Speed Service• Monitoring – Gomez
  59. 59. Multiplexed streams Request prioritization Server push & hint HTTP header compressionWas Google hat, was wir nicht haben…GOOGLE + CHROME use SPDY An experimental protocol for a faster web ~50% reduction in page load time
  60. 60. Entlastet auch Enorme die Server Auswirkungen Basics sind einfachVon Anfang an Best PerformancePractices beachten & ggf. weiter optimieren matters! Direkte Verbesserung Kosten/Nutzen abwägen für die Nutzer don‘t fiddle – analyse first Mobiles Internet RIA
  61. 61. 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/
  62. 62. Developer Convention 2011Web Performance Optimization Jakob Schröter http://www.jakob-schroeter.de/ http://www.seitenbau.com/

×