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
230
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
380
Demystifying SPDY and HTTP/2
jklein
1
610
Demystifying SPDY and HTTP/2
jklein
2
1.1k
Cognitive Biases in Engineering Organizations
jklein
4
1.9k
Composer: From Beginner to Expert
jklein
1
920
Upgrading the Web: Boston Web Performance Meetup
jklein
1
280
Upgrading the Web: Driving Support For New Standards
jklein
1
780
Profiling PHP With XHProf
jklein
1
1k
HubSpot Tech Talk - DIY Synthetic
jklein
0
290
Other Decks in Technology
See All in Technology
「家族アルバム みてね」を支えるS3ライフサイクル戦略
fanglang
1
240
AI・LLM事業部のSREとタスクの自動運転
shinyorke
PRO
0
300
Vision Language Modelを活用した メルカリの類似画像レコメンドの性能改善
yadayuki
9
1.3k
Medmain FACTBOOK
akinaootani
0
110
モノリスの認知負荷に立ち向かう、コードの所有者という思想と現実
kzkmaeda
0
110
LINEギフトのLINEミニアプリアクセシビリティ改善事例
lycorptech_jp
PRO
0
250
移行できそうでやりきれなかった 10年超えのシステムを葬るための戦略
ryu955
2
490
OPENLOGI Company Profile for engineer
hr01
1
22k
Proxmox VE超入門 〜 無料で作れるご自宅仮想化プラットフォームブックマークする
devops_vtj
0
160
一人QA時代が終わり、 QAチームが立ち上がった話
ma_cho29
0
290
30代エンジニアが考える、エンジニア生存戦略~~セキュリティを添えて~~
masakiokuda
4
2k
Cloud Native PG 使ってみて気づいたことと最新機能の紹介 - 第52回PostgreSQLアンカンファレンス
seinoyu
2
220
Featured
See All Featured
Scaling GitHub
holman
459
140k
Optimising Largest Contentful Paint
csswizardry
35
3.2k
Site-Speed That Sticks
csswizardry
4
450
Adopting Sorbet at Scale
ufuk
75
9.3k
Bash Introduction
62gerente
611
210k
Embracing the Ebb and Flow
colly
85
4.6k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.6k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Into the Great Unknown - MozCon
thekraken
36
1.7k
The World Runs on Bad Software
bkeepers
PRO
67
11k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
135
33k
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