Slide 1
Slide 1 text
Front-end performance
or, how to make websites load super fast
Slide 2
Slide 2 text
Trevan Hetzel
@trevanhetzel
trevan.co
Slide 3
Slide 3 text
Beautiful WordPress hosting built for designers
Slide 4
Slide 4 text
Front-end performance
or, how to make websites load super fast
Slide 5
Slide 5 text
“80-90% of the end-user
response time is spent on
the front-end. Start there.”
- Steve Souders
Slide 6
Slide 6 text
Caching headers
Server-side caching
CDN
Images
CSS
JavaScript
GZIP
Reduce cookies
Dedicated host
Minify HTML
Database queries
Slide 7
Slide 7 text
Caching headers
Server-side caching
CDN
Images
CSS
JavaScript
GZIP
Reduce cookies
Dedicated host
Minify HTML
Transients
Database queries
Slide 8
Slide 8 text
Perceived performance
The most valuable metric
Slide 9
Slide 9 text
How fast a user thinks
your site loads
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
Test yourself
before you wreck yourself
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
Images
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
No really,
use CSS or icon fonts
Slide 16
Slide 16 text
Sprite
Slide 17
Slide 17 text
5kb 4kb 4kb
3kb
6kb
5kb 5kb 3kb 6kb
✗
Slide 18
Slide 18 text
14kb
✓
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
Compress
Slide 21
Slide 21 text
No content
Slide 22
Slide 22 text
OptiPNG
PNGGauntlet
Slide 23
Slide 23 text
Don’t scale images in HTML
Slide 24
Slide 24 text
Slide 25
Slide 25 text
Slide 26
Slide 26 text
Slide 27
Slide 27 text
What about retina
& responsive design?
Slide 28
Slide 28 text
Slide 29
Slide 29 text
Slide 30
Slide 30 text
Lazy load
Slide 31
Slide 31 text
No content
Slide 32
Slide 32 text
• Reduce the amount of images used
• Sprite
• Compress
• Don’t scale in HTML
• Lazy load
Summary
Slide 33
Slide 33 text
JavaScript
Slide 34
Slide 34 text
Is it necessary?
Slide 35
Slide 35 text
Okay then,
concatenate & minify
Slide 36
Slide 36 text
Write performant code
Slide 37
Slide 37 text
Defer loading of scripts
Slide 38
Slide 38 text
Slide 39
Slide 39 text
Slide 40
Slide 40 text
Slide 41
Slide 41 text
Script loaders
Slide 42
Slide 42 text
var resource = document.createElement('script');
resource.src = "app.js";
var script = document.getElementsByTagName('script')[0];
script.parentNode.insertBefore(resource, script);
Slide 43
Slide 43 text
https://github.com/filamentgroup/loadJS
loadJS
Slide 44
Slide 44 text
...
// include loadJS here...
function loadJS( src ){ ... }
// load a file with loadJS
loadJS( "path/to/script.js" );
...
Slide 45
Slide 45 text
• Don’t overuse libraries & frameworks
• Concatenate
• Minify
• Write performant JS
• Defer loading
Summary
Slide 46
Slide 46 text
CSS
Slide 47
Slide 47 text
Follow some sort of standard
Slide 48
Slide 48 text
Concatenate & minify
Slide 49
Slide 49 text
No content
Slide 50
Slide 50 text
Stylesheets go
in the
Slide 51
Slide 51 text
But Google says…
Slide 52
Slide 52 text
Google’s right.
Inline critical CSS
Slide 53
Slide 53 text
Critical CSS
Styles that are needed for the first, above-the-fold
view are inlined in the
The full stylesheet is then loading asynchronously,
not blocking the rest of the page
Slide 54
Slide 54 text
*{box-sizing:border-box}html{padding:
1em;background-color:#f4d93a}body{font-
family:’Helvetica Neue',sans-serif;
padding:0;margin:0;font-size:100%;line-height:
140%;
...
Slide 55
Slide 55 text
How to find critical CSS
• critical by Addy Osmani
• grunt-criticalcss by Filament Group
Slide 56
Slide 56 text
What about the
full stylesheet?
Slide 57
Slide 57 text
https://github.com/filamentgroup/loadCSS
loadCSS
Slide 58
Slide 58 text
...
// include loadCSS here...
function loadCSS( href, before, media ){ ... }
// load a file
loadCSS( "path/to/mystylesheet.css" );
...
Slide 59
Slide 59 text
But, but, inline styles
aren’t cacheable…
Slide 60
Slide 60 text
<!-- Critical styles go here -->
// include loadCSS here...
function loadCSS( href, before, media ){ ... }
// load a file
loadCSS( "path/to/mystylesheet.css" );
// Set cookie here
Slide 61
Slide 61 text
• Use a CSS methodology or standard
• Concatenate
• Minify
• Inline critical CSS
• Load full stylesheet asynchronously
Summary
Slide 62
Slide 62 text
Thanks!
@trevanhetzel
trevan.co