widthとheightとCLS
いきなりですが皆さん、imgタグのwidthとheightはちゃんと書いていますか？
私はこの仕事を始めて久しく、Web老人会側の人間だと思うのですが、XHTML 1.0が全盛だった頃は必ず書いていました。
レスポンシブのサイトを作るようになってからは書かなくなっていたのですが、2020年あたりからブラウザの仕様が変わって実数としてだけでなく比率としても解釈されるので、スムーズな読み込みのことを考えるとちゃんと書いた方がいいと聞いて、また書くようになっています。
今回は、そのあたりのことを軽くブログに書こうと思い、裏付けを見つけるべく色々調べ始めたら、GoogleのCore Web VitalsというUX指標の話に行きつき、これは思ったより大事な話だぞと気付きました。
widthとheight指定とページのガクッ
画像が遅れて読み込まれて画面がガクッとなること、よくありますよね。特にスマートフォンでニュースサイトの記事なんかを読んでいると、画像が遅れて読み込まれたせいで画面のレイアウトがガクッとずれて、読んでいた箇所を見失ってイラッとするなんてことがよくあります。
すみません、さっきからガクッとかイラッとか、擬音語ばかりですね。擬音語の多さは語彙の乏しさの表れですね。たまに近所のおばあさんと立ち話をしていると、おばあさんの語彙の多さにびっくりすることがあります。テクノロジーの無い時代に口語で人生を切り開いてきた中で語彙が研ぎ澄まされてきたのでしょうか。例えば今年の春、近所のバス停で桜が雨で散っちゃいましたねーみたいな話をしていると、その時話していたおばあさんはこう言いました。
「全く、意地悪な雨ね…。」
それを聞いた瞬間、なんて素敵な言い回しをするんだと感動しました。
文学が服着て歩いてるようなもんやないか！
また、市役所で見かけた別のおばあさんは、窓口で割と強引なお願いをしていました。うるせえババアだなと心の中で思っていると、用事が終わったおばあさんは、去り際に小さな体をちょこっと曲げこう言います。
「ごめんください。」
その挨拶があまりにも上品に響いて、先程までの厚かましさを忘れてしまいそうになりました。
主張するのはその人の権利なのだから、おばあさんはむしろ女性の地位向上に貢献するフェミニスト・リーダーなのではないか、などと思ってしまいます。それに比べて私は何でしょう！心の中であったとしてもババアなどと毒づいたりして。歳を取ったら完全にブーメランとなり深く深く自尊心にガッとつき刺さってくるやつです。
さてさて、おばあさんの美しい物腰に関する話は尽きないのですが、widthとheightによってプレースホルダー的に先にその画像が読み込まれるスペースを確保してくれるので、画面がガクッとならない、という話でした。
なぜこんな余談ばかりするのかと言うと、2019年あたりに行われたというブラウザのwidthとheightの解釈に対する仕様変更の裏付けとなる情報が見つけられなかったからなのです。ごめんなさい。
「ガクッと」はCLSという指標で表せる
さて、気を取り直して本題に戻ります。この「ガクッと」の程度をGoogleさんではCLS（Cumulative Layout Shif）と呼び、Core Web VitalsというUX指標の一つとしています。
以下web.devのCLSの説明ページからの引用です。
重要な用語: Cumulative Layout Shift (累積レイアウト シフト数、CLS) は、視覚的な安定性を測定するための重要なユーザーを中心とした指標です。これは、ユーザーが予期しないレイアウト シフトに遭遇する頻度の数値化に役立つ指標であり、CLS が低ければ低いほど、そのページが快適であることが保証されます。
Cumulative Layout Shift (CLS) – web.dev
つまりガクッとレイアウトがずれることを「レイアウトシフト」と呼んで、できるだけこのレイアウトシフトを起こさないようにしようというわけです。詳しい計算方法やCore Web Vitalsについて知りたい方はGoogle先生に聞いてみると良いでしょう。今まで知らなかったことが恥ずかしくなるくらいたっくさん情報が出てきました。
さて、このレイアウトシフトを防ぐためにcssでもできることがあります。
アスペクト比を固定
cssでアスペクト比を固定すると、widthとheightを指定した時のように、プレースホルダー的に先に画像が入るスペースが確保されるのでレイアウトシフトが緩和されます。
aspect-ratioというcssプロパティがありますが、これが使えるようになるとアスペクト比の固定が楽になります。
しかし先日、意気揚々と使ったらiPhoneで崩れてしまって、調べてみるとiOS14.8以前のSafariでは効かないようでした。まだまだこのくらいのバージョンを使っている人が周りにいるので、使用は見合わせました。残念…。
https://caniuse.com/mdn-css_properties_aspect-ratio
代わりにいつも使うpadding-topの技で対応しましたが、早くハック的な対応はしなくてすむようになると良いですね。
ひとまずimgタグのwidthとheightはなるべく入れよう
私たちがレイアウトシフトを防ぐためにできる簡単なことはwidthとheightを入れることです。
svg画像だとwidthとheightの確認は一手間かかりますが、イラレやAffinity Designerで開くとキリのいい数に編集できます。
使いたい、使えない。プログレッシブエンハンスメントか、グレースフルデグラデーションか。
日々迷うことは多いですね。それではまた！
