$30 off During Our Annual Pro Sale. View Details »

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.

Allen Moore

June 13, 2015
Tweet

More Decks by Allen Moore

Other Decks in Programming

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