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

Performance talk @wearearchitect

Avatar for Adam Onishi Adam Onishi
October 10, 2013
Technology
89
0

Performance talk @wearearchitect

Quick performance talk for the Developer Dejeuner at Architect

Avatar for Adam Onishi

Adam Onishi

October 10, 2013

More Decks by Adam Onishi

See All by Adam Onishi
Help! My client is a WebPerf meetup!
Avatar for Adam Onishi onishiweb
2
250
Help! My client is a WebPerf meetup!
Avatar for Adam Onishi onishiweb
0
420
Design Systems and Web Components
Avatar for Adam Onishi onishiweb
1
320
Planes, Trains, and CSS Components London CSS
Avatar for Adam Onishi onishiweb
1
200
Planes, Trains, and CSS Components
Avatar for Adam Onishi onishiweb
6
560
Best viewed with - Velocity Amsterdam 2015
Avatar for Adam Onishi onishiweb
3
3.5k
Trophy Winning Teams - Web Dev Conf 2015
Avatar for Adam Onishi onishiweb
0
270
Trophy Winning Teams - Drupal Con 2015
Avatar for Adam Onishi onishiweb
0
100
Best viewed with... SOTB5
Avatar for Adam Onishi onishiweb
1
240

Other Decks in Technology

See All in Technology
20分でわかるセキュアAPI
Avatar for nwiizo nwiizo
2
320
AI時代のアウトプット――変わったこと、変わらないこと / Devsumi 2026 Kansai #devsumi
Avatar for Junichi Ito jnchito
0
500
同じWAFが、攻撃の“形”は弾く── 正当な“形”の不正は通す
Avatar for kuroneko kuroneko13
0
270
Software Supply Chain Attackからクラウド環境を守るためにできること
Avatar for LHazy lhazy
2
290
コーチングの奥義 何もしないテクニック
Avatar for Watanabe Jin jinwatanabe
0
140
AIにブラウザを触らせて、E2EテストをPlaywrightで書く
Avatar for koji_kawamura koji_kawamura
0
340
長期運営で肥大化したExcelマスターデータの解消に向けた移行事例
Avatar for gree_tech gree_tech
PRO
0
100
アクセスキーが漏れた日にやるべきこと- 無効化の先にある本当の対応
Avatar for kazzpapa3 kazzpapa3
0
190
小粒でもパワフルなJS Runtime Antjsについて
Avatar for Comamoca comamoca
0
120
Flutter × BLE Centralを自前Pluginで実装する設計パターン - MethodChannel / EventChannelで作る双方向ブリッジの実践 / Building Custom Flutter BLE Central Plugins: Bidirectional Bridging with Method & Event Channels
Avatar for 株式会社ビットキー / Bitkey Inc. bitkey
PRO
0
220
なぜ Temporal の大小比較には compare しかないのか / Why Does Temporal Only Have compare() for Comparisons
Avatar for KazukiHayase kazukihayase
1
200
LanceDB入門
Avatar for Tomoko Uchida mocobeta
9
670

Featured

See All Featured
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
378
71k
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
85
9.6k
エンジニアに許された特別な時間の終わり
Avatar for watany watany
108
250k
The State of eCommerce SEO: How to Win in Today's Products SERPs - #SEOweek
Avatar for Aleyda Solis aleyda
2
11k
Deep Space Network (abreviated)
Avatar for Tony Rice tonyrice
0
270
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
201
75k
Measuring Dark Social's Impact On Conversion and Attribution
Avatar for Stephen Akadiri stephenakadiri
2
260
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
34
9.7k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
3.1k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
301
52k
The #1 spot is gone: here's how to win anyway
Avatar for Tamara Novitovic tamaranovitovic
3
1.1k
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
46
8.2k

Transcript

  1. Performance ...For dummies?

  2. *

  3. Why Performance?

  4. (2012) Speed

  5. 3G = 7.2Mb MAx!! Are you mobile?

  6. 4G = 8-12Mb Not consistently Are you mobile?

  7. 74% of mobile web users will leave a site if

    it takes longer than 5 seconds to load. - Brad Frost Are you mobile?

  8. What happened?

  9. The Catalysts!

  10. And this!

  11. testing performance

  12. Google Page Speed

  13. Google Page Speed

  14. Dev tools

  15. Dev tools

  16. Dev tools

  17. Dev tools

  18. Dev tools

  19. Browsers

  20. Render process

  21. Parse Render process

  22. Render process

  23. “document.write()” that nasty bastard! - Patrick Hamann Are you mobile?

  24. layout Render process

  25. Render process

  26. Paint Render process

  27. Render process

  28. https://vimeo.com/69385032 Jake archibald

  29. Performance-y stuff

  30. HTTP Requests CSS & JS Image compression HTTP Compression Browser

    Caching Be aware of your assets Performance

  31. Http requests

  32. http requests

  33. Make fewer requests... http requests

  34. MAXIMISE Parallelisation http requests

  35. Keep alive connection http requests

  36. Prefetching <link rel="dns-prefetch" href="//bar.foo.com"> http requests

  37. Resource prefetching http requests

  38. Keep CSS on the same domain http requests

  39. CSS & JS

  40. CSS at the top... JS at the bottom! CSS &

    JS

  41. Harry’s rules... (@csswizardry) CSS & JS

  42. The controversial bit... CSS & JS

  43. CSS and the critical path... CSS & JS

  44. Inline your critical CSS CSS & JS

  45. CSS & JS

  46. CSS & JS

  47. Optimise images

  48. ImageOptim & JPEGmini Optimising images

  49. Spriting Optimising images

  50. HTTP Compression

  51. HTML5 Boilerplate compression

  52. Browser caching

  53. The fastest HTTP request is the one not made -

    Someone? browser caching

  54. HTML5 Boilerplate browser caching

  55. be aware of your assets

  56. assets

  57. last points...

  58. Tools!!

  59. tools tools

  60. https://developers.google.com/events/io/sessions/325206725 tools

  61. grunt tools

  62. Concatenation Compression Image Optimisation and more... tools

  63. Compass tools

  64. Final points...

  65. Performance should be taken into account from day one! bored

    now?

  66. Get developers involved early in the process bored now?

  67. That’s all folks!