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
60
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
35
You Might Not Need Pandas
reubano
0
330
Stream processing made easy with riko
reubano
1
310
A Functional Programming Approach To Data Processing In Python
reubano
1
600
Using Functional Programming for efficient Data Processing and Analysis
reubano
3
830
Geospatial Analysis Made Easy with meza
reubano
0
320
Quantum of Data: A data science journey
reubano
1
210
Open Data Day Arusha
reubano
0
190
Data Mining and Processing for fun and profit
reubano
0
490
Other Decks in Programming
See All in Programming
イベントストーミングから始めるドメイン駆動設計
jgeem
4
870
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
3
650
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
3
820
Create a website using Spatial Web
akkeylab
0
290
Perplexity Slack Botを作ってAI活用を進めた話 / AI Engineering Summit プレイベント
n3xem
0
670
WindowInsetsだってテストしたい
ryunen344
1
190
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
170
FormFlow - Build Stunning Multistep Forms
yceruto
1
190
Effect の双対、Coeffect
yukikurage
5
1.4k
GoのGenericsによるslice操作との付き合い方
syumai
2
680
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
180
Enterprise Web App. Development (2): Version Control Tool Training Ver. 5.1
knakagawa
1
120
Featured
See All Featured
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Rails Girls Zürich Keynote
gr2m
94
14k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Scaling GitHub
holman
459
140k
Fireside Chat
paigeccino
37
3.5k
Stop Working from a Prison Cell
hatefulcrawdad
270
20k
Visualization
eitanlees
146
16k
Navigating Team Friction
lara
187
15k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
RailsConf 2023
tenderlove
30
1.1k
The Straight Up "How To Draw Better" Workshop
denniskardys
233
140k
Why You Should Never Use an ORM
jnunemaker
PRO
56
9.4k
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