Core Web Vitalsのスコア改善！社内での対応をまとめました
こんにちは。新卒３年目エンジニアのたかじです。
2020年5月にGoogleから検索ランキングの指標として、「Core Web Vitals」を組み込むという発表がありました。
GMOメディアでは全社的にCore Web Vitalsの対応に取り組み、様々なサービスでCore Web Vitalsのスコア改善を行っています。
今回は、その中でもポイントCRM「GMOリピータス」での対応をまとめました。
Core Web Vitalsとは
GoogleがWebサイトの健全性を示すものとして重視する指標のことです。
FID、LCP、CLSの3つの要素がこれにあたります。
参考：https://web.dev/i18n/ja/vitals/
https://web.dev/vitals-business-impact/
FID、LCP、CLSとは
FID（First Input Delay：インタラクティブ性）
Webページ内で、ユーザが入力（ボタンのタップなど）ができるようになるまでの時間のこと
理想値：100ms未満
参考：https://web.dev/fid/
https://web.dev/optimize-fid/
LCP（Largest Contentful Paint：ページ読み込み時間）
最も大きいサイズのコンテンツが読み込まれるまでの時間のこと
理想値：2.5秒未満
参考：https://web.dev/lcp/
https://web.dev/optimize-lcp/
CLS（Cumulative Layout Shift：読み込み時のページの安定性）
広告などの出現により、予期せぬページ内のずれを定量化したもの
理想値：0.1 未満
参考：https://web.dev/cls/
https://web.dev/optimize-cls/
GMOリピータスでは主にCLSが理想値を下回っていなかったこと、Page Speed Insights（サイトの読み込み速度を計測して評価するツール）のスコアが1桁だったことから、主にCLSとPage Speed Insightsのスコア改善を行いました。
改善結果
サービストップページ＋主要なページ（Google経由でのトラフィック上位ページ）を対象として計測を行いました。
| ページ | 2021/07/20 | 2021/09/30 | 最高スコア |
|---|---|---|---|
| トップ | 22.2 | 40.4（+18.2） | 47 |
| ゲームで貯める | 27.8 | 50.0（+22.2） | 57 |
| ガチャ | 30.4 | 49.2（+18.8） | 62 |
| アフィリエイト詳細 | 25.4 | 53.8（+18.4） | 59 |
| 貯める | 27.0 | 52.6（+15.6） | 64 |
※数値計測期間：2021/07/20 〜 2021/09/30
1日5回（10時台、12時台、14時台、16時台、18時台）各ページのスコアをAPIで自動取得し、Slackの特定のチャンネルに通知していました。
スコアにブレがあるため、5回の平均をその日のスコアとしています。
改善するために行ったこと
Page Speed Insightsで「改善できる項目」として指摘されているものを一つずつ対応していきました。
特に効果が大きかったものは、以下の3つになります。
- 画像のリサイズと圧縮
- 画像のwidthとheightの指定
- GoogleAdSenseのタグの遅延読み込み
※以下の影響度の評価は、GMOリピータスでの今回の結果に対する主観的なものです。
画像のリサイズと圧縮
影響度：高
必要以上に大きな画像を使用している場合は、適切な大きさにリサイズ。
容量もできる限り圧縮し直しました。
https://squoosh.app/ という圧縮ツールを使用すると、圧縮による劣化をリアルタイムに目で確認できるので、最低限の見た目を保ちつつ限界まで圧縮することができます。
特にバナーやLPで使用するクリエイティブなどの大きな画像は、こちらを使うことで大幅に容量を抑えることができました。
ルール作成・周知
GMOリピータスでは管理画面でアップロードした画像を利用するため、クリエイティブを作成するデザイナーと、管理画面から画像をアップロードするディレクターに向けて、ルールを作成・周知しました。
画像作成・使用時（デザイナー向けのルール）
- すべての画像は圧縮してから使用する
- ディレクターに共有する場合も事前に必ず圧縮する
- 画像のファイル名の後ろに表示する枠の名前を付ける
- 管理画面でバナーを設定する人が、表示箇所に適した規格のものを設定できるようにする
管理画面での画像設定時（ディレクター向けのルール）
- 各バナー枠ごとに適切な大きさのクリエイティブを設定する
- ない場合はデザイナーに相談
- デザイナーが作成したクリエイティブ以外を設定する場合は、圧縮してから設定する
今後は、バナーアップロード時に容量に対するバリデーションを入れるなどの対応を検討します。
ただ、容量の制限を設けるとしてもできる限り圧縮した状態でのアップロードが好ましいので、まずはルールを定着させることを優先的に行っていきます。
画像のwidthとheightの指定
影響度：高（CLS）
読み込みが遅い画像があると、以降のコンテンツが大幅にズレてスコアが下がるためタグにwidth属性とheight属性を指定していきました。
この値は、CSSによって上書きされるためwidth: 100%やheight: auto;を指定することでレスポンシブ対応も可能です。
例)
<img src="./images/sample.png" alt="サンプル" width="300" height="100">
img {
width: 100%;
height: auto;
}
GoogleAdSenseのタグの遅延読み込み
影響度：高+
Page Speed Insightsでの指摘事項「使用していないJavaScriptの削減」で指摘されているファイルの中でも、広告表示用で削除できないものを遅延読み込みする対応を行いました。
スクロールをしたら広告表示用のスクリプトを読み込むようにすることで、ページ表示時に不要なスクリプトを削減することができました。
参考：https://nesla.info/pagespeed-insight-adsense-tag
まとめ
今回は、主に効果があった改善点をまとめましたがPage Speed Insightsでの指摘事項の中でも、効果があるものとないものがあり手探りで対応を行いました。
サイトによってはGMOリピータスで効果があった対応でも、あまり効果がないかもしれません。
Core Web Vitalsのスコアは一時的によくなったとしても、その後のサイト改修やGMOリピータスのように管理画面から画像をアップロードする画像が圧縮されていなかったりなどで、スコアが下がる可能性があります。
そのため、今後も継続的にスコアを確認して対応したり、ルール作りを行い定着させて行くことで長期的に最適なスコアを維持できるように努めていきます。
まだ対応できていない自社サービスもあるため、今回の知見を活かしてスコア改善に取り組んで行きます。
この記事が、これからCore Web Vitalsのスコア改善を行おうと思っている方の助けになれば嬉しいです。