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
   

   View Slide

2. Allen Moore • @creativeallen • #wcphilly • allenmoore.me/wcphilly-2015
   

   View Slide

3. Allen Moore • @creativeallen • #wcphilly • allenmoore.me/wcphilly-2015
   YES, We’re Hiring!
   

   View Slide

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
   

   View Slide

5. View Slide

6. View Slide

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
   

   View Slide

8. View Slide

9. New tab
   

   View Slide

10. New tab
    Browser downloads a HTML file
    

    View Slide

11. New tab
    Browser downloads a HTML file
    Parses through the HTML
    

    View Slide

12. New tab
    Browser downloads a HTML file
    Parses through the HTML
    Encounters something it needs to load (image, JS file, CSS file, etc.
    

    View Slide

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
    

    View Slide

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)
    

    View Slide

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
    

    View Slide

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
    

    View Slide

17. “the code and resources required to render the initial
    view of a web page”
    

    View Slide

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
    

    View Slide

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
    

    View Slide

20. “a feeling of anger or annoyance caused by being
    unable to do something”
    

    View Slide

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
    

    View Slide

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.”
    

    View Slide

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
    

    View Slide

24. View Slide

25. > 4 0 %
    

    View Slide

26. View Slide

27. View Slide

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
    

    View Slide

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.
    

    View Slide

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'
    );
    }
    

    View Slide

31. Allen Moore • @creativeallen • #wcphilly • allenmoore.me/wcphilly-2015
    WA I T T I L L L AT E R
    

    View Slide

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 )
    

    View Slide

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.”
    

    View Slide

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
    

    View Slide

35. Allen Moore • @creativeallen • #wcphilly • allenmoore.me/wcphilly-2015
    E X A M P L E
    <br/>.header {<br/>width: 100%;<br/>background-color: black;<br/>}<br/>.nav {<br/>width: 100%;<br/>height: auto;<br/>}<br/>
    

    View Slide

36. Allen Moore • @creativeallen • #wcphilly • allenmoore.me/wcphilly-2015
    E X A M P L E
    <br/>(function() {<br/>function loadCSS(href){<br/>var ss = window.document.createElement('link'),<br/>ref = window.document.getElementsByTagName('head')[0];<br/>ss.rel = 'stylesheet';<br/>ss.href = href;<br/>ss.media = 'only x';<br/>ref.parentNode.insertBefore(ss, ref);<br/>setTimeout( function(){<br/>ss.media = 'all';<br/>},0);<br/>}<br/>loadCSS('style.min.css');<br/>})();<br/>
    

    View Slide

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' );
    

    View Slide

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( '}
    add_filter( 'script_loader_tag', array( __CLASS__, 'async_theme_script' ), 10, 3 );
    

    View Slide

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
    

    View Slide

40. Allen Moore • @creativeallen • #wcphilly • allenmoore.me/wcphilly-2015
    B R OW S E R D E V TO O L S
    

    View Slide

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
    

    View Slide

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$;
    

    View Slide

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$;
    

    View Slide

44. Allen Moore • @creativeallen • #wcphilly • allenmoore.me/wcphilly-2015
    O N L I N E TO O L S
    

    View Slide

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
    

    View Slide

46. Allen Moore • @creativeallen • #wcphilly • allenmoore.me/wcphilly-2015
    Q U E S T I O N S ?
    

    View Slide

47. Allen Moore • @creativeallen • #wcphilly • allenmoore.me/wcphilly-2015
    

    View Slide