【サチコ】INPとは

こんにちは！プラコレの新卒エンジニアひなこです🐥
今回はサチコのINPについて勉強してまとめてみました！

この記事では
・INPとは何か？
・INPの調べ方は？
を扱っております！
では最後までご覧くださいませ〜！

INPとは何か

INPとは2024年3月からGoogle Search ConsoleのCore Web Vitals追加された指標を指します。
Interaction to Next Paintの頭文字です！

▼Google Search Consoleについてはこちらの記事をご覧くださいませ。
https://tech.pla-cole.co/searchconsole/

INPはページ内でユーザーが行うクリック、たっぷ、キーボード操作が応答するのにかかる時間を評価する指標です。

具体的な動作としては
・ユーザーさんがDRESSY ONLINE(プラコレのドレス販売ECサイト)を開き、気になっているドレスの種類を検索してから、ドレスの詳細ページが表示されるまでの時間
・ユーザーさんがDRESSY(プラコレの記事メディアサイト)を開き、ドレスの展示会の記事を読み始めた後、次のフェスの記事を表示するまでの時間
・プラコレの事業に興味のある記者が、冒険社プラコレのHPを開き、お問い合わせフォームを入力し始めてから、お問い合わせが送信されるまでの時間
を示します！

つまりINPは下記の動作を計測しています。
・マウスクリック
・タップ
・キーボードの押下

ユーザーがマウスクリック、タップ、キーボード押下をした後は３段階に分けられます。
①入力の遅延
ユーザーが操作を開始→操作に対するコールバック処理が完了までの時間

②処理時間
コールバック処理が完了するまでの時間

③表示の遅延
ブラウザに表示されるまでの時間

INPを最適化するためには、①②③を短くすることです！

INPの調べ方は？

INPのスコアを見るには、Google Search Consoleから確認できます！

また、具体的にどの動作をした時の具体的なINPのスコアを確認する方法は、
①Web VitalsというChromeの拡張機能を使う
②Chromeの検証ツールのPerformanceタブから計測する
などがあります！

①Web Vitalsはchromeウェブストアからダウンロードし、
サイトを表示した時にINPを初め、Core Web Vitalsのスコアを確認できます。
また検証ツールのConsoleタブにもスコアや詳細が表示されるので、どの動作でどのような影響があるのかを把握できるのでとても便利です！

▼下記のリンクからDLしてください！
https://chromewebstore.google.com/detail/web-vitals/ahfhijdlegdabablpippeagghigmibma

②検証ツールのPerformanceタブはRecord開始ボタン◉を押し、たくさんの動作をした後、以下のような画面で、インタラクションの動作がいつ行われ、実行時間はどれくらいだったのかを確認することができます。

該当のインタラクションを選択し、Summaryに書かれているTotal Time(●ms)がその動作にかかった合計の時間にあたります。
INPの場合、200ms以下が🟢良好、200~500msが🟡改善が必要、500ms以上を🔴不良なので、200ms以上のものがあれば処理を軽くする対応を行い、改善が必要です！

参考サイト

Search Consoleヘルプ「ウェブに関する主な指標レポート」
https://support.google.com/webmasters/answer/9205520?hl=ja

WEBLIC「Google Core Web Vitals の INP の問題について調べてみた」
https://www.weblic.co.jp/google-core-web-vitals-%E3%81%AE-inp-%E3%81%AE%E5%95%8F%E9%A1%8C%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6%E8%AA%BF%E3%81%B9%E3%81%A6%E3%81%BF%E3%81%9F/

Web.dev「Optimize Interaction to Next Paint」
https://web.dev/articles/optimize-inp?hl=ja

最後まで読んでくださり、ありがとうございます🐥

▼▽▼▽▼▽▼▽▼▽▼▽▼▽▼▽▼▽▼▽▼▽▼▽▼▽▼▽▼▽▼▽

冒険社プラコレで働いてみたいという方は、wantedlyからご応募くださいませ！
https://www.wantedly.com/companies/pla-cole

また、TikTokでプラコレのリアルな様子も毎日配信しています✨
「冒険社プラコレ」で検索！

https://www.tiktok.com/@placole_inc?is_from_webapp=1&sender_device=pc

INPとは何か？
https://ichizoku.io/what-is-inp-and-why-you-should-care/