Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

Northeastern Lunch and Learn

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Jonathan Klein Jonathan Klein
June 18, 2014
Technology
300
0

Northeastern Lunch and Learn

A Web Performance 101 talk given at Northeastern in June 2014.

Avatar for Jonathan Klein

Jonathan Klein

June 18, 2014

More Decks by Jonathan Klein

See All by Jonathan Klein
Cognitive Biases in Engineering Organizations - Craft Conf
Avatar for Jonathan Klein jklein
15
530
Demystifying SPDY and HTTP/2
Avatar for Jonathan Klein jklein
1
730
Demystifying SPDY and HTTP/2
Avatar for Jonathan Klein jklein
2
1.2k
Cognitive Biases in Engineering Organizations
Avatar for Jonathan Klein jklein
4
2k
Composer: From Beginner to Expert
Avatar for Jonathan Klein jklein
1
1.1k
Upgrading the Web: Boston Web Performance Meetup
Avatar for Jonathan Klein jklein
1
360
Upgrading the Web: Driving Support For New Standards
Avatar for Jonathan Klein jklein
1
880
Profiling PHP With XHProf
Avatar for Jonathan Klein jklein
1
1.1k
HubSpot Tech Talk - DIY Synthetic
Avatar for Jonathan Klein jklein
0
390

Other Decks in Technology

See All in Technology
実践！Cloud Run ハンズオン！！ / Cloud Run handson
Avatar for y-ohgi y0hgi
0
180
UniFi（ユニファイ）AIカメラの現場活用
Avatar for ludicmind ludicmind
1
410
自作バイナリを動かす「入口」8選
Avatar for Takumi Sueda puhitaku
2
1.3k
V8のArray.prototype.flatを最大約20倍速くするまでと、巨大OSSへの大規模コミットの道のり
Avatar for Riya Amemiya riyaamemiya
0
190
AIに攻撃される前に、AIに攻撃させる
Avatar for Kazuyoshi Tsuchiya tsuchikazu
0
170
IoTデバイスを繋げるプロトコルMatterをAndroidで使用する方法
Avatar for harutiro harutiro
0
140
組み立てて楽しむ AWS Blocks 入門
Avatar for たけのこ kmiya84377
0
230
会社説明資料
Avatar for パーソル＆サーバーワークス株式会社 persolserverworks
0
9.7k
全PRの83%が AIレビューだけでマージできるようになった開発組織は その後どうなったか @2026/10
Avatar for a-thug athug
0
140
AI時代のPRレビューにどう向き合うか？
Avatar for KairiM kairim0
1
160
Loop Engineering これくらいでいい
Avatar for mikan mikanichinose
0
210
OSC2026on_the-world-is-waiting-for-your-voice.pdf
Avatar for Naruhiko Ogasawara naruoga
0
370

Featured

See All Featured
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
163
24k
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
31
10k
Kristin Tynski - Automating Marketing Tasks With AI
Avatar for Tech SEO Connect techseoconnect
PRO
0
540
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
33
2.2k
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
75
12k
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
4k
The SEO identity crisis: Don't let AI make you average
Avatar for Varn varn
0
580
Making Projects Easy
Avatar for Brett Harned brettharned
120
6.8k
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
234
19k
Utilizing Notion as your number one productivity tool
Avatar for Mfonobong Umondia mfonobong
4
610
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
12
1.9k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
123
22k

Transcript

  1. Northeastern Tech Talk Jonathan Klein 6/17/14 @jonathanklein

  2. Slides, Links http://jkle.in/neu

  3. About Me

  4. About Me • Senior Performance Engineer At Etsy

  5. About Me • Senior Performance Engineer At Etsy • I

    write the Etsy Site Performance Reports

  6. About Me • Senior Performance Engineer At Etsy • I

    write the Etsy Site Performance Reports • Organize Boston Web Perf Meetup Group

  7. The Value of Performance

  8. None

  9. Real World Examples

  10. Real World Examples • Firefox: -2.2 seconds = 15.4% more

    downloads

  11. Real World Examples • Firefox: -2.2 seconds = 15.4% more

    downloads • Shopzilla: -5 seconds = 7-12% increase in revenue

  12. 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

  13. 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

  14. 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/

  15. What About a University?

  16. What About a University? • More applicants

  17. What About a University? • More applicants • Happier Students/Faculty

  18. What About a University? • More applicants • Happier Students/Faculty

    • Increased endowment contributions

  19. Today’s Focus

  20. Today’s Focus 1. Number of Bytes (Page Weight)

  21. Today’s Focus 1. Number of Bytes (Page Weight) 2. What

    Kind of Bytes

  22. Today’s Focus 1. Number of Bytes (Page Weight) 2. What

    Kind of Bytes 3. How They Are Delivered

  23. 80% of page load time takes place on the client

  24. 1. Page Weight

  25. http://httparchive.org/interesting.php#bytesperpage

  26. None
  27. None
  28. None

  29. Things to do now

  30. Things to do now • Gzip text resources (CSS/JS)

  31. Things to do now • Gzip text resources (CSS/JS) •

    Minify CSS/JS

  32. Things to do now • Gzip text resources (CSS/JS) •

    Minify CSS/JS • Optimize Images

  33. Things to do now • Gzip text resources (CSS/JS) •

    Minify CSS/JS • Optimize Images • smush.it (web)

  34. Things to do now • Gzip text resources (CSS/JS) •

    Minify CSS/JS • Optimize Images • smush.it (web) • Wesley (command line)

  35. Things to do now • Gzip text resources (CSS/JS) •

    Minify CSS/JS • Optimize Images • smush.it (web) • Wesley (command line)

  36. 2. The Right Bytes

  37. None
  38. None

  39. /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

  40. Problems With JavaScript

  41. Problems With JavaScript • Blocks the main thread

  42. Problems With JavaScript • Blocks the main thread • Parse

    and execution time

  43. Problems With JavaScript • Blocks the main thread • Parse

    and execution time • Eats up CPU/battery on mobile

  44. Not All Bytes Are Created Equal

  45. 3. Delivering The Bytes

  46. None
  47. None
  48. None
  49. None
  50. None

  51. KeepAlive On

  52. None
  53. None
  54. None

  55. Things to do now

  56. Things to do now • Turn on KeepAlive in Your

    Apache Config

  57. Things to do now • Turn on KeepAlive in Your

    Apache Config • Consolidate CSS/JS files

  58. Things to do now • Turn on KeepAlive in Your

    Apache Config • Consolidate CSS/JS files • Add Caching Headers

  59. Quick Recap

  60. One Day of Work

  61. One Day of Work 1. Gzip text resources (CSS/JS)

  62. One Day of Work 1. Gzip text resources (CSS/JS) 2.

    Turn on KeepAlive

  63. One Day of Work 1. Gzip text resources (CSS/JS) 2.

    Turn on KeepAlive 3. Minify CSS/JS

  64. One Day of Work 1. Gzip text resources (CSS/JS) 2.

    Turn on KeepAlive 3. Minify CSS/JS 4. Optimize Images

  65. 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

  66. 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

  67. 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

  68. Thanks!

  69. @jonathanklein ! [email protected] Get in Touch