Lightning Pro の 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.0610.028
2回目0.0610.035
3回目0.0610.029
4回目0.130.051
5回目0.0610.043
平均0.07480.0372

CSS を追加した後

モバイルパソコン
1回目0.0170
2回目0.0010.01
3回目0.0010
4回目0.0010
5回目0.0010
平均0.00420.002
CLS スコア比較

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

最後に…

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

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

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

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

WordPress を使用したサイト制作・カスタマイズは全国どこからでも承ります。ベクトルが販売している WordPress テーマ「Lightning」「Katawara」のカスタマイズには特に自信があります。遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。

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

* ドメインやサーバーの契約・申込み
* WordPress やテーマ、プラグインのインストール
* ドメインの移管・移転
* 日常の更新作業
なども含めて、サイトの制作・運用全般をお手伝いできます。

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

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