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.
Faster Websites
by Optimizing on the Client
Dipl.-Inf. (FH) Marco Emrich Sept. 2013
Slow Websites
http://www.flickr.com/photos/pyxopotamus/2758466665/sizes/o/in/photostream/
http://www.flickr.com/photos/reid_rosenberg/5616618789/sizes/l/
http://www.flickr.com/photos/decaf/31866493/sizes/l/
Jakob Nielsen
http://en.wikipedia.org/wiki/File:Jakob_Nielsen_1.jpg
http://www.nngroup.com/articles/website-response-times...
http://www.nngroup.com/articles/website-response-times/
http://visual.ly/your-brain-slow-website
Studies
„67% of consumers cite slow
websites as the main cause of
basket abandonment“
http://econsultancy.com/de/blog/11274-67-of-...
http://www.aberdeen.com/Aberdeen-Library/5136/RA-performance-web-application.aspx
https://thestrangeloop.com/
http://conve...
„57% of online shoppers will wait
3 seconds or less before
abandoning the site“
http://connect.phocuswright.com/2010/06/ph...
http://theultralinx.com/2012/11/people-react-slow-websites-infographic.html
„Google engineers found that
users begin to get frustrated with
a site after waiting just 400
milliseconds – literally the...
Google: „today we're including a
new signal in our search ranking
algorithms: site speed“
http://googlewebmastercentral.bl...
The Mobile Challenge
http://www.flickr.com/photos/cizake/4164756091/sizes/o/in/photostream/
Developers
http://www.flickr.com/photos/el_jardineiro/2086608055/
http://www.flickr.com/photos/philipbitnar/3194364095/sizes/o/in/photostream/
http://www.flickr.com/photos/takens/6163883707/sizes/o/in/photostream/
http://en.wikipedia.org/wiki/File:KnuthAtOpenContentAlliance.jpg
„premature
optimization is
the root of all
evil“
http://en.wikipedia.org/wiki/File:KnuthAtOpenContentAlliance.jpg
„premature
optimization is
the root of all
evil“
1974
http://nextberlin.eu/person/steve-souders/
Steve Souders
2007
The Golden Performance Rule
„80-90% of the end-user
response...
http://www.stevesouders.com/blog/2012/02/10/the-performance-golden-rule/
http://www.stevesouders.com/blog/2012/02/10/the-performance-golden-rule/
2012
Backend
Frontend
Sustain more
Concurrent Users
Better Experience
Optimization at ...
Too much
Concurrent Users
?
Too much
Concurrent Users
1. Buy better hardware
Too much
Concurrent Users
1. Buy better hardware
2. Optimize Backend
Bad
Loading/Response
Time
1. Buy better hardware
2. Optimize Backend
?
Too much
Concurrent Users
WPO
Web Performance Optimization
Some Basics
Don't overengineerhttp://www.amazon.de/Wenger-Schweizer-Offiziersmesser-Messer-Schatulle/dp/B000R0JDSI
http://bit.ly/1dugfP0
start
with
a
spec1 sec on empty cache
Paris / DSL / Chrome
http://www.flickr.com/photos/cizake/4164756091/sizes/o/in/photostream/
Remove bottlenecks
Just one change at a time
Measure
WHAT
Analyze
WHY
Optimize
Repeat
Measure
from the
Outside
Don't
trust lab
results
http://www.flickr.com/photos/janodecesare/9069301176/sizes/k/
Measure
http://www.flickr.com/photos/ltdemartinet/2970944908/sizes/o/in/photostream/
Get
RUM
Measure
http://www.flickr.com/photos/ltdemartinet/2970944908/sizes/o/in/photostream/
Real
User
Metrics
Example
Google Analytics
Example
New Relic
Example
WEBPAGETEST
Analyze from the Inside
Analyze
Browser Developer Tools: Waterfall Diagram
Chrome Developer Tools, Firebug, Dragonfly...
In-Browser Analytics
https://developers.google.com/speed/pagespeed/
http://yslow.org/
YSLOW Page Speed
Insights
http://gtm...
Latency (RTT)
Optimize:
Throughput vs. Latency
Throughput
Latency (RTT)
Throughput vs. Latency
Client ServerRound Trip Time
Throughput vs. Latency
Latency
reduce requests
Throughput
reduce file-size
more parallel requests
Throughput vs. Latency
Latency
reduce requests
Browser Caching
YSlow Statistic
Optimization Techniques
& Tools
http://yslow.org/ https://developers.google.com/speed/
http://developer.yahoo.com/performance/rules.html
Technique 1:
Less is More
Snippet Plague
Facebook, Twitter, Google+, Google Analytics,
Flickr, Youtube
Cure
Don't use them
Cure
Don't overuse them
- think about it -
JavaScript-Explosion
Zepto & JS-Microframeworks
http://microjs.com/
https://github.com/madrobby/zepto
Thomas
Fuchs
Technique 2:
Far Future Expire Date
http://developer.yahoo.com/performance/rules.html#expires
File.mtime(path).to_i.to_s
Cachbusting per Creation
TimeStamp Param
<img alt="Header" height="304"
src="/images/header.jpg...
Cache Manifests
<html manifest="example.appcache">
  ...
CACHE MANIFEST
# 2010­06­18:v2
CACHE:
/favicon.ico
index.html
sty...
Cache Manifests
<html manifest="example.appcache">
  ...
CACHE MANIFEST
# 2010­06­18:v2
CACHE:
/favicon.ico
index.html
sty...
Cache Manifests
<html manifest="example.appcache">
  ...
CACHE MANIFEST
# 2010­06­18:v2
CACHE:
/favicon.ico
index.html
sty...
Technique(s) 3:
CSS & JS
Merge, Minimize, Place, GZIP
JsMin, Google Closure Compiler, UglifyJS, YUI Compressor...
automati...
Technique 4:
Async JavaScript-Loading
http://calendar.perfplanet.com/2011/the-art-and-craft-of-the-async-snippet/
https://...
<script>(function(d) {
  var js = d.createElement('script');
  js.src = "http://example.org/my.js";
  (d.head || d.getElem...
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.c...
<script>
 // Add a script element as a child of the body
 function downloadJSAtOnload() {
   var element = document.create...
<script async src="http://example.org/my.js"></script>
Async in HTML5
https://developer.mozilla.org/en/docs/Web/HTML/Eleme...
<script async src="http://example.org/my.js"></script>
Async in HTML5
https://developer.mozilla.org/en/docs/Web/HTML/Eleme...
Technique 5:
Parallelize Requests
„There is a common misbelief that
a single combined script performs
best. Wrong“
http://headjs.com/
Parallel downloads are often faster
1000 kB
500 kB
500kb250 kB
250 kB
Parallel downloads are often faster
No CDNs, like
http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js
http://a...
Parallel downloads are often faster
No CDNs, like
http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js
http://a...
head.js("/path/to/jquery.js", 
"/google/analytics.js", "/js/site.js", 
function() {
 
   // all done
 
});
Headjs.com
RequireJS + Almond
Optimize package-size
Lazy Loading by AMD
define(['jquery'] , function ($) {
return function () {};
});...
Technique 6:
CSS Sprites
https://github.com/jakesgordon/sprite-factory
https://github.com/flyerhzm/css_sprite
http://www.h...
Video Demo
Webpagetest.org
http://www.webpagetest.org/video/compare.php?tests=130604_9V_174P,130604_SH_1746
marcoemrich77@googlemail.com
https://github.com/marcoemrich/
@marcoemrich
http://www.flickr.com/photos/garyturner/4042962940/sizes/o/in/photostream/
wpc13.cnf.io
Technique 7:
Preloading
(Post-Onload Download)
http://books.google.de/books?id=jRVlgNDOr60C&pg=PA59&lpg=PA59&dq="Post-Onlo...
feed the cache
Async & Deferred
with future expire headers
(new Image()).src = '/path/to/image.png'
Google Analytics
Visitor Flow
Google Analytics
Visitor Flow
Future: Cache Manifests
<html manifest="example.appcache">
  ...
http://docs.webplatform.org/wiki/tutorials/speed_best_pra...
http://www.flickr.com/photos/kins-garage/4025080233/sizes/z/in/photostream/Cover Bild:
Faster websites
Faster websites
Faster websites
Upcoming SlideShare
Loading in …5
×

Faster websites

895 views

Published on

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

Published in: Technology, Design
  • Be the first to comment

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:

×