アメブロ 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)
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 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にエライ人が入ってくる
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)