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
180
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
330
Demystifying SPDY and HTTP/2
jklein
1
530
Demystifying SPDY and HTTP/2
jklein
2
910
Cognitive Biases in Engineering Organizations
jklein
4
1.8k
Composer: From Beginner to Expert
jklein
1
750
Upgrading the Web: Boston Web Performance Meetup
jklein
1
240
Upgrading the Web: Driving Support For New Standards
jklein
1
680
Profiling PHP With XHProf
jklein
1
950
HubSpot Tech Talk - DIY Synthetic
jklein
0
210
Other Decks in Technology
See All in Technology
actionlint の Linter 設計
rhysd
5
760
データ分析力を高めるSQL研修『SQL Everyone』のご紹介【SQL勉強会 #3】
hikarut
1
180
Gemini in AppSheet_吉積情報株式会社 石見
comucal
PRO
0
2.2k
リードタイム、コストを最適化しながら 回復性を求めるクラウドネイティブ戦略 #CNDS2024
sgrokym
1
220
OpenFeatureと自動生成を活用したフィーチャーフラグの宣言的集約管理
biwashi
12
1.1k
lintnet - General purpose linter powered by Jsonnet
szksh
4
300
生成AI向け機械学習クラスタ 構築のレシピ 北海道石狩編
pfn
PRO
3
620
20240617_IAM MFAのパスキー対応を理解したい_今更多要素認証とパスキーについてキャッチアップしてみた
hiashisan
0
270
データベース08: 実体関連モデルとは?
trycycle
0
100
DockertestとLocalStackを使って 外部サービスに依存した多要素認証の 動作確認・テストをした話 / A story about using Dockertest and LocalStack to check and test the operation of multi-factor authentication that depends on external services
kaminashi
3
240
生成AIの活用方法 - 2024年現在、 結局どのように使えばいいのだろうか? / How to use Generative AI in 2024
nttcom
8
3.2k
Monitoring user experience of Flutter apps with SLI/SLO (日本語)
ostk0069
2
310
Featured
See All Featured
Dealing with People You Can't Stand - Big Design 2015
cassininazir
359
22k
Side Projects
sachag
451
41k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
15
8.5k
The Invisible Customer
myddelton
115
12k
Infographics Made Easy
chrislema
238
18k
Git: the NoSQL Database
bkeepers
PRO
423
64k
Into the Great Unknown - MozCon
thekraken
16
1.2k
Fashionably flexible responsive web design (full day workshop)
malarkey
399
65k
Optimising Largest Contentful Paint
csswizardry
14
2.5k
The World Runs on Bad Software
bkeepers
PRO
62
9k
BBQ
matthewcrist
80
8.9k
A Philosophy of Restraint
colly
198
16k
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