a need for speed: performance driven front end development

Allen Moore • @creativeallen • #wcavl • allenmoore.me/wcavl-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

http://www.url.com/slides


W H E R E T O F I N D M E

Twitter: @creativeallen

Personal Blog: allenmoore.me

Github: http://github.com/allenmoore


http://www.allenmoore.me

http://github.com/allenmoore


YES, We’re Hiring!



H O W S O C I E T Y H A S S H A P E D T H E W E B



H O W A B R O W S E R LOA D S A W E B PAG E


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


T H E C R I T I C A L R E N D E R I N G PAT H — A B O V E T H E F O L D


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


H O W 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



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


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


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


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


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



I F YO U D O N ’ T N E E D I T, D O N ’ T LOA D I T.



E X A M P L E

if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {

wp_enqueue_script( 'comment-reply'

); }



WA I T T I L L L AT E R



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 )


“It’s great to be on the Cutting Edge, but it’s never ok to be on the Bleeding Edge of the Cutting Edge.”


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 O T E R



G R U N T- C R I T I C A LC S S

criticalcss: { home: { options: { url: 'http://localdomain.dev', width: 1200, height: 900, outputfile: ‘path/to/critical-home.css', filename: 'path/to/style.css', buffer: 800*1024, ignoreConsole: true } } }




article: { options: { url: 'http://localdomain.dev/article-name/', width: 1200, height: 900, outputfile: 'path/to/critical-article.css', filename: 'path/to/style.css', buffer: 800*1024, ignoreConsole: true } }




grunt.registerTask('critical', ['criticalcss']);



E X A M P L E - I N L I N E C R I T I C A L C S S

<style> .header { width: 100%; background-color: black; } .nav { width: 100%; height: auto; } </style>



E X A M P L E - T H E M E S T Y L E S<script> (function () { function loadCSS(href) { var ss = window.document.createElement('link'), ref = window.document.getElementsByTagName('script')[0];

ss.rel = 'stylesheet'; ss.href = href;

ss.media = 'only x';

ref.parentNode.insertBefore(ss, ref);

setTimeout(function () { ss.media = 'all'; }, 0); }

loadCSS('<?php echo esc_url( 'styles.css' ); ?>'); })(); </script> <noscript> <link rel="stylesheet" href="<?php echo esc_url( 'styles.css' ); ?>"> </noscript>



E X A M P L E - E N Q U E U E I N G J S

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



E X A M P L E - A S Y N C J S W I T H S C R I P T LOA D E R TAG

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



T O O L S T O M E A S U R E F R O N T E N D P E R F O R M A N C E



B R O W S E R D E V T O O L S



T E S T O N A L L T H E T H I N G S



X I P. I O

• Domain name that provides wildcard DNS for any IP Address.

• Example: yourdomain.192.168.1.100.xip.io


http://xip.io

http://xip.io


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



B R O W S E R S Y N C

• Keep multiple browsers & devices in sync when building websites.

• http://www.browsersync.io/


http://www.browsersync.io/


E X A M P L E - B R O W S E R S Y N C

browserSync: { dev: { bsFiles: { src : 'path/to/styles.css' }, options: { watchTask: true, proxy: 'yourdomain.dev' } } }



E X A M P L E - B R O W S E R S Y N C

grunt.registerTask('local', ['default', 'browserSync', 'watch']);



O N L I N E T O O L S



O N L I N E T O O L S

• Google Page Speed Insights -

• WebPageTest.org

• SiteSpeed.io


http://WebPageTest.org


Q U E S T I O N S ?


a need for speed: performance driven front end development

Presentations & Public Speaking

n e e r

n d e x p e r i e n

e s i n

n t h e h e

n e e d f o r s p e

w h e r e

e twitter

o o r e f r o n t e