Skip to content

01 Methodology

Core Web Vitals 改善は、
職人芸ではなく
再現可能な4フェーズのメソッドである。

Kōsokuは、計測→ボトルネック特定→実装→継続監視という四つのフェーズに分解した、観察可能な改善プロセスだけを社外に出します。勘と根性のチューニングはやりません。数字と再現可能性だけを売ります。

  • 初回エンゲージメント6〜12週
  • 改善後の保守年間契約 78%
  • 提供リージョン東京・目黒

02 Observation Stack

観測なくして、改善なし。
Kōsoku Trace は3層で張る。

ラボの合成計測、フィールドのリアルユーザーモニタリング、Lighthouse監査を同じ時計の上で重ねます。ロックインしないオープンな取得基盤を、初回の診断から無償でお客様の環境に組み込みます。

  1. 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ヶ月 ローリング
  2. L2

    合成計測 — Treo Dashboard

    Provider: Treo.sh · 自社プローブを東京 / 大阪 / フランクフルトから放射

    週次の合成計測でリグレッションを捕まえます。Treoのダッシュボードに、リリース前後の差分をそのまま流し込み、御社のSlackチャンネルにWebhookで通知。 “デプロイした翌日に数値が落ちた” を、誰もが見逃さない形にします。

    • 観測地点東京 / 大阪 / フランクフルト
    • 頻度15分間隔 · 主要URL 24本
    • 差分表示±5%超でSlack alert
  3. L3

    監査 — Lighthouse + カスタム監査

    Provider: Lighthouse CI · 独自監査セット 42本

    PRごとに Lighthouse を回します。スコアそのものより、 “どの監査が通っていないか” を PR コメントに自動投稿します。認証付きページや会員ページには、ヘッドレスChromiumに社内Cookieを注入して計測する独自スクリプトを用意。

    • スコア平均41 → 94(直近90案件)
    • カスタム監査42本(社内OSS)
    • CI統合GitHub Actions / Buildkite
Kōsoku Trace の3層スタックを示すダッシュボード画面のキャプチャ
Fig. 02 · Kōsoku Trace — RUM / 合成計測 / Lighthouse を縦に重ねた観測パネルの例

03 The Four Phases

初回6〜12週で進む、四つのフェーズ。
各フェーズに、必ず “届く成果物” があります。

“改善しました” では終わりません。各フェーズで、御社のリポジトリ・ダッシュボード・Slackに具体的な納品物が残ります。下の表は、典型的な SaaSプロダクト(Next.js + Vercel + Postgres)に対する12週のスケジュール例です。

  1. Phase 01

    Diagnose — 計測

    Week 1 – 2

    RUMビーコンを全主要ルートに仕込み、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、デバイス別)
    Diagnoseフェーズで得られる Lighthouse CI の PR コメント例
    Fig. 03-A · Lighthouse CI による PR コメント — 監査の差分がそのまま残ります
  2. Phase 02

    Localize — ボトルネック特定

    Week 3 – 4

    ベースライン数字を、メインスレッドの長時間タスク・ネットワークウォーターフォール・画像の重み・JSヒープのスナップショットに分解します。“どのルートで・どの場面で・誰が遅い” を相関分解し、根本原因レポートにまとめます。

    • L-01 根本原因レポート(RUM + ラボ + プロファイラを統合)
    • L-02 優先順位マトリクス(影響度 × 修正コスト、25項目)
    • L-03 修正Planとリスク表(ロールバック条件まで記載)
    • L-04 ステークホルダー向け15分レビュー(録画共有)
    Localizeフェーズの flamegraph と waterfall の比較例
    Fig. 03-B · Localize — フレームグラフとウォーターフォールを重ねた根本原因の特定
  3. 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 本番ロールアウト手順書 + ロールバック手順
    Implementフェーズで残されるコード差分の例
    Fig. 03-C · Implement — コード差分そのものを成果物として残します
  4. 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 リグレッション対応チケット(無制限受付・営業時間内)
    Monitorフェーズで運用される SLO パネルの例
    Fig. 03-D · Monitor — SLOパネルでリリース後6ヶ月まで数字を守り切ります

04 / Manifesto

「計測しない改善は、改善ではない。」

これは、共同創業以来の社是です。顧客環境の数字を取らずに「速くなりました」と言うことは、私たちの仕事ではありません。ラボで勝った数字は、現場では負ける。だからこそ、Kōsokuは計測基盤を必ず初回のSprintに組み込みます。

原田 知典

共同創業者 / CTO · Google Developers Expert (Web Performance)

原田は W3C Web Performance Working Group に参加する、独立系実装会社では国内唯一のエンジニアです。

05 Proof by Numbers

メソッドが、実案件で出した数字。

このページで紹介したメソッドが、直近90案件で動かした数値です。誇張や推測ではなく、納品済みのお客様環境から集計した実数値のみを並べています。

Lighthouse Performance

4194

直近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項目を当日中にお返しします。

※ 診断のみ・契約前の状態でお返しします。営業電話はありません。