Googleの新しいUX指標、CLSエラーを解消するimgタグの書き方

Googleが発表した、WebページUX指標「コアウェブバイタル」には、「LCP」「FID」「CLS」の3つの指標があります。詳しくは Web担当者フォーラムの【重要】コアウェブバイタルとは? グーグルのUX指標LCP/FID/CLSの意味や基準値をわかりやすく解説【SEO情報まとめ】に書かれています。

この中のCLS(Cumulative Layout Shift)とは「累積レイアウト変更」の意味で、視覚要素の安定性を示す指標です。例えば画像を読み込む際、その画像サイズが指定されていなく、画像の次にはテキストが書かれていたとします。この場合、テキストの方が軽いため先に読み込まれます。まずテキストが読み込まれ、その間に画像が読み込まれますが、ブラウザは画像サイズが分かりません。読み込みながら「あ、この画像は500 x 500の画像だったのか」と理解し、テキストの上に縦横500の余白を作り、そこに画像を表示します。

この時ユーザーは、余白が後から作られることで、読みかけていたテキストが「下の方に追いやられる」という体験をします。これでは「読みにくい」ですよね。画像に縦横サイズが指定してあれば、ブラウザは最初から作るべき余白の大きさが分かりますので、このようなレイアウトの崩れ/後からレイアウトが動くということを起こさずに済みます。

しかし、スマートフォンにも対応しようと思いますと、「パソコンでは指定サイズで画像を表示しても、スマートフォンでは横100%表示にしたい」場面は多くあります。また、パソコンよりもスマートフォンの方が画面が高解像度ですから、「パソコンでは実際には幅1200pxの画像を600pxで表示し、スマートフォンでは横幅100%で表示する」という書き方をしたい場合もあるでしょう。どうしたらCLSエラーを起こさずにこの問題を解決できるのか?実験しました。画像はクリックすると別ウィンドウで拡大されます。


文字だけを入力して、CLSエラーが無いことを確認する

まずは単純にテキストをいれ、このWebページでCLSエラーが無いことを確認します。確認にはGoogleクロームのアドオンを使用しています。

HTML:段落を書く
まずは、単純な段落を書きます
CLSエラー:無し
CLSエラーが無いことを確認します



WordPressの機能で画像を追加する

WordPressの「メディアを追加」から単純に数枚の画像を追加してみると、CLSエラーが出ます。

HTML:画像を挿入
「メディアを追加」から普通に画像を挿入してみます
CLSエラー:あり
CLSエラーが出ます



WordPressが自動挿入したclassを削除

size-fullなど、画像サイズに関する指定が自動挿入されますので、これを削除すると、エラーが無くなりました。これは非常に当たり前でして、この時点ではimgタグにはwidthとheightがしっかり指定されていますので、レイアウトが崩れる要素がありません。

HTML:imgからclassを削除
imgタグからclassを削除
CLSエラー:無し
CLSエラーが無くなりました。


しかし、これではレスポンシブになりません。この画像は横幅が900pxありますが、スマートフォンで見ると、画像がすべて入りきっていません。

レスポンシブデザインの不具合


imgタグに横幅に関するCSSを指定

次は、HTMLの縦横指定がimgタグに書かれた状態で、CSSで横幅に関する指定を追加します。横幅は100%で、max-widthに実寸値を指定します。CLSエラーは無いものの、画像の縦横比が正しく保てていません。

HTML:imgにcss追加
imgタグに横幅に関するCSS追加
CLSエラー:無し
CLSエラーは無いものの、画像の縦横比が正しくない


スマホで見ても縦横比が保てていません。

レスポンシブデザインの不具合


imgタグに横幅に関するCSSを指定したままHTMLを削除

では、HTMLの絶対値を削除してみるとどうでしょうか。実際のところ、わたしはこれまでこの方法でimgタグを書いてきたのですが…。当然エラーが出ます。今この状態を解決しようとしているのですから。

HTML:imgの縦横指定を削除
imgタグからHTMLによる絶対値指定を削除
CLSエラー:あり
当然、CLSエラーです



HTMLで画像の絶対値、CSSで相対値を指定する

そこで、一歩前に戻りまして、HTMLで縦横の絶対値が書き込まれた状態で、CSSにも縦横の情報を書きます。横は100%、max-width付き、縦はautoとします。これでCLSエラーが無くなりました。

HTML: imgにCSS追加
imgタグにHTMLで絶対値、CSSで相対値を指定
CLSエラー:無し
CLSエラーが無くなりました



ページスピードインサイトのモバイルの画面でも、「累積レイアウトの変更」エラーはないことを確認しました。他の改善点はありますが。笑

ページスピードインサイト

これにより、imgタグには、HTMLで画像サイズの絶対値を指定し、CSSで相対値を指定することでCLSエラーを解消できることが分かりました。分かりやすいように全てインラインに書いていますが、実際には実寸はHTMLでインラインに、CSSは外部にまとめるのが良いでしょう。

投稿者:
更新:2020年06月28日