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
230
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
48
Beyond the Single-Page App: React and the Servers that Serve it
rjz
0
47
Typesafe(ish) React
rjz
1
570
Front-end optimization
rjz
1
310
Technical Interviewing
rjz
0
160
Interop! Building a better Backbone.View
rjz
0
40
HTTP Security
rjz
2
120
Other Decks in Programming
See All in Programming
PHPの次期バージョンはこの時期どうなっているのか - Internalsの開発体制について - PHPカンファレンス小田原
youkidearitai
PRO
1
190
Ruby Function Composition
bkuhlmann
1
330
R言語の環境構築と基礎 Tokyo.R 112
bob3bob3
0
250
二郎系ラーメンのコールで学ぶ AST 解析
memory1994
PRO
7
1.7k
ゆるい個人開発のススメ
kuroppe1819
10
970
FigmaとPHPで作る1ミリたりとも表示崩れしない最強の帳票印刷ソリューション
ttskch
42
18k
データアナリストが行うDatabricksを活用したETLの自動化事例
shinoa
0
260
Komplexe Oberflächen mit SVG und der Web Animation API
joergneumann
0
670
デフォルトにして至高、RubyMineの大好きな所
ruzia
0
150
Changed Rules: Architectures with Lightweight Stores
manfredsteyer
PRO
0
240
Goのmultiple errorsについて (2024年4月版)
syumai
1
270
PHPはいつから死んでいるかの調査
chiroruxx
1
340
Featured
See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
1
1.3k
10 Git Anti Patterns You Should be Aware of
lemiorhan
647
58k
The Illustrated Children's Guide to Kubernetes
chrisshort
30
46k
What's in a price? How to price your products and services
michaelherold
237
11k
Build your cross-platform service in a week with App Engine
jlugia
225
17k
Designing for humans not robots
tammielis
248
25k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
24
2.3k
RailsConf 2023
tenderlove
2
530
Visualization
eitanlees
135
14k
Design by the Numbers
sachag
274
18k
Designing the Hi-DPI Web
ddemaree
276
33k
What the flash - Photography Introduction
edds
64
11k
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