Friday, May 4, 2012
This Slide Is BlankFriday, May 4, 2012
Friday, May 4, 2012
joseph@josephscott.org                 http://josephscott.org/                      @josephscottFriday, May 4, 2012
Improving   Front-End   PerformanceFriday, May 4, 2012
Improve the            Perceived            Responsiveness            of a SiteFriday, May 4, 2012
The            MeasurementsFriday, May 4, 2012
Chrome            Network PanelFriday, May 4, 2012
Chrome            Page SpeedFriday, May 4, 2012
webpagetest.org      http://www.webpagetest.org/result/120501_S5_45YNJ/Friday, May 4, 2012
The TechniquesFriday, May 4, 2012
HTTP CompressionFriday, May 4, 2012
HTTP Compression      Request:                      Accept-Encoding: deflate, gzip      Response:                      Con...
HTTP Compression      HTTP/1.1 200 OK      Expires: Sun, 26 Dec 2032 06:12:01 GMT      Vary: Accept-Encoding      Content-...
HTTP Compression      Response:                      Vary: Accept-EncodingFriday, May 4, 2012
HTTP Keep AliveFriday, May 4, 2012
HTTP Keep Alive      Request:                      Connection: keep-alive      Response:                      Connection: ...
HTTP CachingFriday, May 4, 2012
HTTP Caching    Response:    Expires: Fri, 05 May 2017 01:06:01 GMTFriday, May 4, 2012
HTTP Caching    Response:    Cache-Control: max-age: 31536000Friday, May 4, 2012
HTTP Caching      Response:                Last-Modified: Tue, 12 Dec 2006 03:03:59 GMT      Request:      If-Modified-Sin...
HTTP Caching      Response:                Etag: "850d9-d2ff-4b881f248ec80"      Request:                If-None-Match: "8...
HTTP Caching      Response:                HTTP/1.1 200 OK                HTTP/1.1 304 Not ModifiedFriday, May 4, 2012
HTTP Caching                      Etag, so misunderstoodFriday, May 4, 2012
HTTP Caching               Updating Cached ResourcesFriday, May 4, 2012
HTTP Caching   http://example.com/css/style.css?v=1   http://example.com/css/style.1.cssFriday, May 4, 2012
Avoid RedirectsFriday, May 4, 2012
Avoid Redirects                      utah.govFriday, May 4, 2012
Avoid Redirects                      utah.gov                      utah.gov/index.htmlFriday, May 4, 2012
Avoid Redirects                      utah.gov                                 120ms                      utah.gov/index.ht...
Avoid Redirects                      deseretnews.comFriday, May 4, 2012
Avoid Redirects                      deseretnews.com          www.deseretnews.com/Friday, May 4, 2012
Avoid Redirects                      deseretnews.com          www.deseretnews.com/          www.deseretnews.com/home/Frida...
Avoid Redirects                      deseretnews.com                                   150ms          www.deseretnews.com/...
CSSFriday, May 4, 2012
CSS                      Always at the top!Friday, May 4, 2012
CSS                      #IDs are only slightly                      faster than .CLASSesFriday, May 4, 2012
CSS        #nav a        Browsers read right to leftFriday, May 4, 2012
CSS        Bad: #nav * { }        Better: #nav a { }        Betterest: #nav .now { }Friday, May 4, 2012
CSS        html body .wrapper #content a{}                          VS.                      #content a{}Friday, May 4, 2012
CSS        https://developer.mozilla.org/en/        Writing_Efficient_CSS        https://developers.google.com/        spe...
CSS        Minify your CSS filesFriday, May 4, 2012
CSS        Use CSS Sprites                      http://spriteme.org/Friday, May 4, 2012
JavascriptFriday, May 4, 2012
Javascript                      Always at the                      bottom!Friday, May 4, 2012
Javascript                      Bottom and Async!Friday, May 4, 2012
Javascript                        Bottom and Async!                      (function() {                         var js = do...
Javascript                        Bottom and Async!                      (function() {                         var js = do...
Javascript                        Bottom and Async!                      (function() {                         var js = do...
Javascript                        Bottom and Async!                      (function() {                         var js = do...
Javascript                      jQuery                      Selector PerformanceFriday, May 4, 2012
Javascript              <div id="box">                <p> Hi </p>              </div>                <script src="//ajax.g...
Javascript                      $(#box > p);                      $(#box p);                      $(#box).children(p);    ...
Javascript                      $(#box > p); /* Horrible! */                      $(#box p);      /* Horrible! */         ...
Javascript                      box.find(p);                      $(p, box);                      $(#box).find(p);Friday, ...
Javascript                      box.find(p);         /* Best! */                      $(p, box);           /* Almost there...
Javascript                      box.find(p);                      document.getElementById                      ("box").get...
Javascript                      box.find(p);     /* 48k ops/sec */                      document.getElementById           ...
Javascript                      Be careful with                      event handlersFriday, May 4, 2012
Javascript                      Carefully minimize                      your JavascriptFriday, May 4, 2012
Various TipsFriday, May 4, 2012
Separate Domain    For Static Resources                      example.com                          fakecdn.example.com     ...
Optimize Images                      pngcrush                                    jpegtran              http://www.smushit....
Delay Loading Resources           <img           data-gravatar_hash="713072bbe89035a79c17d19e53dd5d9b"               class...
Have a favicon.ico                      Small                              CacheableFriday, May 4, 2012
Cacheable AJAX                      Standard Rules ApplyFriday, May 4, 2012
Experiment with cuzillion            http://stevesouders.com/cuzillion/Friday, May 4, 2012
Experiment with    Browserscope                      http://www.browserscope.org/Friday, May 4, 2012
Questions?Friday, May 4, 2012
joseph@josephscott.org                 http://josephscott.org/                      @josephscottFriday, May 4, 2012
Upcoming SlideShare
Loading in...5
×

Improving Front End Performance

4,176

Published on

Published in: Technology

Improving Front End Performance

  1. 1. Friday, May 4, 2012
  2. 2. This Slide Is BlankFriday, May 4, 2012
  3. 3. Friday, May 4, 2012
  4. 4. joseph@josephscott.org http://josephscott.org/ @josephscottFriday, May 4, 2012
  5. 5. Improving Front-End PerformanceFriday, May 4, 2012
  6. 6. Improve the Perceived Responsiveness of a SiteFriday, May 4, 2012
  7. 7. The MeasurementsFriday, May 4, 2012
  8. 8. Chrome Network PanelFriday, May 4, 2012
  9. 9. Chrome Page SpeedFriday, May 4, 2012
  10. 10. webpagetest.org http://www.webpagetest.org/result/120501_S5_45YNJ/Friday, May 4, 2012
  11. 11. The TechniquesFriday, May 4, 2012
  12. 12. HTTP CompressionFriday, May 4, 2012
  13. 13. HTTP Compression Request: Accept-Encoding: deflate, gzip Response: Content-Encoding: gzipFriday, May 4, 2012
  14. 14. HTTP Compression HTTP/1.1 200 OK Expires: Sun, 26 Dec 2032 06:12:01 GMT Vary: Accept-Encoding Content-Encoding: gzip Last-Modified: Wed, 25 Apr 2012 15:27:45 GMT ETag: "2942247273" Content-Type: text/css Accept-Ranges: bytes Content-Length: 43524 Date: Fri, 27 Apr 2012 02:09:28 GMT Server: lighttpd-yt/1.4.18 Age: 227872 Cache-Control: public, max-age=31104000 youtube.com CSS RequestFriday, May 4, 2012
  15. 15. HTTP Compression Response: Vary: Accept-EncodingFriday, May 4, 2012
  16. 16. HTTP Keep AliveFriday, May 4, 2012
  17. 17. HTTP Keep Alive Request: Connection: keep-alive Response: Connection: keep-aliveFriday, May 4, 2012
  18. 18. HTTP CachingFriday, May 4, 2012
  19. 19. HTTP Caching Response: Expires: Fri, 05 May 2017 01:06:01 GMTFriday, May 4, 2012
  20. 20. HTTP Caching Response: Cache-Control: max-age: 31536000Friday, May 4, 2012
  21. 21. HTTP Caching Response: Last-Modified: Tue, 12 Dec 2006 03:03:59 GMT Request: If-Modified-Since: Tue, 12 Dec 2006 03:03:59 GMTFriday, May 4, 2012
  22. 22. HTTP Caching Response: Etag: "850d9-d2ff-4b881f248ec80" Request: If-None-Match: "850d9-d2ff-4b881f248ec80"Friday, May 4, 2012
  23. 23. HTTP Caching Response: HTTP/1.1 200 OK HTTP/1.1 304 Not ModifiedFriday, May 4, 2012
  24. 24. HTTP Caching Etag, so misunderstoodFriday, May 4, 2012
  25. 25. HTTP Caching Updating Cached ResourcesFriday, May 4, 2012
  26. 26. HTTP Caching http://example.com/css/style.css?v=1 http://example.com/css/style.1.cssFriday, May 4, 2012
  27. 27. Avoid RedirectsFriday, May 4, 2012
  28. 28. Avoid Redirects utah.govFriday, May 4, 2012
  29. 29. Avoid Redirects utah.gov utah.gov/index.htmlFriday, May 4, 2012
  30. 30. Avoid Redirects utah.gov 120ms utah.gov/index.htmlFriday, May 4, 2012
  31. 31. Avoid Redirects deseretnews.comFriday, May 4, 2012
  32. 32. Avoid Redirects deseretnews.com www.deseretnews.com/Friday, May 4, 2012
  33. 33. Avoid Redirects deseretnews.com www.deseretnews.com/ www.deseretnews.com/home/Friday, May 4, 2012
  34. 34. Avoid Redirects deseretnews.com 150ms www.deseretnews.com/ 150ms www.deseretnews.com/home/Friday, May 4, 2012
  35. 35. CSSFriday, May 4, 2012
  36. 36. CSS Always at the top!Friday, May 4, 2012
  37. 37. CSS #IDs are only slightly faster than .CLASSesFriday, May 4, 2012
  38. 38. CSS #nav a Browsers read right to leftFriday, May 4, 2012
  39. 39. CSS Bad: #nav * { } Better: #nav a { } Betterest: #nav .now { }Friday, May 4, 2012
  40. 40. CSS html body .wrapper #content a{} VS. #content a{}Friday, May 4, 2012
  41. 41. CSS https://developer.mozilla.org/en/ Writing_Efficient_CSS https://developers.google.com/ speed/docs/best-practices/renderingFriday, May 4, 2012
  42. 42. CSS Minify your CSS filesFriday, May 4, 2012
  43. 43. CSS Use CSS Sprites http://spriteme.org/Friday, May 4, 2012
  44. 44. JavascriptFriday, May 4, 2012
  45. 45. Javascript Always at the bottom!Friday, May 4, 2012
  46. 46. Javascript Bottom and Async!Friday, May 4, 2012
  47. 47. Javascript Bottom and Async! (function() { var js = document.createElement( script ); js.async = true; js.src = /js/awesome.js’; var s = document.getElementsByTagName( script )[0]; s.parentNode.insertBefore( js, s ); } )();Friday, May 4, 2012
  48. 48. Javascript Bottom and Async! (function() { var js = document.createElement( script ); js.async = true; js.src = /js/awesome.js’; var s = document.getElementsByTagName( script )[0]; s.parentNode.insertBefore( js, s ); } )();Friday, May 4, 2012
  49. 49. Javascript Bottom and Async! (function() { var js = document.createElement( script ); js.async = true; js.src = /js/awesome.js’; var s = document.getElementsByTagName( script )[0]; s.parentNode.insertBefore( js, s ); } )();Friday, May 4, 2012
  50. 50. Javascript Bottom and Async! (function() { var js = document.createElement( script ); js.async = true; js.src = /js/awesome.js’; var s = document.getElementsByTagName( script )[0]; s.parentNode.insertBefore( js, s ); } )();Friday, May 4, 2012
  51. 51. Javascript jQuery Selector PerformanceFriday, May 4, 2012
  52. 52. Javascript <div id="box"> <p> Hi </p> </div> <script src="//ajax.googleapis.com/ajax/ libs/jquery/1/jquery.min.js"></script> <script> var box = $(#box); </script>Friday, May 4, 2012
  53. 53. Javascript $(#box > p); $(#box p); $(#box).children(p); $(p, $(#box)); $(p, #box);Friday, May 4, 2012
  54. 54. Javascript $(#box > p); /* Horrible! */ $(#box p); /* Horrible! */ $(#box).children(p); /* Bad */ $(p, $(#box)); /* Less Bad */ $(p, #box); /* Less Bad */Friday, May 4, 2012
  55. 55. Javascript box.find(p); $(p, box); $(#box).find(p);Friday, May 4, 2012
  56. 56. Javascript box.find(p); /* Best! */ $(p, box); /* Almost there! */ $(#box).find(p); /* Better */ http://jsperf.com/jquery-selector-perf-right-to-left/57Friday, May 4, 2012
  57. 57. Javascript box.find(p); document.getElementById ("box").getElementsByTagName("p");Friday, May 4, 2012
  58. 58. Javascript box.find(p); /* 48k ops/sec */ document.getElementById ("box").getElementsByTagName("p"); /* 2,000k ops/sec */ http://jsperf.com/jquery-selector-perf-right-to-left/91Friday, May 4, 2012
  59. 59. Javascript Be careful with event handlersFriday, May 4, 2012
  60. 60. Javascript Carefully minimize your JavascriptFriday, May 4, 2012
  61. 61. Various TipsFriday, May 4, 2012
  62. 62. Separate Domain For Static Resources example.com fakecdn.example.com fakecdnexample.comFriday, May 4, 2012
  63. 63. Optimize Images pngcrush jpegtran http://www.smushit.com/ysmush.it/ http://imageoptim.com/Friday, May 4, 2012
  64. 64. Delay Loading Resources <img data-gravatar_hash="713072bbe89035a79c17d19e53dd5d9b" class="load-gravatar" height="64" width="64" src="https://secure.gravatar.com/avatar/ 00000000000000000000000000000000?s=64&d=mm" /> https://github.com/josephscott/async-gravatarsFriday, May 4, 2012
  65. 65. Have a favicon.ico Small CacheableFriday, May 4, 2012
  66. 66. Cacheable AJAX Standard Rules ApplyFriday, May 4, 2012
  67. 67. Experiment with cuzillion http://stevesouders.com/cuzillion/Friday, May 4, 2012
  68. 68. Experiment with Browserscope http://www.browserscope.org/Friday, May 4, 2012
  69. 69. Questions?Friday, May 4, 2012
  70. 70. joseph@josephscott.org http://josephscott.org/ @josephscottFriday, May 4, 2012
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×