PageSpeed Insights（PSI）で「画像要素で width と height が明示的に指定されていない」の指摘を受けることがあります。
画像要素のwidth（幅）とheight（高さ）指定はCLS対策として、とても大事です。
CLSは、ざっくり「ページの表示が途中でずれる・動く現象」のことです
CLS＝Cumulative Layout Shift（累積レイアウトシフト）
CLSを無くすことはサイト制作における重要課題。
本記事では本件指摘に対する対策について説明します。
WordPressで本件指摘が発生する一般的なケース
現行のWordPressでは、メディアライブラリから画像を指定すると基本的にwidthとheightが指定されます。
つまり本件指摘が発生するのはそれ以外のケース。
例えば、
- カスタムHTML
- 独自ウィジェット
- テーマ独自出力
- 手書きのimgタグ
などが挙げられます。
本記事では、題材としてCocoonの、特に「ボックスメニューウィジェット」を採り上げます。
（2021年当時はwidthとheightが指定されていませんでした）
独自ウィジェットのケースです。
ただし、どのテーマでも起こる問題であることは踏まえてお読みください。
例えばメディアライブラリ経由でなく、WinSCPなどでサーバーに直接avif画像をアップロードした場合。
呼び出すためには手書きでimgタグを書くわけですが、widthとheightを指定しないとやっぱり怒られます。
対処法 imgタグにwidthとheightを指定する
対処法の考え方は非常にシンプル。
「指定されてない」と怒られたのだから指定してあげればいいだけです。
<img width="（画像サイズ）" height="（画像サイズ）" （略）>
ここで疑問に思うかもしれません。
「画像サイズ」には何の数字を入れればいいの？ 画像の実サイズ？ 表示サイズ？
以前は画像の実サイズ＝表示サイズにするのがセオリーだったので、この疑問は生じませんでした。
今ではRetina対応のため、実サイズを2倍程度で読み込んでいるケースも多いと思います。
実はこの点、私も最近まで曖昧にしていました。
正解はこちらです。
- imgタグに指定するのは実サイズ
- CSSに指定するのは表示サイズ
例えば読み込み画像が120×120、表示サイズが60×60なら、次の通り記述します。
<img width=”120″ height=”120″ （略）>
ただCLS防止のためにはアスペクト比がわかればOK。
なので実サイズと表示サイズのアスペクト比が同一の分には問題となりづらいです。
テーマ独自ウィジェットへの対処法
追加するといっても、テーマ独自ウィジェットのケースだと直接編集するのが難しい点で問題となります。
これについては、カスタムHTMLウィジェットを使って直接指定します。
Cocoonのボックスメニューを例として説明します。
「外観」→「ウィジェット」を開き「カスタムHTML」ウィジェットを設置します。
ボックスメニューウィジェットの方は後で削除しますから、その上下どちらかに設置するのがいいでしょう。
サイト画面をChromeで開き、ボックスメニュー上で右クリックして「検証」をクリックします。
当該要素の上で右クリックします。
この場合でしたら、下の記述です。
div class="box-menus no-icon"
「copy」→「copy outer HTML」をクリックします。
先程の「カスタムHTML」にコピペします。
imgタグ全てに次の記述を加えます。
width="（画像サイズ）" height="（画像サイズ）"
このケースでは実サイズと表示サイズがともに60×60のケースでした。
もし実サイズが120×120なら、width=”120″ height=”120″と入力します。
まとめ
CLSはPSIに怒られるというだけではありません。
ひどいのだと、訪問者に「うわっ、がたついた！」と不安がらせてしまいます。
しっかり対策して、UXの向上を目指しましょう！
特にアイキャッチのPSI対策として、こちらの記事もあわせて御覧ください。
VPSは、もう「黒い画面」だけじゃない。
「VPSは難しそう」と諦めていませんか？ ConoHaのKUSANAGIなら、ブラウザ上の管理画面（KUSANAGI Manager）で、ドメイン設定からSSL発行まで直感的に操作可能です。
コマンド操作なしで世界最速級の環境を構築できる、今の時代の初心者にとっての最適解。私が長年愛用している理由がここにあります。
※当サイト経由で新規申し込みいただくと、特典として1000円分のクーポンをもらえます。