Upgrade to Pro — share decks privately, control downloads, hide ads and more …

タウンワークにおけるCore Web Vitals改善施策とそれにより見えてきたもの

Recruit
June 29, 2021

タウンワークにおけるCore Web Vitals改善施策とそれにより見えてきたもの

20210629_Node学園 36時限目 での前田の講演資料になります

Recruit

June 29, 2021
Tweet

More Decks by Recruit

Other Decks in Technology

Transcript

  1. Core Web Vitalsおさらい • LCP(Largest Contentful Paint) ユーザーがページで最も有意義なコンテンツをどのくらい早く見ることができるかを表す。感覚的な読み込 みスピードを測定し、ページ読み込みタイムラインにおいてページの主要コンテンツが読み込まれたと思わ れるタイミングを指す。

    • FID(First Input Delay) 最初の入力までの遅延を表す。応答性を測定して、ユーザーが最初にページを操作しようとする場合に感 じるエクスペリエンスを定量化する。 • CLS(Cumulative Layout Shift) ページがどのくらい安定しているように感じられるかを表する。視覚的な安定性を測定し、表示されるページ コンテンツにおける予期しないレイアウトのずれの量を定量化する。 ※参考 ユーザー体験を表す重要な指標として一旦この 3つを定義するよということ。 主要コンテンツが早く表示され (LCP)、すぐにページを操作でき( FID)、予期せぬカクツキとかない( CLS)ページが至高だよね ということ。
  2. 本日の話:タウンワークにおけるWebパフォーマンス改善 背景 GoogleがCore Web Vitalsを2021/5からランキングシステムに組み込むと 発表。(最新発表では 6月中旬から段階的に取り入れる) 改善期間 2021 3月~4月(計測含む)

    改善対象 タウンワーク:アルバイト・社員求人サイト 改善スコープ 上記期間で改善リリースまで行える ROIの高いと見込んだ施策 クライアント カスタマー アルバイト探し 働き手探し
  3. 計測データ種類 • ラボデータ - 一連の固定されたネットワーク条件で 1 台の端末でページ読み込みをシミュレートしたデータ - パフォーマンスの問題のデバッグに役立つ -

    Lighthouseはモバイル ネットワーク上のミッドレンジ端末(Moto G4)でページ読み込みをシミュレートした 結果を表示している • フィールドデータ - 実際のさまざまな端末やネットワークの条件におけるユーザーから匿名で送られたパフォーマンス データ - 過去28日間の収集期間をもとに算出 - ランキング要因となるのはこちら
  4. ネットワークI/Oといえば • Web Font • 3rd Party Resources • Unused

    JS/CSS • Image • その他(サーバレスポンス、キャッシュ制御等)
  5. ネットワークI/Oといえば • Web Font →タウンワークでは未使用 • 3rd Party Resources •

    Unused JS/CSS • Image • その他(サーバレスポンス、キャッシュ制御等)
  6. ネットワークI/Oといえば • Web Font →タウンワークでは未使用 • 3rd Party Resources →必要最低限の使用のため改善対象から除外

    • Unused JS/CSS • Image • その他(サーバレスポンス、キャッシュ制御等) Unused JS/CSS, Image, その他はChrome DevToolsを使用して計測
  7. ネットワークI/Oといえば • Web Font →タウンワークでは未使用 • 3rd Party Resources →必要最低限の使用のため改善対象から除外

    • Unused JS/CSS → 日々改善活動を行なっているかつ、今回 1ヶ月弱での改修が必要な中、全画面影響があることを鑑み施 策対象から除外。 • Image • その他(サーバレスポンス、キャッシュ制御等)
  8. ネットワークI/Oといえば • Web Font →タウンワークでは未使用 • 3rd Party Resources →必要最低限の使用のため改善対象から除外

    • Unused JS/CSS → 日々改善活動を行なっているかつ、今回 1ヶ月弱での改修が必要な中、全画面影響があることを鑑み施 策対象から除外。 • Image → 以下の施策を改善対象に追加 1. 遅延読み込み 2. サイズ最適化 • その他(サーバレスポンス、キャッシュ制御等)
  9. ネットワークI/Oといえば • Web Font →タウンワークでは未使用 • 3rd Party Resources →必要最低限の使用のため改善対象から除外

    • Unused JS/CSS → 日々改善活動を行なっているかつ、今回 1ヶ月弱での改修が必要な中、全画面影響があることを鑑み施 策対象から除外。 • Image → 以下の施策を改善対象に追加 1. 遅延読み込み 2. サイズ最適化 • その他(サーバレスポンス、キャッシュ制御等) →以下の施策を改善対象に追加 1. キャッシュ制御 2. Brotli圧縮 3. css @import削除
  10. ネットワークI/Oといえば • Web Font →タウンワークでは未使用 • 3rd Party Resources →必要最低限の使用のため改善対象から除外

    • Unused JS/CSS → 日々改善活動を行なっているかつ、今回 1ヶ月弱での改修が必要な中、全画面影響があることを鑑み施 策対象から除外。 • Image → 以下の施策を改善対象に追加 1. 遅延読み込み 2. サイズ最適化 • その他(サーバレスポンス、キャッシュ制御等) →以下の施策を改善対象に追加 1. キャッシュ制御 2. Brotli圧縮 3. css @import削除 今回の施策対象としては2ヶ月弱で実施できる施策ということで以下の対応を行なった (各対象画面にて)
  11. 計測(Navigation Timing APIによる実測値) 20210407 キャッシュ制御 施策 詳細画面 Image 施策 20210414

    一覧画面 Image 施策 エリアトップ画面 Image 施策 cssの@import削除 右記のグラフを見ると施策効果がわかる 各画面0.2sほど 縦軸は実測のページロード時間の中央値 ※正確にはBig Queryにて PERCENTILE_CONT(x, 0.5) OVER() AS median として算出