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)

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

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 CloudECR (Tokyo)

45. Update Docs: README

46. Update Docs: CONTRIBUTING.md

47. Do

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

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

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

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

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

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

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

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

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

57. No more ガタンッ

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

59. Testing

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

61. 負荷試験

62. 負荷試験

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

64. 使い物にならない

65. Turning

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

67. Node.js with Chrome DevTools

68. renderToString() 遅い問題

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

70. Cache Hit Rate

71. Caching
HTML
renderToString()

72. Caching
update blogger_ver
blogger_ver:key
data
on-memory
data data
data

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

74. Under 100ms

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

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

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

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

80. 2016.08.31 🚀

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

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

83. One more thing...

84. Front-End Performance
Checklist 2017

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

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

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

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

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

90. Ask Me Anything
HOU Bin herablog

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