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.

New Perspectives on Performance

6,302 views

Published on

This is the presentation I gave on June 28 2012 at the jQuery conference in San Francisco

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

New Perspectives on Performance

  1. 1. NEW PERSPECTIVESON PERFORMANCE @mennovanslooten jQuery San Francisco 2012
  2. 2. HI, I’M MENNO•I live in The Netherlands•I make websites for http://www.aanzee.nl
  3. 3. Can you improve theperformance of this page?
  4. 4. A RACE CAR DRIVER
  5. 5. PILLARS OF PERFORMANCE• Visibility• Interactivity• Responsiveness
  6. 6. Before you start optimizing...
  7. 7. ESTABLISH A BASELINE• Measurable• Repeatable• Stable
  8. 8. Tip: Always focus first on low-hanging fruit
  9. 9. PILLAR 1: VISIBILITYGoing from about:blank to a styled web page
  10. 10. PILLAR 1: VISIBILITY• Read High Performance Web Sites by Steve Souders
  11. 11. PILLAR 1: VISIBILITY• Install Firebug and YSlow• Do whatever YSlow tells you (if you can do it in a day)• Don’t worry too much about the rest
  12. 12. Tip: Crowdsource your measurements with Google Analytics
  13. 13. <html> <head> <script> __START__ = new Date; </script>$.ready(function() { var time = new Date - __START__; _gaq.push( _trackEvent, performance, dom_ready, , time, true );}
  14. 14. Tip: 8-bit PNG’s with alpha: http://www.8bitalpha.com/
  15. 15. PILLAR 2: INTERACTIVITYGoing from visible and styled to fully clickable
  16. 16. PILLAR 2: INTERACTIVITY• Read Even Faster Web Sites by Steve Souders et al.
  17. 17. Tip: profile your $.ready()
  18. 18. // Don’t do this:$.ready(function() { whatever_happens(); here();}// to this:$.ready(function() { console.profile(); whatever_happens(); here(); console.profileEnd();}
  19. 19. Tip: delay initialization
  20. 20. // Immediate init$.ready(function() { function init() { // Do lots of stuff with #form } init();});// Delayed init$.ready(function() { function init() { // Do lots of stuff with #form } $(#form).one(mouseenter, init);});
  21. 21. PILLAR 3:RESPONSIVENESSGoing from user action to visual feedback
  22. 22. PILLAR 3: RESPONSIVENESS• Read High Performance JavaScript by Nicholas Zakas
  23. 23. Tip: throttle/debounce eventshttp://benalman.com/projects/jquery-throttle-debounce-plugin/
  24. 24. // Don’t do this:$(‘input’).on(‘keydown’, someHandler);// Do this:$(‘input’).on(‘keydown’, $.debounce(500, someHandler));
  25. 25. // Don’t do this:$(‘body’).on(‘mousemove’, someHandler);// Do this:$(‘body’).on(‘mousemove’, $.throttle(500, someHandler));
  26. 26. Tip: this one is easiest to fake
  27. 27. NEW PERSPECTIVES
  28. 28. Performance optimizations are expensive
  29. 29. Performance optimizations can increase costs
  30. 30. THEM
  31. 31. ME
  32. 32. PHOTOGRAPHS• http://www.flickr.com/photos/thehenryford/4929428611/• http://www.flickr.com/photos/thehenryford/4930039724/• http://www.flickr.com/photos/proctorarchives/6831872685/
  33. 33. THANK YOU menno.vanslooten@gmail.com @mennovanslootenThanks to Aan Zee (http://www.aanzee.nl) and the jQuery Foundation

×