Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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...
Allen Moore • @creativeallen • #wcavl • allenmoore.me/wcavl-2015
W H E R E TO F I N D M E
Twitter: @creativeallen
Personal...
Allen Moore • @creativeallen • #wcavl • allenmoore.me/wcavl-2015
YES, We’re Hiring!
Allen Moore • @creativeallen • #wcavl • allenmoore.me/wcavl-2015
H OW S O C I E T Y H AS
S H A P E D T H E W E B
Allen Moore • @creativeallen • #wcavl • allenmoore.me/wcavl-2015
H OW A B R OW 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 f...
Allen Moore • @creativeallen • #wcavl • allenmoore.me/wcavl-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 ...
“the code and resources required to render the initial
view of a web page”
Allen Moore • @creativeallen • #wcavl • allenmoore.me/wcavl-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 ...
Allen Moore • @creativeallen • #wcavl • allenmoore.me/wcavl-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
“a feeling of anger or annoyance caused by being
unable to do something”
Allen Moore • @creativeallen • #wcavl • allenmoore.me/wcavl-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
“Web accessibility refers to the inclusive practice of
removing barriers that prevent interaction with, or
access to websi...
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...
Allen Moore • @creativeallen • #wcavl • allenmoore.me/wcavl-2015
I F YO U D O N ’ T N E E D I T,
D O N ’ T LOA D I T.
Allen Moore • @creativeallen • #wcavl • allenmoore.me/wcavl-2015
E X A M P L E
if ( is_singular()
&& comments_open()
&& ge...
Allen Moore • @creativeallen • #wcavl • allenmoore.me/wcavl-2015
WA I T T I L L L AT E R
Allen Moore • @creativeallen • #wcavl • allenmoore.me/wcavl-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...
“It’s great to be on the Cutting Edge, but it’s never ok
to be on the Bleeding Edge of the Cutting Edge.”
Allen Moore • @creativeallen • #wcavl • allenmoore.me/wcavl-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...
Allen Moore • @creativeallen • #wcavl • allenmoore.me/wcavl-2015
G R U N T- C R I T I C A LC S S
criticalcss: {
home: {
op...
Allen Moore • @creativeallen • #wcavl • allenmoore.me/wcavl-2015
G R U N T- C R I T I C A LC S S
article: {
options: {
url...
Allen Moore • @creativeallen • #wcavl • allenmoore.me/wcavl-2015
G R U N T- C R I T I C A LC S S
grunt.registerTask('criti...
Allen Moore • @creativeallen • #wcavl • allenmoore.me/wcavl-2015
G R U N T- C R I T I C A LC S S
Allen Moore • @creativeallen • #wcavl • allenmoore.me/wcavl-2015
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>...
Allen Moore • @creativeallen • #wcavl • allenmoore.me/wcavl-2015
E X A M P L E - T H E M E S T Y L E S
<script>
(function ...
Allen Moore • @creativeallen • #wcavl • allenmoore.me/wcavl-2015
E X A M P L E - E N Q U E U E I N G J S
function theme_sc...
Allen Moore • @creativeallen • #wcavl • allenmoore.me/wcavl-2015
E X A M P L E - ASY N C J S W I T H S C R I P T
LOA D E R...
Allen Moore • @creativeallen • #wcavl • allenmoore.me/wcavl-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 ...
Allen Moore • @creativeallen • #wcavl • allenmoore.me/wcavl-2015
B R OW S E R D E V TO O L S
Allen Moore • @creativeallen • #wcavl • allenmoore.me/wcavl-2015
T E S T O N A L L T H E
T H I N G S
Allen Moore • @creativeallen • #wcavl • allenmoore.me/wcavl-2015
X I P. I O
• Domain name that provides wildcard DNS for a...
Allen Moore • @creativeallen • #wcavl • allenmoore.me/wcavl-2015
E X A M P L E - X I P. I O
server_name local.dev *.local....
Allen Moore • @creativeallen • #wcavl • allenmoore.me/wcavl-2015
B R OW S E R SY N C
• Keep multiple browsers & devices in...
Allen Moore • @creativeallen • #wcavl • allenmoore.me/wcavl-2015
E X A M P L E - B R OW S E R SY N C
browserSync: {
dev: {...
Allen Moore • @creativeallen • #wcavl • allenmoore.me/wcavl-2015
E X A M P L E - B R OW S E R SY N C
grunt.registerTask('l...
Allen Moore • @creativeallen • #wcavl • allenmoore.me/wcavl-2015
O N L I N E TO O L S
Allen Moore • @creativeallen • #wcavl • allenmoore.me/wcavl-2015
O N L I N E TO O L S
• Google Page Speed Insights -
• Web...
Allen Moore • @creativeallen • #wcavl • allenmoore.me/wcavl-2015
Q U E S T I O N S ?
Allen Moore • @creativeallen • #wcavl • allenmoore.me/wcavl-2015
A Need For Speed: Performance Driven Front End Development
Upcoming SlideShare
Loading in …5
×

A Need For Speed: Performance Driven Front End Development

915 views

Published on

This is my presentation from WordCamp Asheville 2015 on Performance Driven Front End Development.

  • Be the first to comment

  • Be the first to like this

A Need For Speed: Performance Driven Front End Development

  1. 1. 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
  2. 2. Allen Moore • @creativeallen • #wcavl • allenmoore.me/wcavl-2015 W H E R E TO F I N D M E Twitter: @creativeallen Personal Blog: allenmoore.me Github: http://github.com/allenmoore
  3. 3. Allen Moore • @creativeallen • #wcavl • allenmoore.me/wcavl-2015 YES, We’re Hiring!
  4. 4. Allen Moore • @creativeallen • #wcavl • allenmoore.me/wcavl-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. 5. Allen Moore • @creativeallen • #wcavl • allenmoore.me/wcavl-2015 H OW A B R OW S E R LOA D S A W E B PAG E
  6. 6. 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
  7. 7. Allen Moore • @creativeallen • #wcavl • allenmoore.me/wcavl-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
  8. 8. “the code and resources required to render the initial view of a web page”
  9. 9. Allen Moore • @creativeallen • #wcavl • allenmoore.me/wcavl-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
  10. 10. Allen Moore • @creativeallen • #wcavl • allenmoore.me/wcavl-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
  11. 11. “a feeling of anger or annoyance caused by being unable to do something”
  12. 12. Allen Moore • @creativeallen • #wcavl • allenmoore.me/wcavl-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
  13. 13. “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.”
  14. 14. 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 B E S T P R AC T I C E S
  15. 15. Allen Moore • @creativeallen • #wcavl • allenmoore.me/wcavl-2015 I F YO U D O N ’ T N E E D I T, D O N ’ T LOA D I T.
  16. 16. Allen Moore • @creativeallen • #wcavl • allenmoore.me/wcavl-2015 E X A M P L E if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) { wp_enqueue_script( 'comment-reply' ); }
  17. 17. Allen Moore • @creativeallen • #wcavl • allenmoore.me/wcavl-2015 WA I T T I L L L AT E R
  18. 18. Allen Moore • @creativeallen • #wcavl • allenmoore.me/wcavl-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 )
  19. 19. “It’s great to be on the Cutting Edge, but it’s never ok to be on the Bleeding Edge of the Cutting Edge.”
  20. 20. Allen Moore • @creativeallen • #wcavl • allenmoore.me/wcavl-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
  21. 21. Allen Moore • @creativeallen • #wcavl • allenmoore.me/wcavl-2015 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 } } }
  22. 22. Allen Moore • @creativeallen • #wcavl • allenmoore.me/wcavl-2015 G R U N T- C R I T I C A LC S S 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 } }
  23. 23. Allen Moore • @creativeallen • #wcavl • allenmoore.me/wcavl-2015 G R U N T- C R I T I C A LC S S grunt.registerTask('critical', ['criticalcss']);
  24. 24. Allen Moore • @creativeallen • #wcavl • allenmoore.me/wcavl-2015 G R U N T- C R I T I C A LC S S
  25. 25. Allen Moore • @creativeallen • #wcavl • allenmoore.me/wcavl-2015 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>
  26. 26. Allen Moore • @creativeallen • #wcavl • allenmoore.me/wcavl-2015 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>
  27. 27. Allen Moore • @creativeallen • #wcavl • allenmoore.me/wcavl-2015 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' );
  28. 28. Allen Moore • @creativeallen • #wcavl • allenmoore.me/wcavl-2015 E X A M P L E - ASY 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 );
  29. 29. Allen Moore • @creativeallen • #wcavl • allenmoore.me/wcavl-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
  30. 30. Allen Moore • @creativeallen • #wcavl • allenmoore.me/wcavl-2015 B R OW S E R D E V TO O L S
  31. 31. Allen Moore • @creativeallen • #wcavl • allenmoore.me/wcavl-2015 T E S T O N A L L T H E T H I N G S
  32. 32. Allen Moore • @creativeallen • #wcavl • allenmoore.me/wcavl-2015 X I P. I O • Domain name that provides wildcard DNS for any IP Address. • Example: yourdomain.192.168.1.100.xip.io
  33. 33. Allen Moore • @creativeallen • #wcavl • allenmoore.me/wcavl-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$;
  34. 34. Allen Moore • @creativeallen • #wcavl • allenmoore.me/wcavl-2015 B R OW S E R SY N C • Keep multiple browsers & devices in sync when building websites. • http://www.browsersync.io/
  35. 35. Allen Moore • @creativeallen • #wcavl • allenmoore.me/wcavl-2015 E X A M P L E - B R OW S E R SY N C browserSync: { dev: { bsFiles: { src : 'path/to/styles.css' }, options: { watchTask: true, proxy: 'yourdomain.dev' } } }
  36. 36. Allen Moore • @creativeallen • #wcavl • allenmoore.me/wcavl-2015 E X A M P L E - B R OW S E R SY N C grunt.registerTask('local', ['default', 'browserSync', 'watch']);
  37. 37. Allen Moore • @creativeallen • #wcavl • allenmoore.me/wcavl-2015 O N L I N E TO O L S
  38. 38. Allen Moore • @creativeallen • #wcavl • allenmoore.me/wcavl-2015 O N L I N E TO O L S • Google Page Speed Insights - • WebPageTest.org • SiteSpeed.io
  39. 39. Allen Moore • @creativeallen • #wcavl • allenmoore.me/wcavl-2015 Q U E S T I O N S ?
  40. 40. Allen Moore • @creativeallen • #wcavl • allenmoore.me/wcavl-2015

×