タウンワークにおけるCore Web Vitals改善施策とそれにより見えてきたもの
by
Recruit
Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
タウンワークにおけるCore Web Vitals改善施策とそれにより見え てきたもの 2021/6/28 Node学園 36時限目 takumo maeda
Slide 2
Slide 2 text
自己紹介 前田 琢百 Maeda Takumo 株式会社リクルート プロダクト統括本部 プロダクト開発統括室 プロダクトディベロップメント室 HR領域プロダ クトディベロップメントユニット HR領域エンジニアリング部 HRプロダクト開発2グループ(長い タウンワーク Webエンジニア(主にバックエンド、フロントエンドも時々) 2016新卒。HR領域サービスネイティブアプリ開発 →バッチ改善とかとか→Web開発(エンハンスチーム , オフショ ア開発検証 とかとか)→遊撃部隊としてCore Web Vitals改善主導
Slide 3
Slide 3 text
Core Web Vitalsおさらい ● LCP(Largest Contentful Paint) ユーザーがページで最も有意義なコンテンツをどのくらい早く見ることができるかを表す。感覚的な読み込 みスピードを測定し、ページ読み込みタイムラインにおいてページの主要コンテンツが読み込まれたと思わ れるタイミングを指す。 ● FID(First Input Delay) 最初の入力までの遅延を表す。応答性を測定して、ユーザーが最初にページを操作しようとする場合に感 じるエクスペリエンスを定量化する。 ● CLS(Cumulative Layout Shift) ページがどのくらい安定しているように感じられるかを表する。視覚的な安定性を測定し、表示されるページ コンテンツにおける予期しないレイアウトのずれの量を定量化する。 ※参考 ユーザー体験を表す重要な指標として一旦この 3つを定義するよということ。 主要コンテンツが早く表示され (LCP)、すぐにページを操作でき( FID)、予期せぬカクツキとかない( CLS)ページが至高だよね ということ。
Slide 4
Slide 4 text
本日の話:タウンワークにおけるWebパフォーマンス改善 背景 GoogleがCore Web Vitalsを2021/5からランキングシステムに組み込むと 発表。(最新発表では 6月中旬から段階的に取り入れる) 改善期間 2021 3月~4月(計測含む) 改善対象 タウンワーク:アルバイト・社員求人サイト 改善スコープ 上記期間で改善リリースまで行える ROIの高いと見込んだ施策 クライアント カスタマー アルバイト探し 働き手探し
Slide 5
Slide 5 text
本日の話:タウンワークにおけるWebパフォーマンス改善 改善対象画面 タウンワークにおける主要な画面をピック 地方選択 エリアトップ 求人一覧 求人詳細 求人タイトル 求人詳細情報
Slide 6
Slide 6 text
まずは現状のパフォーマンス計測してみた
Slide 7
Slide 7 text
計測データ種類 ● ラボデータ - 一連の固定されたネットワーク条件で 1 台の端末でページ読み込みをシミュレートしたデータ - パフォーマンスの問題のデバッグに役立つ - Lighthouseはモバイル ネットワーク上のミッドレンジ端末(Moto G4)でページ読み込みをシミュレートした 結果を表示している ● フィールドデータ - 実際のさまざまな端末やネットワークの条件におけるユーザーから匿名で送られたパフォーマンス データ - 過去28日間の収集期間をもとに算出 - ランキング要因となるのはこちら
Slide 8
Slide 8 text
計測(フィールドデータ) 地方選択 エリアトップ 求人一覧 求人詳細
Slide 9
Slide 9 text
計測(フィールドデータ) 地方選択 エリアトップ 求人一覧 求人詳細 ぱっと見の課題仮説(全画面横断で) FID, CLSに関してはそこまで問題なさそう。 FCP, LCPが改善余地ありそう。 →ネットワークI/Oによるオーバーヘッドがかかっていないか見てみる
Slide 10
Slide 10 text
ネットワークI/Oといえば ● Web Font ● 3rd Party Resources ● Unused JS/CSS ● Image ● その他(サーバレスポンス、キャッシュ制御等)
Slide 11
Slide 11 text
ネットワークI/Oといえば ● Web Font →タウンワークでは未使用 ● 3rd Party Resources ● Unused JS/CSS ● Image ● その他(サーバレスポンス、キャッシュ制御等)
Slide 12
Slide 12 text
3rd Party Resources(Request Mapを使用) リクルート別サービスの状態と比べて必要最低限な状態 リクルートの別サービス
Slide 13
Slide 13 text
ネットワークI/Oといえば ● Web Font →タウンワークでは未使用 ● 3rd Party Resources →必要最低限の使用のため改善対象から除外 ● Unused JS/CSS ● Image ● その他(サーバレスポンス、キャッシュ制御等)
Slide 14
Slide 14 text
ネットワークI/Oといえば ● Web Font →タウンワークでは未使用 ● 3rd Party Resources →必要最低限の使用のため改善対象から除外 ● Unused JS/CSS ● Image ● その他(サーバレスポンス、キャッシュ制御等) Unused JS/CSS, Image, その他はChrome DevToolsを使用して計測
Slide 15
Slide 15 text
Unused JS/CSS 全画面共通で呼ばれている CSS(JSも)が存在し、 Unusedな割合が高い。
Slide 16
Slide 16 text
日々のフロントエンド開発改善(ボーイスカウトルール的に実施) 共通JS(CSSも同様) 画面ごとにwebpackでbundleされた1つのjs 日々の開発改善にて Unusedなものを減らす努力は行っている
Slide 17
Slide 17 text
ネットワークI/Oといえば ● Web Font →タウンワークでは未使用 ● 3rd Party Resources →必要最低限の使用のため改善対象から除外 ● Unused JS/CSS → 日々改善活動を行なっているかつ、今回 1ヶ月弱での改修が必要な中、全画面影響があることを鑑み施 策対象から除外。 ● Image ● その他(サーバレスポンス、キャッシュ制御等)
Slide 18
Slide 18 text
計測(Chrome DevToolsにてシミュレート) ハイスペックな開発端末の場合、性能が良くてボトルネック が見えづらい可能性があるので、NetworkをFast3Gに、 CPUを4倍低速で計測
Slide 19
Slide 19 text
Image(一覧画面においても) 自分の開発端末だと性能が良くてボトルネックが見えづら い可能性があるので、NetworkをFast3Gに、CPUを4倍低 速で計測 First Viewに関係ない画像を最初から呼びにいっている → `loading=lazy`を付与し遅延読み込みさせることで初期 表示の改善の見込み
Slide 20
Slide 20 text
あとは単純に画像サイズを小さくしたら読み込み速度改善するはずだが、そもそも現状画像サイズの最適化を行 うプロセスが開発フローに存在していなかった。 フロントエンドエンジニアが画像サイズ小さくして実装することも。 Image 案件起案 デザイン作 成 フロントエンド実 装 デザインレ ビュー
Slide 21
Slide 21 text
あとは単純に画像サイズを小さくしたら読み込み速度改善するはずだが、そもそも現状画像サイズの最適化を行 うプロセスが開発フローに存在していなかった。 フロントエンドエンジニアが画像サイズ小さくして実装することも。 Image 案件起案 デザイン作 成 フロントエンド実 装 デザインレ ビュー ということもあり、再度各画像のサイズ最適化できそう(漏れがありそう) だったので施策リストに追加
Slide 22
Slide 22 text
ネットワークI/Oといえば ● Web Font →タウンワークでは未使用 ● 3rd Party Resources →必要最低限の使用のため改善対象から除外 ● Unused JS/CSS → 日々改善活動を行なっているかつ、今回 1ヶ月弱での改修が必要な中、全画面影響があることを鑑み施 策対象から除外。 ● Image → 以下の施策を改善対象に追加 1. 遅延読み込み 2. サイズ最適化 ● その他(サーバレスポンス、キャッシュ制御等)
Slide 23
Slide 23 text
キャッシュバスティング用のクエリ( v=の部分)をつけているものに対して max-age=0となっており、同じバージョン のものでも毎回サーバリクエストが発生してしまっている その他(サーバレスポンス、キャッシュ制御等)
Slide 24
Slide 24 text
現状はapacheのmod_deflateモジュールによるgzip圧縮を行っているが、 brotli圧縮にすることで転送量の削減 が見込まれる。 その他(サーバレスポンス、キャッシュ制御等) ex) トップページ index.html index.html 313.8KB index.html.gz 40.0KB index.html.br 27.9KB
Slide 25
Slide 25 text
後続処理をブロックしている css読み込み(全画面で呼ばれている)を発見 その他(サーバレスポンス、キャッシュ制御等) mp-include-sp.css内に mp-include-sp.css mp-include-sp-shain.css
Slide 26
Slide 26 text
ネットワークI/Oといえば ● Web Font →タウンワークでは未使用 ● 3rd Party Resources →必要最低限の使用のため改善対象から除外 ● Unused JS/CSS → 日々改善活動を行なっているかつ、今回 1ヶ月弱での改修が必要な中、全画面影響があることを鑑み施 策対象から除外。 ● Image → 以下の施策を改善対象に追加 1. 遅延読み込み 2. サイズ最適化 ● その他(サーバレスポンス、キャッシュ制御等) →以下の施策を改善対象に追加 1. キャッシュ制御 2. Brotli圧縮 3. css @import削除
Slide 27
Slide 27 text
ネットワークI/Oといえば ● Web Font →タウンワークでは未使用 ● 3rd Party Resources →必要最低限の使用のため改善対象から除外 ● Unused JS/CSS → 日々改善活動を行なっているかつ、今回 1ヶ月弱での改修が必要な中、全画面影響があることを鑑み施 策対象から除外。 ● Image → 以下の施策を改善対象に追加 1. 遅延読み込み 2. サイズ最適化 ● その他(サーバレスポンス、キャッシュ制御等) →以下の施策を改善対象に追加 1. キャッシュ制御 2. Brotli圧縮 3. css @import削除 今回の施策対象としては2ヶ月弱で実施できる施策ということで以下の対応を行なった (各対象画面にて)
Slide 28
Slide 28 text
施策の実施
Slide 29
Slide 29 text
対象ファイル洗い出し(例:求人一覧画面) Image:遅延読み込み
Slide 30
Slide 30 text
初期読み込みからFirst Viewに関係ない画像が消えていることを確認(例:求人一覧画面) Image:遅延読み込み ここらへん
Slide 31
Slide 31 text
画像サイズを最適化した結果: 20~40%ほど画像サイズ削減 Image:サイズ最適化 before after
Slide 32
Slide 32 text
キャッシュバスティング用のクエリ( v=の部分)がついている資材に対して max-age=0 → max-age=1年に変更 apache conf修正 キャッシュ制御
Slide 33
Slide 33 text
JS/CSSにおいてキャッシュ制御されることで読み込み速度改善 キャッシュ制御
Slide 34
Slide 34 text
標準モジュールとして使用できるわけではなく、 apacheの再コンパイルが必要であり、サービス影響が大きくス コープから除外 Brotli圧縮
Slide 35
Slide 35 text
importしていたスタイルを親 cssのmp-include-sp.cssにマージ css @import削除 mp-include-sp.css mp-include-sp-shain.css ここのブロックがなくなる
Slide 36
Slide 36 text
施策実施後の計測
Slide 37
Slide 37 text
施策実施後の計測データ ● フィールドデータ ● Navigation Timing APIを使用したページロード時間実測値
Slide 38
Slide 38 text
計測(フィールドデータ) 地方選択 求人一覧
Slide 39
Slide 39 text
計測(フィールドデータ) エリアトップ 求人詳細
Slide 40
Slide 40 text
計測(Navigation Timing APIによる実測値) https://developer.mozilla.org/ja/docs/Web/API/Navigation_timing_API ほぼすべてのブラウザにて使用可能
Slide 41
Slide 41 text
計測(Navigation Timing APIによる実測値) 雑実装でAdobe Analyticsのページ描画のタイミングで一緒に送っているので、全てのロードが終わる前に送るよ うにはなっているものの、読み込み前半のページロード速度は見ることができる。 取得データをBig Queryにて確認。
Slide 42
Slide 42 text
計測(Navigation Timing APIによる実測値) 20210407 キャッシュ制御 施策 詳細画面 Image 施策 20210414 一覧画面 Image 施策 エリアトップ画面 Image 施策 cssの@import削除 右記のグラフを見ると施策効果がわかる 各画面0.2sほど 縦軸は実測のページロード時間の中央値 ※正確にはBig Queryにて PERCENTILE_CONT(x, 0.5) OVER() AS median として算出
Slide 43
Slide 43 text
計測(Navigation Timing APIによる実測値) 全ユーザーの実測値のグラフ(縦軸 UU, 横軸ページロード時間)を見ても山が左に動いていることがわかる 求人一覧 求人詳細 4/5 4/16
Slide 44
Slide 44 text
サマリ(改善結果) - 対象画面の3/4はFCP, LCPにて20~30%ほど速度改善できた - 詳細画面においても FCP, LCPともにグリーンの割合を増やすことができた - 基本的に早いロードの人をより早くというより、遅かった人を早くした - Navigation Timing APIの実測値を見ても今回の施策が正しくページロード速度の向上に寄与していること が確認できた
Slide 45
Slide 45 text
サマリ(改善により見えてきたもの & 今後の展望) - これまでタウンワークではさまざまな改善活動が行われてきたのもあって、大きな粒度の改善をやらなけれ ばいけないみたいなことがなかったため、焦らずに小さい粒度で改善活動を行なうことができた。未来に繋 げるために日々のパフォーマンス改善していく文化づくりの重要性 を感じた。 - akamai CDN導入 - 一覧画面の画像はhttp2対応 - 2年前のフロントエンド改善 - webpack等導入 - サーバ側でのレコメンドロジック削除 - etc https://codezine.jp/article/detail/11445 https://codezine.jp/article/detail/11570
Slide 46
Slide 46 text
サマリ(改善により見えてきたもの & 今後の展望) - 画像サイズの最適化をプロセスのどこでやるか曖昧だったものを明確にすることができた。また、エンジニ ア・SEOチームだけでなく、デザイナーや企画側にもパフォーマンス改善の重要性を認知してもらうことがで きつつあるので継続して改善活動を推進していきたい。 - 事業KPIにパフォーマンスがどう影響しているかというところも計測していく。 (現状他ABテストが常時走っており計測できていなかった Core Web Vitalsによるビジネスインパクトの他会社の事例 https://developers-jp.googleblog.com/2021/05/core-web-vitals.html