1. DCL15秒の見れないサイトを3秒
まで改善した話。改善継続中

2. Masahiro Higuchi / 樋口雅拓
● グリーグループのリミア株式会社で、LIMIA という住まい領域のメディアを
作っています。ゲーム会社ですが、最近はメディアに力を入れています。
● 機械学習のエンジニアですが、iOS, Android,JSなどもやっている何でも屋
です。4歳の娘のパパ。
● twitter: @mahiguch1, github: @mahiguch
● https://limia.jp/
● https://arine.jp/
● https://aumo.jp/
● https://moguna.com/
● https://www.mine-3m.com/mine/

3. 背景と目的みたいなもの
● 3年前LIMIA Web https://limia.jp/ をリリース。
● 最初1年間機能追加を行い、その後放置してアプリを作っていた。
● 久しぶりにWebを確認したら、DOM Content Loadedが15秒。orz
→ これを3秒まで改善した試行錯誤を共有します。
というか、凄く辛かったので、誰か聞いて欲しい！

4. LIMIAとは
社内外の記者およびユーザーが投稿した記事
を読めるサービスです。記事は住まい暮らしに
関連するものです。機能としては、
● 記事の一覧表示
● 記事を閲覧、投稿、検索できる
● 写真を閲覧、投稿、検索できる
● ユーザーページで設定、投稿管理
● ログインしていいね、フォロー
● タイムライン、コンテスト、お知らせ
よくあるメディアの機能の全部のせです。

5. どんな状態か
● TypeScript: 記事投稿画面、写真投稿画面、ユーザ設定編集画面など編
集画面内での操作
● React: 記事にリンクを強制追加、全文検索サジェストなどちょっとした動作
● これらをwebpackでまとめている
● 広告タグはHTMLテンプレートにベタ書き
→ タスクを担当した人の意見を尊重。統一感はない。

6. どれだけ遅かったか
● DCL15秒だった。
● 遅すぎて広告が表示さ
れなくなった。
● 応急処置として簡単に
直せる所を洗い出して1
回目の対応開始

7. 1回目に行なった対策: scriptタグ数削減
scriptタグが見つかるたびに、レンダリング処理が止まる。それを防ぐため、
scriptタグをまとめることでレンダリング完了までの時間を短縮します。
<script>...</script> … <script>...</script> … <script> … </script>
→ <script> ………………………………………… </script>

8. 1回目に行なった対策: 3rd party jsの非同期読み込み
Scriptタグの後ろにasyncと書くと非同期読み込みをしてくれる。その場所で実行必須なもの以外は、非同期読み込みし
てしまった方が良い。つまり、全ての3rd partyスクリプトを非同期にしてしまって良さそう。
非同期のさせかた
<script src="app.js" async></script>
パッと調べた限り、jenieeは同期処理していた。adxが出ないでjenieeだけ出ていた理由はこれ。
<script type="text/javascript" src="https://js.mediams.mb.softbank.jp/t/328/617/a1328617.js"></script>
これをasyncにする。

9. 1回目に行なった対策: CSSのpreload
s.limia.jpからのjs/cssのdownloadをrel="preload"を付けて先読みさせることで、高速化を行う。Chromeデベロッパー
ツールのAuditsタブで検知。
先読みのさせかた
<link rel="preload" href="style.css" as="style">
対象箇所例
<link rel="stylesheet" href="//s.limia.jp/assets/css/common-256c8f20a7b999bcc048ab1e.css" media="all">
<link rel="stylesheet" href="//s.limia.jp/assets/css/main-pc-6669f7268689600cc942b763.css" media="all">

10. 1回目に行なった対策: アセットCDN配信
これがCDN(s.limia.jp)に乗っていない。
FAILED - https://limia.jp/manifest.json
FAILED - https://limia.jp/launcher-icon-192x192.png
limia.jpをs.limia.jpに変更することにより、CDNから配信します。
これにより、速度改善だけでなく、サーバ負荷削減効果が見込めます。

11. 1回目に行なった対策: 画像容量削減
無駄に大きな画像を取得している部分
が多かったので、そこを適切なサイズ
の画像を使うようにした。
SP記事詳細画像を800x800(116KB)
から640x265(62KB)に変更。

12. どれだけ早くなったか
この(1)の部分だけ。
5%ぐらい?

13. 2回目に行なった対策: Nodejsの
バージョンアップ
WebWorkerの利用などちゃんとした対策を検討。
本格的に取り掛かる前に準備として、Node.js, gulp,
TypeScriptのバージョンを上げた。
● Node.js: v6.14.1 → v10.14.2
● gulp: v3.9.1 → v4.0.0
● TypeScript: v2.2.2 → v3.2.2
"gulp": "^3.9.1", ---> 4.0.0
"gulp-concat": "^2.6.0", ---> 2.6.1
"gulp-consolidate": "^0.1.2", ---> 0.2.0
"gulp-eslint": "^3.0.1", ---> 5.0.0
"gulp-if": "^2.0.0", ---> 2.0.2
"gulp-rename": "^1.2.2", ---> 1.4.0
"gulp-rev": "^5.0.1", ---> 9.0.0
"gulp-rev-replace": "^0.4.3", ---> 0.4.4
"gulp-sourcemaps": "2.6.0", ---> 2.6.4
"gulp-tslint": "^2.0.0", ---> 8.1.3
"gulp-twig": "^0.3.0", ---> 1.2.0
"gulp-typescript": "3.1.6", ---> 5.0.0
"gulp-uglify": "^1.2.0", ---> 3.0.1
"gulp-unassert": "^1.0.0", ---> 1.1.0
"gulp-changed": "^3.1.1", ---> 3.2.0
"gulp-iconfont": "^8.0.1", ---> 10.0.2
"gulp-imagemin": "^3.1.1", ---> 5.0.3
"gulp-sketch": "^0.1.0", ---> 1.0.5
"gulp.spritesmith": "^4.0.0", ---> 6.9.0

14. どれだけ早くなったか
この(2)の部分。
めっちゃ早くなってる！
TypeScriptは効率改善して
そうだけど、ここまで？node
とgulpについては影響して
いるかどうかすら分からな
い。。。

15. 3回目に行なった対策: ReactとWebPackのバージョ
ンアップ
それならReactとWebPackもバージョンアップしたら早くなるのでは？
● React: v15.6.2 → v16.7.0
● WebPack: v1.14.0 → v4.29.0

16. どれだけ早くなったか
この(3)の部分。
めっちゃ早くなってる！
WebPackってこんなに進化
してたんだ。。。

17. 今後の改善予定
1から3月期の残タスク
● FirstViewのレンダリングに関係ないスクリプトをDCL後に読み込ませるよ
うにする。
● DOMアクセスが不要な処理をWebWokerで行うようにする。
● setTimeout または setInterval を使用するのを避けて、できる限り
requestAnimationFrame を使用するようにする。
3秒でもまだ遅いので、3ヶ月スプリントでPDCAを回して改善中！

18. まとめ
● DCL 15秒のサイトを3秒まで改善した
● Node.js自体もmoduleもバージョンアップは速度改善に効果的！
● 3秒でもまだまだ遅いので改善継続中。
● なぜnode.js、gulp、TypeScriptのバージョンアップだけでここまで速くなっ
たのか理解できていない。もしお気づきの点があれば声をかけていただけ
ると助かります。
ご清聴、ありがとうございました！