【CV達成27%⤴ 】月間80万人に読まれるオウンドメディア「データのじかん」サイト改善の裏側
Core Web Vitals(CWV)は現在、LCP(読み込み)/INP(応答性)/CLS(視覚安定性)の3指標です。2024年3月12日、INPが正式にCore Web Vitalsへ昇格し、FIDは廃止されました。つまり、クリックやタップなどの操作に対する“動くまで”の体感を、ページ全体のライフサイクルで評価する世界にアップデートされた──これが“2.0”の実態です。
結論、Googleはどれか1つだけを加点最優先にしているわけではありません。ただし2.0ではINPが最注目。理由は3つです。
要するに「CLSを捨ててINP」ではなく、“まずINP、並行してLCPとCLS”が正解。これは優先度の話であり、軽視ではないということです。
良好: ≤ 200ms / 要改善: >200ms〜≤500ms / 不良: >500ms。
判定は実ユーザーデータ(CrUX)のp75で、モバイル/デスクトップ別に評価します。
犯人特定には、Chrome DevTools/PageSpeed Insightsの診断に加え、web-vitals(attribution build)+長フレームの観測(LoAF)が有効です。
GSCでURLグルーピングとp75傾向、PSIでフィールド×ラボの照合。web-vitals attributionで遅い操作の記録。
長いタスク分割、JSの遅延/条件読み込み、イベント委譲と軽量化、サードの棚卸し、アニメーション最適化、SSR/ストリーミング活用。
requestIdleCallback
/Code-splitting/仮想スクロール/タグの発火条件見直し/transform
とopacity
中心
LCPはヒーロー画像のpreloadやTTFB短縮、CLSは画像・広告枠のサイズ予約とフォント対策。
<link rel="preload">
/TTFB短縮(CDN/キャッシュ)width/height
またはaspect-ratio
/FOIT/FOUT対策
しきい値越えのアラート、ダッシュボード可視化、CIにINP回帰テストを組み込み。
preload
、一覧はloading="lazy"
+正しいaspect-ratio
でCLS防止サイト特性に依存しますが、INPの大幅改善は「押しても反応しない」体感を解消し、回遊・完了率のボトルネックを取り除きます。特にカート操作やフォーム送信など収益直結のUIから着手するのが定石です。
Core Web Vitals 2.0では、INPの改善が体感と回遊に直結します。
まずINPを中心に、並行してLCP/CLSを底上げし、p75のしきい値を安定クリアする状態を目指しましょう。改善は一度きりではなく、アラート/ダッシュボード/回帰テストまで含めて“運用”に組み込むと、数値はブレません。
Core Web Vitals 2.0, INP 改善, LCP 最適化, CLS 対策, Long Tasks, 3rdパーティ最適化, web-vitals attribution, LoAF
本記事の内容は参考情報です。実装前には自社の利用規約・プライバシーポリシー・法務の確認を行ってください。
KOHIMOTOでは、UI監査→設計→実装ガイドまでの伴走支援もご用意できます。課題が見えてきたら、まずは小さな導線から一緒に整えていきましょう。
またKOHIMOTO LABOのXアカウントでは、WebサイトのTipsやAI共創の最新動向や魅力を紹介しています。制作現場でのノウハウや実践例を日々更新しているので、よければのぞいてみてください🧪
編集者:コウ
年間20万人が訪れるKOHIMOTO Laboの 広報・編集・AIアシスタント⛄を担当しています。興味→Web・AI・ソーシャル・映画・読書|テクノロジー × ヒューマニティのpositiveな未来🌍
PICK UP