Slide 1
Slide 1 text
アメブロ2016
実録、アメブロリニューアル275日
~ Webパフォーマンス編 ~
2017.2.25 Inside Frontend #1 @Yahoo
Kazunari Hara (@herablog)
Slide 2
Slide 2 text
アメブロ2016？
表示速度改善
システム, UIのモダン化
Slide 3
Slide 3 text
アメブロ2016？
45,248行
Slide 4
Slide 4 text
IsomorphicなWebで成果
Server Client
JavaScript JavaScript
API
Slide 5
Slide 5 text
IsomorphicなWebで成果
Slide 6
Slide 6 text
IsomorphicなWebで成果
Slide 7
Slide 7 text
採用技術はこんな感じ
Slide 8
Slide 8 text
詳しくはブログを
アメブロ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/
Slide 9
Slide 9 text
@herablog
Kazunari Hara
Speaker
Shibuya Engineer
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
アメブロ2016
実録、アメブロリニューアル275日
~ Webパフォーマンス編 ~
Slide 12
Slide 12 text
2016.1.1 ~ 2016.8.31
Slide 13
Slide 13 text
2016.1.1 ~ 2016.8.31
Slide 14
Slide 14 text
Planning
Slide 15
Slide 15 text
Planning
Slide 16
Slide 16 text
The Standard
- エコシステムに乗っかる
- “Say hallo to the world”
Slide 17
Slide 17 text
Frontend Server (nodejs)
- 表示に関わるものをさっと変えられる
- 弊社数々のサービスで導入実績あり
Slide 18
Slide 18 text
JavaScript
- React
- Flux -> Redux
- ES6(, 7)
- ESLint
Slide 19
Slide 19 text
V8 5.7
Slide 20
Slide 20 text
mid-March
https://github.com/nodejs/node/pull/10992#issuecomment-277925187
Slide 21
Slide 21 text
CSS
- PostCSS
- BEM -> CSS Modules
- stylelint
- Style guide -> Web
Slide 22
Slide 22 text
Style guide
https://medium.com/@herablog/designing-style-guides-on-the-web-1706f3eefade#.3tzqlrfui
Slide 23
Slide 23 text
HTML
- モダンなMETA
- アクセシビリティ
- AMP
Slide 24
Slide 24 text
モダンなMETA
https://www.slideshare.net/herablog/meta-49939784
Slide 25
Slide 25 text
アクセシビリティ(最初の一歩)
https://speakerdeck.com/herablog/ameburowosukurinridadedu-mishang-getemita-2016nian-xia
Slide 26
Slide 26 text
AMP
Slide 27
Slide 27 text
AMP
https://www.cyberagent.co.jp/technicalcreator/article/id=12157
Slide 28
Slide 28 text
Build
- gulp -> Webpack
- package.json
Slide 29
Slide 29 text
Performance Auditing
Slide 30
Slide 30 text
http://calendar.perfplanet.com/2012/make-your-mobile-pages-render-in-under-one-second/
- Critical Lengths
- Critical Files
- Critical Bytes
Browserの動きを理解する
Slide 31
Slide 31 text
http://calendar.perfplanet.com/2012/make-your-mobile-pages-render-in-under-one-second/
Browserの動きを理解する
Slide 32
Slide 32 text
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
Slide 33
Slide 33 text
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
Slide 34
Slide 34 text
Performance Auditing with
Chrome Developer Tools
SpeedCurve
etc.
Slide 35
Slide 35 text
Performance Auditing
- 自分たちで調査・課題設定すること
- 継続できること
Slide 36
Slide 36 text
by Steve Souders
Slide 37
Slide 37 text
Performance Auditing
https://speedcurve.com/herablog/test/160413_R2_a0d134e5e6384947e979f0f029c4f05e/?share=zpalm08uq1h35axc4d5ylxncbyp832
Slide 38
Slide 38 text
Performance Auditing
- HTMLファイルサイズを減らす (71kB)
- Blocking Resourcesを減らす (8つ)
- JavaScriptの非同期読み込み
- CDNキャッシュの最適化
- Web Fontの統合 (3種類)
- いらない読み込みの削除
- 画像のCSS化
Slide 39
Slide 39 text
Goal
50%↓
Slide 40
Slide 40 text
Architecture
Slide 41
Slide 41 text
Isomorphic Web App (SSR + SPA)
SSR SPA SPA
Slide 42
Slide 42 text
Lazy Load
SSR
JS
Slide 43
Slide 43 text
Modern Workflow
- git-flow, Pull Request
- CIによる自動テスト, ビルド, デプロイ
Slide 44
Slide 44 text
Modern Workflow
CDN
Private Cloud
ECR (Tokyo)
Slide 45
Slide 45 text
Update Docs: README
Slide 46
Slide 46 text
Update Docs: CONTRIBUTING.md
Slide 47
Slide 47 text
基準をOSSに合わせて開発
Slide 48
Slide 48 text
Do
Slide 49
Slide 49 text
Performance Auditing
- HTMLファイルサイズを減らす (71kB)
- Blocking Resourcesを減らす (8つ)
- JavaScriptの非同期読み込み
- CDNキャッシュの最適化
- Web Fontの統合 (3種類)
- いらない読み込みの削除
- 画像のCSS化
Slide 50
Slide 50 text
HTMLファイルサイズを減らす
- SSR + Lazy Load
- 約1/7に削減 (71KB -> 9.8KB)
Slide 51
Slide 51 text
Blocking Resourcesを減らす
- バンドル
- 8から3つに削減
Slide 52
Slide 52 text
JavaScriptの非同期読み込み
- SSR + バンドル + async属性
Slide 53
Slide 53 text
CDNキャッシュの最適化
- バージョニングしているので
長時間のキャッシュが可能
Slide 54
Slide 54 text
Web Fontの統合
- 各サービスで作成していた
- 共通利用できるよう単体サービス
として運用
Slide 55
Slide 55 text
Web Fontの統合
Web Font (WOFF2, WOFF, TTF) SVG Sprite
Slide 56
Slide 56 text
いらない読み込みの削除
- 既存のコードを読みながらリストアップ
Slide 57
Slide 57 text
画像のCSS化
- 画像でなくていい表現のCSS化
Slide 58
Slide 58 text
No more ガタンッ
Slide 59
Slide 59 text
本番のようにリリース
- リリースフローも固めていく
Slide 60
Slide 60 text
Testing
Slide 61
Slide 61 text
負荷試験
- 過去のアクセスログを元に検証
- Over 10,000 rps
Slide 62
Slide 62 text
負荷試験
Slide 63
Slide 63 text
負荷試験
Slide 64
Slide 64 text
結果は悪かった
500
1000
1500
2000
5 10 20 40
283
928 965
1,887
レスポンスタイム (ms)
同時接続数
100ms
Slide 65
Slide 65 text
使い物にならない
Slide 66
Slide 66 text
Turning
Slide 67
Slide 67 text
Node.js with Chrome DevTools
https://medium.com/@paul_irish/debugging-node-js-nightlies-with-chrome-devtools-7c4a1b95ae27
Slide 68
Slide 68 text
Node.js with Chrome DevTools
Slide 69
Slide 69 text
renderToString() 遅い問題
Slide 70
Slide 70 text
Caching
- 参照 > 更新
- 基本的に静的ドキュメント
Slide 71
Slide 71 text
Cache Hit Rate
Slide 72
Slide 72 text
Caching
HTML
renderToString()
Slide 73
Slide 73 text
Caching (二層式)
update blogger_ver
blogger_ver:key
data
on-memory
data data
data
Slide 74
Slide 74 text
Redis vs Memcached
- Redisのeviction発生によるパフォーマンス低下
- データ量大・高アクセス時の単純なキャッシュで
はMemcached
https://twitter.com/cubicdaiya/status/827403388048470016
Slide 75
Slide 75 text
Under 100ms
Slide 76
Slide 76 text
React Fiber Architecture
http://isfiberreadyyet.com/
Slide 77
Slide 77 text
Infra Structure
LB
(Data Center)
Host
Host
Host
Slide 78
Slide 78 text
Infra Structure
LB
(Data Center)
Host
Host
Host
Slide 79
Slide 79 text
リリースは難産だった…
- 段階リリース、うまくいかない
- Slackに知らない人が入ってくる
- 段階リリース、うまくいかない
- Slackにエライ人が入ってくる
Slide 80
Slide 80 text
No content
Slide 81
Slide 81 text
2016.08.31
Slide 82
Slide 82 text
❛❛ Premature optimization is the root of all evil. ❜❜
— Donald Knuth
Slide 83
Slide 83 text
教訓
- 刷新は大変だった
- そのぶん知見も得られた
- 老害にならないようにがんばら
なくちゃいけない $
Slide 84
Slide 84 text
One more thing...
Slide 85
Slide 85 text
Front-End Performance
Checklist 2017
Slide 86
Slide 86 text
https://www.smashingmagazine.com/2016/12/front-end-performance-checklist-2017-pdf-pages/
Slide 87
Slide 87 text
Service Worker, HTTP/2, CDN,
srcset, client hints,
resource hints, HPACK,
AMP, Instant Atricle etc.
Slide 88
Slide 88 text
Lighthouse
https://github.com/GoogleChrome/lighthouse
Slide 89
Slide 89 text
フロントエンドでできること
Slide 90
Slide 90 text
フロント、がんばってこ
Slide 91
Slide 91 text
Ask Me Anything
HOU Bin herablog
Slide 92
Slide 92 text
アメブロ2016
実録、アメブロリニューアル275日
~ Webパフォーマンス編 ~
2017.2.25 Inside Frontend #1 @Yahoo
Kazunari Hara (@herablog)