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
79
Beyond the Single-Page App: React and the Servers that Serve it
rjz
0
82
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
80
HTTP Security
rjz
2
170
Other Decks in Programming
See All in Programming
TFLintカスタムプラグインで始める Terraformコード品質管理
bells17
2
170
株式会社 Sun terras カンパニーデック
sunterras
0
300
私達はmodernize packageに夢を見るか feat. go/analysis, go/ast / Go Conference 2025
kaorumuta
2
560
CSC509 Lecture 06
javiergs
PRO
0
260
CSC305 Lecture 03
javiergs
PRO
0
240
Django Ninja による API 開発効率化とリプレースの実践
kashewnuts
0
1.3k
CSC509 Lecture 04
javiergs
PRO
0
300
[Kaigi on Rais 2025] 全問正解率3%: RubyKaigiで出題したやりがちな危険コード5選
power3812
0
140
明日から始めるリファクタリング
ryounasso
0
140
バッチ処理を「状態の記録」から「事実の記録」へ
panda728
PRO
0
160
bootcamp2025_バックエンド研修_WebAPIサーバ作成.pdf
geniee_inc
0
110
Pull-Requestの内容を1クリックで動作確認可能にするワークフロー
natmark
2
510
Featured
See All Featured
Building Applications with DynamoDB
mza
96
6.7k
Scaling GitHub
holman
463
140k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
Faster Mobile Websites
deanohume
310
31k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
How STYLIGHT went responsive
nonsquared
100
5.8k
Building Adaptive Systems
keathley
43
2.8k
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