Upgrade to Pro — share decks privately, control downloads, hide ads and more …

A Need For Speed: Performance Driven Front End Development

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.

55ea809c64e7bba42f566d7bdb4e106e?s=128

Allen Moore

June 13, 2015
Tweet

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
  5. None
  6. None
  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
  8. None
  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
  24. None
  25. > 4 0 %

  26. None
  27. None
  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