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
200
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
340
Demystifying SPDY and HTTP/2
jklein
1
550
Demystifying SPDY and HTTP/2
jklein
2
990
Cognitive Biases in Engineering Organizations
jklein
4
1.9k
Composer: From Beginner to Expert
jklein
1
820
Upgrading the Web: Boston Web Performance Meetup
jklein
1
250
Upgrading the Web: Driving Support For New Standards
jklein
1
750
Profiling PHP With XHProf
jklein
1
970
HubSpot Tech Talk - DIY Synthetic
jklein
0
250
Other Decks in Technology
See All in Technology
個人でもIAM Identity Centerを使おう!(アクセス管理編)
ryder472
4
230
AI前提のサービス運用ってなんだろう?
ryuichi1208
8
1.4k
エンジニア人生の拡張性を高める 「探索型キャリア設計」の提案
tenshoku_draft
1
130
プロダクト活用度で見えた真実 ホリゾンタルSaaSでの顧客解像度の高め方
tadaken3
0
180
【令和最新版】AWS Direct Connectと愉快なGWたちのおさらい
minorun365
PRO
5
760
100 名超が参加した日経グループ横断の競技型 AWS 学習イベント「Nikkei Group AWS GameDay」の紹介/mediajaws202411
nikkei_engineer_recruiting
1
170
オープンソースAIとは何か? --「オープンソースAIの定義 v1.0」詳細解説
shujisado
9
1.1k
AGIについてChatGPTに聞いてみた
blueb
0
130
マルチプロダクトな開発組織で 「開発生産性」に向き合うために試みたこと / Improving Multi-Product Dev Productivity
sugamasao
1
310
Exadata Database Service on Dedicated Infrastructure(ExaDB-D) UI スクリーン・キャプチャ集
oracle4engineer
PRO
2
3.2k
OCI Network Firewall 概要
oracle4engineer
PRO
0
4.2k
TypeScriptの次なる大進化なるか!? 条件型を返り値とする関数の型推論
uhyo
2
1.7k
Featured
See All Featured
Building Applications with DynamoDB
mza
90
6.1k
Designing the Hi-DPI Web
ddemaree
280
34k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
Typedesign – Prime Four
hannesfritz
40
2.4k
Designing for Performance
lara
604
68k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.1k
The Cult of Friendly URLs
andyhume
78
6k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.4k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
25
1.8k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Building a Scalable Design System with Sketch
lauravandoore
459
33k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
44
2.2k
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