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

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

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

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

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

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

1回目に行なった対策: 3rd party jsの非同期読み込み Scriptタグの後ろにasyncと書くと非同期読み込みをしてくれる。その場所で実行必須なもの以外は、非同期読み込みし てしまった方が良い。つまり、全ての3rd partyスクリプトを非同期にしてしまって良さそう。 非同期のさせかた パッと調べた限り、jenieeは同期処理していた。adxが出ないでjenieeだけ出ていた理由はこれ。 これをasyncにする。

1回目に行なった対策: CSSのpreload s.limia.jpからのjs/cssのdownloadをrel="preload"を付けて先読みさせることで、高速化を行う。Chromeデベロッパー ツールのAuditsタブで検知。 先読みのさせかた 対象箇所例

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から配信します。 これにより、速度改善だけでなく、サーバ負荷削減効果が見込めます。

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

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

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

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

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

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

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

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