アメブロ 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)

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