Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Fast Sites FTW!
Reuben Cummings
April 09, 2019
Programming
1
14
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
14
You Might Not Need Pandas
reubano
0
150
Stream processing made easy with riko
reubano
1
160
A Functional Programming Approach To Data Processing In Python
reubano
1
430
Using Functional Programming for efficient Data Processing and Analysis
reubano
3
470
Geospatial Analysis Made Easy with meza
reubano
0
160
Quantum of Data: A data science journey
reubano
1
160
Open Data Day Arusha
reubano
0
81
Data Mining and Processing for fun and profit
reubano
0
350
Other Decks in Programming
See All in Programming
Showkase、Paparazziを用いたビジュアルリグレッションテストの導入にチャレンジした話 / MoT TechTalk #15
mot_techtalk
0
120
ITエンジニア特化型Q&Aサイトteratailを 言語、DB、クラウドなど フルリプレイスした話
leveragestech
0
440
Most Valuable Bug(?) ~インシデント未遂から得た学び~
tatsumiakahori
0
150
コンピュータビジョンセミナー2 / computer_vision_seminar_libSGM
fixstars
0
320
Amazon QuickSightのアップデート -re:Invent 2022の復習&2022年ハイライト-
shogo452
0
240
TokyoR#103_DataProcessing
kilometer
0
540
Step Functions Distributed Map を使ってみた
codemountains
0
110
2023年にクル(かもしれない)通信ミドルウェア技術(仮)
s_hosoai
0
220
tidy_rpart
bk_18
0
610
ペパカレで入社した私が感じた2つのギャップと向き合い方
kosuke_ito
0
310
Cloudflare Workersと状態管理
chimame
3
490
TypeScript 4.9のas const satisfiesが便利
tonkotsuboy_com
9
2.3k
Featured
See All Featured
How GitHub (no longer) Works
holman
298
140k
How GitHub Uses GitHub to Build GitHub
holman
465
280k
A designer walks into a library…
pauljervisheath
199
16k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
13
5.4k
The Illustrated Children's Guide to Kubernetes
chrisshort
22
43k
Building a Modern Day E-commerce SEO Strategy
aleyda
6
4.5k
JazzCon 2018 Closing Keynote - Leadership for the Reluctant Leader
reverentgeek
175
9.1k
The Invisible Side of Design
smashingmag
292
48k
Fashionably flexible responsive web design (full day workshop)
malarkey
396
63k
For a Future-Friendly Web
brad_frost
166
7.8k
The MySQL Ecosystem @ GitHub 2015
samlambert
240
11k
How To Stay Up To Date on Web Technology
chriscoyier
779
250k
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