CLS を改善するやり方

ヘッダーロゴ画像の width / height を CSS で指定する

以下の CSS を追加して、ヘッダーロゴ画像のサイズを指定することにより CLS (Cumulative Layout Shift) スコアが改善します。

/* モバイル */
.siteHeader_logo img {
width: 153px;
height: 40px;
}

/* パソコン */
@media (min-width: 992px) {
.siteHeader_logo img {
width: 192px;
height: 50px;
}
}

※画像のサイズ指定はそれぞれのサイトに合わせてください。

PageSpeed Insights で5回測定した CLS スコアの平均値を比較した結果が以下の通りです。

CSS を追加する前

	モバイル	パソコン
1回目	0.061	0.028
2回目	0.061	0.035
3回目	0.061	0.029
4回目	0.13	0.051
5回目	0.061	0.043
平均	0.0748	0.0372

CSS を追加した後

	モバイル	パソコン
1回目	0.017	0
2回目	0.001	0.01
3回目	0.001	0
4回目	0.001	0
5回目	0.001	0
平均	0.0042	0.002

数行の CSS を追加してこれだけスコアが改善しますので、CLS スコアを気にする方はやっておいた方がいいですね。
ただし、ヘッダーロゴ画像を置き換えるときにはこの CSS も書き換えることを忘れないように注意が必要です。

最後に…

こういう記事を書いた私が言うのもアレですが、PageSpeed Insights のスコアをあまり気にし過ぎない方がいいと思います。

仕事柄、「スコアをよくしたい」というお問い合わせがあるので、わかりませんと言えない私はあれこれ試していますけど。

サイト運営者プロフィール

対馬俊彦魚沼情報サービス・ベクトル公式テクニカルパートナー

【日本全国対応】WordPress のサイト制作、設定、カスタマイズ、トラブルでお悩み、お困りの方、ベクトル公式テクニカルパートナーがお手伝いいたします。

Lightning / VK Blocks / VK Filter Search のサポート、カスタマイズを得意としています。

遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。

オンラインレッスン形式でのホームページ制作サポートも行っています。お客様ご自身でホームページを制作・運用する上でうまくいかない部分をサポートいたします。設定やカスタマイズを手伝ってもらいたい、同時に便利な使い方や設定方法、カスタマイズのやり方も知ることができたら...という方にご好評いただいています。

デザイナー様、制作業者様のサイト制作のお手伝いも数多く行っています。難しい部分のコーディング ( PHP / CSS / jQuery ) をやってほしい、いま人手が足りない等、お仕事の依頼をお待ちしています。

ご要望をうかがった上で費用見積り（無料）を提示させていただきますので、お気軽にお問い合わせください。

≫メールでのお問い合わせはこちら