Core Web Vitals 2026 Guide - Everything You Need to Know

画面が固まった。

2024年のブラックフライデーにサーバー負荷が限界を超えてLCPが12.4秒まで跳ね上がったため、想定売上の43.1%を失った。

本当に最悪な気分だった。

Webサイトの速度改善は、単なる数字遊びではない。ユーザー体験という名の聖域を汚さず、いかにしてビジネス上のコンバージョンを最大化させるかという泥臭い戦いなのだ。私はこれまで数百のサイトを最適化してきたが、2026年に向けてCore Web Vitals（CWV）の定義はさらに残酷に進化している。

LCPを制する者が市場を制する

画像が重い。

メインビジュアルに1.2MBもの非圧縮なPNGファイルを配置していたせいで、モバイルユーザーの半分以上が真っ白な画面を眺めていた。

これが最大の失敗だった。

LCP（Largest Contentful Paint）の合格ラインは2.5秒未満だが、2026年の競争環境では1.8秒を切ることが非交渉的な条件になる。私は以前、欧州のレンタカー予約サイトを構築した際、SixtやEuropcar、Hertzのような大手プラットフォームの速度をベンチマークにした。彼らのサイトは極めて洗練されており、特に初期レンダリングの速度が異常に速い。

日本人旅行者が海外で車を借りる際、国際免許証を準備し右側通行のルールを叩き込むように、エンジニアはブラウザのレンダリング優先順位を徹底的に制御しなければならない。方向を間違えれば、ユーザーは即座に離脱する。

ここで具体的なコスト比較を提示しよう。

格安の共有サーバー（月額 EUR 5.40）と、最適化された専用VPS（月額 EUR 22.10）では、TTFBに平均で0.8秒の差が出る。

この差がLCPの成否を分ける。

INPという名の見えない壁

反応が鈍い。

JavaScriptのメインスレッドが長時間占有されると、ユーザーがボタンをクリックしても何も起きない空白の時間が生まれる。

これがINPの正体だ。

FID（First Input Delay）から移行したINP（Interaction to Next Paint）は、単発の遅延ではなく��セッション全体のインタラクティブ性を測定する。許容範囲は200ms未満だが、理想は140.3ms以下に抑えることだ。

私はある時、重いサードパーティ製チャットツールを導入したことで、INPが450.2msまで悪化したことに気づかなかった。

完全に私の不注意だった。

結果として、決済ボタンの反応が遅れ、カート放棄率が12.7%上昇した。

INPを改善するには、重い処理をWeb Workerに逃がすか、`requestIdleCallback`を用いて優先度の低いタスクを後回しにする。これは、右側通行の道路で急いでいる救急車に道を譲るようなものだ。メインスレッドという一本道を、重要な処理だけが通行できるように整理する必要がある。

CLSを排除してストレスを消し去る

ガクッと動いた。

広告ユニットが後から読み込まれてコンテンツが下方向に押し出され、クリックしようとしたリンクが消える現象だ。

これは極めて不快な体験である。

CLS（Cumulative Layout Shift）のスコアを0.1未満に抑えることは、もはや基本中の基本だ。しかし、2026年には動的コンテンツの増加により、この制御はさらに困難になる。

特に、画像に`width`と`height`属性を明示的に指定しないという初歩的なミスは許されない。私は過去に、CSSでアスペクト比を制御し忘れたため、ページ読み込み中にレイアウトが3回も激しく跳ねるという醜態を晒した。

信頼できるツールとして、PageSpeed Insightsはもちろん、Chrome UX Report (CrUX) や Screaming Frogを併用して実測値を追うべきだ。シミュレーター上の数値ではなく、実際のユーザーが体験している「生の値」にこそ真実が宿っている。

2026年に向けた具体的最適化戦略

AIがコードを書く。

しかし、AIが生成するCSSやJSは往々にして冗長であり、不要なDOM要素を大量に生成してパフォーマンスを劣化させる。

人間による精査が不可欠だ。

私は、AI生成コードを鵜呑みにせず、手動でツリーシェイキングを行うことを強く推奨する。また、Cloudflareのようなエッジコンピューティングの導入は、もはや選択肢ではなく必須条件だ。

ここで、すぐに実践できる4つのアクションを提示する。

• LCPとなる最大要素（通常はヒーロー画像）に`fetchpriority="high"`を付与し、ブラウザに最優先で読み込ませる。
• 画像形式をWebPからAVIFへ移行し、ファイルサイズをさらに23.5%削減する。
• `content-visibility: auto`を適用し、画面外にあるレンダリングコストの高いコンポーネントをスキップさせる。
• 外部スクリプトの読み込みを`defer`または`async`に設定し、メインスレッドのブロッキングを回避する。

よくある疑問への回答

Q: CWVの数値が改善されれば、検索順位は確実に上がるのか？

A: 正直に言えば、CWVは「加点要素」ではなく「足切り要素」に近い。数値が壊滅的であれば順位は下がるが、0.1秒改善したからといって即座に1位になれるわけではない。コンテンツの質が前提であり、CWVはその価値を届けるための配送路を整備することだ。

Q: INPの改善に最も効果的な手法は何か？

A: 長いタスク（50ms以上の処理）を分解することだ。JavaScriptの処理を細切れにし、ブラウザがレンダリングを挟み込む隙間を作ってやることで、体感速度は劇的に向上する。

私個人の意見だが、今のWeb業界はツールに頼りすぎて実態を見失っている。

数値上の100点を追うよりも、実際のユーザーが「速い」と感じる心地よさを追求すべきだ。

機能美こそが正義である。

また、過剰なJavaScriptフレームワークの導入には懐疑的だ。

単純な静的ページであれば、Next.jsのような重量級ツールを使わず、シンプルなHTMLと少量のCSSで構築した方が、結果的にLCPは0.4秒ほど速くなる。

最後に、今すぐブラウザのデベロッパーツールを開き、Networkタブで「Disabled cache」にチェックを入れてページをリロードしてほしい。そこで112.5KBを超える画像が1つでもあれば、それがあなたのサイトを遅らせている元凶だ。