Slide 1
Slide 1 text
FAST SITES FTW!
Central Illinois Web Professionals User Group
April 9, 2019
by Reuben Cummings
Slide 2
Slide 2 text
@reubano
– Google Research/webpagetest.org, 2017
“The average time it takes to
fully load a mobile landing
page is 22 seconds.”
Slide 3
Slide 3 text
PAGE SPEED EFFECT ON
BOUNCE RATE
Bounce rate
0
0.5
1
1.5
2
2.5
Page load time (s)
1 3 5 6 10
Source: Google/SOASTA Research, 2017
Slide 4
Slide 4 text
@reubano
CASE STUDY:
ICC
https://icc.edu/
Slide 5
Slide 5 text
@reubano
BY THE NUMBERS
Source: https://www.dareboost.com/en
Slide 6
Slide 6 text
Source: Walt Disney Pictures
ASSET
MINIFICATION
Slide 7
Slide 7 text
@reubano
20 JAVASCRIPT FILES
Slide 8
Slide 8 text
@reubano
10 CSS FILES
Slide 9
Slide 9 text
WEBSITE BUNDLERS
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
BRUNCH-CONFIG.JS
exports.plugins = {
babel: {presets: ['latest']},
postcss: {processors: [require('autoprefixer')]}
};
exports.files = {
javascripts: {
joinTo: {
'vendor.js': /^(?!app)/,
'app.js': /^app/
}
},
stylesheets: {joinTo: 'app.css'}
};
Slide 12
Slide 12 text
PACKAGE.JSON
{
…
"devDependencies": {
"brunch": "^2",
"babel-brunch": "^6",
"postcss-brunch": "^2",
"sass-brunch": "^2",
"uglify-js-brunch": "^2",
"autoprefixer": "^6",
"babel-preset-latest": “^6"
}
}
Slide 13
Slide 13 text
Source: https://www.flickr.com/photos/darkroses
FONTS
Slide 14
Slide 14 text
@reubano
5 REMOTE FONTS
Slide 15
Slide 15 text
GITHUB.CSS
@font-face {
font-family: system;
font-style: normal;
font-weight: 300;
src: local("Ubuntu Light"), local("Segoe UI
Light"), local("Roboto-Light"), local("DroidSans"),
local("Tahoma");
}
body {
font-family: "system";
}
Source: css-tricks.com
Slide 16
Slide 16 text
Source: https://www.flickr.com/photos/jim_belford
IMAGES
Slide 17
Slide 17 text
@reubano
25 IMAGES
Slide 18
Slide 18 text
IMAGE OPTIMIZERS
kraken.io OptiPNG
Slide 19
Slide 19 text
IMAGEMIN-BRUNCH
$ npm install --save-dev imagemin-brunch
$ brunch build --production
Source: github.com/stawberri/imagemin-brunch
Slide 20
Slide 20 text
IMAGEMIN-BRUNCH
$ npm install --save-dev imagemin-brunch
$ brunch build --production
compiled 6 files into 2 files, copied 14 in 2.3 sec
minified 9 images to save 334 kB in 5.3 sec
Source: github.com/stawberri/imagemin-brunch
Slide 21
Slide 21 text
INDEX.HTML
Source: css-tricks.com
Source: css-tricks.com
Slide 22
Slide 22 text
@reubano
• Enable gzip compression
• Utilize browser caching
• Serve static files from a CDN
• Use static site generators
• Load javascript using “async”
• Remove trackers
BUT WAIT, THERE’S MORE…
Slide 23
Slide 23 text
@reubano
BY THE NUMBERS
Source: https://www.dareboost.com/en
Slide 24
Slide 24 text
@reubano
6 TOTAL REQUESTS!
Slide 25
Slide 25 text
@reubano
HEAD TO HEAD
Source: https://www.dareboost.com/en
Slide 26
Slide 26 text
@reubano Source: https://www.dareboost.com/en
Slide 27
Slide 27 text
@reubano Source: https://www.dareboost.com/en
Slide 28
Slide 28 text
@reubano
RESOURCES
• https://think.storage.googleapis.com/docs/mobile-page-
speed-new-industry-benchmarks.pdf
• https://www.dareboost.com/en/report/
d_5cabb8d5e967904c6f44082f
• https://www.webpagetest.org
• https://tools.pingdom.com/
• http://brunch.io/
Slide 29
Slide 29 text
@reubano
RESOURCES
• https://css-tricks.com/snippets/css/system-font-stack/
• https://cloudinary.com/
• https://kraken.io/
• http://optipng.sourceforge.net/
• https://pngquant.org/
• https://github.com/stawberri/imagemin-brunch
Slide 30
Slide 30 text
@reubano
RESOURCES
• https://css-tricks.com/responsive-images-youre-just-
changing-resolutions-use-srcset/
• https://www.staticgen.com/
• https://staticsitegenerators.net/
• https://www.netlify.com/
Slide 31
Slide 31 text
THANKS!
Reuben Cummings
@reubano