Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Northeastern Lunch and Learn

Avatar for Jonathan Klein Jonathan Klein
June 18, 2014
Technology
0
240

Northeastern Lunch and Learn

A Web Performance 101 talk given at Northeastern in June 2014.
Avatar for Jonathan Klein

Jonathan Klein

June 18, 2014
Tweet

More Decks by Jonathan Klein

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

Other Decks in Technology

See All in Technology
LLM アプリケーションのためのクラウドセキュリティ - CSPM の実装ポイント-
Avatar for KINTOテクノロジーズ Osaka Tech Lab osakatechlab
0
400
Part2　GitHub Copilotってなんだろう
Avatar for tomokusaba tomokusaba
2
780
激動の一年を通じて見えてきた「技術でリードする」ということ
Avatar for ktr ktr_0731
1
570
事業と組織から目を逸らずに技術でリードする
Avatar for ogugu ogugu9
4
170
AI 코딩 에이전트 더 똑똑하게 쓰기
Avatar for nacyot nacyot
0
550
MCP でモノが動くとおもしろい/It is interesting when things move with MCP
Avatar for 株式会社ビットキー / Bitkey Inc. bitkey
2
490
Azure × MCP 入門
Avatar for Ryosuke Hyakuta ry0y4n
8
1.7k
とあるEdTechベンチャーのシステム構成こだわりN選 / edtech-system
Avatar for k.goto gotok365
4
290
ペアーズにおける評価ドリブンな AI Agent 開発のご紹介
Avatar for fukubaka0825 fukubaka0825
9
2.6k
Azure & DevSecOps
Avatar for KAMEGAWA Kazushi kkamegawa
2
180
AWSを利用する上で知っておきたい名前解決の話
Avatar for nagisa_53 nagisa53
6
800
AIとSREで「今」できること
Avatar for HonMarkHunt honmarkhunt
3
720

Featured

See All Featured
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
159
23k
Done Done
Avatar for chrislema chrislema
184
16k
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
344
40k
Building Adaptive Systems
Avatar for Chris Keathley keathley
41
2.5k
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
231
18k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
129
19k
Writing Fast Ruby
Avatar for Erik Berlin sferik
628
61k
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
336
57k
Building an army of robots
Avatar for Kyle Neath kneath
305
45k
Code Reviewing Like a Champion
Avatar for maltzj maltzj
523
40k
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
307
110k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
71
4.8k

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