A Need For Speed: Performance Driven Front End Development

User's of today's web expect the sites they visit to be smooth, interactive, load quickly, and run well. The focus and priority of the Front End Developer, should be optimization of the front end experience for every site we create, for every device, and for every user.

In this talk, we will cover how front end performance affects User Engagement and Experience; best practices for performance driven front end development; and tools to measure front end performance.

Transcript

1. Allen Moore • @creativeallen • #wcphilly • allenmoore.me/wcphilly-2015 P E R F O R M A N C E D R I V E N F R O N T E N D D E V E LO P M E N T A N E E D F O R S P E E D A L L E N M O O R E | F R O N T- E N D E N G I N E E R
2. Allen Moore • @creativeallen • #wcphilly • allenmoore.me/wcphilly-2015
3. Allen Moore • @creativeallen • #wcphilly • allenmoore.me/wcphilly-2015 YES, We’re Hiring!
4. Allen Moore • @creativeallen • #wcphilly • allenmoore.me/wcphilly-2015 H OW S O C I E T Y H AS S H A P E D T H E W E B
7. Allen Moore • @creativeallen • #wcphilly • allenmoore.me/wcphilly-2015 H OW A B R OW S E R LOA D S A W E B PAG E
9. New tab
10. New tab Browser downloads a HTML file
11. New tab Browser downloads a HTML file Parses through the HTML
12. New tab Browser downloads a HTML file Parses through the HTML Encounters something it needs to load (image, JS file, CSS file, etc.
13. New tab Browser downloads a HTML file Parses through the HTML Encounters something it needs to load (image, JS file, CSS file, etc. Loads external resource
14. New tab Browser downloads a HTML file Parses through the HTML Encounters something it needs to load (image, JS file, CSS file, etc. Loads external resource Parses external resource (if CSS or JS)
15. New tab Browser downloads a HTML file Parses through the HTML Encounters something it needs to load (image, JS file, CSS file, etc. Loads external resource Parses external resource (if CSS or JS) Continues to parse HTML until it encounters another resource that must be loaded
16. Allen Moore • @creativeallen • #wcphilly • allenmoore.me/wcphilly-2015 T H E C R I T I C A L R E N D E R I N G PAT H — A B OV E T H E F O L D
17. “the code and resources required to render the initial view of a web page”
18. Allen Moore • @creativeallen • #wcphilly • allenmoore.me/wcphilly-2015 H OW F R O N T E N D P E R F O R M A N C E A F F E C T S U S E R E N G AG E M E N T A N D E X P E R I E N C E
19. Allen Moore • @creativeallen • #wcphilly • allenmoore.me/wcphilly-2015 U N D E R S TA N D I N G U S E R F R U S T R AT I O N
20. “a feeling of anger or annoyance caused by being unable to do something”
21. Allen Moore • @creativeallen • #wcphilly • allenmoore.me/wcphilly-2015 P E R F O R M A N C E A N D AC C E S S I B I L I T Y
22. “Web accessibility refers to the inclusive practice of removing barriers that prevent interaction with, or access to websites, by people with disabilities. When sites are correctly designed, developed and edited, all users have equal access to information and functionality.”
23. Allen Moore • @creativeallen • #wcphilly • allenmoore.me/wcphilly-2015 C L I E N T S U C C E S S S TO RY
25. > 4 0 %
28. Allen Moore • @creativeallen • #wcphilly • allenmoore.me/wcphilly-2015 P E R F O R M A N C E D R I V E N F R O N T E N D D E V E LO P M E N T B E S T P R AC T I C E S
29. Allen Moore • @creativeallen • #wcphilly • allenmoore.me/wcphilly-2015 I F YO U D O N ’ T N E E D I T, D O N ’ T LOA D I T.
30. Allen Moore • @creativeallen • #wcphilly • allenmoore.me/wcphilly-2015 E X A M P L E if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) { wp_enqueue_script( 'comment-reply' ); }
31. Allen Moore • @creativeallen • #wcphilly • allenmoore.me/wcphilly-2015 WA I T T I L L L AT E R
32. Allen Moore • @creativeallen • #wcphilly • allenmoore.me/wcphilly-2015 T H E B A R E N E C E S S I T I E S ( T H E I N I T I A L R E N D E R I N G )
33. “It’s great to be on the Cutting Edge, but it’s never ok to be on the Bleeding Edge of the Cutting Edge.”
34. Allen Moore • @creativeallen • #wcphilly • allenmoore.me/wcphilly-2015 LOA D C R P S T Y L E S I N L I N E , I N T H E H E A D E R , A N D A L L E L S E I N T H E F O OT E R
35. Allen Moore • @creativeallen • #wcphilly • allenmoore.me/wcphilly-2015 E X A M P L E <style> .header { width: 100%; background-color: black; } .nav { width: 100%; height: auto; } </style>
36. Allen Moore • @creativeallen • #wcphilly • allenmoore.me/wcphilly-2015 E X A M P L E <script type=“text/javascript"> (function() { function loadCSS(href){ var ss = window.document.createElement('link'), ref = window.document.getElementsByTagName('head')[0]; ss.rel = 'stylesheet'; ss.href = href; ss.media = 'only x'; ref.parentNode.insertBefore(ss, ref); setTimeout( function(){ ss.media = 'all'; },0); } loadCSS('style.min.css'); })(); </script>
37. Allen Moore • @creativeallen • #wcphilly • allenmoore.me/wcphilly-2015 E X A M P L E function theme_scripts_styles() { wp_enqueue_script( ‘theme-scripts', get_template_directory_uri() . ‘/assets/js/scripts.js’, array(), ‘1.0’, true ); } add_action( 'wp_enqueue_scripts', ‘theme_scripts_styles' );
38. Allen Moore • @creativeallen • #wcphilly • allenmoore.me/wcphilly-2015 E X A M P L E function async_theme_script( $tag, $handle, $src ) { if ( 'theme-scripts' !== $handle ) : return $tag; endif; return str_replace( '<script', '<script async', $tag ); } add_filter( 'script_loader_tag', array( __CLASS__, 'async_theme_script' ), 10, 3 );
39. Allen Moore • @creativeallen • #wcphilly • allenmoore.me/wcphilly-2015 TO O L S TO M E AS U R E F R O N T E N D P E R F O R M A N C E
40. Allen Moore • @creativeallen • #wcphilly • allenmoore.me/wcphilly-2015 B R OW S E R D E V TO O L S
41. Allen Moore • @creativeallen • #wcphilly • allenmoore.me/wcphilly-2015 T E S T O N A L L T H E T H I N G S
42. Allen Moore • @creativeallen • #wcphilly • allenmoore.me/wcphilly-2015 E X A M P L E - X I P. I O server_name local.dev *.local.dev ~^local\.\d+\.\d+\.\d+\.\d+\.xip\.io$;
43. Allen Moore • @creativeallen • #wcphilly • allenmoore.me/wcphilly-2015 E X A M P L E - B R OW S E R SY N C server_name local.dev *.local.dev ~^local\.\d+\.\d+\.\d+\.\d+\.xip\.io$;
44. Allen Moore • @creativeallen • #wcphilly • allenmoore.me/wcphilly-2015 O N L I N E TO O L S
45. Allen Moore • @creativeallen • #wcphilly • allenmoore.me/wcphilly-2015 O N L I N E TO O L S • Google Page Speed Insights - • WebPageTest.org • SiteSpeed.io
46. Allen Moore • @creativeallen • #wcphilly • allenmoore.me/wcphilly-2015 Q U E S T I O N S ?
47. Allen Moore • @creativeallen • #wcphilly • allenmoore.me/wcphilly-2015