Your SlideShare is downloading. ×
Improving Front End Performance
Improving Front End Performance
Improving Front End Performance
Improving Front End Performance
Improving Front End Performance
Improving Front End Performance
Improving Front End Performance
Improving Front End Performance
Improving Front End Performance
Improving Front End Performance
Improving Front End Performance
Improving Front End Performance
Improving Front End Performance
Improving Front End Performance
Improving Front End Performance
Improving Front End Performance
Improving Front End Performance
Improving Front End Performance
Improving Front End Performance
Improving Front End Performance
Improving Front End Performance
Improving Front End Performance
Improving Front End Performance
Improving Front End Performance
Improving Front End Performance
Improving Front End Performance
Improving Front End Performance
Improving Front End Performance
Improving Front End Performance
Improving Front End Performance
Improving Front End Performance
Improving Front End Performance
Improving Front End Performance
Improving Front End Performance
Improving Front End Performance
Improving Front End Performance
Improving Front End Performance
Improving Front End Performance
Improving Front End Performance
Improving Front End Performance
Improving Front End Performance
Improving Front End Performance
Improving Front End Performance
Improving Front End Performance
Improving Front End Performance
Improving Front End Performance
Improving Front End Performance
Improving Front End Performance
Improving Front End Performance
Improving Front End Performance
Improving Front End Performance
Improving Front End Performance
Improving Front End Performance
Improving Front End Performance
Improving Front End Performance
Improving Front End Performance
Improving Front End Performance
Improving Front End Performance
Improving Front End Performance
Improving Front End Performance
Improving Front End Performance
Improving Front End Performance
Improving Front End Performance
Improving Front End Performance
Improving Front End Performance
Improving Front End Performance
Improving Front End Performance
Improving Front End Performance
Improving Front End Performance
Improving Front End Performance
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Improving Front End Performance

4,130

Published on

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

No Downloads
Views
Total Views
4,130
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
9
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

×