imgのwidth、heightを後付けしてもcore web vitalは改善できるのか試してみました

2022年2月から、PCのcore web vitalも検索評価のポイントとして加わったそうです。

モバイルの方はすでに評価されていますし、対応済んでいれば多くの場合気にすることではないですが、これまで放置してきた方は早めに改善した方が良いでしょう。

Core Web Vitalとは

core web vitalとはページ描画が遅くないかとか、ページ描画中にレイアウトずれが発生してないかとかを数値化したもので、目的はユーザーに快適なWeb体験を提供するためにあります。

同程度のサイトが2つあった場合core web vitalが優れている方を優先して検索結果に載せるよ、ということなので、Google検索からの集客を捨てられないサイトはきちんと対応しておくべきでしょう。

画像のwidth heightをjava scriptで後付けしたらどうなるのか?

ここから本題です。

Core Web Vitalに影響するものの1つに、「 画像要素で width と height が明示的に指定されていない 」があります。

imgタグのwidth heightは縦横比(アスペクト比)も表しているので、きちんと指定されていればブラウザはその比率に応じて画像の描画サイズを先に理解することができます。

逆に指定されていなければ、画像を読み込んでみるまで適切なサイズが分からず、描画の遅れやレイアウトずれの原因となります。core web vital対応で最初に確認すべき項目です。

JSでwidth height を設定したらどうなるのか

本当はwidth height属性が指定されていない画像を1つ1つ洗い出しきちんと指定すれば良いのですが、これを後付けしたらどうなるか?が今回の実験です。面倒くさがり故の発想です。

実験概要

  1. サイズもばらばらな画像を100個生成し、width height をつけずにページ公開。
  2. レイアウトは次の3パターン。それぞれをwidth heightなし・width height後付けの2通り計測
    1. display : flex
    2. display : grid
    3. そのまま
  3. 100個以外の画像にはwidth height あり
  4. サーバーはカラーミーショップ

width heightがなかったら、描写前に後付けするコード(もっと綺麗に書く方法ないかな、、)

const test =()=>{
  const imgs = document.querySelectorAll('img');
    for( const img of imgs){
      if( !img.hasAttribute('width') ){
        img.setAttribute('width', img.naturalWidth) 
      };

      if( !img.hasAttribute('height')){
        img.setAttribute('height', img.naturalHeight)
      };

    }
}

実験結果

総論 後からwidth heightつけても総合パフォーマンスはまるで改善しない

素の状態
TBTが少し短縮
TBTがさらに短縮。
TBTさらに短縮。LCPがわずかに増加
CLS悪化。TBTは短い
LCP / TBTはもっとも改善されたがCLSは最悪
  • レイアウトにgrid やflexを使っていると、LCPとTBTがやや改善される。
  • 一番関係ありそうと思っていたCLS(レイアウトずれ)は変化なしか改悪される。flexとclsって相性悪いんだろうか。
  • レンダリングソースみたところ、width heightはきちんと付与されているし、width height無しの警告文も消えた。

まとめ

おとなしく画像タグにはwidth height を書きましょう。

Author

ミフネWEBのロゴ

ネットショップ専門のWEBサイト制作事務所です。

部分的なテンプレートカスタマイズから、高速化や機能追加、新規ショップ制作などECに関するいろいろを承ります。(5,500円〜)

仕事のご相談は「お問い合わせ・ご相談」より随時承っております。