img 要素に width/height の指定をした場合としない場合で、PageSpeed Insights で Cumulative Layout Shift (CLS) のスコアがどのくらい変わるのかを実際に測って検証してみました。

検証に使用した記事は以下の2つです。

後者の記事の [カスタム CSS] には CSS を入力して以下の4つの画像の width/height を指定してあります。

ヘッダーロゴ画像
ページヘッダーの投稿者名の前のプロフィールアイコン
投稿者プロフィールのアバター
フッターロゴ画像

入力した CSS は以下の通りです。

.site-header-logo img,
.veu_profile .media_outer img {
width: 205px;
height: 45px;
max-height: 45px;
}
.entry-meta-item-author-image img {
width: 1.4em;
height: 1.4em;
}
#padSection .avatar img {
width: 80px;
height: 80px;
}

@media (min-width: 601px) {
#padSection .avatar img {
width: 100px;
height: 100px;
}
}

CLS の測定結果ですが、以下のようにはっきりとした違いが出ました。

	CSS なし	CSS あり
1回目	0.21	0.01
2回目	0.077	0.01
3回目	0.082	0.013
4回目	0.21	0.01
5回目	0.082	0.01
平均	0.1322	0.0106

めんどくさいですが、width/height の指定はやっておいた方がよさそうですね。

追記

この記事を投稿した後、子テーマの style.css に上記の CSS を追加したので、CLS のテスト記事 (1)・(2) のスコアは変わらなくなっている。

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

対馬俊彦魚沼情報サービス (新潟県南魚沼市)

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

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

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

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

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

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

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

WordPress / Lightning オンラインサポートのご案内

サイトをご覧いただき、ありがとうございます。このサイトを運営している、魚沼情報サービスの対馬です。

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

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

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

* 近くに頼りになるところがない
* わからないところを教えてほしい
* 専門家にサイト制作を手伝ってもらいたい
という方はぜひお気軽にご相談ください。

ご要望をうかがった上で費用見積り（無料）を提示させていただきます。

ご相談・お問い合わせはお気軽にどうぞ