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

Northeastern Lunch and Learn

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for Jonathan Klein Jonathan Klein
June 18, 2014
Technology
310
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
540
Demystifying SPDY and HTTP/2
Avatar for Jonathan Klein jklein
1
740
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
890
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
Deep Data Security 機能解説
Avatar for oracle4engineer oracle4engineer
PRO
3
990
今から始めるAWS環境の暗号移行 - ポスト量子時代に備える
Avatar for sato4mi sato4mi
0
150
re:Invent の去年のスケジュールを公開します！
Avatar for Kazuki Miura miu_crescent
PRO
0
150
[re:Invent2026事前勉強会(有志開催)]続きは、ラスベガスの廊下で / continue-in-the-vegas-hallway
Avatar for sh_fk2 sh_fk2
0
480
複雑な業務システムを高速でつくるため、チーム全員をつくれる人へ
Avatar for AyaKurabuchi ayakurabuchi
0
120
推論基盤と Scale-Up Interconnect の現状と制約から俯瞰する技術動向
Avatar for Masayuki Kobayashi markunet
2
730
[General] 개발자로 해외 기업에서 일하기
Avatar for Jaewoong skydoves
1
250
ひとりで始めた AI駆動開発、チームに広げて何が変わったのか
Avatar for Kenichi Odo kenichiodo
1
200
E2Eってつらくないですか？E2Eの管理コストを下げる手段とその実践
Avatar for Kosei Akaboshi (akaboshinit) akaboshinit
6
2.9k
仕様駆動開発の、その先へ。決める力と確かめる仕組み
Avatar for Riku INADA inariku
1
160
クラウドエージェントの先駆け Devin。今も最先端を走る、他との違い
Avatar for kinopee kinopeee
1
540
Lint の層を組み直した話
Avatar for 弁護士ドットコム bengo4com
2
290

Featured

See All Featured
What’s in a name? Adding method to the madness
Avatar for The Alliance productmarketing
PRO
24
4.2k
Public Speaking Without Barfing On Your Shoes - THAT 2023
Avatar for David Neal reverentgeek
1
650
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
Avatar for soudai sone soudai
PRO
68
59k
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
348
41k
Marketing to machines
Avatar for Jono Alderson jonoalderson
1
6k
How to Get Subject Matter Experts Bought In and Actively Contributing to SEO & PR Initiatives.
Avatar for Liv Day livdayseo
0
240
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
174
15k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
35
2.6k
Agile Leadership in an Agile Organization
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
310
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
433
67k
SERP Conf. Vienna - Web Accessibility: Optimizing for Inclusivity and SEO
Avatar for Sara Fernández Carmona sarafernandez
2
1.6k
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
Avatar for Kenny Baas-Schwegler baasie
0
750

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