Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
アメブロ2016
実録、アメブロリニューアル275日
~ Webパフォーマンス編 ~
2017.2.25 Inside Frontend #1 @Yahoo
Kazunari Hara (@herablog)
アメブロ2016?
表示速度改善
システム, UIのモダン化
アメブロ2016?
45,248行 💪
IsomorphicなWebで成果
Server Client
JavaScript JavaScript
API
IsomorphicなWebで成果
IsomorphicなWebで成果
採用技術はこんな感じ
詳しくはブログを
アメブロ2016 ~ React/ReduxでつくるIsomorphic web app ~
https://developers.cyberagent.co.jp/blog/archives/636/
アメブロ2016 ~ ...
@herablog
Kazunari Hara
Speaker
Shibuya Engineer
アメブロ2016
実録、アメブロリニューアル275日
~ Webパフォーマンス編 ~
2016.1.1 ~ 2016.8.31
2016.1.1 ~ 2016.8.31
Planning
Planning
The Standard
- エコシステムに乗っかる
- “Say hallo to the world”
Frontend Server (nodejs)
- 表示に関わるものをさっと変えられる
- 弊社数々のサービスで導入実績あり
JavaScript
- React
- Flux -> Redux
- ES6(, 7)
- ESLint
V8 5.7
mid-March 🤗
https://github.com/nodejs/node/pull/10992#issuecomment-277925187
CSS
- PostCSS
- BEM -> CSS Modules
- stylelint
- Style guide -> Web
Style guide
https://medium.com/@herablog/designing-style-guides-on-the-web-1706f3eefade#.3tzqlrfui
HTML
- モダンなMETA
- アクセシビリティ
- AMP
モダンなMETA
https://www.slideshare.net/herablog/meta-49939784
アクセシビリティ
https://speakerdeck.com/herablog/ameburowosukurinridadedu-mishang-getemita-2016nian-xia
AMP
AMP
https://www.cyberagent.co.jp/technicalcreator/article/id=12157
Build
- gulp -> Webpack
- package.json
Performance Auditing
http://calendar.perfplanet.com/2012/make-your-mobile-pages-render-in-under-one-second/
- Critical Lengths
- Critical Files...
http://calendar.perfplanet.com/2012/make-your-mobile-pages-render-in-under-one-second/
Browserの動きを理解する
http://calendar.perfplanet.com/2012/make-your-mobile-pages-render-in-under-one-second/
Browserの動きを理解する
CRP Metrics: Length...
http://calendar.perfplanet.com/2012/make-your-mobile-pages-render-in-under-one-second/
- Keep server backend time to gener...
Performance Auditing with
Chrome Developer Tools
SpeedCurve
etc.
Performance Auditing
- 自分たちで調査・課題設定すること
- 継続できること
by Steve Souders
Performance Auditing
https://speedcurve.com/herablog/test/160413_R2_a0d134e5e6384947e979f0f029c4f05e/?share=zpalm08uq1h35a...
Performance Auditing
- HTMLファイルサイズを減らす (71kB)
- Blocking Resourcesを減らす (8つ)
- JavaScriptの非同期読み込み
- CDNキャッシュの最適化
- Web Font...
Goal
50%↓
Architecture
Isomorphic Web App (SSR + SPA)
SSR SPA SPA
Lazy Load
SSR
JS
Modern Workflow
- git-flow, Pull Request
- CIによる自動テスト, ビルド, デプロイ
Modern Workflow
CDN
Private CloudECR (Tokyo)
Update Docs: README
Update Docs: CONTRIBUTING.md
Do
Performance Auditing
- HTMLファイルサイズを減らす (71kB)
- Blocking Resourcesを減らす (8つ)
- JavaScriptの非同期読み込み
- CDNキャッシュの最適化
- Web Font...
HTMLファイルサイズを減らす
- SSR + Lazy Load
- 約1/7に削減 (71KB -> 9.8KB)
Blocking Resourcesを減らす
- バンドル
- 8から3つに削減
JavaScriptの非同期読み込み
- SSR + バンドル + async属性
CDNキャッシュの最適化
- バージョニングしているので
長時間のキャッシュが可能
Web Fontの統合
- 各サービスで作成していた
- 共通利用できるよう単体サービス
として運用
Web Fontの統合
Web Font (WOFF2, WOFF, TTF) SVG Sprite
いらない読み込みの削除
- 既存のコードを読みながらリストアップ
画像のCSS化
- 画像でなくていい表現のCSS化
No more ガタンッ
本番のようにリリース
- リリースフローも固めていく
Testing
負荷試験
- 過去のアクセスログを元に検証
- Over 10,000 rps
負荷試験
負荷試験
結果は悪かった
500
1000
1500
2000
5 10 20 40
283
928 965
1,887
レスポンスタイム(ms)
同時接続数
Target
使い物にならない
Turning
Node.js with Chrome DevTools
https://medium.com/@paul_irish/debugging-node-js-nightlies-with-chrome-devtools-7c4a1b95ae27
Node.js with Chrome DevTools
renderToString() 遅い問題
Caching
- 参照 > 更新
- 基本的に静的ドキュメント
Cache Hit Rate
Caching
HTML
renderToString()
Caching
update blogger_ver
blogger_ver:key
data
on-memory
data data
data
Redis vs Memcached
- Redisのeviction発生によるパフォーマンス低下
- データ量大・高アクセス時の単純なキャッシュで
はMemcached
https://twitter.com/cubicdaiya/statu...
Under 100ms
React Fiber Architecture
http://isfiberreadyyet.com/
Infra Structure
LB
(Data Center)
Host
Host
Host
Infra Structure
LB
(Data Center)
Host
Host
Host
リリースは難産だった…
- 段階リリース、うまくいかない
- Slackに知らない人が入ってくる
- 段階リリース、うまくいかない
- Slackにエライ人が入ってくる
2016.08.31 🚀
❛❛ Premature optimization is the root of all evil. ❜❜
— Donald Knuth
教訓
- 刷新は大変だった
- そのぶん知見も得られた
- 老害にならないようにがんばら
なくちゃいけない $
One more thing...
Front-End Performance
Checklist 2017
https://www.smashingmagazine.com/2016/12/front-end-performance-checklist-2017-pdf-pages/
Service Worker, HTTP/2, CDN,
srcset, client hints,
resource hints, HPACK,
AMP, Instant Atricle etc.
Lighthouse
https://github.com/GoogleChrome/lighthouse
フロントエンドでできること
フロント、がんばってこ💪
Ask Me Anything
HOU Bin herablog
アメブロ2016
実録、アメブロリニューアル275日
~ Webパフォーマンス編 ~
2017.2.25 Inside Frontend #1 @Yahoo
Kazunari Hara (@herablog)
アメブロ 2016: 実録、アメブロリニューアル275日 ~ Webパフォーマンス編 ~
アメブロ 2016: 実録、アメブロリニューアル275日 ~ Webパフォーマンス編 ~
Upcoming SlideShare
Loading in …5
×

アメブロ 2016: 実録、アメブロリニューアル275日 ~ Webパフォーマンス編 ~

324 views

Published on

Inside Frontend #1での発表内容です。

- [アメブロ2016 ~ React/ReduxでつくるIsomorphic web app ~](https://developers.cyberagent.co.jp/blog/archives/636/)
- [アメブロ2016 ~ Isomorphic JavaScriptの詳しい話](https://developers.cyberagent.co.jp/blog/archives/3513/)
- [アメブロの大規模システム刷新と それを支えるSpring](https://www.slideshare.net/nin2hanzo/spring-69237035)
- [アメブロ2016:インフラ編 〜大規模リニューアルの裏側〜](https://developers.cyberagent.co.jp/blog/archives/2653/)
- [SpeedCurve](https://speedcurve.com)
- [リニューアル前](https://speedcurve.com/herablog/test/160413_R2_a0d134e5e6384947e979f0f029c4f05e/?share=zpalm08uq1h35axc4d5ylxncbyp832)
- [deps: update V8 to 5.6 #10992](https://github.com/nodejs/node/pull/10992#issuecomment-277925187)
- [Designing Style Guides On The Web](https://medium.com/@herablog/designing-style-guides-on-the-web-1706f3eefade#.3tzqlrfui)
- [モダンなMETA](https://www.slideshare.net/herablog/meta-49939784)
- [アメブロをスクリーンリーダーで読み上げてみた ~2016年夏~](https://speakerdeck.com/herablog/ameburowosukurinridadedu-mishang-getemita-2016nian-xia)
- [アメブロにおけるAMP](https://www.cyberagent.co.jp/technicalcreator/article/id=12157)
- [AMPを導入してどうだったのか?](http://ameblo.jp/ca-seo/entry-12159258765.html)
- [Make your mobile pages render in under one second](http://calendar.perfplanet.com/2012/make-your-mobile-pages-render-in-under-one-second/)
- [Optimising the front end for the browser](https://hackernoon.com/optimising-the-front-end-for-the-browser-f2f51a29c572)
- [Debugging Node.js with Chrome DevTools](https://medium.com/@paul_irish/debugging-node-js-nightlies-with-chrome-devtools-7c4a1b95ae27)
- [Optimization killers](https://github.com/petkaantonov/bluebird/wiki/Optimization-killers)
- [Premature Optimization](http://wiki.c2.com/?PrematureOptimization)
- [RedisとMemcachedの利用方法に関してのツイート](https://twitter.com/cubicdaiya/status/827403388048470016)
- [Is Fiber Ready Yet?](http://isfiberreadyyet.com/)
- [Front-End Performance Checklist 2017](https://www.smashingmagazine.com/2016/12/front-end-performance-checklist-2017-pdf-pages/)
- [lighthouse](https://github.com/GoogleChrome/lighthouse)

Published in: Technology
  • Be the first to comment

アメブロ 2016: 実録、アメブロリニューアル275日 ~ Webパフォーマンス編 ~

  1. 1. アメブロ2016 実録、アメブロリニューアル275日 ~ Webパフォーマンス編 ~ 2017.2.25 Inside Frontend #1 @Yahoo Kazunari Hara (@herablog)
  2. 2. アメブロ2016? 表示速度改善 システム, UIのモダン化
  3. 3. アメブロ2016? 45,248行 💪
  4. 4. IsomorphicなWebで成果 Server Client JavaScript JavaScript API
  5. 5. IsomorphicなWebで成果
  6. 6. IsomorphicなWebで成果
  7. 7. 採用技術はこんな感じ
  8. 8. 詳しくはブログを アメブロ2016 ~ React/ReduxでつくるIsomorphic web app ~ https://developers.cyberagent.co.jp/blog/archives/636/ アメブロ2016 ~ Isomorphic JavaScriptの詳しい話 https://developers.cyberagent.co.jp/blog/archives/3513/ アメブロの大規模システム刷新と それを支えるSpring https://www.slideshare.net/nin2hanzo/spring-69237035 アメブロ2016:インフラ編 〜大規模リニューアルの裏側〜 https://developers.cyberagent.co.jp/blog/archives/2653/
  9. 9. @herablog Kazunari Hara Speaker Shibuya Engineer
  10. 10. アメブロ2016 実録、アメブロリニューアル275日 ~ Webパフォーマンス編 ~
  11. 11. 2016.1.1 ~ 2016.8.31
  12. 12. 2016.1.1 ~ 2016.8.31
  13. 13. Planning
  14. 14. Planning
  15. 15. The Standard - エコシステムに乗っかる - “Say hallo to the world”
  16. 16. Frontend Server (nodejs) - 表示に関わるものをさっと変えられる - 弊社数々のサービスで導入実績あり
  17. 17. JavaScript - React - Flux -> Redux - ES6(, 7) - ESLint
  18. 18. V8 5.7
  19. 19. mid-March 🤗 https://github.com/nodejs/node/pull/10992#issuecomment-277925187
  20. 20. CSS - PostCSS - BEM -> CSS Modules - stylelint - Style guide -> Web
  21. 21. Style guide https://medium.com/@herablog/designing-style-guides-on-the-web-1706f3eefade#.3tzqlrfui
  22. 22. HTML - モダンなMETA - アクセシビリティ - AMP
  23. 23. モダンなMETA https://www.slideshare.net/herablog/meta-49939784
  24. 24. アクセシビリティ https://speakerdeck.com/herablog/ameburowosukurinridadedu-mishang-getemita-2016nian-xia
  25. 25. AMP
  26. 26. AMP https://www.cyberagent.co.jp/technicalcreator/article/id=12157
  27. 27. Build - gulp -> Webpack - package.json
  28. 28. Performance Auditing
  29. 29. http://calendar.perfplanet.com/2012/make-your-mobile-pages-render-in-under-one-second/ - Critical Lengths - Critical Files - Critical Bytes Browserの動きを理解する
  30. 30. http://calendar.perfplanet.com/2012/make-your-mobile-pages-render-in-under-one-second/ Browserの動きを理解する
  31. 31. http://calendar.perfplanet.com/2012/make-your-mobile-pages-render-in-under-one-second/ Browserの動きを理解する CRP Metrics: Length 3, Files 8, Bytes 28kb TCP round trip limit
  32. 32. http://calendar.perfplanet.com/2012/make-your-mobile-pages-render-in-under-one-second/ - Keep server backend time to generate HTML to a minimum (under 100ms) - Avoid HTTP redirects for the main HTML resource - Avoid loading blocking external JavaScript and CSS before the initial render - Inline just the JavaScript and CSS needed for the initial render - Delay or async load any JavaScript and CSS not needed for the initial render - Keep HTML payload needed to render initial content to under 15kB compressed Make your mobile pages render in under one second Basics
  33. 33. Performance Auditing with Chrome Developer Tools SpeedCurve etc.
  34. 34. Performance Auditing - 自分たちで調査・課題設定すること - 継続できること
  35. 35. by Steve Souders
  36. 36. Performance Auditing https://speedcurve.com/herablog/test/160413_R2_a0d134e5e6384947e979f0f029c4f05e/?share=zpalm08uq1h35axc4d5ylxncbyp832
  37. 37. Performance Auditing - HTMLファイルサイズを減らす (71kB) - Blocking Resourcesを減らす (8つ) - JavaScriptの非同期読み込み - CDNキャッシュの最適化 - Web Fontの統合 (3種類) - いらない読み込みの削除 - 画像のCSS化
  38. 38. Goal 50%↓
  39. 39. Architecture
  40. 40. Isomorphic Web App (SSR + SPA) SSR SPA SPA
  41. 41. Lazy Load SSR JS
  42. 42. Modern Workflow - git-flow, Pull Request - CIによる自動テスト, ビルド, デプロイ
  43. 43. Modern Workflow CDN Private CloudECR (Tokyo)
  44. 44. Update Docs: README
  45. 45. Update Docs: CONTRIBUTING.md
  46. 46. Do
  47. 47. Performance Auditing - HTMLファイルサイズを減らす (71kB) - Blocking Resourcesを減らす (8つ) - JavaScriptの非同期読み込み - CDNキャッシュの最適化 - Web Fontの統合 (3種類) - いらない読み込みの削除 - 画像のCSS化
  48. 48. HTMLファイルサイズを減らす - SSR + Lazy Load - 約1/7に削減 (71KB -> 9.8KB)
  49. 49. Blocking Resourcesを減らす - バンドル - 8から3つに削減
  50. 50. JavaScriptの非同期読み込み - SSR + バンドル + async属性
  51. 51. CDNキャッシュの最適化 - バージョニングしているので 長時間のキャッシュが可能
  52. 52. Web Fontの統合 - 各サービスで作成していた - 共通利用できるよう単体サービス として運用
  53. 53. Web Fontの統合 Web Font (WOFF2, WOFF, TTF) SVG Sprite
  54. 54. いらない読み込みの削除 - 既存のコードを読みながらリストアップ
  55. 55. 画像のCSS化 - 画像でなくていい表現のCSS化
  56. 56. No more ガタンッ
  57. 57. 本番のようにリリース - リリースフローも固めていく
  58. 58. Testing
  59. 59. 負荷試験 - 過去のアクセスログを元に検証 - Over 10,000 rps
  60. 60. 負荷試験
  61. 61. 負荷試験
  62. 62. 結果は悪かった 500 1000 1500 2000 5 10 20 40 283 928 965 1,887 レスポンスタイム(ms) 同時接続数 Target
  63. 63. 使い物にならない
  64. 64. Turning
  65. 65. Node.js with Chrome DevTools https://medium.com/@paul_irish/debugging-node-js-nightlies-with-chrome-devtools-7c4a1b95ae27
  66. 66. Node.js with Chrome DevTools
  67. 67. renderToString() 遅い問題
  68. 68. Caching - 参照 > 更新 - 基本的に静的ドキュメント
  69. 69. Cache Hit Rate
  70. 70. Caching HTML renderToString()
  71. 71. Caching update blogger_ver blogger_ver:key data on-memory data data data
  72. 72. Redis vs Memcached - Redisのeviction発生によるパフォーマンス低下 - データ量大・高アクセス時の単純なキャッシュで はMemcached https://twitter.com/cubicdaiya/status/827403388048470016
  73. 73. Under 100ms
  74. 74. React Fiber Architecture http://isfiberreadyyet.com/
  75. 75. Infra Structure LB (Data Center) Host Host Host
  76. 76. Infra Structure LB (Data Center) Host Host Host
  77. 77. リリースは難産だった… - 段階リリース、うまくいかない - Slackに知らない人が入ってくる - 段階リリース、うまくいかない - Slackにエライ人が入ってくる
  78. 78. 2016.08.31 🚀
  79. 79. ❛❛ Premature optimization is the root of all evil. ❜❜ — Donald Knuth
  80. 80. 教訓 - 刷新は大変だった - そのぶん知見も得られた - 老害にならないようにがんばら なくちゃいけない $
  81. 81. One more thing...
  82. 82. Front-End Performance Checklist 2017
  83. 83. https://www.smashingmagazine.com/2016/12/front-end-performance-checklist-2017-pdf-pages/
  84. 84. Service Worker, HTTP/2, CDN, srcset, client hints, resource hints, HPACK, AMP, Instant Atricle etc.
  85. 85. Lighthouse https://github.com/GoogleChrome/lighthouse
  86. 86. フロントエンドでできること
  87. 87. フロント、がんばってこ💪
  88. 88. Ask Me Anything HOU Bin herablog
  89. 89. アメブロ2016 実録、アメブロリニューアル275日 ~ Webパフォーマンス編 ~ 2017.2.25 Inside Frontend #1 @Yahoo Kazunari Hara (@herablog)

×