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

node学園33時限目LT資料です。
https://nodejs.connpass.com/event/122297/

Transcript

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のバージョンアップだけでここまで速くなっ たのか理解できていない。もしお気づきの点があれば声をかけていただけ ると助かります。 ご清聴、ありがとうございました！