Improving Front End Performance

  • 4,053 views
Uploaded on

 

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
4,053
On Slideshare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
8
Comments
0
Likes
6

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Friday, May 4, 2012
  • 2. This Slide Is BlankFriday, May 4, 2012
  • 3. Friday, May 4, 2012
  • 4. joseph@josephscott.org http://josephscott.org/ @josephscottFriday, May 4, 2012
  • 5. Improving Front-End PerformanceFriday, May 4, 2012
  • 6. Improve the Perceived Responsiveness of a SiteFriday, May 4, 2012
  • 7. The MeasurementsFriday, May 4, 2012
  • 8. Chrome Network PanelFriday, May 4, 2012
  • 9. Chrome Page SpeedFriday, May 4, 2012
  • 10. webpagetest.org http://www.webpagetest.org/result/120501_S5_45YNJ/Friday, May 4, 2012
  • 11. The TechniquesFriday, May 4, 2012
  • 12. HTTP CompressionFriday, May 4, 2012
  • 13. HTTP Compression Request: Accept-Encoding: deflate, gzip Response: Content-Encoding: gzipFriday, May 4, 2012
  • 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. HTTP Compression Response: Vary: Accept-EncodingFriday, May 4, 2012
  • 16. HTTP Keep AliveFriday, May 4, 2012
  • 17. HTTP Keep Alive Request: Connection: keep-alive Response: Connection: keep-aliveFriday, May 4, 2012
  • 18. HTTP CachingFriday, May 4, 2012
  • 19. HTTP Caching Response: Expires: Fri, 05 May 2017 01:06:01 GMTFriday, May 4, 2012
  • 20. HTTP Caching Response: Cache-Control: max-age: 31536000Friday, May 4, 2012
  • 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. HTTP Caching Response: Etag: "850d9-d2ff-4b881f248ec80" Request: If-None-Match: "850d9-d2ff-4b881f248ec80"Friday, May 4, 2012
  • 23. HTTP Caching Response: HTTP/1.1 200 OK HTTP/1.1 304 Not ModifiedFriday, May 4, 2012
  • 24. HTTP Caching Etag, so misunderstoodFriday, May 4, 2012
  • 25. HTTP Caching Updating Cached ResourcesFriday, May 4, 2012
  • 26. HTTP Caching http://example.com/css/style.css?v=1 http://example.com/css/style.1.cssFriday, May 4, 2012
  • 27. Avoid RedirectsFriday, May 4, 2012
  • 28. Avoid Redirects utah.govFriday, May 4, 2012
  • 29. Avoid Redirects utah.gov utah.gov/index.htmlFriday, May 4, 2012
  • 30. Avoid Redirects utah.gov 120ms utah.gov/index.htmlFriday, May 4, 2012
  • 31. Avoid Redirects deseretnews.comFriday, May 4, 2012
  • 32. Avoid Redirects deseretnews.com www.deseretnews.com/Friday, May 4, 2012
  • 33. Avoid Redirects deseretnews.com www.deseretnews.com/ www.deseretnews.com/home/Friday, May 4, 2012
  • 34. Avoid Redirects deseretnews.com 150ms www.deseretnews.com/ 150ms www.deseretnews.com/home/Friday, May 4, 2012
  • 35. CSSFriday, May 4, 2012
  • 36. CSS Always at the top!Friday, May 4, 2012
  • 37. CSS #IDs are only slightly faster than .CLASSesFriday, May 4, 2012
  • 38. CSS #nav a Browsers read right to leftFriday, May 4, 2012
  • 39. CSS Bad: #nav * { } Better: #nav a { } Betterest: #nav .now { }Friday, May 4, 2012
  • 40. CSS html body .wrapper #content a{} VS. #content a{}Friday, May 4, 2012
  • 41. CSS https://developer.mozilla.org/en/ Writing_Efficient_CSS https://developers.google.com/ speed/docs/best-practices/renderingFriday, May 4, 2012
  • 42. CSS Minify your CSS filesFriday, May 4, 2012
  • 43. CSS Use CSS Sprites http://spriteme.org/Friday, May 4, 2012
  • 44. JavascriptFriday, May 4, 2012
  • 45. Javascript Always at the bottom!Friday, May 4, 2012
  • 46. Javascript Bottom and Async!Friday, May 4, 2012
  • 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. 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. 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. 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. Javascript jQuery Selector PerformanceFriday, May 4, 2012
  • 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. Javascript $(#box > p); $(#box p); $(#box).children(p); $(p, $(#box)); $(p, #box);Friday, May 4, 2012
  • 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. Javascript box.find(p); $(p, box); $(#box).find(p);Friday, May 4, 2012
  • 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. Javascript box.find(p); document.getElementById ("box").getElementsByTagName("p");Friday, May 4, 2012
  • 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. Javascript Be careful with event handlersFriday, May 4, 2012
  • 60. Javascript Carefully minimize your JavascriptFriday, May 4, 2012
  • 61. Various TipsFriday, May 4, 2012
  • 62. Separate Domain For Static Resources example.com fakecdn.example.com fakecdnexample.comFriday, May 4, 2012
  • 63. Optimize Images pngcrush jpegtran http://www.smushit.com/ysmush.it/ http://imageoptim.com/Friday, May 4, 2012
  • 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. Have a favicon.ico Small CacheableFriday, May 4, 2012
  • 66. Cacheable AJAX Standard Rules ApplyFriday, May 4, 2012
  • 67. Experiment with cuzillion http://stevesouders.com/cuzillion/Friday, May 4, 2012
  • 68. Experiment with Browserscope http://www.browserscope.org/Friday, May 4, 2012
  • 69. Questions?Friday, May 4, 2012
  • 70. joseph@josephscott.org http://josephscott.org/ @josephscottFriday, May 4, 2012