Fluent 2015 Automate Front-end Performance

Kitt Hodsden • @kitt • http://ki.tt/fluent2015
Automate Your Site's
Front-End Performance
Kitt Hodsden / @kitt
slides here

View Slide

Kitt Hodsden • @kitt • http://ki.tt/fluent2015 2
You.

View Slide

Me.

View Slide


View Slide

Performance is
everyone’s problem.

View Slide

“What does FAST even mean?”

View Slide

Determine key metrics

View Slide

Establish a baseline

View Slide

Make a change

View Slide

Make a change
Measure effects

View Slide


View Slide

40% will abandon a
website that takes more
than 3 seconds to load.

View Slide

https://blog.kissmetrics.com/loading-time/
Not quite

View Slide

Performance Budget

View Slide

http://timkadlec.com/2013/01/setting-a-performance-budget/
http://timkadlec.com/2014/11/performance-budget-metrics/
http://danielmall.com/articles/how-to-make-a-performance-budget/

View Slide


View Slide

https://speakerdeck.com/lara/designing-for-performance?slide=69

View Slide


View Slide

How fast is our site?

View Slide

https://www.flickr.com/photos/[email protected]/8613726003

View Slide

No.

View Slide

The simplest way?

View Slide

Your browser

View Slide

Firefox

View Slide

Safari

View Slide

IE

View Slide

Chrome

View Slide

https://developer.chrome.com/devtools/docs/network#resource-network-timing

View Slide


View Slide

But… but…
36

View Slide

My network!
37

View Slide

My browsers!
38

View Slide

Automation!
39

View Slide


View Slide

http://nodejs.org/

View Slide

npm
42
Node Package Manager for installing node packages

View Slide


View Slide

npm install -g grunt-cli
44

View Slide

45
package.json
Gruntfile.js
The two ﬁles grunt uses

View Slide

Just download them.
https://github.com/search?q=Gruntfile.js
https://github.com/kitt/grunt-perf-template
46

View Slide

47
{
"engines": {
"node": ">= 0.12.0"
},
"devDependencies": {
"grunt": "~0.4.2",
"grunt-contrib-jshint": "~0.7.2",
"grunt-contrib-watch": "~0.5.3",
}
}
This is what a package.json ﬁle looks like

View Slide

48
{
"engines": {
"node": ">= 0.12.0"
},
"devDependencies": {
"grunt": "~0.4.2",
"grunt-contrib-jshint": "~0.7.2",
"grunt-contrib-watch": "~0.5.3",
}
}
This is what a package.json ﬁle looks like

View Slide

49
$ npm install
With a package.json file, you can install the needed packages easily.

View Slide

50
$ npm install
No -g here!
With a package.json file, you can install the needed packages easily.

View Slide

51
$ ls
Gemfile README.txt fonts node_modules tpl
Gemfile.lock config.rb img package.json widgets
Gruntfile.js css js scss

View Slide

Check dependencies into the repo?
http://addyosmani.com/blog/checking-in-front-end-dependencies/
http://redotheweb.com/2013/09/12/should-you-commit-dependencies.html
52
Total sidebar on checking dependencies into the repo or not

View Slide

module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%="yyyy-mm-dd") %> */\n'
},
build: {
src: 'src/<%= pkg.name %>.js',
dest: 'build/<%= pkg.name %>.min.js'
}
}
});
// Load the plugin that provides the "uglify" task.
grunt.loadNpmTasks('grunt-contrib-uglify');
// Default task(s).
grunt.registerTask('default', ['uglify']);
};

View Slide

54
grunt.initConfig({
uglify: {
options: {
},
build: {
}
}
});
// Default task(s).
};
A basic Gruntﬁle.js ﬁle

View Slide

55
grunt.initConfig({
uglify: {
options: {
},
build: {
}
}
});
// Default task(s).
};

View Slide

56
grunt.initConfig({
uglify: {
options: {
},
build: {
}
}
});
// Default task(s).
};

View Slide

57
$ npm install matchdep --save-dev

View Slide

58
...
// load all the grunt modules instead of one each line
require("matchdep").filterDev("grunt-*").forEach(grunt.loadNpmTasks);
grunt.registerTask('checkjs', ['jshint']);
grunt.registerTask('watchjs', ['jshint', 'watch']);
grunt.registerTask('gruntjs', ['jshint:gruntfile', 'watch']);

View Slide


View Slide

npm install grunt-devperf --save-dev
60

View Slide

https://github.com/macbre/phantomas

View Slide

62
devperf: {
options: {
urls: [
'http://localhost:8000'
]
}
}
…
grunt.registerTask('pe', ['devperf']);

View Slide


View Slide

64
…
devperf: {
options: {
urls: [
'http://fromthemiddle.io/'
],
numberOfRuns: 5,
openResults: true,
resultsFolder: './devperf',
phantomasOptions: {
'film-strip': true
}
}
}
…
grunt.registerTask('pe', ['devperf']);

View Slide


View Slide

http://fluentconf.com/javascript-html-2015/public/schedule/grid/public

View Slide

Remove HTML
Comments?
72
https://github.com/gruntjs/grunt-contrib-htmlmin

View Slide

npm install grunt-contrib-htmlmin —save-dev
73
https://github.com/gruntjs/grunt-contrib-htmlmin

View Slide

74
…
htmlmin: {
dist: {
options: {
removeComments: true,
collapseWhitespace: true
},
files: {
'dist/index.html': 'src/index.html',
'dist/contact.html': 'src/contact.html'
}
},
dev: {
files: {
'dist/index.html': 'src/index.html',
'dist/contact.html': 'src/contact.html'
}
}
}
…
grunt.registerTask(‘comments-be-gone‘, ['htmlmin']);

View Slide

Concatenate and
Minify CSS files?
75

View Slide

npm install grunt-contrib-cssmin --save-dev
76
Minimize CSS ﬁles

View Slide

Remove duplicate CSS?
77

View Slide

npm install grunt-csscss --save-dev
78
Report duplicate CSS in ﬁles

View Slide

Remove unused CSS?
79

View Slide

npm install grunt-uncss --save-dev
80
Remove unused CSS

View Slide

npm install grunt-cssstats --save-dev
81
https://github.com/cssstats/grunt-cssstats
Look at the site’s CSS statistics

View Slide

https://github.com/cssstats/cssstats

View Slide


View Slide

grunt-cssstats configuration https://github.com/cssstats/grunt-cssstats
cssstats: {
dev: {
options: {},
files: {
'stats/css-stats.json': ['css/example.css']
},
}
}
…
grunt.registerTask('stats', ['cssstats']);

View Slide

cssstats: {
dev: {
options: { safe: false }, // Barf on invalid CSS
files: {
'stats/cssstats-dev.json': ['app/styles/main.css']
}
},
prod: {
files: {
'stats/cssstats.json': ['dist/styles.css']
}
}
}

View Slide

https://github.com/cssstats/cssstats
91

View Slide

Aggregate and
Minify JavaScript?
92

View Slide

npm install grunt-contrib-uglify --save-dev
93
Minimize javascript ﬁles

View Slide

Too many small images?
94
Making things easier with sprites!

View Slide

npm install grunt-montage --save-dev
95
Making things easier with sprites!

View Slide

96
grunt.initConfig({
montage: {
iconaroo: {
files: {
"images/sprites": [
"images/icons/*.png"
]
},
options: {
size: 32,
outputImage: "sprite-icons.png",
outputStylesheet: "sprite-icons.css"
}
}
}
});
Sample grunt-montage conﬁguration

View Slide

npm install grunt-contrib-imagemin --save-dev
97
Make pages load faster by reducing image sizes

View Slide

98
imagemin: {
prod: {
files: [{
expand: true,
cwd: 'imgs-src/',
src: ['**/*.{png,jpg,gif}'],
dest: 'imgs/'
}]
}
}

View Slide

npm install grunt-svgmin --save-dev
99
Reduce SVG sizes, too

View Slide

100
grunt.initConfig({
svgmin: { // Task
options: { // Configuration that will be passed directly to SVGO
plugins: [
{ removeViewBox: false },
{ removeUselessStrokeAndFill: false }
]
},
dist: { // Target
files: [{ // Dictionary of files
expand: true, // Enable dynamic expansion.
cwd: 'img/src', // Src matches are relative to this path.
src: ['**/*.svg'], // Actual pattern(s) to match.
dest: 'img/', // Destination path prefix.
ext: '.min.svg' // Dest filepaths will have this extension.
// ie: optimise img/src/branding/logo.svg and store it in img/branding/logo.min.svg
}]
}
});
grunt.loadNpmTasks('grunt-svgmin');
grunt.registerTask('default', ['svgmin']);
Sample grunt-svgmin configuration

View Slide


View Slide

npm install grunt-responsive-images --save-dev
102
Responsive images by resizing
https://github.com/andismith/grunt-responsive-images

View Slide

103
grunt.initConfig({
responsive_images: {
myTask: {
options: {
sizes: [{
width: 320,
height: 240
},{
name: 'large',
width: 640
},{
name: "large",
width: 1024,
suffix: "_x2",
quality: 60
}]
},
files: [{
expand: true,
src: ['assets/**.{jpg,gif,png}'],
cwd: 'test/',
dest: 'resize/{%= width %}/'
}]
}
},
});
Sample grunt-responsive-images conﬁguration

View Slide

npm install grunt-grunticon --save-dev
104
SVG with PNG fallbacks
https://github.com/ﬁlamentgroup/grunticon

View Slide

Wait… again…
105

View Slide

Dependent on
my network?
106

View Slide

Yep.
107

View Slide

How about not?
108

View Slide


View Slide

http://www.webpagetest.org/getkey.php
Request an API key.

View Slide


View Slide

http://www.webpagetest.org/getkey.php
Limits of public use
The API key is provisioned for up
to 200 page loads per day …
sufficient for most low-volume use
cases and for building a proof-of-
concept for larger testing

View Slide

Need more?

View Slide

https://sites.google.com/a/webpagetest.org/docs/private-instances
Set up your own WebPageTest server.

View Slide

npm install grunt-perfbudget --save-dev
116
https://github.com/tkadlec/grunt-perfbudget

View Slide

117
perfbudget: {
default: {
options: {
url: ‘http://example.io/',
key: 'PUT_YOUR_API_KEY_HERE'
}
}
}
…
grunt.registerTask('budg', ['perfbudget']);

View Slide

118
perfbudget: {
default: {
options: {
url: 'http://fromthemiddle.io/',
key: 'thisismykey',
wptInstance: 'ec2.us-west-2.amazonaws.com',
location: 'us-west-2_wptdriver',
pollResults: 10,
connectivity: '3G',
runs: 1,
timeout: 240
}
}
}

View Slide

119
perfbudget: {
default: {
options: {
key: 'thisismykey',
pollResults: 10,
connectivity: '3G',
runs: 1,
timeout: 240
}
}
}

View Slide

120
perfbudget: {
default: {
options: {
key: 'thisismykey',
pollResults: 10,
connectivity: '3G',
runs: 1,
timeout: 240
}
}
}

View Slide


View Slide

122
perfbudget: {
default: {
options: {
…
connectivity: '3G',
timeout: 240,
budget: {
render: '3000',
SpeedIndex: '7500',
visualComplete: '6000'
}
}
}
}

View Slide


View Slide

Now what?
125

View Slide

Integrate into CI builds
126

View Slide


View Slide

Tracking over time
128

View Slide

Tracking over time
129
http://www.wptmonitor.org/home

View Slide

npm install grunt-wpt --save-dev
130
https://github.com/sideroad/grunt-wpt
https://github.com/sideroad/grunt-wpt-page

View Slide

131
wpt: {
options: {
server: 'ec2.us-west-2.amazonaws.com',
dest: 'wpt/'
},
ftm: {
options: {
server: 'http://ec2.us-west-2.amazonaws.com',
url: ['http://fromthemiddle.io/']
},
dest: 'wpt/',
}
}
…
grunt.registerTask('wptrun', ['wpt']);

View Slide


View Slide

https://github.com/trulia/webpagetest-charts-ui
https://github.com/trulia/webpagetest-charts-api

View Slide

npm install grunt-shell --save-dev
134
Installing the grunt shell package to get to everything else

View Slide

function log(err, stdout, stderr, cb) {
console.log(stdout);
cb();
}
grunt.initConfig({
shell: {
dirListing: {
command: 'ls',
options: {
callback: log
}
}
}
});

View Slide

Make a change
Measure effects

View Slide

Worth looking at:
https://github.com/andyshora/grunt-yslow
https://github.com/jrcryer/grunt-pagespeed
https://github.com/addyosmani/psi/
http://www.sitespeed.io/
137

View Slide

Questions?
138

View Slide

Wait a second…

View Slide


View Slide

https://sites.google.com/a/webpagetest.org/docs/private-instances
Set up your own WebPageTest server.

View Slide


View Slide

$ ssh -i downloaded.pem [email protected]

View Slide

$ vi ~/.ssh/authorized_keys

View Slide

sudo vi /var/www/webpage/test/www/settings/settings.ini
# update host with ec2 hostname
# add ec2_key value (optional)
# add ec2_secret value (optional)
# uncomment EC2.us-west-2.securityGroup line
# uncomment EC2.us-west-2.subnetId line
#

View Slide

sudo vi /var/www/webpage/test/www/settings/keys.ini
[server]
secret=addarandomstringhere
key=addakeyhere
[addakeyhere]
description=Web UI
;[email protected]
limit=0
[thisisyourapikey]
description=API Key
;[email protected]
limit=0

View Slide

$ cd /var/www/webpage/test/www/settings/
$ sudo cp locations.ini.EC2-sample locations.ini

View Slide

$ sudo service nginx restart

View Slide

Set up testing instances

View Slide

EC2 server key in settings.ini

View Slide

OR

View Slide


View Slide

wpt_server=ec2.us-west-2.amazonaws.com wpt_key=YOURKEY wpt_location=us-west-2

View Slide

Wait.

View Slide


View Slide

Thanks!
Kitt Hodsden
http://ki.tt/
@kitt
179

View Slide

Fluent 2015 Automate Front-end Performance

Fluent 2015 Automate Front-end Performance

Kitt Hodsden

More Decks by Kitt Hodsden

Other Decks in Technology

Featured

Transcript