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 のスコアをあまり気にし過ぎない方がいいと思います。

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

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

対馬俊彦魚沼情報サービス代表

新潟県南魚沼市・魚沼市を中心に、地域の皆様がパソコンやインターネットを有効活用して業務効率化・課題解決を図るお手伝いを1999年から行ってまいりました。

WordPress を使用したサイト制作・カスタマイズを全国どこからでも承ります。ベクトルが販売している WordPress テーマ「Lightning」「Katawara」および同社のプラグイン「VK Blocks」「VK Filter Search」のカスタマイズを得意としています。遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。

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

このサイトで行っているカスタマイズのやり方の多くもマンツーマンのオンラインレッスン形式などでわかりやすく説明させていただくことができますので、興味がある方はご連絡ください。

* ドメインやサーバーの契約・申込み
* WordPress やテーマ、プラグインのインストール
* アクションフック・フィルターフック・jQuery・CSS によるカスタマイズ
* ドメインの移管・移転
* 日常の更新作業
なども含めて、サイトの制作・運用全般をお手伝いできます。

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

» ご相談・お問い合わせはこちらからどうぞ