Slide 1
Slide 1 text
Automating
WEB
Performance
Slide 2
Slide 2 text
Robin Osborne
@rposbo
Slide 3
Slide 3 text
Dean Hume
@deanohume
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
ASP.Net is Open Source!
Slide 6
Slide 6 text
Does
performance
really matter?
Slide 7
Slide 7 text
2.2 SECONDS
Slide 8
Slide 8 text
2.2 SECONDS
Increased downloads by 15.4%
Slide 9
Slide 9 text
2.2 SECONDS
Increased downloads by 15.4%
60 million more downloads
Slide 10
Slide 10 text
People != Patience
Slide 11
Slide 11 text
whatdoesmysitecost.com
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
It all started with...
Slide 15
Slide 15 text
RULES
Make Fewer HTTP Requests
Use a Content Delivery Network
Add an Expires Header
Gzip Components
Put Stylesheets at the Top
Put Scripts at the Bottom
Slide 16
Slide 16 text
RULES
Make Fewer HTTP Requests
Use a Content Delivery Network
Add an Expires Header
Gzip Components
Put Stylesheets at the Top
Put Scripts at the Bottom
Slide 17
Slide 17 text
RULES
Make Fewer HTTP Requests
Use a Content Delivery Network
Add an Expires Header
Gzip Components
Put Stylesheets at the Top
Put Scripts at the Bottom
Slide 18
Slide 18 text
RULES
Make Fewer HTTP Requests
Use a Content Delivery Network
Add an Expires Header
Gzip Components
Put Stylesheets at the Top
Put Scripts at the Bottom
Slide 19
Slide 19 text
RULES
Make Fewer HTTP Requests
Use a Content Delivery Network
Add an Expires Header
Gzip Components
Put Stylesheets at the Top
Put Scripts at the Bottom
Slide 20
Slide 20 text
RULES
Make Fewer HTTP Requests
Use a Content Delivery Network
Add an Expires Header
Gzip Components
Put Stylesheets at the Top
Put Scripts at the Bottom
Slide 21
Slide 21 text
RULES
Make Fewer HTTP Requests
Use a Content Delivery Network
Add an Expires Header
Gzip Components
Put Stylesheets at the Top
Put Scripts at the Bottom
Slide 22
Slide 22 text
Web
Performance
ain’t easy!
Slide 23
Slide 23 text
No content
Slide 24
Slide 24 text
Manual Process
Slide 25
Slide 25 text
No content
Slide 26
Slide 26 text
No content
Slide 27
Slide 27 text
HTML
Slide 28
Slide 28 text
HTML
CSS
Slide 29
Slide 29 text
HTML
CSS
Images
Slide 30
Slide 30 text
HTML
CSS
JS
Images
Slide 31
Slide 31 text
Steps
1. Images
Slide 32
Slide 32 text
Steps
1. Images
2. CSS
Slide 33
Slide 33 text
Steps
1. Images
2. CSS
3. JavaScript
Slide 34
Slide 34 text
Steps
1. Images
2. CSS
3. JavaScript
4. HTML
Slide 35
Slide 35 text
Steps
1. Images
2. CSS
3. JavaScript
4. HTML
5. Testing
Slide 36
Slide 36 text
HTTP2
Slide 37
Slide 37 text
HTTP2
HTTP2
Approved
Slide 38
Slide 38 text
No content
Slide 39
Slide 39 text
TAKE A BREAK
Slide 40
Slide 40 text
tinyurl.com/bulkybricks
Slide 41
Slide 41 text
No content
Slide 42
Slide 42 text
index
Slide 43
Slide 43 text
index products
Slide 44
Slide 44 text
index products
product
Slide 45
Slide 45 text
index products
product
contact
Slide 46
Slide 46 text
index products
product
contact about
Slide 47
Slide 47 text
No content
Slide 48
Slide 48 text
No content
Slide 49
Slide 49 text
Material Design Lite
Slide 50
Slide 50 text
getmdl.io/started
Slide 51
Slide 51 text
whatdoesmysitecost.com
Slide 52
Slide 52 text
Amsterdam
Slide 53
Slide 53 text
Amsterdam
Home page
Slide 54
Slide 54 text
Amsterdam
Home page - 21 seconds
Slide 55
Slide 55 text
Amsterdam
Home page - 21 seconds & cost 5c
Slide 56
Slide 56 text
Amsterdam
Home page - 21 seconds & cost 5c
Product page
Slide 57
Slide 57 text
Amsterdam
Home page - 21 seconds & cost 5c
Product page - 22 seconds
Slide 58
Slide 58 text
Amsterdam
Home page - 21 seconds & cost 5c
Product page - 22 seconds & cost 35c
Slide 59
Slide 59 text
webpagetest.org
Slide 60
Slide 60 text
developers.google.com/speed/pagespeed/insights/
Slide 61
Slide 61 text
53
Slide 62
Slide 62 text
Automate Measuring
Slide 63
Slide 63 text
Automate all
the things
Slide 64
Slide 64 text
Begin the journey
tinyurl.com/bulkybricks
Slide 65
Slide 65 text
optimise
before
deploying
Slide 66
Slide 66 text
Grunt
Gulp
Slide 67
Slide 67 text
Grunt
Gulp
Slide 68
Slide 68 text
Gulp Grunt
Slide 69
Slide 69 text
764
15,758
145
1,283,067
1,691
Grunt
Gulp
601
9,883
55
1,356,374
4,403
Watchers
Stars
Contributors
Downloads
Plugins
August 2015
Slide 70
Slide 70 text
mod_pagespeed
optimise
after
deploying
Slide 71
Slide 71 text
Gulp Grunt
Slide 72
Slide 72 text
GruntFile
Slide 73
Slide 73 text
1. NodeJS
GruntFile
Slide 74
Slide 74 text
1. NodeJS
GruntFile
2. Grunt
Slide 75
Slide 75 text
1. NodeJS
GruntFile
2. Grunt 3. GruntFile
Slide 76
Slide 76 text
nodejs.org
Slide 77
Slide 77 text
NPM
Slide 78
Slide 78 text
npm install grunt
Slide 79
Slide 79 text
npm install -g grunt-cli
Slide 80
Slide 80 text
Gruntfile.js
module.exports = function (grunt) {
grunt.initConfig({
cssmin: {
dist: {
files: [
{ src: 'stylesheets/about.css', dest: 'stylesheets/about.min.css' },
{ src: 'stylesheets/articles.css', dest: 'stylesheets/articles.min.css' },
]
}
}
})
// Load the plugins
grunt.loadNpmTasks('grunt-contrib-cssmin');
// Default tasks.
grunt.registerTask('default', ['cssmin']);
};
Slide 81
Slide 81 text
Gruntfile.js
module.exports = function (grunt) {
grunt.initConfig({
cssmin: {
dist: {
files: [
{ src: 'stylesheets/about.css', dest: 'stylesheets/about.min.css' },
{ src: 'stylesheets/articles.css', dest: 'stylesheets/articles.min.css' },
]
}
}
})
// Load the plugins
grunt.loadNpmTasks('grunt-contrib-cssmin');
// Default tasks.
grunt.registerTask('default', ['cssmin']);
};
Slide 82
Slide 82 text
Gruntfile.js
module.exports = function (grunt) {
grunt.initConfig({
cssmin: {
dist: {
files: [
{ src: 'stylesheets/about.css', dest: 'stylesheets/about.min.css' },
{ src: 'stylesheets/articles.css', dest: 'stylesheets/articles.min.css' },
]
}
}
})
// Load the plugins
grunt.loadNpmTasks('grunt-contrib-cssmin');
// Default tasks.
grunt.registerTask('default', ['cssmin']);
};
Slide 83
Slide 83 text
Gruntfile.js
module.exports = function (grunt) {
grunt.initConfig({
cssmin: {
dist: {
files: [
{ src: 'stylesheets/about.css', dest: 'stylesheets/about.min.css' },
{ src: 'stylesheets/articles.css', dest: 'stylesheets/articles.min.css' },
]
}
}
})
// Load the plugins
grunt.loadNpmTasks('grunt-contrib-cssmin');
// Default tasks.
grunt.registerTask('default', ['cssmin']);
};
Slide 84
Slide 84 text
Stack ‘em up
Slide 85
Slide 85 text
No content
Slide 86
Slide 86 text
1. Images
Slide 87
Slide 87 text
Images are the biggest part
of a web page
Stylesheets,
HTML, etc
Images 60%
JavaScript
source: httparchive.org
Slide 88
Slide 88 text
1. Images
Compression
Slide 89
Slide 89 text
160 KB 110 KB
Before After
Slide 90
Slide 90 text
50KB
Slide 91
Slide 91 text
Manual
Slide 92
Slide 92 text
jpegmini
mozjpeg
kraken.io
jpeg png gif svg
Slide 93
Slide 93 text
jpegmini
mozjpeg
kraken.io
optipng
pngcrush
zopflipng
pngmini
kraken.io
jpeg png gif svg
Slide 94
Slide 94 text
jpegmini
mozjpeg
kraken.io
gifsicle
kraken.io
optipng
pngcrush
zopflipng
pngmini
kraken.io
jpeg png gif svg
Slide 95
Slide 95 text
jpegmini
mozjpeg
kraken.io
gifsicle
kraken.io
SVGO
kraken.io
optipng
pngcrush
zopflipng
pngmini
kraken.io
jpeg png gif svg
Slide 96
Slide 96 text
Automated
Slide 97
Slide 97 text
jpeg png gif svg
grunt-contrib-imagemin
Slide 98
Slide 98 text
npm install grunt-contrib-imagemin
Slide 99
Slide 99 text
Gruntfile.js
module.exports = function (grunt) {
grunt.initConfig({
imagemin: {
dist: {
files: [{
expand: true,
cwd: 'images/',
src: ['*.{png,jpg,gif,svg}'],
dest: 'images/dist/'
}]
}
}
})
// Load the plugins
grunt.loadNpmTasks('grunt-contrib-imagemin');
// Default tasks.
grunt.registerTask('default', ['imagemin']);
};
Slide 100
Slide 100 text
Gruntfile.js
module.exports = function (grunt) {
grunt.initConfig({
imagemin: {
dist: {
files: [{
expand: true,
cwd: 'images/',
src: ['*.{png,jpg,gif,svg}'],
dest: 'images/dist/'
}]
}
}
})
// Load the plugins
grunt.loadNpmTasks('grunt-contrib-imagemin');
// Default tasks.
grunt.registerTask('default', ['imagemin']);
};
Slide 101
Slide 101 text
Gruntfile.js
module.exports = function (grunt) {
grunt.initConfig({
imagemin: {
dist: {
files: [{
expand: true,
cwd: 'images/',
src: ['*.{png,jpg,gif,svg}'],
dest: 'images/dist/'
}]
}
}
})
// Load the plugins
grunt.loadNpmTasks('grunt-contrib-imagemin');
// Default tasks.
grunt.registerTask('default', ['imagemin']);
};
Slide 102
Slide 102 text
Gruntfile.js
module.exports = function (grunt) {
grunt.initConfig({
imagemin: {
dist: {
files: [{
expand: true,
cwd: 'images/',
src: ['*.{png,jpg,gif,svg}'],
dest: 'images/dist/'
}]
}
}
})
// Load the plugins
grunt.loadNpmTasks('grunt-contrib-imagemin');
// Default tasks.
grunt.registerTask('default', ['imagemin']);
};
Slide 103
Slide 103 text
imagemin plugins
Slide 104
Slide 104 text
grunt-contrib-imagemin
1. npm install
Slide 105
Slide 105 text
grunt-contrib-imagemin
1. npm install
2. var plugin = require('');
Slide 106
Slide 106 text
1. npm install
2. var plugin = require('');
3. options: {use: [plugin( {config} )]}
grunt-contrib-imagemin
Slide 107
Slide 107 text
Squeezing the
JPEG
Slide 108
Slide 108 text
Before: 1.02 MB
Slide 109
Slide 109 text
Before: 1.02 MB
Default: 905 KB
Slide 110
Slide 110 text
Before: 1.02 MB
Default: 905 KB
JPEG ReCompress: 616 KB
Slide 111
Slide 111 text
Before: 1.02 MB
Default: 905 KB
JPEG ReCompress: 616 KB
MozJPEG: 217 KB
Slide 112
Slide 112 text
~80%
Slide 113
Slide 113 text
No content
Slide 114
Slide 114 text
1. npm install imagemin-mozjpeg
grunt-contrib-imagemin
Slide 115
Slide 115 text
1. npm install imagemin-mozjpeg
2. var moz= require('imagemin-mozjpeg');
grunt-contrib-imagemin
Slide 116
Slide 116 text
1. npm install imagemin-mozjpeg
2. var moz= require('imagemin-mozjpeg');
3. options: {use: [moz( {quality:80} )]}
grunt-contrib-imagemin
Slide 117
Slide 117 text
var moz = require('imagemin-mozjpeg');
grunt.initConfig({
imagemin: {
dist: {
options: {
use: [moz( {quality:80, quantTable: 3} )]
},
files: [{
expand: true,
cwd: 'images/',
src: ['*.{png,jpg,gif,svg}'],
dest: 'images/dist/'
}]
}
}
})
Gruntfile.js
Slide 118
Slide 118 text
109 KB 34.9 KB
Before After
Slide 119
Slide 119 text
Bashing
the
PNG
Slide 120
Slide 120 text
Before: 5.23 MB
Slide 121
Slide 121 text
Before: 5.23 MB
Default: 906 KB
Slide 122
Slide 122 text
Before: 5.23 MB
Default: 906 KB
Default + Level 7: 905 KB
Slide 123
Slide 123 text
Before: 5.23 MB
Default: 906 KB
Default + Level 7: 905 KB
Zopfli: 851 KB
Slide 124
Slide 124 text
~85%
Slide 125
Slide 125 text
var zopfli = require('imagemin-zopfli');
grunt.initConfig({
imagemin: {
dist: {
options: {
use: [zopfli( {more: true} )]
},
files: [{
expand: true,
cwd: 'images/',
src: ['*.{png,jpg,gif,svg}'],
dest: 'images/dist/'
}]
}
}
})
Gruntfile.js
Slide 126
Slide 126 text
3.5 MB 68 KB
Before After
Slide 127
Slide 127 text
HOWEVER
Default: 15s
Slide 128
Slide 128 text
HOWEVER
Default: 15s
Default + Level 7: 1m23s
Slide 129
Slide 129 text
HOWEVER
Default: 15s
Default + Level 7: 1m23s
Zopfli: 8 minutes!!
Slide 130
Slide 130 text
grunt.initConfig({
imagemin: {
dist: {
options: {
optimizationLevel: 3, // default values, so is not even necessary
},
files: [{
expand: true,
cwd: 'images/',
src: ['*.{png,jpg,gif}'],
dest: 'images/dist/'
}]
}
}
})
Gruntfile.js
Slide 131
Slide 131 text
Slashing the SVG
Slide 132
Slide 132 text
grunt.initConfig({
imagemin: {
dist: {
options: {
svgoPlugins: [{ removeViewBox: true }]
},
files: [{
expand: true,
cwd: 'images/',
src: ['*.{png,jpg,gif,svg}'],
dest: 'images/dist/'
}]
}
}
})
Gruntfile.js
Slide 133
Slide 133 text
14KB 4KB
Before After
Slide 134
Slide 134 text
70%
Slide 135
Slide 135 text
We kinda
cheated!
Slide 136
Slide 136 text
6.25 MB
JPEG PNG SVG
Slide 137
Slide 137 text
6.25 MB
Slide 138
Slide 138 text
6.25 MB
1.09 MB
Slide 139
Slide 139 text
5.16 MB
Slide 140
Slide 140 text
~83%
Slide 141
Slide 141 text
Alternatives
Slide 142
Slide 142 text
bit.ly/azure-jobs
Slide 143
Slide 143 text
bit.ly/azure-jobs bit.ly/amazon-smush
Slide 144
Slide 144 text
?
Slide 145
Slide 145 text
86
Slide 146
Slide 146 text
1. Images
Compression
Slide 147
Slide 147 text
1. Images
Compression
HTTP2
Approved
Slide 148
Slide 148 text
Gruntfile
● grunt-contrib-imagemin
○ imagemin-mozjpeg
○ imagemin-zopfli
Slide 149
Slide 149 text
1. Images
Compression
Format
Slide 150
Slide 150 text
Progressive
Slide 151
Slide 151 text
Baseline Progressive
Slide 152
Slide 152 text
WebP
Slide 153
Slide 153 text
Converting
the JPEG
Slide 154
Slide 154 text
Before: 1.02 MB
MozJPEG: 217 KB
Slide 155
Slide 155 text
Before: 1.02 MB
MozJPEG: 217 KB
WebP: 196 KB
Slide 156
Slide 156 text
Converting
the
PNG
Slide 157
Slide 157 text
Before: 5.23 MB
Zopfli: 851 KB
Slide 158
Slide 158 text
Before: 5.23 MB
Zopfli: 851 KB
WebP: 139 KB
Slide 159
Slide 159 text
6.25 MB
JPEG PNG SVG
Slide 160
Slide 160 text
6.25 MB
Slide 161
Slide 161 text
6.25 MB
335 KB
Slide 162
Slide 162 text
5.9 MB
Slide 163
Slide 163 text
~94%
Slide 164
Slide 164 text
npm install grunt-webp
Slide 165
Slide 165 text
webp:{
png: {
files:[{
expand: true,
cwd: "images/",
src: "*.png",
dest: "images/dist/"
}],
options: {
binpath: "tools/cwebp.exe",
preset: 'picture',
verbose: true,
quality: 80,
alphaQuality: 80,
compressionMethod: 6,
……..
}
}
Gruntfile.js
Slide 166
Slide 166 text
10KB
PNG WebP
3.5 MB
Slide 167
Slide 167 text
1. Images
Compression
Format
HTTP2
Approved
Slide 168
Slide 168 text
1. Images
Compression
Format
Responsive Images
Slide 169
Slide 169 text
No content
Slide 170
Slide 170 text
72%
Slide 171
Slide 171 text
No content
Slide 172
Slide 172 text
Slide 173
Slide 173 text
Slide 174
Slide 174 text
Slide 175
Slide 175 text
npm install grunt-responsive-images
Slide 176
Slide 176 text
brew install ImageMagick
Slide 177
Slide 177 text
Gruntfile.js
responsive_images: {
images: {
options: {
engine: 'im',
sizes: [
{
name: 'medium',
width: 300
},{
name: 'large',
width: 500,
}]
},
files: { src: '../before/images/tie-fighter-large.jpg' , dest: 'images/tie-fighter.jpg'}
}
}
Slide 178
Slide 178 text
Gruntfile.js
responsive_images: {
images: {
options: {
engine: 'im',
sizes: [
{
name: 'medium',
width: 300
},{
name: 'large',
width: 500,
}]
},
files: { 'images/tie-fighter.jpg': '../before/images/tie-fighter-large.jpg' }
}
}
Slide 179
Slide 179 text
Gruntfile.js
responsive_images: {
images: {
options: {
engine: 'im',
sizes: [
{
name: 'medium',
width: 300
},{
name: 'large',
width: 500,
}]
},
files: { 'images/tie-fighter.jpg': '../before/images/tie-fighter-large.jpg' }
}
}
Slide 180
Slide 180 text
No content
Slide 181
Slide 181 text
112 KB
Slide 182
Slide 182 text
112 KB 70 KB
Slide 183
Slide 183 text
112 KB 70 KB 26 KB
Slide 184
Slide 184 text
77%
Slide 185
Slide 185 text
1. Images
Compression
Format
Responsive Images
HTTP2
Approved
Slide 186
Slide 186 text
1. Images
Compression
HTTP2
Approved
Slide 187
Slide 187 text
1. Images
Compression
Format
HTTP2
Approved
Slide 188
Slide 188 text
1. Images
Compression
Format
Responsive Images
HTTP2
Approved
Slide 189
Slide 189 text
Gruntfile
● grunt-contrib-imagemin
○ imagemin-mozjpeg
○ imagemin-zopfli
● grunt-webp
● grunt-responsive-images
Slide 190
Slide 190 text
Stop!
Slide 191
Slide 191 text
Stop!
Psst!
Fancy some more info on image optimisation?
Check out imageoptimization.info
Slide 192
Slide 192 text
2.CSS
Slide 193
Slide 193 text
Minify
2.CSS
Slide 194
Slide 194 text
/* This is a comment */
h1 {
font-size: 30px;
line-height: 36px;
}
h1 small {
font-size: 18px; /* Another comment */
}
CSS
Slide 195
Slide 195 text
h1{font-size:30px;line-height:36px}h1 small{font-size:18px}
Slide 196
Slide 196 text
npm install grunt-contrib-cssmin
Slide 197
Slide 197 text
cssmin: {
dist: {
files: [{
src: ['css/material-design.css', 'css/site.css'],
dest: 'css/result.min.css'
}]
}
Gruntfile.js
Slide 198
Slide 198 text
But wait...
Slide 199
Slide 199 text
Clean your CSS
div { color:red; } a { color:red ;}
Slide 200
Slide 200 text
Clean your CSS
div,a{color:red}
Slide 201
Slide 201 text
Clean your CSS
.foo { background: url('images/test.jpg'); width: 100px; }
.bar { display: block; }
.baz { background: url('images/test.jpg'); width: 110px; }
Slide 202
Slide 202 text
Clean your CSS
.baz,.foo{background:url('images/test.jpg')}
.foo{width:100px}
.bar{display:block}
.baz{width:110px}
Slide 203
Slide 203 text
Browsers don’t care!
Slide 204
Slide 204 text
Foundation CSS
22 % with whitespace optimizations
29% with all optimizations
Slide 205
Slide 205 text
155 KB
Slide 206
Slide 206 text
118 KB
Slide 207
Slide 207 text
25%
Slide 208
Slide 208 text
1 HTTP
Request
Slide 209
Slide 209 text
HTTP2
Approved
Slide 210
Slide 210 text
cssmin: {
dist: {
files: [{
src: ['css/material-design.css', 'css/site.css'],
dest: 'css/result.min.css'
}]
}
Gruntfile.js
Slide 211
Slide 211 text
cssmin: {
dist: {
files: [{
expand: true,
cwd: 'release/css',
src: ['*.css', '!*.min.css'],
dest: 'release/css',
ext: '.min.css'
}]
}
}
Gruntfile.js
Slide 212
Slide 212 text
118 KB
Slide 213
Slide 213 text
Minify
2.CSS
HTTP2
Approved
Slide 214
Slide 214 text
Alternatives
Slide 215
Slide 215 text
bit.ly/azure-jobs
Slide 216
Slide 216 text
CSS
Minify
Unused
Slide 217
Slide 217 text
Before
107 KB
After
30 KB
Slide 218
Slide 218 text
91%
Unused CSS
Slide 219
Slide 219 text
91%
Unused CSS
Slide 220
Slide 220 text
Deliver only the
goods
that will be used !
Slide 221
Slide 221 text
Chrome
Developer
Tools
Slide 222
Slide 222 text
Chrome
Developer
Tools
Slide 223
Slide 223 text
npm install grunt-uncss
Slide 224
Slide 224 text
Gruntfile.js
uncss: {
dist: {
files: {
'css/result.css': ['index.html']
}
}
}
Slide 225
Slide 225 text
118 KB
Slide 226
Slide 226 text
24 KB
Slide 227
Slide 227 text
But wait...
Slide 228
Slide 228 text
uncss: {
dist: {
options: {
ignore: ['#header', 'mdl-layout__header']
},
files: {
'css/result.css': ['index.html']
}
}
}
Gruntfile.js
Slide 229
Slide 229 text
uncss: {
dist: {
options: {
ignore: ['#header', 'mdl-layout__header']
},
files: {
'css/result.css': ['index.html']
}
}
}
Gruntfile.js
Slide 230
Slide 230 text
CSS
Unused
HTTP2
Approved
Slide 231
Slide 231 text
CSS
Minify
Unused
Critical
Slide 232
Slide 232 text
HTML
Slide 233
Slide 233 text
HTML CSS
Slide 234
Slide 234 text
HTML CSS JS
Slide 235
Slide 235 text
HTML CSS JS
Blocking Blocking
Slide 236
Slide 236 text
No content
Slide 237
Slide 237 text
“More Weight
Doesn't Mean More
Wait”
Scott Jehl
Slide 238
Slide 238 text
Finding the Critical Path
Slide 239
Slide 239 text
No content
Slide 240
Slide 240 text
14 KB
Slide 241
Slide 241 text
No content
Slide 242
Slide 242 text
/* inlined critical CSS */
loadCSS('deferred.css');
...body goes here
Slide 243
Slide 243 text
/* inlined critical CSS */
loadCSS('deferred.css');
...body goes here
Slide 244
Slide 244 text
1 Roundtrip
14 KB
Slide 245
Slide 245 text
npm install grunt-critical
Slide 246
Slide 246 text
critical: {
dist: {
options: {
base: './',
minify: true,
dimensions: [
{ width: 1300, height: 900 },
{ width: 500, height: 900 }]
},
files: { src: 'index.html', dest: ['index.html'] }
}
}
Gruntfile.js
Slide 247
Slide 247 text
HTTP2
Approved
Slide 248
Slide 248 text
Gruntfile
● grunt-contrib-imagemin
○ imagemin-mozjpeg
○ imagemin-zopfli
● grunt-webp
● grunt-responsive-images
● grunt-contrib-cssmin
● grunt-critical
Slide 249
Slide 249 text
CSS
Summary
Minify
Slide 250
Slide 250 text
CSS
Summary
Minify
Clean
Slide 251
Slide 251 text
CSS
Summary
Minify
Clean
Unused
Slide 252
Slide 252 text
CSS
Summary
Minify
Clean
Unused
Critical
Slide 253
Slide 253 text
Stop!
Slide 254
Slide 254 text
?
Slide 255
Slide 255 text
94
Slide 256
Slide 256 text
JavaScript
Slide 257
Slide 257 text
JavaScript
Minify
Slide 258
Slide 258 text
/**
* Upgrades a specific element rather than all in the DOM.
* @param {HTMLElement} element The element we wish to upgrade.
* @param {string} jsClass The name of the class we want to upgrade
* the element to.
*/
function upgradeElementInternal(element, jsClass) {
// Only upgrade elements that have not already been upgraded.
var dataUpgraded = element.getAttribute('data-upgraded');
if (dataUpgraded === null || dataUpgraded.indexOf(jsClass) === -1) {
// Upgrade element.
if (dataUpgraded === null) {
dataUpgraded = '';
}
element.setAttribute('data-upgraded', dataUpgraded + ',' + jsClass);
….
JS
Slide 259
Slide 259 text
function upgradeElementInternal(a,b){var c=a.getAttribute("data-
upgraded");if(null===c||-1===c.indexOf(b)){null===c&&(c=""),a.
setAttribute("data-upgraded",c+","+b);var d=findRegisteredClass_(b);if(!
d)throw"Unable to find a registered component for the given class.";var
e=new d.classConstructor(a);e[componentConfigProperty_]=d,
createdComponents_.push(e),d.callbacks.forEach(function(b){b(a)}),d.
widget&&(a[b]=e);var f=document.createEvent("Events");f.initEvent
("mdl-componentupgraded",!0,!0),a.dispatchEvent(f)}}
Slide 260
Slide 260 text
npm install grunt-contrib-uglify
Slide 261
Slide 261 text
uglify: {
target: {
files: [{
expand: true,
cwd: 'src',
src: ['*.js'],
dest: 'dest',
ext: '.min.js'
}]
}
}
Gruntfile.js
Slide 262
Slide 262 text
140 KB
Slide 263
Slide 263 text
60 KB
Slide 264
Slide 264 text
40%
Slide 265
Slide 265 text
Alternatives
Slide 266
Slide 266 text
bit.ly/azure-jobs
Slide 267
Slide 267 text
JavaScript
Minify
HTTP2
Approved
Slide 268
Slide 268 text
HTML
Slide 269
Slide 269 text
HTML
Minify
Slide 273
Slide 273 text
npm install grunt-contrib-htmlmin
Slide 274
Slide 274 text
htmlmin: {
target: {
options: {
removeComments: true,
collapseWhitespace: true,
collapseBooleanAttributes: true,
removeAttributeQuotes: true
},
files: { dest: 'index.min.html', src: 'index.html' }
}
}
Gruntfile.js
Slide 275
Slide 275 text
28.2 KB
Slide 276
Slide 276 text
19.3 KB
Slide 277
Slide 277 text
30%
Slide 278
Slide 278 text
HTML
Minify
HTTP2
Approved
Slide 279
Slide 279 text
95
Slide 280
Slide 280 text
Gruntfile
● grunt-contrib-imagemin
○ imagemin-mozjpeg
○ imagemin-zopfli
● grunt-webp
● grunt-responsive-images
● grunt-contrib-cssmin
● grunt-critical
● grunt-contrib-uglify
● grunt-contrib-htmlmin
Slide 281
Slide 281 text
All In One
Slide 282
Slide 282 text
mod_pagespeed
Slide 283
Slide 283 text
ION
Slide 284
Slide 284 text
bit.ly/akamai-bulky
Slide 285
Slide 285 text
bit.ly/akamai-ion
Slide 286
Slide 286 text
developers.google.com/web/tools/starter-kit
Slide 287
Slide 287 text
ampproject.org
Accelerated
Mobile
Pages
Slide 288
Slide 288 text
Amsterdam
Slide 289
Slide 289 text
Amsterdam
Home page - 2 seconds & cost $0.01
Slide 290
Slide 290 text
Amsterdam
Home page - 2 seconds & cost $0.01
Product page - 1 second & cost $0.01
Slide 291
Slide 291 text
Testing
Slide 292
Slide 292 text
No content
Slide 293
Slide 293 text
Regression
Slide 294
Slide 294 text
Automated
Slide 295
Slide 295 text
npm install grunt-pagespeed
Slide 296
Slide 296 text
pagespeed: {
options: {
nokey: true
},
prod: {
options: {
url: "http://rposbo.github.io/bulky-bricks-inc/after/index.html",
locale: "en_GB",
strategy: "desktop",
threshold: 95
}
}
}
Gruntfile.js
Slide 297
Slide 297 text
Fail
a
Build
Slide 298
Slide 298 text
No content
Slide 299
Slide 299 text
No content
Slide 300
Slide 300 text
language: node_js
node_js:
- "0.12"
before_install: npm install -g grunt-cli
install: npm install
script: grunt test
travis.yml
Slide 301
Slide 301 text
{
"dependencies": {
"grunt": "*",
"grunt-pagespeed": "*"
}
}
package.json
Slide 302
Slide 302 text
Check
every
push
Slide 303
Slide 303 text
No content
Slide 304
Slide 304 text
Alternatives
Slide 305
Slide 305 text
No content
Slide 306
Slide 306 text
Summary
Slide 307
Slide 307 text
Summary
1. Images
Slide 308
Slide 308 text
Summary
1. Images
2. CSS
Slide 309
Slide 309 text
Summary
1. Images
2. CSS
3. JavaScript
Slide 310
Slide 310 text
Summary
1. Images
2. CSS
3. JavaScript
4. HTML
Slide 311
Slide 311 text
Summary
1. Images
2. CSS
3. JavaScript
4. HTML
5. Testing
Slide 312
Slide 312 text
Dean Hume @deanohume
Robin Osborne @rposbo
tinyurl.com/bulkybricks
Thank you!