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
63
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
36
You Might Not Need Pandas
reubano
0
340
Stream processing made easy with riko
reubano
1
330
A Functional Programming Approach To Data Processing In Python
reubano
1
600
Using Functional Programming for efficient Data Processing and Analysis
reubano
3
860
Geospatial Analysis Made Easy with meza
reubano
0
330
Quantum of Data: A data science journey
reubano
1
220
Open Data Day Arusha
reubano
0
210
Data Mining and Processing for fun and profit
reubano
0
500
Other Decks in Programming
See All in Programming
pnpm に provenance のダウングレード を検出する PR を出してみた
ryo_manba
1
150
AkarengaLT vol.38
hashimoto_kei
1
110
デミカツ切り抜きで面倒くさいことはPythonにやらせよう
aokswork3
0
260
What's new in Spring Modulith?
olivergierke
1
160
Domain-centric? Why Hexagonal, Onion, and Clean Architecture Are Answers to the Wrong Question
olivergierke
3
940
Catch Up: Go Style Guide Update
andpad
0
240
Server Side Kotlin Meetup vol.16: 内部動作を理解して ハイパフォーマンスなサーバサイド Kotlin アプリケーションを書こう
ternbusty
3
230
フロントエンド開発のためのブラウザ組み込みAI入門
masashi
7
3.4k
3年ぶりにコードを書いた元CTOが Claude Codeと30分でMVPを作った話
maikokojima
0
620
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
160
XP, Testing and ninja testing ZOZ5
m_seki
3
810
開発組織の戦略的な役割と 設計スキル向上の効果
masuda220
PRO
7
1.2k
Featured
See All Featured
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
130k
Embracing the Ebb and Flow
colly
88
4.9k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
34
2.3k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
Statistics for Hackers
jakevdp
799
220k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
Keith and Marios Guide to Fast Websites
keithpitt
411
23k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
34
2.5k
Gamification - CAS2011
davidbonilla
81
5.5k
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