$30 off During Our Annual Pro Sale. View Details »

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

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)

Kazunari Hara

February 25, 2017
Tweet

More Decks by Kazunari Hara

Other Decks in Technology

Transcript

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  5. IsomorphicなWebで成果

    View Slide

  6. IsomorphicなWebで成果

    View Slide

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

    View Slide

  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/

    View Slide

  9. @herablog
    Kazunari Hara
    Speaker
    Shibuya Engineer

    View Slide

  10. View Slide

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

    View Slide

  12. 2016.1.1 ~ 2016.8.31

    View Slide

  13. 2016.1.1 ~ 2016.8.31

    View Slide

  14. Planning

    View Slide

  15. Planning

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  19. V8 5.7

    View Slide

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

    View Slide

  21. CSS
    - PostCSS
    - BEM -> CSS Modules
    - stylelint
    - Style guide -> Web

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  26. AMP

    View Slide

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

    View Slide

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

    View Slide

  29. Performance Auditing

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

  34. Performance Auditing with
    Chrome Developer Tools
    SpeedCurve
    etc.

    View Slide

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

    View Slide

  36. by Steve Souders

    View Slide

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

    View Slide

  38. Performance Auditing
    - HTMLファイルサイズを減らす (71kB)
    - Blocking Resourcesを減らす (8つ)
    - JavaScriptの非同期読み込み
    - CDNキャッシュの最適化
    - Web Fontの統合 (3種類)
    - いらない読み込みの削除
    - 画像のCSS化

    View Slide

  39. Goal
    50%↓

    View Slide

  40. Architecture

    View Slide

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

    View Slide

  42. Lazy Load
    SSR
    JS

    View Slide

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

    View Slide

  44. Modern Workflow
    CDN
    Private Cloud
    ECR (Tokyo)

    View Slide

  45. Update Docs: README

    View Slide

  46. Update Docs: CONTRIBUTING.md

    View Slide

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

    View Slide

  48. Do

    View Slide

  49. Performance Auditing
    - HTMLファイルサイズを減らす (71kB)
    - Blocking Resourcesを減らす (8つ)
    - JavaScriptの非同期読み込み
    - CDNキャッシュの最適化
    - Web Fontの統合 (3種類)
    - いらない読み込みの削除
    - 画像のCSS化

    View Slide

  50. HTMLファイルサイズを減らす
    - SSR + Lazy Load
    - 約1/7に削減 (71KB -> 9.8KB)

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  58. No more ガタンッ

    View Slide

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

    View Slide

  60. Testing

    View Slide

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

    View Slide

  62. 負荷試験

    View Slide

  63. 負荷試験

    View Slide

  64. 結果は悪かった
    500
    1000
    1500
    2000
    5 10 20 40
    283
    928 965
    1,887
    レスポンスタイム (ms)
    同時接続数
    100ms

    View Slide

  65. 使い物にならない

    View Slide

  66. Turning

    View Slide

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

    View Slide

  68. Node.js with Chrome DevTools

    View Slide

  69. renderToString() 遅い問題

    View Slide

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

    View Slide

  71. Cache Hit Rate

    View Slide

  72. Caching
    HTML
    renderToString()

    View Slide

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

    View Slide

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

    View Slide

  75. Under 100ms

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  80. View Slide

  81. 2016.08.31

    View Slide

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

    View Slide

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

    View Slide

  84. One more thing...

    View Slide

  85. Front-End Performance
    Checklist 2017

    View Slide

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

    View Slide

  87. Service Worker, HTTP/2, CDN,
    srcset, client hints,
    resource hints, HPACK,
    AMP, Instant Atricle etc.

    View Slide

  88. Lighthouse
    https://github.com/GoogleChrome/lighthouse

    View Slide

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

    View Slide

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

    View Slide

  91. Ask Me Anything
    HOU Bin herablog

    View Slide

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

    View Slide