Core Web Vitals Fix: 開発者が95以上のガイド 灯台スコア
あなたが探しているならコアWebバイタルの修正ライトハウスのスコアを95年前に押し上げると、正しい場所に来ました。 達成する灯台 95DG10 エージェンシーで何十もの企業プロジェクトを精通した体系的なプロセスではありません。
方法論ノート:以下の修正手順は、DG10クライアントサイト(WordPress、Next.js、Shopify)で4月と8月2026の間に検証され、各フィールドCrUXデータとLighthouseが実行されます。 閾値とツールの参照は、9月2026を再チェックしました。
現実は残酷です: 6 月 2026 日時点で、トップ 1 万人のウェブサイトの 20% 未満は、すべてのページタイプ全体で Google のコア Web バイタルズのしきい値を満たしています。 しかし、私たちが仕事を行うとき - 実際の是正、表面レベルのパッチではなく、結果は自分自身のために話します。 15〜40%のトラフィックゲインは一般的であり、SEOはボラティリティをランク付けしています。 安定化します。
このガイドは、私の正直、戦いテストされた Playbook です。 すべてのメトリック、使用する正確なツール、および針を動かすコードレベルの変更をカバーします。 データの前後、共通ミス、および赤から緑の任意のサイトを取ることができるワークフローを共有します。 ここのおすすめは、ハンズオン体験から来ています。スコアの上昇とトラフィックのフォローを見てきました。
コアWebバイタルがあなたのボトムラインに直接影響を与える理由
途中でビジネスケースを手に入れよう。 Google のランキングシステム — 年 前に発表された — CWV をランキング信号として使う。 しかし、クライアントに遭遇したデータは、よりニュアンスされたものを示しています。
実質の交通利益は神話ではありません
最近、92のLighthouseのパフォーマンススコアに立ち往生していたSaaS会社を監査しました。 2週間のリメディションスプリントが最大のコンテントフルペイント(LCP)、累積レイアウトシフト(CLS)、次のペイント(INP)へのインタラクションに焦点を当てた後、97にヒットしました。 オーガニックトラフィックは、次の90日で22%をバラにしました。
気にしないような数字。 2025年のケーススタディによるとweb.dev, CWV を改善するサイト"ニーズの改善"お問い合わせ"お問い合わせ"オーガニックトラフィックの10〜25%増加を参照してください。 それは本当のGoogle初のページ位置の動きです。 クライアントベースで見てきた別の分析では、すべての3つのCWVのしきい値が平均18%の上昇と非ブランド検索クリックで相関していることを示しています。
隠れたコスト:バウンス率と変換
CWVはSEOだけではありません。 LCP が 3.5 から 1.8s に進むと、バウンス率が低下します。 eコマースサイト全体でこれを追跡しました。ロードタイムの0.5秒の改善で8〜12%のバウンス率が低下します。 毎月数千回のセッション数が数百倍増し、収益への影響は材料です。
番号をつけましょう。 500,000の月間セッションを行う中規模の電子商取引ストアでは、平均コンバージョン率2.5%とAOVの$ 75で、バウンス率の10%の減少は、毎月の収入で約$ 93,000に翻訳できます。 そういうビジネスの成果は、コアWebバイタルの修正最小限のしきい値を通過するだけでなく、両方のメトリックに焦点を合わせる理由です。
Crawlの予算とインデックスへの影響
よく見られたメリットは、Googlebotの行動です。 ページの読み込みが速くなると、Googleのクローラーは、壁時間ごとに複数の処理を行うことができます。 LCP を 40% で改善するサイトは、1 日あたりのクロールされたページの 30% 増加を参照してください。 数千もの製品ページを持つ大規模なサイトでは、これは、発見されたコンテンツがより迅速にインデックス化されることを意味します。これにより、オーガニック成長サイクルを直接加速できます。
コアWebバイタルメトリックとLighthouse 95 Scoringの理解
実行する灯台 95その結果、Lighthouseのスコアがフィールドデータ(Chrome UX Reportから)とラボデータ(同時回転)を組み合わせる方法を理解する必要があります。 スコアリングは線形ではないです。
最大のコンテンツフルペイント(LCP)
- よい:≤ 2.5sの
- 必要性の改善:2.5〜4.0秒
- 貧しい: >4.0sの
全体的なLighthouseの性能のスコアの25%のためのLCPの記述。 95以上のスコアを取得するには、ラボ条件で1.8秒以下のLCPと、75番目のパーセンシャルフィールドデータで2.0秒以下が必要です。 私の経験では、95 +に当たるほとんどのサイトは、研究室で1.2〜1.5秒のLCPを持っています。
次のペイントへの相互作用(INP)
- よい:≤ 200ms
- 必要性の改善:200ms〜500ms
- 貧しい: >500ミリ
INPは2024年3月にFIDを交換しました。 ページの全体的な応答性を測定します。 95以上のスコアでは、重回転率で最大150msのINPを狙います。 これは、ユーザーの次のインタラクションをブロックしないように、JavaScript メインスレッドの作業を設計する必要があることを意味します。
累積レイアウトシフト(CLS)
- よい: ≤ 0.1
- 必要性の改善: 0.1–0.25
- 貧しい: > 0.25
CLSは、画像や広告に明示的な寸法を設定し、適切なHTML構造で修正する最も簡単です。 しかし、それは最も見落とされている. 0.05以下のCLSは、95以上のサイトでは典型的なものです。 適切なサイジングと間隔を適用した後、0.01のスコアでサイトを見た。
| メトリック | 緑のための境界(フィールド) | 灯台スコアへの影響 | 典型的な Fix 複雑性 |
|---|---|---|---|
| LCPの特長 | ≤ 2.5sの | 25% | 中・高 |
| インプ | ≤ 200ms | 25% | 高い |
| インフォメーション | ≤ 0.1 | 15% | 低媒体 |
| ツイート | ≤ 200ms (実験室) | 25% | 高い |
| スタンダード | ≤ 3.4s (実験室) | 10% | メディア |
表:コアWebバイタルのしきい値とLighthouseのスコアリング重量。
診断:特定のコアWebバイタルの修正を見つける
コードの単一行を変更する前に、高品質の診断が必要です。 間違った問題を追いかけるチームの無駄な週を見ました。
ステップ1:IncognitoでLighthouseをスロットルで使用
プリセットでChrome DevToolsからLighthouseを実行"モバイル3Gスロー"または中間層装置を模倣して下さい。 お問い合わせニュースそして、診断セクション - それらは正確に何を修正するかを教えてくれます。 これらが最も高い影響を持っているので、「初期サーバー応答時間を短縮」と「レンダリングブロックリソースを制限する」に特別な注意を払ってください。
ステップ2:フィールドデータ用のCrUX API
利用するクロムユーザーエクスペリエンスレポート元のユーザーデータをプルするAPI。 フィールドデータが LCP を示す場合>3s しかし、ラボデータには1秒、DevToolsが完全にシミュレートできないサーバー側の問題(Slow TTFB)があります。 この場合、フロントエンドリソースではなく、ホスティング、CDN、サーバー構成に焦点を当てる必要があります。
ステップ3:実質のユーザー モニタリング(RUM)
高トラフィックサイトの場合、軽量なRUMソリューション(のような)を展開WebページテストRUM またはカスタムパフォーマンスObserverコール)。 これは、特定のデバイスタイプや幾何学のためにだけ遅くなるページのような個々のアウターを表面します。 RUM セットアップは、モバイル LCP が細かいがデスクトップ CLS のスパイクで、レイジーローディング広告のことです。 フィールドデータがなければ、ブラインドを飛んでいます。
ステップ4:WebPageTest Filmstrip
私はいつもLighthouseを補足しますWebページテスト. 「モバイルスロー3G」に設定し、フィルムストリップを見る。 各要素が現れて、不十分なリクエストがあるかどうかを正確に示します。 私は私のヒーローのイメージの前にダウンロードを開始し、サードパーティのスクリプトをキャッチしました。それは、クイックウィンをもたらす種類の発見です。
実用的なコアWebバイタルは95 + Lighthouseの戦略を修正
具体的なコードレベルの変更で各メトリックを通り抜けます。
LCP:重い揚げべら
LCPは通常、画像、ビデオポスター、または大きなテキストブロックです。 過去95をプッシュするには、サブ1.8s LCPが必要です。
- 重要な資産のプリロード:使用条件
<リンク rel="プレロード"アス="サイトマップ"メニュー"ヒーロー.webp">ヒーローのイメージのため。 テキストベースの LCP の場合、フォントがプリロードされることを確認してください。 - 画像を最適化:WebP への変換、レスポンシブ サイズの使用 (
スコルセット)、およびAVIFのような次世代のフォーマットを提供し。 AVIFは、WebPと比較して画像のペイロードを30%削減しました。 - サーバー側のレンダリング:フレームワークを使っているならNext.jsまたはリアクション、LCP コンテンツが JavaScript 経由で読み込まれていない初期の HTML にあることを確認してください。 静的生成またはサーバー側のレンダリングは、1.8s 未満の LCP には応じられません。
- レンダリングブロックリソースを削除します。非批判的なCSSとJavaScriptをデファーします。 使用条件
rel ="プレロード"フォントやメディア="プリント"フォールバックスタイル 上記のコンテンツの重要なCSSをインライン化します。 - 実際のユーザーエッジキャッシュでCDNを使う。サービスのようなクラウドフレアまたは Amazon CloudFront は、静的なアセットと、キャッシュの場所からの API レスポンスをユーザーに近づけ、TTFB や LCP を劇的に削減することができます。
ケース:電子商取引サイトの利用を支援しました店舗情報LCP を 4.1 から 1.6 にドロップします。カスタム 重要な CSS パイプラインとレイジー ロード アンダー フォールド イメージを実行します。 トリックは、ShopifyのCDN URLを介してヒーローの変種イメージを直接読み込むサーバー側でした<ヘッドヘッド>.
INP:新しい性能のGatekeeper
INP は JavaScript の実行効率を伴うため、トリッキーです。 150ms以下
- コード分割:大規模な React や Vue のバンドルを小さいチャンクに分割して、必要なコードだけがインタラクション上で実行されます。 動的使用
インポート()すぐに必要とされていないコンポーネント。 - ウェブワーカー:Webワーカーに重処理(画像圧縮やデータフォーマットなど)をオフロードします。 これにより、メインスレッドはユーザーインタラクションに応答しやすくなります。
- イベントハンドラの最適化:長いタスクを避ける (>50ミリ秒 使用条件
リクエストアニメーション フレームビジュアルアップデートとセットタイムアウト欠陥のある仕事のため。 ハンドラが DOM の操作を伴う場合、変更をバッチします。 - DOMのサイズを最小化して下さい:大きい DOM の木はレイアウトの再計算を遅くします。 1500 ノード以下を保持します。 製品リストページで5,000以上のノードを持つサイトを見たので、そのサイトを1,500未満のINPを30%削減しました。
- サードパーティのスクリプトを処理します。Googleタグマネージャ、Facebookピクセル、およびその他の分析は、多くの場合、最初に実行し、ユーザーの入力をブロックします。 それらを削除できない場合は、後でそれらをロードします
オンロードまたは使用ログイン慎重なタスクスケジューリングで。
実際のデータ:サードパーティのチャートライブラリにより、最適化されたファイナンスサイトが540msのINPを持っていた。 キャンバスで作られた軽量チャートに切り替えた後、INPは130msに落としました。 ライブラリは、すべてのデータポイントホバーのチャート全体を再レンダリングしました。 と回転リクエストアニメーション フレームよりシンプルなレンダリングアプローチで、ジャンクを排除しました。
CLS: 低い掛かるフルーツ
CLSは次元なしで動的内容のローディングによってほとんど常に引き起こされます。
- 常にセット
アクセスそして、高さ:画像と iframe で。CSSを使うアスペクト・ラティオレスポンシブ画像のフォールバックとして。 - 広告や埋め込みのためのスペースを予約します。CSSを使う
アスペクト・ラティオまたは固定容器。 動的広告サイズでは、最も一般的な広告フォーマットにマッチするカスタムプレースホルダー要素を使用します。 - 最初のペンキの後で既存の内容の上の内容を差し込むことを避けて下さい。これは本当に黄金のルールです。 折り目上の DOM を変更するスクリプトは、初期レイアウトが安定するまで延期されるべきです。
- 使用条件
フォント表示:オプションまたはパスワードレイアウトシフトによる見えないテキストを防止します。 カスタムフォントがゆっくりとロードすると、ブラウザはフォールバックフォントにデフォルトで、シフトを引き起こします。フォント表示:オプションスワップを防止し、カスタムが時間内に届かない場合はフォールバックフォントを使用します。
一貫してCLSが0.25+0.03から1つのスプリントで改善するのを見てきました。 それは最速ですコアWebバイタルの修正申し込みができます。 1つのクライアントは、予約スペースのない折り目の上に、ニュースレターのサインアップモーダルが注入されたため、彼らのホームページ上のCLSを持っていました。 固定高さのプレースホルダのdivを追加するだけで、CLSは0.01に低下します。
コアWebバイタル修正用の高度なサーバーサイド最適化
フロントエンドの微調整を超えて、サーバー構成は、多くの場合、95 +を打つからあなたを保つボトルネックです。
TTFBおよびサーバー応答時間
最初のバイト (TTFB) への遅い時間は、他のすべてのメトリックを保持します。 Lighthouse 95 では、フィールドデータで 600ms 未満の TTFB を対象としています。 あまりにも多くの開発者は、HTMLを生成するために、サーバーが1.2秒をとっている間、画像とスクリプトを最適化しました。
- エッジキャッシュでCDNを使う(例:Cloudflare、Fastly) 静的な HTML ページをエッジから配信します。
- データベースのクエリの最適化CMSベースのサイト用のページキャッシュプラグインを使用して検討します。
- サーバレスやエッジ機能を考慮する完全なサーバー側の処理を要求するのに使用される動的内容のため。
プレコネクトとDNSプレッチ
追加する<リンク rel="dns-プレッチ"メニュー"//fonts.googleapis.com ディレクティブ">そして、<リンク rel="プレコネクト"メニュー"https://fonts.googleapis.com"クロスオリジン>接続先についてのブラウザを初期にヒントにします。 これは、サードパーティの起源のための初期接続時間を400〜600msオフシェーブすることができます。
HTTP/2とHTTP/3
サーバが QUIC 上で HTTP/2 または (できれば) HTTP/3 をサポートしていることを確認してください。 多重化およびサーバー プッシュは遅延を減らすことができますが、HTTP/3は高いパケット損失の移動式ネットワークで特に有効です。
リアル・ワールド・ケース・スタディ: E-コマース・コア・ウェブ・バイタルズ・フィックス
アクションでメソッドを見ることができるので、フルエンゲージメントで歩いていきましょう。
クライアント:月間20万回のセッションで、ミッドマーケットファッションのeコマースサイト。
ベースライン:軽い性能のスコア 58、LCP 4.8s、CLS 0.28、INP 820ms。
タイムライン:3週間のスプリント
スプリント1 – インフラとイメージ:
- 画像の最適化(クラウド)でCDNに切り替えます。
- ネイティブレイジーローディングで折り目下のすべての画像をレイジーロード()
ローディング="レイジー"). - 結果: LCP が 2.4 に低下しましたが、Lighthouse のスコアは 72 に達しました。
スプリント2 - JavaScriptとINP:
- コード分割 React バンドル。 非重要なコンポーネントを動的インポートに移動しました。
- ヘビーなサードパーティのレビューウィジェットを軽量カスタムコンポーネントに置き換えました。
- GTM を移動して、後へ読み込みます
オンロードお問い合わせIdleコールバックリクエスト. - 結果:INPは210msに改善しました、Lighthouseのスコアは89に当たる。
スプリント3 - CLSと最終ポーランド:
- すべての製品イメージおよびiframeに明示的な幅/高さを追加しました。
- フォントを切り替える
フォント表示:オプション. - スティッキーヘッダ広告の所定のプレースホルダーを追加。
- 結果:CLSは0.02に低下しました、Lighthouseのスコアは96、LCP 1.5s、INP 140msに達しました。
アウトカム:オーガニックトラフィックは、次の四半期に35%増加しました。 変換率は12%増加し、ページがモバイルで高速に読み込まれたため、バウンス率は62%から51%に低下しました。
これは、コアWebバイタルの修正投資に対する真のリターンを実現します。 監査を通過するだけでなく、ユーザーやビジネスのためにサイトを強力にする方法です。
開発者のワークフローでLighthouse 95 をサイト化
任意のページでこのプロセスに従ってください。
- ベースライン監査:現在のLighthouseのスコア、フィールドデータ、および個々のCWVメトリックを記録します。
- 課題優先:インパクトでソートする。 LCP と TBT (total blocking time) は、パフォーマンススコアで最高級です。
- 一度に1つの修正を加えて下さい:各変更後のLighthouseを再実行します。 これは、 tangled デバッグを防止します。
- WebPageTest で検証:3Gを実行 スローテストWebページテストフィルムストリップを見て、実際のユーザー様な結果を確認します。
- 回帰のためのモニター:CI/CD パイプラインでLighthouse CI を設定し、90 以下に新しいコードがドロップされることはありません。 GitHub Actions のワークフローは、PR ごとに Lighthouse を実行し、スコアの変更でコメントを操作することをお勧めします。
- トップ10ページを繰り返します。ホームページを固定するだけではありません。 製品、カテゴリ、ランディングページをチェックします。 Googleは、ルートだけでなく、最も強力なページグループをスコアします。
一般的な間違い それは灯台からあなたを保ちます 95
同じエラーが繰り返し表示されます。
- 間違ったメトリックを最適化します。TTFBが1.5秒の場合、画像圧縮量がLCPを固定しません。 サーバを最初に固定します。
- プラグインに頼る。はい、WP Rocketまたは他のプラグインは助けることができますが、レンダリングブロックCSSを導入することが多いです。 重要なCSSのハンドコーディングは、任意のプラグインを打つ.
- 実際のモバイルデバイスではテストしません。Lighthouse モバイルシミュレーションは大丈夫ですが、実際のデバイスは熱回転とメモリの制約を明らかにします。 私はいつも実際のMoto Gの電源やiPhone SEでテストします。
- サードパーティスクリプトを無視します。Googleタグマネージャ、Facebookピクセル、および分析はトップブロッカーの1つです。 それらを積極的に取り、自発的な分析スクリプトを検討してください。
- 100を追いかける。ヒットすると95、残りの利益は余白です。 micro-optimizationの代わりに、実際のユーザー(例えば、遅いWi-Fi、古いデバイス)に影響を与えるエッジケースに焦点を合わせます。
なぜあなたはDG10エージェンシーで働くべきか
実行しましたコアWebバイタルの修正成長性の高いSaaSから大規模なeコマースまで50以上のブランドのためのプロジェクト。 当社の開発者は、フルスタックエンジニアリングと深い技術的なSEOの知識を組み合わせています。 結果は、Core Web Vitals だけでなく、Lighthouse 95 の経験を渡すサイトです。
私たちは、包括的なパフォーマンス監査、マッピングフィールドデータ、ラボデータ、および滝分析で、あらゆるエンゲージメントを開始します。 そこで、開発サイクルと整列するリメディアションスプリントを計画します。 黒い魔法はコード、構成およびrelentless測定をちょうどしません。
サイトのパフォーマンスを最上位のパーセンシーに引き上げる準備ができたら、お問い合わせお問い合わせ 自分のポートフォリオから正確な数字が表示されますので、何を期待するかを知ることができます。
よくある質問
良いSEOのためにLighthouse 100が必要ですか?
いいえ。 Lighthouseはラボプロキシです。緑色のフィールドコアWebバイタルを持つ安定した95 +は、ランクするのに十分です。 100を追いかけると、通常は数字の維持性を取引します。当社のクライアントの作業は95 +グリーンで停止し、残りの予算をコンテンツに費やします。
LCP、INP、またはCLSを最初に修正するメトリックは?
フィールドデータ(CrUX)で失敗したものが、ラボが実行されていない問題を修正しました。 LCP であるほとんどのコンテンツサイトの場合 — ヒーロー画像の最適化とレンダリングブロックスクリプト。 アプリのようなサイトでは、INP - 長いタスクと最適化されていないイベントハンドラです。 CLSは通常最も安い:広告、埋め込む、およびイメージのための予約スペース。
WordPressは実際にLighthouse 95に当たることはできますか?
はい。サーバーレベルのキャッシュ、リーンテーマ、明示的な寸法でCDNによって処理されたメディア、プラグインは四半期ごとに監査します。 スタックはペイロードの予算よりも少ない - スタックを切り替えると、WordPress-to-Next.jsマイグレーションガイドが最適化を打ち破ります。
コアWebバイタルの修正はどのくらいの時間がかかりますか?
集中的な是正スプリントは、典型的なマーケティングサイトのための2〜4週間を実行します:診断の1週間、修正の1〜2回、フィールドデータ検証の1つです。 ページ型ごとのテンプレートのエンタープライズカタログは6〜10週間かかります。
フィールドデータとラボのスコアは、同意しないのですか?
一定に — ラボは、訪問者が高速電話または恐ろしいホテルの無線LAN上にあるかもしれない間、シミュレートされた遅いデバイスを使用しています。 28日間のCrUXフィールドデータを出荷する;Lighthouse Labはデプロイ前に個々の修正を検証するためにのみ実行します。
DG10で読み続けて下さい
プロジェクトではなく、パフォーマンスは規律です。 お問い合わせ