コアウェブバイタルを
低下させる要因と改善方法

不要なcss・jsファイルを削除する

下記のように、使っていないcssやjsが読み込まれていませんか？

• ページ内容を変更し、以前は必要だったcssやjsファイルが未だに読み込まれている
• 以前、計測していた広告のコンバージョンタグが残っている

読み込むファイルの数とファイルサイズを削減する

cssやjsファイルの読み込む数が多くなると、表示速度の低下につながります。できるだけファイルは統合・圧縮し、読み込むファイルの数とファイルサイズを削減します。

使っていないWordPressのプラグインを無効化する

WordPressのプラグインは動作に必要なcssやjsファイルを読み込むことがあります。使っていないプラグインを削除または無効化することでパフォーマンスの改善が期待できます。

jsファイルを非同期で読み込む

jsファイルはasync、またはdeferを付与し、読み込ませ、HTML・CSSの読み込みを優先させます。

<script src=“xxx.js” async></script>

<script src=“xxx.js” defer></script>

ブラウザに対してどのファイルを最優先で読み込むべきかを明示することがポイントです。ファーストビューでファイルサイズの大きい画像を使用しているような場合には、以下の方法でファイルの読み込み優先度を最適化します。

imgタグにはfetchpriority属性を指定する

imgタグでHTML内に直接記述されている場合はfetchpriority="high"を付与します。これによりブラウザは他のリソースよりも優先的にその画像をダウンロードします。

<img src="img_fv.jpg" fetchpriority="high">

背景画像などにはpreloadを指定する

CSSやJavaScriptで読み込まれる画像はブラウザが画像を発見するタイミングが後回しになり、表示の遅延を招く原因となります。その場合はhead内にてpreloadを指定し、事前読み込みさせます。さらにfetchpriority属性を組み合わせることで、優先的に読み込ませることが可能です。

<link rel="preload" href="img_fv.jpg" as="image" fetchpriority="high">

preconnect（プリコネクト）を使い、外部サービスへ事前接続する

head内に外部サービスへの事前接続を指定します。
最近ではGoogleフォントを使用する際の埋め込みコードでもpreconnectが指定されています。

<link rel="preconnect" href="//www.googletagmanager.com">

画像にwidthとheightを指定する

今はほとんどのWebサイトがレスポンシブ前提ということもあり、htmlファイルでの画像のサイズ指定を忘れていませんか？小さいことのようですが、意外とCLSへの影響は大きいです。

<img src="xxx.jpg" width="100" height="100">

読み込み前と後とでレイアウトが大きく変わらないようCSSを調整

スライダーのプラグインであるslickがCLSを低下させる要因になっている場合があります。下記のようにCSSを追記し、読み込み前と後とでレイアウトが大きく変わらないようにします。

/*一つ目のslider__itemだけを表示*/
.slider > .slider__item:not(:first-child) {
display: none;
}

※slickの読み込み後、.slider__itemの上に親要素が追加される仕様により、上記のcssが無効となり、非表示のスライドが表示される仕組みです。

スライダーだけではなく、jsでレイアウトを制御しているような場合はjsの読み込み前と後とでのレイアウトの差にも注意する必要がありそうですね。