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
Front-end optimization
Search
RJ Zaworski
June 19, 2014
Programming
4
260
Front-end optimization
Tools and techniques for delivering content faster
RJ Zaworski
June 19, 2014
Tweet
Share
More Decks by RJ Zaworski
See All by RJ Zaworski
Computing Lessons from the Atomic Age: Complexity, Safety, and Ethics
rjz
0
78
Beyond the Single-Page App: React and the Servers that Serve it
rjz
0
81
Typesafe(ish) React
rjz
1
680
Front-end optimization
rjz
1
450
Technical Interviewing
rjz
0
220
Interop! Building a better Backbone.View
rjz
0
79
HTTP Security
rjz
2
170
Other Decks in Programming
See All in Programming
Django Ninja による API 開発効率化とリプレースの実践
kashewnuts
0
1.2k
Cursorハンズオン実践!
eltociear
1
470
オープンソースソフトウェアへの解像度🔬
utam0k
4
790
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
190
NixOS + Kubernetesで構築する自宅サーバーのすべて
ichi_h3
0
110
2分台で1500examples完走!爆速CIを支える環境構築術 - Kaigi on Rails 2025
falcon8823
3
3.5k
ポスターセッション: 「まっすぐ行って、右!」って言ってラズパイカーを動かしたい 〜生成AI × Raspberry Pi Pico × Gradioの試作メモ〜
komofr
0
1.2k
非同期jobをtransaction内で 呼ぶなよ!絶対に呼ぶなよ!
alstrocrack
0
580
なぜあの開発者はDevRelに伴走し続けるのか / Why Does That Developer Keep Running Alongside DevRel?
nrslib
3
390
バッチ処理を「状態の記録」から「事実の記録」へ
panda728
PRO
0
130
チームの境界をブチ抜いていけ
tokai235
0
120
株式会社 Sun terras カンパニーデック
sunterras
0
250
Featured
See All Featured
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
114
20k
For a Future-Friendly Web
brad_frost
180
9.9k
Build your cross-platform service in a week with App Engine
jlugia
232
18k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
19
1.2k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.7k
Building an army of robots
kneath
306
46k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
A better future with KSS
kneath
239
17k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
RailsConf 2023
tenderlove
30
1.2k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Transcript
Front-end optimization Make it fast! rj zaworski, versal inc. ·
@rjzaworski · github.com/rjz
Any questions?
The First Rule of Optimization Don’t.
The Second Rule of Optimization Optimize for dev time.
So why do we care? ★ 47% of consumers expect
a web page to load in 2 seconds or less. ★ 40% of people abandon a website that takes more than 3 seconds to load. (http://blog.kissmetrics.com/loading-time/)
It's even worse for mobile. “73% of mobile internet users
say that they’ve encountered a website that was too slow to load.” (http://blog.kissmetrics.com/loading-time/)
How do we know our site is slow?
Measurement Tools ★ Chrome DevTools ★ Google PageSpeed ★ YSlow
(
The internet is pretty much a garden hose.
Why is it slow? ★ Bandwidth: how big is the
pipe?
Why is it slow? ★ Bandwidth: how big is the
pipe? ★ Volume: how much needs to be delivered?
Why is it slow? ★ Bandwidth: how big is the
pipe? ★ Volume: how much needs to be delivered? ★ Proximity: how far away are the ends?
So how do we make it faster?
Is the pipe clogged? ★ Concurrent connections are limited per
host ★ Browser mileage may vary (http://www.browserscope.org/?category=network)
Script elements ...can either reference external scripts...
Script elements ...or inline scripts..
Script elements ...but either use will exhibit blocking!
Well, that’s not good.
Script elements ★ Place scripts at bottom of page
Script elements ★ Place scripts at bottom of page ★
Set and for external scripts
Async ain’t everything ★ Browsers will prefetch when possible ★
Execution is still deferred
When will async scripts run? ¯\_(ツ)_/¯
Wait for predictable events
Wait for predictable events
But we’re still making a lot of requests.
HTTP isn’t free ★ Every request has headers
HTTP isn’t free ★ Every request has headers ★ Keep
an eye on that !
HTTP isn’t free ★ Every request has headers ★ Keep
an eye on that ! ★ Batch overhead where possible
Concatenate external files ★ Reduce HTTP overhead ★ Reduce concurrent
requests
Concatenate external files ★ Reduce HTTP overhead ★ Reduce concurrent
requests
And small is beautiful.
Minify concatenated files ★ uglifyjs is pretty good ★ closure
compiler is really good ★ Hint: build tools support these
Serve compressed content ★ Browsers support gzip
Serve compressed content ★ Browsers support gzip ★ Servers do,
too!
Stylesheets? Same tricks. ★ won’t block ★ each triggers a
request ★ cssmin is pretty good
Preprocessing ★ Use a preprocessor (SASS, Stylus, LESS) ★ Concatenation,
minification are free Optimize for dev time!
Inline small scripts ★ Bundle HTTP overhead with page request
★ The price: caching
Did someone say caching?
Caching: the Big Idea ★ Less distance == faster ★
Keep content as close as possible
Caching: the bad news There are only two hard things
in Computer Science: cache invalidation and naming things. —Phil Karlton
Enable browser caching ★ HTTP can help
Enable browser caching ★ HTTP can help ★ Use header
(http://www.mobify.com/blog/beginners-guide-to-http-cache-headers/)
Enable browser caching ★ HTTP can help ★ Use header
★ Set if content will change
What about content that always changes?
Enable browser caching ★ HTTP can help ★ Use header
★ Set if content will change ★ Use with dynamic content
We can tell the browser even more.
Browser caching Describe app dependencies in a manifest
Browser caching Describe app dependencies in a manifest (https://developer.mozilla.org/en-US/docs/Web/HTML/Using_the_application_cache)
Browser caching ★ static assets
Browser caching ★ static assets ★ declare paths that require
access
Browser caching ★ static assets ★ declare paths that require
access ★ provide a
Use a Content Delivery Network ★ located near the users
★ replicate automagically ★ == fast
Use a Content Delivery Network Share common assets with everyone
else ★ cdnjs.com ★ jsDelivr.com ★ Google Hosted Libraries
Use a Content Delivery Network ★ Failure happens
Use a Content Delivery Network ★ Failure happens ★ So
keep a local fallback handy
Server-side caching On the application server ★ Minimize disk I/O
★ Cache popular files in memory Optimize for dev time!
Summing up ★ Bandwidth: how big is the pipe? ★
Volume: how much needs to be delivered? ★ Proximity: how far away are the ends?
Summing up ★ Bandwidth: avoid blocking behaviors ★ Volume: minimize
request count and size ★ Proximity: use browser caching and a CDN
Summing up ★ Bandwidth: avoid blocking behaviors ★ Volume: minimize
request count and size ★ Proximity: use browser caching and a CDN ★ Optimize for dev time!
Thank you! rj zaworski, versal inc. · @rjzaworski · github.com/rjz