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
290
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
490
Demystifying SPDY and HTTP/2
Avatar for Jonathan Klein jklein
1
670
Demystifying SPDY and HTTP/2
Avatar for Jonathan Klein jklein
2
1.1k
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
330
Upgrading the Web: Driving Support For New Standards
Avatar for Jonathan Klein jklein
1
860
Profiling PHP With XHProf
Avatar for Jonathan Klein jklein
1
1k
HubSpot Tech Talk - DIY Synthetic
Avatar for Jonathan Klein jklein
0
370

Other Decks in Technology

See All in Technology
AIドリブン開発の実践知 ― AI-DLC Unicorn Gym実施から見えた可能性と課題
Avatar for MIXI ENGINEERS mixi_engineers
PRO
0
110
組織的なAI活用を阻む 最大のハードルは コンテキストデザインだった
Avatar for KuboSeiya ixbox
1
610
今年60歳のおっさんCBになる
Avatar for Hiroo Katoh kentapapa
1
170
「活動」は激変する。「ベース」は変わらない ～ 4つの軸で捉える_AI時代ソフトウェア開発マネジメント
Avatar for 辻裕士/sentokun sentokun
0
150
JAWS DAYS 2026でAIの「もやっと」感が解消された話
Avatar for Makky12 smt7174
1
130
【AWS】CloudTrail LakeとCloudWatch Logs Insightsの使い分け方針
Avatar for Yuma Tsurugasaki tsurunosd
0
130
推し活エージェント
Avatar for ゆんたん yuntan_t
1
820
Databricks Lakebaseを用いたAIエージェント連携
Avatar for Daiki Akimoto NTTD daiki_akimoto_nttd
0
150
Oracle AI Database@Azure：サービス概要のご紹介
Avatar for oracle4engineer oracle4engineer
PRO
6
1.4k
"まず試す"ためのDatabricks Apps活用法 / Databricks Apps for Early Experiments and Validation
Avatar for NTT docomo Business nttcom
1
170
Kubernetes基盤における開発者体験 とセキュリティの両⽴ / Balancing developer experience and security in a Kubernetes-based environment
Avatar for mekka chmikata
0
170
自分をひらくと次のチャレンジの敷居が下がる
Avatar for aki sudoakiy
5
1.8k

Featured

See All Featured
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
247
13k
Stewardship and Sustainability of Urban and Community Forests
Avatar for Eric Wiseman pwiseman
0
170
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
82
6.2k
Everyday Curiosity
Avatar for Cassini Nazir cassininazir
0
190
Skip the Path - Find Your Career Trail
Avatar for Mark Kilby mkilby
1
94
It's Worth the Effort
Avatar for 3n 3n
188
29k
What does AI have to do with Human Rights?
Avatar for Per Axbom axbom
PRO
1
2.1k
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
225
10k
SEO for Brand Visibility & Recognition
Avatar for Aleyda Solis aleyda
0
4.4k
エンジニアに許された特別な時間の終わり
Avatar for watany watany
106
240k
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
360
30k
世界の人気アプリ100個を分析して見えたペイウォール設計の心得
Avatar for Akihiro Kokubo akihiro_kokubo
PRO
68
38k

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