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 によるカスタマイズ
* ドメインの移管・移転
* 日常の更新作業
なども含めて、サイトの制作・運用全般をお手伝いできます。
また、制作業者様のサイト制作のお手伝いも数多く行っております。いま人手が足りない、ちょっとここだけコーディングを頼みたい、等々… お仕事の依頼をお待ちしています。
ご要望をうかがった上で費用見積り(無料)を提示させていただきますので、お気軽にお問い合わせください。
» ご相談・お問い合わせはこちらからどうぞ
最新の投稿
Lightning Pro2022.05.07パンくずリストの先頭のアイコン・表記を変更するには
Lightning Pro2022.02.26グローバルナビメニューのお問い合わせを目立たせるカスタマイズ例
Lightning Pro2021.07.22CLS を改善するやり方
Fort2021.07.06ヘッダー右側に複数のボタンを配置して、スマホにもPCのスクロール時にも表示させるカスタマイズ
WordPress / Lightning オンラインサポートのご案内
サイトをご覧いただき、ありがとうございます。このサイトを運営している、魚沼情報サービスの対馬です。
WordPress を使用したサイト制作・カスタマイズ・サポートを全国どこからでも承っています。ベクトルが開発している WordPress テーマ「Lightning」「Katawara」および同社のプラグイン (VK Blocks Pro ・ VK Filter Search Pro) を使ったサイト制作・カスタマイズを最も得意としています。遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。
オンラインレッスン形式でのホームページ制作サポートも行っています。お客様ご自身でホームページを開設・運用する上で、うまくいかない部分をサポートいたします。設定やカスタマイズを手伝ってもらいたい、同時に便利な使い方や設定方法、カスタマイズのやり方も知ることができたら...という方にご好評いただいています。
* ドメインやサーバーの契約・申込み
* WordPress やテーマ、プラグインのインストール
* アクションフック・フィルターフック・jQuery・CSS によるカスタマイズ
* ドメインの移管・移転
* 日常の更新作業
なども含めて、サイトの制作・運用全般をお手伝いできます。
* 近くに頼りになるところがない
* わからないところを教えてほしい
* 専門家にサイト制作を手伝ってもらいたい
という方はぜひお気軽にご相談ください。
ご要望をうかがった上で費用見積り(無料)を提示させていただきます。
WordPress を使用したサイト制作・カスタマイズ・サポートを全国どこからでも承っています。ベクトルが開発している WordPress テーマ「Lightning」「Katawara」および同社のプラグイン (VK Blocks Pro ・ VK Filter Search Pro) を使ったサイト制作・カスタマイズを最も得意としています。遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。
オンラインレッスン形式でのホームページ制作サポートも行っています。お客様ご自身でホームページを開設・運用する上で、うまくいかない部分をサポートいたします。設定やカスタマイズを手伝ってもらいたい、同時に便利な使い方や設定方法、カスタマイズのやり方も知ることができたら...という方にご好評いただいています。
* ドメインやサーバーの契約・申込み
* WordPress やテーマ、プラグインのインストール
* アクションフック・フィルターフック・jQuery・CSS によるカスタマイズ
* ドメインの移管・移転
* 日常の更新作業
なども含めて、サイトの制作・運用全般をお手伝いできます。
* 近くに頼りになるところがない
* わからないところを教えてほしい
* 専門家にサイト制作を手伝ってもらいたい
という方はぜひお気軽にご相談ください。
ご要望をうかがった上で費用見積り(無料)を提示させていただきます。