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
56
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
32
You Might Not Need Pandas
reubano
0
300
Stream processing made easy with riko
reubano
1
300
A Functional Programming Approach To Data Processing In Python
reubano
1
570
Using Functional Programming for efficient Data Processing and Analysis
reubano
3
740
Geospatial Analysis Made Easy with meza
reubano
0
280
Quantum of Data: A data science journey
reubano
1
190
Open Data Day Arusha
reubano
0
160
Data Mining and Processing for fun and profit
reubano
0
470
Other Decks in Programming
See All in Programming
SwiftUI Viewの責務分離
elmetal
PRO
2
250
JavaScriptツール群「UnJS」を5分で一気に駆け巡る!
k1tikurisu
9
1.8k
Djangoアプリケーション 運用のリアル 〜問題発生から可視化、最適化への道〜 #pyconshizu
kashewnuts
1
250
データベースのオペレーターであるCloudNativePGがStatefulSetを使わない理由に迫る
nnaka2992
0
210
XStateを用いた堅牢なReact Components設計~複雑なClient Stateをシンプルに~ @React Tokyo ミートアップ #2
kfurusho
1
940
ML.NETで始める機械学習
ymd65536
0
210
メンテが命: PHPフレームワークのコンテナ化とアップグレード戦略
shunta27
0
190
第3回関東Kaggler会_AtCoderはKaggleの役に立つ
chettub
3
1.1k
Open source software: how to live long and go far
gaelvaroquaux
0
650
Introduction to kotlinx.rpc
arawn
0
740
昭和の職場からアジャイルの世界へ
kumagoro95
1
400
Java Webフレームワークの現状 / java web framework at burikaigi
kishida
9
2.2k
Featured
See All Featured
Raft: Consensus for Rubyists
vanstee
137
6.8k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Optimizing for Happiness
mojombo
376
70k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
50k
Bootstrapping a Software Product
garrettdimon
PRO
306
110k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
How to Think Like a Performance Engineer
csswizardry
22
1.4k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
KATA
mclloyd
29
14k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.6k
Code Review Best Practice
trishagee
67
18k
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