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
500
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
Introduction to Sansan Meishi Maker Development Engineer
Avatar for Sansan, Inc. sansan33
PRO
0
390
JOAI2026講評会資料（近藤佐介）
Avatar for Sasuke Kondo element138
1
130
猫でもわかるKiro CLI(CDKコーディング編)
Avatar for Hiroo Katoh kentapapa
1
110
60分で学ぶ最新Webフロントエンド
Avatar for mizdra mizdra
PRO
33
17k
AWS認定資格は本当に意味があるのか？
Avatar for NRI Netcom nrinetcom
PRO
1
230
Code Interpreter で、AIに安全に コードを書かせる。
Avatar for yoko / Naoki Yokomachi yokomachi
0
6.3k
All About Sansan – for New Global Engineers
Avatar for Sansan, Inc. sansan33
PRO
1
1.4k
最初の一歩を踏み出せなかった私が、誰かの背中を押したいと思うようになるまで / give someone a push
Avatar for miisan mii3king
0
140
"SQLは書けません"から始まる データドリブン
Avatar for kubell kubell_hr
2
440
Hello UUID
Avatar for mimifuwacc mimifuwacc
0
140
Bill One 開発エンジニア 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
5
18k
新規サービス開発におけるReact Nativeのリアル〜技術選定の裏側と実践的OSS活用〜
Avatar for Takahiro Kato grandbig
2
200

Featured

See All Featured
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
34
2.7k
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
615
210k
We Are The Robots
Avatar for Honza Javorek honzajavorek
0
210
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
Avatar for Ines Montani inesmontani
PRO
3
2.1k
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
96
14k
Digital Ethics as a Driver of Design Innovation
Avatar for Per Axbom axbom
PRO
1
260
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
39
3.1k
How to Build an AI Search Optimization Roadmap - Criteria and Steps to Take #SEOIRL
Avatar for Aleyda Solis aleyda
1
2k
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
50
15k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
128
55k
The Spectacular Lies of Maps
Avatar for Per Axbom axbom
PRO
1
690
SEO Brein meetup: CTRL+C is not how to scale international SEO
Avatar for Linda Hogenes lindahogenes
1
2.5k

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