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

W H E R E TO F I N D M E
Twitter: @creativeallen
Personal Blog: allenmoore.me
Github: http://github.com/allenmoore

YES, We’re Hiring!

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

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 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 OV E T H E F O L D

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

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

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

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

B R OW S E R D E V TO 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

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 OW S E R SY N C
• Keep multiple browsers & devices in sync when building
websites.
• http://www.browsersync.io/

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

E X A M P L E - B R OW S E R SY N C
grunt.registerTask('local', ['default', 'browserSync', 'watch']);

O N L I N E TO O L S

O N L I N E TO O L S
• Google Page Speed Insights -
• WebPageTest.org
• SiteSpeed.io

Q U E S T I O N S ?

A Need For Speed: Performance Driven Front End Development

Recommended

Recommended

More Related Content

Recently uploaded

Recently uploaded (20)

Featured

Featured (20)

A Need For Speed: Performance Driven Front End Development