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
Northeastern Lunch and Learn
Search
Jonathan Klein
June 18, 2014
Technology
0
260
Northeastern Lunch and Learn
A Web Performance 101 talk given at Northeastern in June 2014.
Jonathan Klein
June 18, 2014
Tweet
Share
More Decks by Jonathan Klein
See All by Jonathan Klein
Cognitive Biases in Engineering Organizations - Craft Conf
jklein
15
440
Demystifying SPDY and HTTP/2
jklein
1
640
Demystifying SPDY and HTTP/2
jklein
2
1.1k
Cognitive Biases in Engineering Organizations
jklein
4
2k
Composer: From Beginner to Expert
jklein
1
1k
Upgrading the Web: Boston Web Performance Meetup
jklein
1
300
Upgrading the Web: Driving Support For New Standards
jklein
1
810
Profiling PHP With XHProf
jklein
1
1k
HubSpot Tech Talk - DIY Synthetic
jklein
0
350
Other Decks in Technology
See All in Technology
dbtとAIエージェントを組み合わせて見えたデータ調査の新しい形
10xinc
2
520
現場の壁を乗り越えて、 「計装注入」が拓く オブザーバビリティ / Beyond the Field Barriers: Instrumentation Injection and the Future of Observability
aoto
PRO
1
610
コンパウンド組織のCRE #cre_meetup
layerx
PRO
1
270
スタートアップの現場で実践しているテストマネジメント #jasst_kyushu
makky_tyuyan
0
130
DSPy入門
tomehirata
0
110
事業開発におけるDify活用事例
kentarofujii
5
1.5k
What's new in OpenShift 4.20
redhatlivestreaming
0
280
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
14
82k
NLPコロキウム20251022_超効率化への挑戦: LLM 1bit量子化のロードマップ
yumaichikawa
3
500
AIとともに歩んでいくデザイナーの役割の変化
lycorptech_jp
PRO
0
890
Implementing and Evaluating a High-Level Language with WasmGC and the Wasm Component Model: Scala’s Case
tanishiking
0
190
Open Table Format (OTF) が必要になった背景とその機能 (2025.10.28)
simosako
2
310
Featured
See All Featured
Testing 201, or: Great Expectations
jmmastey
45
7.7k
Product Roadmaps are Hard
iamctodd
PRO
55
11k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
The Cost Of JavaScript in 2023
addyosmani
55
9.1k
Thoughts on Productivity
jonyablonski
70
4.9k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
1.7k
For a Future-Friendly Web
brad_frost
180
10k
The Cult of Friendly URLs
andyhume
79
6.6k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
1k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
4 Signs Your Business is Dying
shpigford
185
22k
Transcript
Northeastern Tech Talk Jonathan Klein 6/17/14 @jonathanklein
Slides, Links http://jkle.in/neu
About Me
About Me • Senior Performance Engineer At Etsy
About Me • Senior Performance Engineer At Etsy • I
write the Etsy Site Performance Reports
About Me • Senior Performance Engineer At Etsy • I
write the Etsy Site Performance Reports • Organize Boston Web Perf Meetup Group
The Value of Performance
None
Real World Examples
Real World Examples • Firefox: -2.2 seconds = 15.4% more
downloads
Real World Examples • Firefox: -2.2 seconds = 15.4% more
downloads • Shopzilla: -5 seconds = 7-12% increase in revenue
Real World Examples • Firefox: -2.2 seconds = 15.4% more
downloads • Shopzilla: -5 seconds = 7-12% increase in revenue • Google: +400ms = 0.76% fewer searches
Real World Examples • Firefox: -2.2 seconds = 15.4% more
downloads • Shopzilla: -5 seconds = 7-12% increase in revenue • Google: +400ms = 0.76% fewer searches • Amazon: +100ms = -1% revenue
Real World Examples • Firefox: -2.2 seconds = 15.4% more
downloads • Shopzilla: -5 seconds = 7-12% increase in revenue • Google: +400ms = 0.76% fewer searches • Amazon: +100ms = -1% revenue • http://www.phpied.com/the-performance-business-pitch/
What About a University?
What About a University? • More applicants
What About a University? • More applicants • Happier Students/Faculty
What About a University? • More applicants • Happier Students/Faculty
• Increased endowment contributions
Today’s Focus
Today’s Focus 1. Number of Bytes (Page Weight)
Today’s Focus 1. Number of Bytes (Page Weight) 2. What
Kind of Bytes
Today’s Focus 1. Number of Bytes (Page Weight) 2. What
Kind of Bytes 3. How They Are Delivered
80% of page load time takes place on the client
1. Page Weight
http://httparchive.org/interesting.php#bytesperpage
None
None
None
Things to do now
Things to do now • Gzip text resources (CSS/JS)
Things to do now • Gzip text resources (CSS/JS) •
Minify CSS/JS
Things to do now • Gzip text resources (CSS/JS) •
Minify CSS/JS • Optimize Images
Things to do now • Gzip text resources (CSS/JS) •
Minify CSS/JS • Optimize Images • smush.it (web)
Things to do now • Gzip text resources (CSS/JS) •
Minify CSS/JS • Optimize Images • smush.it (web) • Wesley (command line)
Things to do now • Gzip text resources (CSS/JS) •
Minify CSS/JS • Optimize Images • smush.it (web) • Wesley (command line)
2. The Right Bytes
None
None
/scripts/modernizr.js /scripts/mosaic.1.0.1.min.js /scripts/jquery.hashchange.min.js /scripts/jquery.easytabs.min.js /scripts/top-nav.js /scripts/content-swap.js /scripts/easytabs-settings.js /scripts/social-media-pane.js /scripts/jquery.touchSwipe.min.js /scripts/show-more.js
/scripts/googleSearch.js /scripts/touchswipe-settings.js /scripts/mosaic-settings.js /scripts/jquery.flexslider.js /scripts/jquery.tmpl.min.js /scripts/facebook-wall.js /scripts/mobile-nav.js
Problems With JavaScript
Problems With JavaScript • Blocks the main thread
Problems With JavaScript • Blocks the main thread • Parse
and execution time
Problems With JavaScript • Blocks the main thread • Parse
and execution time • Eats up CPU/battery on mobile
Not All Bytes Are Created Equal
3. Delivering The Bytes
None
None
None
None
None
KeepAlive On
None
None
None
Things to do now
Things to do now • Turn on KeepAlive in Your
Apache Config
Things to do now • Turn on KeepAlive in Your
Apache Config • Consolidate CSS/JS files
Things to do now • Turn on KeepAlive in Your
Apache Config • Consolidate CSS/JS files • Add Caching Headers
Quick Recap
One Day of Work
One Day of Work 1. Gzip text resources (CSS/JS)
One Day of Work 1. Gzip text resources (CSS/JS) 2.
Turn on KeepAlive
One Day of Work 1. Gzip text resources (CSS/JS) 2.
Turn on KeepAlive 3. Minify CSS/JS
One Day of Work 1. Gzip text resources (CSS/JS) 2.
Turn on KeepAlive 3. Minify CSS/JS 4. Optimize Images
One Day of Work 1. Gzip text resources (CSS/JS) 2.
Turn on KeepAlive 3. Minify CSS/JS 4. Optimize Images 5. Add Caching Headers
One Day of Work 1. Gzip text resources (CSS/JS) 2.
Turn on KeepAlive 3. Minify CSS/JS 4. Optimize Images 5. Add Caching Headers 6. Eliminate unnecessary JavaScript
One Day of Work 1. Gzip text resources (CSS/JS) 2.
Turn on KeepAlive 3. Minify CSS/JS 4. Optimize Images 5. Add Caching Headers 6. Eliminate unnecessary JavaScript 7. Consolidate CSS/JS files
Thanks!
@jonathanklein !
[email protected]
Get in Touch