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
250
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
410
Demystifying SPDY and HTTP/2
jklein
1
620
Demystifying SPDY and HTTP/2
jklein
2
1.1k
Cognitive Biases in Engineering Organizations
jklein
4
2k
Composer: From Beginner to Expert
jklein
1
950
Upgrading the Web: Boston Web Performance Meetup
jklein
1
290
Upgrading the Web: Driving Support For New Standards
jklein
1
800
Profiling PHP With XHProf
jklein
1
1k
HubSpot Tech Talk - DIY Synthetic
jklein
0
330
Other Decks in Technology
See All in Technology
整頓のジレンマとの戦い〜Tidy First?で振り返る事業とキャリアの歩み〜/Fighting the tidiness dilemma〜Business and Career Milestones Reflected on in Tidy First?〜
bitkey
1
8.1k
ビギナーであり続ける/beginning
ikuodanaka
3
590
製造業からパッケージ製品まで、あらゆる領域をカバー!生成AIを利用したテストシナリオ生成 / 20250627 Suguru Ishii
shift_evolve
PRO
1
160
解析の定理証明実践@Lean 4
dec9ue
1
210
Fabric + Databricks 2025.6 の最新情報ピックアップ
ryomaru0825
1
160
PO初心者が考えた ”POらしさ”
nb_rady
0
150
タイミーのデータモデリング事例と今後のチャレンジ
ttccddtoki
6
2.1k
Zephyr RTOSを使った開発コンペに参加した件
iotengineer22
1
170
Model Mondays S2E03: SLMs & Reasoning
nitya
0
280
Understanding_Thread_Tuning_for_Inference_Servers_of_Deep_Models.pdf
lycorptech_jp
PRO
0
160
fukabori.fm 出張版: 売上高617億円と高稼働率を陰で支えた社内ツール開発のあれこれ話 / 20250704 Yoshimasa Iwase & Tomoo Morikawa
shift_evolve
PRO
2
3.9k
改めてAWS WAFを振り返る~業務で使うためのポイント~
masakiokuda
1
180
Featured
See All Featured
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
A Tale of Four Properties
chriscoyier
160
23k
4 Signs Your Business is Dying
shpigford
184
22k
Designing for Performance
lara
610
69k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.8k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Typedesign – Prime Four
hannesfritz
42
2.7k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Fireside Chat
paigeccino
37
3.5k
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