01 Methodology
Core Web Vitals 改善は、
職人芸ではなく
再現可能な4フェーズのメソッドである。
Kōsokuは、計測→ボトルネック特定→実装→継続監視という四つのフェーズに分解した、観察可能な改善プロセスだけを社外に出します。勘と根性のチューニングはやりません。数字と再現可能性だけを売ります。
02 Observation Stack
観測なくして、改善なし。
Kōsoku Trace は3層で張る。
ラボの合成計測、フィールドのリアルユーザーモニタリング、Lighthouse監査を同じ時計の上で重ねます。ロックインしないオープンな取得基盤を、初回の診断から無償でお客様の環境に組み込みます。
-
L1
フィールド RUM — Real User Monitoring
Provider: Web Vitals JS / INP polyfill · 自社実装のビーコン
本上の全セッションから LCP・INP・CLS・TTFB を取得します。端末・回線・地理・流入経路で4軸に切り分け、パーセンタイル75/95の動きを週次で記録。ラボでは見えない “速い人” と “遅い人” の乖離を埋めます。
- 取得指標LCP / INP / CLS / TTFB / FCP
- サンプリング100%(コアルートのみ)
- 保管期間13ヶ月 ローリング
-
L2
合成計測 — Treo Dashboard
Provider: Treo.sh · 自社プローブを東京 / 大阪 / フランクフルトから放射
週次の合成計測でリグレッションを捕まえます。Treoのダッシュボードに、リリース前後の差分をそのまま流し込み、御社のSlackチャンネルにWebhookで通知。 “デプロイした翌日に数値が落ちた” を、誰もが見逃さない形にします。
- 観測地点東京 / 大阪 / フランクフルト
- 頻度15分間隔 · 主要URL 24本
- 差分表示±5%超でSlack alert
-
L3
監査 — Lighthouse + カスタム監査
Provider: Lighthouse CI · 独自監査セット 42本
PRごとに Lighthouse を回します。スコアそのものより、 “どの監査が通っていないか” を PR コメントに自動投稿します。認証付きページや会員ページには、ヘッドレスChromiumに社内Cookieを注入して計測する独自スクリプトを用意。
- スコア平均41 → 94(直近90案件)
- カスタム監査42本(社内OSS)
- CI統合GitHub Actions / Buildkite
03 The Four Phases
初回6〜12週で進む、四つのフェーズ。
各フェーズに、必ず “届く成果物” があります。
“改善しました” では終わりません。各フェーズで、御社のリポジトリ・ダッシュボード・Slackに具体的な納品物が残ります。下の表は、典型的な SaaSプロダクト(Next.js + Vercel + Postgres)に対する12週のスケジュール例です。
-
Phase 01
Diagnose — 計測
Week 1 – 2RUMビーコンを全主要ルートに仕込み、TreoとLighthouse CIをCIに繋ぎます。 “測っていないもの” をゼロにし、最初の1週間でベースラインを取得。翌週には、Tech Lead / PdM / SRE が同じ数字を見て会話できる状態を作ります。
- D-01 RUM ビーコン実装(Web Vitals JS, 計測イベント設計書付き)
- D-02 Treo ダッシュボード(お客様テナントで共有)
- D-03 Lighthouse CI ワークフロー + GitHubチェック
- D-04 Baseline レポート(LCP/INP/CLS の p75/p95、デバイス別)
Fig. 03-A · Lighthouse CI による PR コメント — 監査の差分がそのまま残ります -
Phase 02
Localize — ボトルネック特定
Week 3 – 4ベースライン数字を、メインスレッドの長時間タスク・ネットワークウォーターフォール・画像の重み・JSヒープのスナップショットに分解します。“どのルートで・どの場面で・誰が遅い” を相関分解し、根本原因レポートにまとめます。
- L-01 根本原因レポート(RUM + ラボ + プロファイラを統合)
- L-02 優先順位マトリクス(影響度 × 修正コスト、25項目)
- L-03 修正Planとリスク表(ロールバック条件まで記載)
- L-04 ステークホルダー向け15分レビュー(録画共有)
Fig. 03-B · Localize — フレームグラフとウォーターフォールを重ねた根本原因の特定 -
Phase 03
Implement — 実装
Week 5 – 9合意したPlanを、お客様のエンジニアと並走しながら実装します。PRのレビュー・ペアプロ・小さなリファクタまで、私たちが直接キーボードを握ります。W3C Web Performance WG に参加する2名のGDEが、実装レビューに必ず入ります。
- I-01 実装PR(マージ済み、またはレビュー待ち状態で引き継ぎ)
- I-02 コード差分レポート(Before/After のバンドルサイズ・INP寄与)
- I-03 ステージング環境での A/B 計測レポート
- I-04 本番ロールアウト手順書 + ロールバック手順
Fig. 03-C · Implement — コード差分そのものを成果物として残します -
Phase 04
Monitor — 継続監視
Week 10 – 12 以降・年間契約へリリース後に数字が落ちたら、原因を一緒に追います。SLOパネルをお客様のダッシュボードに常駐させ、四半期ごとの “性能棚卸し” を実施。年間契約に切り替わるお客様が78%です。
- M-01 SLOパネル(SLO遵守率 99.95% を目標定義)
- M-02 月次レポート(RUM + 合成 + 監査の三層サマリ)
- M-03 四半期性能棚卸し(PM・PdM・SRE 同席、90分)
- M-04 リグレッション対応チケット(無制限受付・営業時間内)
Fig. 03-D · Monitor — SLOパネルでリリース後6ヶ月まで数字を守り切ります
04 / Manifesto
「計測しない改善は、改善ではない。」
これは、共同創業以来の社是です。顧客環境の数字を取らずに「速くなりました」と言うことは、私たちの仕事ではありません。ラボで勝った数字は、現場では負ける。だからこそ、Kōsokuは計測基盤を必ず初回のSprintに組み込みます。
原田は W3C Web Performance Working Group に参加する、独立系実装会社では国内唯一のエンジニアです。
05 Proof by Numbers
メソッドが、実案件で出した数字。
このページで紹介したメソッドが、直近90案件で動かした数値です。誇張や推測ではなく、納品済みのお客様環境から集計した実数値のみを並べています。
Lighthouse Performance
41→94
直近90案件の平均改善幅(リリース直後)
LCP 中央値
4.7s→ 1.4s
フィールドRUM p75、全案件合算
SLO 遵守率
99.95%
年間契約先のSLOパネル、加重平均
CWV 合格サイト比率
94%
リリース6ヶ月後に3項目GOODを維持
- 集計対象2024-04 〜 2025-12 に納品した90案件
- 計測環境Chrome Stable · 4G 相当のラボ合成 + 実機RUM
- 第三者出典Google Web Almanac 2024 寄与データと整合
- 再現性方法論は全案件で同一・成果は案件別に開示可能
06 / Next
あなたのサイトで、
このメソッドを試しませんか。
無料パフォーマンス診断は、30分のオンラインミーティングで完結します。Treo と Lighthouse をその場で回し、主要3ルートのLCP/INP/CLSと、改善余地のある上位5項目を当日中にお返しします。
※ 診断のみ・契約前の状態でお返しします。営業電話はありません。