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

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

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

Core Web Vitalとは

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

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

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

ここから本題です。

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

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

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

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

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

実験概要

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

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)
      };

    }
}