blog スタッフブログ
HOME > スタッフブログ > フロントエンド > Web VitalsのCLSがPoor評価になることを防ぐ取り組み

Web VitalsのCLSがPoor評価になることを防ぐ取り組み

約1年ほど前でしたでしょうか、「 Google Developers Japan: Web Vitals の概要: サイトの健全性を示す重要指標」の記事が公開され、『すべてのウェブ エクスペリエンスにとって重要な共通シグナル、つまり「Core Web Vitals」が存在』することを知りました。それまでもページの読み込み速度には気を配ってきましたが、CLS(Cumulative Layout Shift)で表される視覚的な安定性などにも気を配るようになりました。

Core Web VitalsはGoogle Chromeの拡張「 Web Vitals」を使用すると容易に確認ができます。先日制作実績でご紹介したシモハナ測量設計様のホームページを評価にかけると以下のように3つの評価ポイントがすべてGoodの範囲に収まっていることが分かります。
Web Vitalsでシモハナ測量設計様のホームページを評価した結果の画面

CLSがPoor評価になる例と対応

予期しないレイアウトのずれが多いとCLSがPoor評価になります。ブラウザで表示される画面を見ていると「カタッ」と動く感じがするので気付く方も多いのではないかと思います。ずれが発生しやすいものの1つがimg要素で画像を読みこんでいる部分ですが、width属性とheight属性を指定することでリフローと再レイアウトが最小限に抑えられるようです。

それでもCLSがPoor評価になる場合は、Chromeのデベロッパーツールのパフォーマンスタブで検証をしてみます。「Web Vitals」にチェックを入れてRecordingを開始しページをリロードしてみました。すると以下のようにLayout Shiftが発生していることが表示されます。赤く表示されている部分にフォーカスをするとどの要素が該当するかまで分かります。
ChromeのデベロッパーツールでWeb Vitalsの測定をした画面

今回はホームページで画像数枚を用意してフェードで切り替えている部分が該当でした。 Swiperslickで画像の切り替えを実現しています。なおかつ、アートディレクションの問題からpicture要素でスマートフォンのような幅が狭い画面とPCのような幅が広い画面用の画像サイズ(画像の比率)が異なっていました。

picture要素を使用して異なる画像サイズを出し分ける場合、width属性やheight属性でサイズが指定できないと思いどうしようか考えたのですが、最近のブラウザではCSS Box Sizing Module Level 4の「 aspect-ratio」プロパティへの対応が進んでおり、メディアクエリとaspect-ratioを併用して記述を行いました。

.keyVisual {
    aspect-ratio: 460/320;
}

.keyVisual:not(.slick-initialized) picture:not(:first-child) {
    display: none;
}

@media only screen and (min-width: 45em) {
    .keyVisual {
        aspect-ratio: 1200/560;
    }
}

再度Chromeのデベロッパーツールのパフォーマンスタブで検証をしてみると、Layout Shiftが発生しなくなりました。(ない状態の画像を用意するのがなかなか難しいのですが)
ChromeのデベロッパーツールでCSS変更後にWeb Vitalsの測定をした画面

むすび

Layout Shiftへの対応の一例とLayout Shiftの確認方法をご紹介しました。「 2021年5月、Core Web VitalsがページエクスペンリエンスシグナルとしてGoogleのランキング要因になる | 海外SEO情報ブログ」という動向もあります。ランキングが劇的に変わるような影響はないと推測しますが、Layout Shiftを防ぐことなどに取り組むとユーザーエクスペリエンスの改善につながりますので、今後もWeb Vitalsには注目していきたいと思います。

最近の記事

カテゴリ

アーカイブ

スタッフ別