Core Web Vitals（GoogleのUX指標）の全貌と改善方法【後編】

CLSに影響を与える要素と解決策

一般的にCLSに影響を与えるといわれる代表的な要素は、画像（動画やアドネットワークから配信されるディスプレイ広告等も含む）などが配置されるスペースがあらかじめ指定されていないことです。

「画像配置の指定もれ」の課題と解決策

CLSのスコアを悪くする要素として、最もよくみられるのが画像や動画要素へのsize属性指定もれ（画像が配置されるスペースが指定されていないことで、画像が読み込まれてからレイアウトがガタついてしまう）の課題です。

具体的には、ページ内で画像や動画等を利用している場合は、幅と高さ（width・height）の属性をつけて読み込んだ画像が配置されるスペースを確保しておくことでレイアウト崩れを軽減することが可能です。

これを行うことで、ブラウザが画像の読み込み中に適切なサイズのスペースをドキュメント内に確保することができ、読み込みが終わっても画像レイアウトが崩れずに、表示ができます。また、その他の手法としては、CSSのアスペクト比対応のプロパティを活用することも有効です。

• 画像が配置されるスペースを確保しておくことでレイアウト崩れを軽減する

また、【前編】のCLSの解説の所でも触れましたが、CLSは画面内でレイアウトがずれた領域とレイアウトがずれた距離を掛け合わせて計算される仕組みであることを紹介しました。

この観点からいうと、ページ画面内の上部に要素が追加されてレイアウト変更が行われると、CLSとしてレイアウトズレのスコアが大きくなるので、できる限りページ上部での要素追加によるレイアウトズレを発生させないことも実践的なプラクティスとして有効と言えるでしょう。

まとめ

本稿では、なぜCore Web Vitalsを改善することが重要なのか、そして改善する上での改善手法等、実際のCore Web Vitalsの支援の現場で培ったナレッジの一部を紹介してきました。

Core Web Vitalsを悪化させる要因は、本稿で説明した通りある程度パターン化されているものもあるため、表示速度や快適なユーザー体験の提供に課題を感じている方は、是非参考にしてください。

また、Webサイトの運用を継続する中で、以前にCore Web Vitalsの改善を行っていたとしても、時間が経過すると日々の運用によるページへの機能追加・改修によって、スコアが悪化しているケースもあります。したがって、定期的に自分の担当するWebサイトがユーザー体験を阻害していないか、継続的にチェックすることも大切になります。

そして、Core Web Vitals改善は、単にSEOのため、CROのために取り組むのではなく、快適なユーザー体験を提供するという気概を持って取り組んでいくことに重きを置いて、取り組まれることをおすすめします。