忘れ物の影響

Googleから「お前が管理しているWebサイト、描写が遅い。改善したほうが身のためだよ」という趣旨のメッセージが届いており、その詳細は『CLSに関する問題:0.1超』とのことだ。CLS(Cumulative Layout Shift)はWebページを閲覧する際に、レイアウトがズレてしまう問題を数値化したもの。

その原因は、画像サイズが指定がされていないため…とされる。画像サイズが指定されていないと、ブラウザは画像のサイズを仮定しながらテキストを読み込む。続いて、画像データ本体からサイズ情報を読み取って、画像をテキスト内に割り込ませるようにして表示させるという流れのようだ。

画像サイズが決まっていないので仮定になっていまい、さらに割り込ませるようにして表示するので、ここでレイアウトにズレが生じてしまう。Googleからすれば、このズレは閲覧者にとって不愉快で、そんなものを提供するわけにはいかない!となる。

画像サイズが指定されていないとは、随分前に当Webサイトをレスポンシブウェブデザイン化した際、imgタグに「width」と「height」の数値を書き忘れたまま、長らく運用し続けていたことが直接原因。

ページを作るにしても、完全にゼロから書くのではなく、基本的にはコピーペーストで対処していくため、具体的な数値が無いまま大量のimgタグが散りばめられていった。その数、ページだけでも200以上。imgタグをカウントすると、恐らく1000以上になるのではないか。

さすがにシビックRのページを修正していくには時間が無さすぎるので、パソコンのレポート集やインフォメーションページを真っ先に書き換えてサーバにアップロード。ページ数は少ないとはいえ、正しい画像サイズと誤字脱字の修正を含めると、想定していた以上の時間を要することになった。忘れ物が後々大きな影響を及ぼすとは、何事にも当てはまるということを改めて実感させられることになった。