新指標！コアウェブバイタル（Core Web Vitals）評価「INP」とは？
コアウェブバイタルとは
DEPARTのブログでも以前記事を公開しましたが、コアウェブバイタルの指標として下記の項目があります。
LCP（Largest Contentful Paint ）：表示時間
Largest Contentful Paint (LCP) 指標は、ビューポート内に表示される最も大きい画像またはテキスト ブロックのレンダリング時間を、ページの初期読み込み開始タイミングと比較。
FID（First Input Delay）：初回入力までの遅延時間
最初にページを操作したときから、その操作に応じてブラウザーが実際にイベントハンドラーの処理を開始するまでの時間。
CLS（Cumulative Layout Shift）：レイアウト変化
CLS は、ページの表示中に発生した予期しないレイアウトシフトごとにレイアウト シフト スコアの最大バーストを測定。
この中の「FID（First Input Delay）：初回入力までの遅延時間」が「INP（Interaction to Next Paint）：次の表示までの応答性」に変更されるということで、今回検証を行ってみたいと思います。
INP（Interaction to Next Paint）とは
そのままの意味だと「次の表示までの応答性」というような言葉になると思いますが、実際には全体の読み込み後の応答性になります。
つまり今までは初回が重要だったんですが、これからは常に操作関連の応答性は重要になります。
いつFIDからINPになる？
冒頭でも記載しましたが、Googleでは2024年3月から置き換わるようです。
https://developers.google.com/search/blog/2023/05/introducing-inp?hl=ja
しかしLighthouseではもう計測が可能ですので、SEO的な部分としても対応可能な部分に対して改善を行うことができます。
よくあるWebサイトのUIでどのように計測されるのか
いざ改善をしようと思っても、どの部分をどう改善すると良さそうなのかがわからないと、闇雲に簡素なWebサイトを求めてしまうことになりかねません。
ユーザーにとって操作がしやすいUIが単に長いページになってしまってはもったいないので、ある程度知っておく必要はあると思い、いくつか代表的なUIとその応答性に関して調査してみました。
ただし、計測結果はネットワークなど様々な要因が関連しますし、すぐに評価が変更され来月には違ったスコアになることもありますので、その点はご了承ください。
また、今回はページ作成にAstroを使用しています。
コンポーネントベースで開発ができ、ビルド後のファイルが静的にしやすく余計な部分でスコアを下げないためです。
計測方法
Lighthouseパネル「Timespan（測定期間）モード」を使用して計測してみます。
Lighthouseパネルをひらき、赤枠の「測定期間」にチェックをつけて右上の「測定期間を開始」ボタンから計測を開始します。
結果は下記のように表示されます。
今回検証用に用意したサイト
今回検証として、よく使う代表的なUIをいくつか作成し検証してみました。
この記事を読んでいる方もご自身で検証が行えるようにURLを記載していますので、自由にご確認ください。
https://corewebvitals-inp.pages.dev/
検証用に用意したUIリスト
- カルーセルスライダー
- モーダル
- ツールチップ
- アコーディオン
- 絞り込み（フィルタリング）
- スクロールアニメーション
カルーセルスライダー
今回はSwiperを使用してみました。
従来の組み込み方式ではなく、**Element (WebComponent)**を使用してみました。
導入は非常に簡単で、Astroでも特に問題なく利用できました。
モーダル
モーダルはCSSで制御できるものとして、DaisyUIのモーダルを使用しました。
より複雑な機能や画面制御が必要な場合はある程度スコアが落ちてしまうかもしれませんが、INPとしては動的に要素を生成して時間をかけてしまう、ということがなければ問題なさそうです。
ツールチップ
中身が動的だと影響はあるかもしれませんが、静的に置いてる場合には特に問題はありませんでした。
アコーディオン
中身が動的だと影響はあるかもしれませんが、静的に置いてる場合には特に問題はありませんでした。
絞り込み（フィルタリング）
動的に要素を生成するため、今回一番引っかかるポイントだとおもっていたのですが、
切り替わり自体を200ms以下にできれば特に問題なさそうです。
スクロールアニメーション
こちらは別の項目でひっかかりやすいのですが、INPにおいては特に問題ありませんでした。
動的に要素を追加した場合には影響があるかもしれません。
改善版として、その他の項目で影響がありそうな画像のサイズやレスポンシブでの出し分けを対応したものも、ページ内にリンクを入れてありますので気になる方は確認してみてください。
まとめ
INPの計測に関しては、アニメーションをあえて400msにしたりしたのですが、静的に配置している場合にはすでに読み込まれている要素でありあまり影響がなく、動的に生成される要素に関しては読み込み時間を気にする必要があるようでした。
また、今回はUIをほとんどCSSで制御してみたので、スコアとしてもかなりの高スコアを取ることができました。
基本的な機能であればJavascriptを使わずともCSSで表現できるものが多くなった印象ですが、複雑なものに関してはコアウェブバイタルとのトレードオフを考える必要があるかもしれません。
INPへの切り替わりが2024年3月ともうすぐ目の前まできていますが、ご自身のWebサイトが対応ができているか確認してみてはいかがでしょうか？
コアウェブバイタル対応や、その他サイト分析や改善でお悩みであればDEPARTへお気軽にご相談ください。
|
Webマーケティング、Web制作に関することなら
|
デパート採用情報
株式会社デパートでは一緒に働く仲間を募集しています
