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

2e0e89a34badf79dcff642cb7b5c126f?s=47 Kazunari Hara
February 25, 2017

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

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)

2e0e89a34badf79dcff642cb7b5c126f?s=128

Kazunari Hara

February 25, 2017
Tweet

Transcript

  1. アメブロ2016 実録、アメブロリニューアル275日 ~ Webパフォーマンス編 ~ 2017.2.25 Inside Frontend #1 @Yahoo

    Kazunari Hara (@herablog)
  2. アメブロ2016? 表示速度改善 システム, UIのモダン化

  3. アメブロ2016? 45,248行

  4. IsomorphicなWebで成果 Server Client JavaScript JavaScript API

  5. IsomorphicなWebで成果

  6. IsomorphicなWebで成果

  7. 採用技術はこんな感じ

  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. @herablog Kazunari Hara Speaker Shibuya Engineer

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

  12. 2016.1.1 ~ 2016.8.31

  13. 2016.1.1 ~ 2016.8.31

  14. Planning

  15. Planning

  16. The Standard - エコシステムに乗っかる - “Say hallo to the world”

  17. Frontend Server (nodejs) - 表示に関わるものをさっと変えられる - 弊社数々のサービスで導入実績あり

  18. JavaScript - React - Flux -> Redux - ES6(, 7)

    - ESLint
  19. V8 5.7

  20. mid-March https://github.com/nodejs/node/pull/10992#issuecomment-277925187

  21. CSS - PostCSS - BEM -> CSS Modules - stylelint

    - Style guide -> Web
  22. Style guide https://medium.com/@herablog/designing-style-guides-on-the-web-1706f3eefade#.3tzqlrfui

  23. HTML - モダンなMETA - アクセシビリティ - AMP

  24. モダンなMETA https://www.slideshare.net/herablog/meta-49939784

  25. アクセシビリティ(最初の一歩) https://speakerdeck.com/herablog/ameburowosukurinridadedu-mishang-getemita-2016nian-xia

  26. AMP

  27. AMP https://www.cyberagent.co.jp/technicalcreator/article/id=12157

  28. Build - gulp -> Webpack - package.json

  29. Performance Auditing

  30. http://calendar.perfplanet.com/2012/make-your-mobile-pages-render-in-under-one-second/ - Critical Lengths - Critical Files - Critical Bytes

    Browserの動きを理解する
  31. http://calendar.perfplanet.com/2012/make-your-mobile-pages-render-in-under-one-second/ Browserの動きを理解する

  32. 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
  33. 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
  34. Performance Auditing with Chrome Developer Tools SpeedCurve etc.

  35. Performance Auditing - 自分たちで調査・課題設定すること - 継続できること

  36. by Steve Souders

  37. Performance Auditing https://speedcurve.com/herablog/test/160413_R2_a0d134e5e6384947e979f0f029c4f05e/?share=zpalm08uq1h35axc4d5ylxncbyp832

  38. Performance Auditing - HTMLファイルサイズを減らす (71kB) - Blocking Resourcesを減らす (8つ) -

    JavaScriptの非同期読み込み - CDNキャッシュの最適化 - Web Fontの統合 (3種類) - いらない読み込みの削除 - 画像のCSS化
  39. Goal 50%↓

  40. Architecture

  41. Isomorphic Web App (SSR + SPA) SSR SPA SPA

  42. Lazy Load SSR JS

  43. Modern Workflow - git-flow, Pull Request - CIによる自動テスト, ビルド, デプロイ

  44. Modern Workflow CDN Private Cloud ECR (Tokyo)

  45. Update Docs: README

  46. Update Docs: CONTRIBUTING.md

  47. 基準をOSSに合わせて開発

  48. Do

  49. Performance Auditing - HTMLファイルサイズを減らす (71kB) - Blocking Resourcesを減らす (8つ) -

    JavaScriptの非同期読み込み - CDNキャッシュの最適化 - Web Fontの統合 (3種類) - いらない読み込みの削除 - 画像のCSS化
  50. HTMLファイルサイズを減らす - SSR + Lazy Load - 約1/7に削減 (71KB ->

    9.8KB)
  51. Blocking Resourcesを減らす - バンドル - 8から3つに削減

  52. JavaScriptの非同期読み込み - SSR + バンドル + async属性

  53. CDNキャッシュの最適化 - バージョニングしているので 長時間のキャッシュが可能

  54. Web Fontの統合 - 各サービスで作成していた - 共通利用できるよう単体サービス として運用

  55. Web Fontの統合 Web Font (WOFF2, WOFF, TTF) SVG Sprite

  56. いらない読み込みの削除 - 既存のコードを読みながらリストアップ

  57. 画像のCSS化 - 画像でなくていい表現のCSS化

  58. No more ガタンッ

  59. 本番のようにリリース - リリースフローも固めていく

  60. Testing

  61. 負荷試験 - 過去のアクセスログを元に検証 - Over 10,000 rps

  62. 負荷試験

  63. 負荷試験

  64. 結果は悪かった 500 1000 1500 2000 5 10 20 40 283

    928 965 1,887 レスポンスタイム (ms) 同時接続数 100ms
  65. 使い物にならない

  66. Turning

  67. Node.js with Chrome DevTools https://medium.com/@paul_irish/debugging-node-js-nightlies-with-chrome-devtools-7c4a1b95ae27

  68. Node.js with Chrome DevTools

  69. renderToString() 遅い問題

  70. Caching - 参照 > 更新 - 基本的に静的ドキュメント

  71. Cache Hit Rate

  72. Caching HTML renderToString()

  73. Caching (二層式) update blogger_ver blogger_ver:key data on-memory data data data

  74. Redis vs Memcached - Redisのeviction発生によるパフォーマンス低下 - データ量大・高アクセス時の単純なキャッシュで はMemcached https://twitter.com/cubicdaiya/status/827403388048470016

  75. Under 100ms

  76. React Fiber Architecture http://isfiberreadyyet.com/

  77. Infra Structure LB (Data Center) Host Host Host

  78. Infra Structure LB (Data Center) Host Host Host

  79. リリースは難産だった… - 段階リリース、うまくいかない - Slackに知らない人が入ってくる - 段階リリース、うまくいかない - Slackにエライ人が入ってくる

  80. None
  81. 2016.08.31

  82. ❛❛ Premature optimization is the root of all evil. ❜❜

    — Donald Knuth
  83. 教訓 - 刷新は大変だった - そのぶん知見も得られた - 老害にならないようにがんばら なくちゃいけない $

  84. One more thing...

  85. Front-End Performance Checklist 2017

  86. https://www.smashingmagazine.com/2016/12/front-end-performance-checklist-2017-pdf-pages/

  87. Service Worker, HTTP/2, CDN, srcset, client hints, resource hints, HPACK,

    AMP, Instant Atricle etc.
  88. Lighthouse https://github.com/GoogleChrome/lighthouse

  89. フロントエンドでできること

  90. フロント、がんばってこ

  91. Ask Me Anything HOU Bin herablog

  92. アメブロ2016 実録、アメブロリニューアル275日 ~ Webパフォーマンス編 ~ 2017.2.25 Inside Frontend #1 @Yahoo

    Kazunari Hara (@herablog)