Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Fast Sites FTW!
Search
Reuben Cummings
April 09, 2019
Programming
1
42
Fast Sites FTW!
Tips and tricks to make your website load faster than 90% of those found on the web.
Reuben Cummings
April 09, 2019
Tweet
Share
More Decks by Reuben Cummings
See All by Reuben Cummings
Peoria Data Strategy
reubano
1
21
You Might Not Need Pandas
reubano
0
240
Stream processing made easy with riko
reubano
1
230
A Functional Programming Approach To Data Processing In Python
reubano
1
520
Using Functional Programming for efficient Data Processing and Analysis
reubano
3
600
Geospatial Analysis Made Easy with meza
reubano
0
220
Quantum of Data: A data science journey
reubano
1
170
Open Data Day Arusha
reubano
0
110
Data Mining and Processing for fun and profit
reubano
0
430
Other Decks in Programming
See All in Programming
WebGLで始める コンピュータグラフィックス入門
heller77
0
330
AppRouter Panel Talk
yosuke_furukawa
PRO
1
480
サイコロで理解する統計的仮説検定の考え方
tatamiya
4
1.1k
Domain-Driven Transformation
hschwentner
2
1.5k
Deep Dive into React Stream/Serialize
mugi_uno
3
720
MetricKitで予期せぬ終了を検知する話 / Detect unexpected termination with MetricKit
nekowen
1
200
大規模UIKitベースアプリへのTCAの段階的導入/gradual-adoption-of-tca-in-a-large-scale-uikit-based-app
takehilo
2
210
Git Lint
bkuhlmann
4
760
GitHub Copilotのススメ
marcy731
1
230
SIMD Parallel Programming with the Vector API
josepaumard
0
230
PHPはいつから死んでいるかの調査
chiroruxx
2
420
Elm Form Validation
bkuhlmann
0
520
Featured
See All Featured
Web Components: a chance to create the future
zenorocha
306
41k
Robots, Beer and Maslow
schacon
PRO
155
7.9k
Agile that works and the tools we love
rasmusluckow
325
20k
Unsuck your backbone
ammeep
663
57k
Why Our Code Smells
bkeepers
PRO
331
56k
Fireside Chat
paigeccino
22
2.6k
Fontdeck: Realign not Redesign
paulrobertlloyd
76
4.9k
Documentation Writing (for coders)
carmenintech
60
4k
Creatively Recalculating Your Daily Design Routine
revolveconf
211
11k
Designing on Purpose - Digital PM Summit 2013
jponch
111
6.5k
Docker and Python
trallard
35
2.7k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Transcript
FAST SITES FTW! Central Illinois Web Professionals User Group April
9, 2019 by Reuben Cummings
@reubano – Google Research/webpagetest.org, 2017 “The average time it takes
to fully load a mobile landing page is 22 seconds.”
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
@reubano CASE STUDY: ICC https://icc.edu/
@reubano BY THE NUMBERS Source: https://www.dareboost.com/en
Source: Walt Disney Pictures ASSET MINIFICATION
@reubano 20 JAVASCRIPT FILES
@reubano 10 CSS FILES
WEBSITE BUNDLERS
None
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'} };
PACKAGE.JSON { … "devDependencies": { "brunch": "^2", "babel-brunch": "^6", "postcss-brunch":
"^2", "sass-brunch": "^2", "uglify-js-brunch": "^2", "autoprefixer": "^6", "babel-preset-latest": “^6" } }
Source: https://www.flickr.com/photos/darkroses FONTS
@reubano 5 REMOTE FONTS
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
Source: https://www.flickr.com/photos/jim_belford IMAGES
@reubano 25 IMAGES
IMAGE OPTIMIZERS kraken.io OptiPNG
IMAGEMIN-BRUNCH $ npm install --save-dev imagemin-brunch $ brunch build --production
Source: github.com/stawberri/imagemin-brunch
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
INDEX.HTML <img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" alt=“yah" > Source:
css-tricks.com
@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…
@reubano BY THE NUMBERS Source: https://www.dareboost.com/en
@reubano 6 TOTAL REQUESTS!
@reubano HEAD TO HEAD Source: https://www.dareboost.com/en
@reubano Source: https://www.dareboost.com/en
@reubano Source: https://www.dareboost.com/en
@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/
@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
@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/
THANKS! Reuben Cummings @reubano