devObjective Automate Your Site's Front End Performance

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

View Slide

Kitt Hodsden • @kitt • http://ki.tt/do2015 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/wonderlane/6450860457

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

https://lafikl.github.io/perfBar/
36

View Slide

https://lafikl.github.io/perfBar/

View Slide

But… but…
38

View Slide

My network!
39

View Slide

My browsers!
40

View Slide

Automation!
41

View Slide


View Slide

http://nodejs.org/

View Slide

npm
44
Node Package Manager for installing node packages

View Slide


View Slide

npm install -g grunt-cli
46

View Slide

47
package.json
Gruntfile.js
The two files grunt uses

View Slide

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

View Slide

49
{
"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

50
{
"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

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

View Slide

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

View Slide

53
$ 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
54
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: '/*! */\n'
},
build: {
src: 'src/.js',
dest: 'build/.min.js'
}
}
});
// Load the plugin that provides the "uglify" task.
grunt.loadNpmTasks('grunt-contrib-uglify');
// Default task(s).
grunt.registerTask('default', ['uglify']);
};

View Slide

56
grunt.initConfig({
uglify: {
options: {
banner: '/*! */\n'
},
build: {
src: 'src/.js',
}
}
});
// Default task(s).
};
A basic Gruntﬁle.js ﬁle

View Slide

57
grunt.initConfig({
uglify: {
options: {
banner: '/*! */\n'
},
build: {
src: 'src/.js',
}
}
});
// Default task(s).
};

View Slide

58
grunt.initConfig({
uglify: {
options: {
banner: '/*! */\n'
},
build: {
src: 'src/.js',
}
}
});
// Default task(s).
};

View Slide

59
$ npm install matchdep --save-dev

View Slide

60
...
// 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

https://www.flickr.com/photos/dandechiaro/4151566643

View Slide

npm install grunt-devperf --save-dev
62

View Slide

https://github.com/macbre/phantomas

View Slide

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

View Slide


View Slide

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

View Slide


View Slide

https://www.flickr.com/photos/ndrwfgg/8072089187

View Slide

http://www.devobjective.com/

View Slide

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

View Slide

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

View Slide

78
…
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?
79

View Slide

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

View Slide

Remove duplicate CSS?
81

View Slide

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

View Slide

Remove unused CSS?
83

View Slide

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

View Slide

npm install grunt-cssstats --save-dev
85
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
95

View Slide

Aggregate and
Minify JavaScript?
96

View Slide

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

View Slide

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

View Slide

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

View Slide

100
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
101
Make pages load faster by reducing image sizes

View Slide

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

View Slide

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

View Slide

104
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
106
Responsive images by resizing
https://github.com/andismith/grunt-responsive-images

View Slide

107
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
108
SVG with PNG fallbacks
https://github.com/ﬁlamentgroup/grunticon

View Slide

Wait… again…
109

View Slide

Dependent on
my network?
110

View Slide

Yep.
111

View Slide

How about not?
112

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
120
https://github.com/tkadlec/grunt-perfbudget

View Slide

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

View Slide

122
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

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

View Slide

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

View Slide


View Slide

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

View Slide


View Slide

Now what?
129

View Slide

Integrate into CI builds
130

View Slide


View Slide

Tracking over time
132

View Slide

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

View Slide

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

View Slide

135
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
138
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

Oh boy!

View Slide

https://github.com/nature/webpagetest-mapper
webpagetest-mapper

View Slide

https://github.com/marcelduran/webpagetest-api
Dependent on
webpagetest-api

View Slide

npm install webpagetest-api -g
npm install webpagetest-mapper -g
143

View Slide

$ cat tests.json
[
{
"name": "From the Middle",
"url": "http://fromthemiddle.io/",
"type": "home"
},
{
"name": "Kitt Hodsden",
"url": "https://kitt.hodsden.org/",
"type": "away"
}
]

View Slide


View Slide

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

View Slide

Recall what we’re doing…
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/
http://perf-tooling.today/tools
149

View Slide

Questions?
150

View Slide

Wait a second…

View Slide


View Slide

Set up your own WebPageTest server.

View Slide

https://aws.amazon.com/
Login In to Amazon AWS

View Slide

Click on EC2

View Slide

Click on Launch Instance

View Slide

Click on Community AMIs

View Slide


View Slide

$ ssh -i downloaded.pem [email protected]

View Slide

$ vi ~/.ssh/authorized_keys
dd # delete the first line
[esc] # trigger the vi command sequence
:wq # save the file and quit

View Slide

sudo vi /var/www/webpagetest/www/settings/settings.ini
# update publishTo with ec2 hostname
# update ec2 = 0
# update ec2_locations = 0
# add EC2.us-west-2.securityGroup line from sample
# add EC2.us-west-2.subnetId line from sample
#

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
# delete extra locations
# update key values to your thisisyourkey value

View Slide

$ sudo service nginx restart

View Slide

Set up testing instances

View Slide

EC2 server key in settings.ini
(more complicated to set up, better automation management)

View Slide

OR

View Slide

Manual Setup

View Slide

Click on Launch Instance

View Slide


View Slide

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

View Slide

devObjective Automate Your Site's Front End Performance

devObjective Automate Your Site's Front End Performance

Kitt Hodsden

More Decks by Kitt Hodsden

Other Decks in Technology

Featured

Transcript