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
Re-evaluating Front-end Performance Best Practices
Search
benvinegar
April 21, 2015
Programming
15
1.6k
Re-evaluating Front-end Performance Best Practices
Fluent 2015
benvinegar
April 21, 2015
Tweet
Share
More Decks by benvinegar
See All by benvinegar
Getting the most out of JavaScript errors
benvinegar
1
340
JavaScript Error Reporting (and Why We Can't Have Nice Things)
benvinegar
0
220
FSTO: Re-evaluating Front-end Peformance Best Practices
benvinegar
9
1k
Other Decks in Programming
See All in Programming
PHPUnitの限界をPlaywrightで補完するテストアプローチ
yuzneri
0
270
テストから始めるAgentic Coding 〜Claude Codeと共に行うTDD〜 / Agentic Coding starts with testing
rkaga
16
6k
オンコール⼊⾨〜ページャーが鳴る前に、あなたが備えられること〜 / Before The Pager Rings
yktakaha4
2
1.1k
AWS Summit Japan 2024と2025の比較/はじめてのKiro、今あなたは岐路に立つ
satoshi256kbyte
1
250
SQLアンチパターン第2版 データベースプログラミングで陥りがちな失敗とその対策 / Intro to SQL Antipatterns 2nd
twada
PRO
27
8.1k
バイブスあるコーディングで ~PHP~ 便利ツールをつくるプラクティス
uzulla
1
270
プロダクトという一杯を作る - プロダクトチームが味の責任を持つまでの煮込み奮闘記
hiliteeternal
0
190
「テストは愚直&&網羅的に書くほどよい」という誤解 / Test Smarter, Not Harder
munetoshi
1
220
はじめてのWeb API体験 ー 飲食店検索アプリを作ろうー
akinko_0915
0
160
코딩 에이전트 체크리스트: Claude Code ver.
nacyot
0
990
MCPを使ってイベントソーシングのAIコーディングを効率化する / Streamlining Event Sourcing AI Coding with MCP
tomohisa
0
180
Startups on Rails in Past, Present and Future–Irina Nazarova, RailsConf 2025
irinanazarova
0
300
Featured
See All Featured
GitHub's CSS Performance
jonrohan
1031
460k
Into the Great Unknown - MozCon
thekraken
40
1.9k
The World Runs on Bad Software
bkeepers
PRO
70
11k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
760
Facilitating Awesome Meetings
lara
54
6.5k
The Pragmatic Product Professional
lauravandoore
35
6.8k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
The Language of Interfaces
destraynor
158
25k
Fireside Chat
paigeccino
37
3.5k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
109
19k
Transcript
re-evaluating front-end performance best practices
@bentlegen
None
None
car·go cult
cargo cult web performance
how does it happen?
deprecated … • books • blog posts • best practice
guides • StackOverflow answers • performance analysis tools • practices on live websites • conference talks like this one
the agenda • hostname sharding • for-loop array length caching
• dynamic script insertion
hostname sharding
in the beginning (HTTP 1.0)
with more connections 2 4 8 www www www
with hostname sharding 2 2 2 www www1, www2 www1
www2 www3 www4
still common Website # Static Hosts plus.google.com 4 tumblr.com 4
alibaba.com 4 theverge.com 4 ebay.com 6 businessinsider.com 6 netflix.com 11!
None
not a big deal anymore
browser connections/origin Browser # HTTP / origin Chrome 42 6
Firefox 37 8 Safari 7 6 IE 8, 9 6 IE 10 8 IE 11 13 bit.ly/rprf-bscope
chrome caps parallel image requests at 10 anyways bit.ly/rprf-bscope
rise of https stalled/ proxy negotiation dns! lookup connection +
tls/ssl time-to- first-byte download tls/ssl handshake
and http/2 will make all this irrelevant anyways
“2 domains for non-SPDY modern browsers” – Souders in 2013
bit.ly/rprf-2domains
etsy case study • 4 image domains → 2 •
50-80 ms faster for image heavy pages • 30-50 ms faster overall • up to 500ms faster on mobile bit.ly/rprf-etsy
the web’s moving on Website # Static Hosts netflix.com* 1
nytimes.com 1 youtube.com 2 twitter.com 2 facebook.com 2 pinterest.com 2 bbc.co.uk 2 etsy.com 3
looping
specifically array length caching in for loops
for (var i = 0, len = arr.length; i <
len; i++) { // do stuff } for (var i = 0; i < arr.length; i++) { // do stuff } vs
None
None
None
does it still hold?
cache vs no cache Chrome 42 Firefox 37 Safari 7
IE9+ IE8 ops/second (normalized), bigger is better cache no cache 78%
V8 (and other browsers) recognize this pattern bit.ly/rprf-v8opt
uncached version
cached version
“we should start assuming that our code is optimized” -
Vyacheslav Egorov, V8 bit.ly/rprf-v8opt
if you can trivially optimize it, the browser (probably) can
too
mobile disagrees, a little Chrome 41 (Android 5.1) Firefox 34
(Android 5.1) Safari (iOS 8) ops / second (normalized), bigger is better cache no cache 95%
if you think you’re going to get performance gains from
optimizing for loops you’re gonna have a bad time
dynamic script insertion
<script> var script = document.createElement('script'); script.src = '/app.js'; document.getElementsByTagName('head')[0] .appendChild(script);
</script> vs <script src="/app.js"></script>
None
None
who does this? • analytics: GA, Mixpanel, Chartbeat, Wordpress •
widgets: Disqus, Facebook Comments • JS module loaders: RequireJS, LabJS • script managers: Google Tag Manager, Segment
small problem: CSS Object Model
CSS Object Model (CCSOM) <link type="text/stylesheet" href="/main.css"/> ! ! !
<script> window.getComputedStyle(document.body).margin; </script> can’t execute until CSS ready
CSSOM + dynamic script insertion <link type="text/stylesheet" href="/main.css"/> ! !
! <script> var script = document.createElement('script'); script.src = '/app.js'; document.getElementsByTagName('head')[0] .appendChild(script); </script> can’t execute until CSS ready
dynamic script insertion scripts execute inline scripts can’t execute until
CSSOM ready; downloading is delayed
blocking 2nd script downloads after 1st executes 1st script preloaded
1st script executes
“Have we been doing it all wrong?” - Ilya Grigorik,
2014 bit.ly/rprf-injected
3rd option: async attribute <script async src="/app.js"></script>
ideal: async attribute both scripts execute all 3 resources download
in parallel
we should probably start using async
None
closing thoughts
don’t always believe what you read on the internet
benchmark your own stuff
benchmark your own stuff every year, apparently
always bet on browsers (and JS engines)
thanks
acknowledgements • performance research: Steve Souders, Ilya Grigorik, Guy Podjarny,
Vyacheslav Egorov, Jonathan Klein, Paul Irish, Nicholas Zakas • photos: Christian Junker, André Hofmeister, “My aim is true” • me: Ben Vinegar (@bentlegen) • office hours @ 1:30 PM today