パフォーマンス
docs サイト自体がこのキットの最大の利用者です — すべてのページが完全な CSS バンドル、ビヘイビア、ライブのコンポーネントデモを読み込みます — そのため、その Lighthouse スコアはサイトのためだけでなく、キットの ランタイムコストの実践的なヘルスチェックです。
スケジュールされた GitHub Actions ワークフロー
(perf.yml)
が、デプロイ済みサイトの代表的な 5 ページに対して Lighthouse 12 を
毎週(および workflow_dispatch によるオンデマンドで)実行します:
| ページ | セットに入っている理由 |
|---|---|
| ランディング | 第一印象。ヒーローの下にライブのショーケース。 |
| ボタン | 典型的なコンポーネントページ(Demo タブ、API テーブル)。 |
| キッチンシンク | すべてのコンポーネントを一度に描画 — ストレスページ。 |
| ブロック | 組み立てられたセクション。最も重い現実的なマークアップ。 |
| テーマビルダー | 最も JavaScript が重いページ(トークンビルドをブラウザ内で実行)。 |
実行はどのページでもいずれかのカテゴリが 90 を下回ると失敗します — PR ゲートではありません — マージがこれを待つことはなく、 赤い週次実行がリグレッションのシグナルです。レポートはワークフローの アーティファクトとして 30 日間アップロードされ、各実行はジョブサマリー にスコア表を書き込みます。
ベースライン(2026-06-12、Lighthouse 12、モバイルエミュレーション)
Section titled “ベースライン(2026-06-12、Lighthouse 12、モバイルエミュレーション)”| ページ | Perf | A11y | Best practices | SEO | LCP | CLS | TBT |
|---|---|---|---|---|---|---|---|
| ランディング | 96 | 100 | 96 | 100 | 2.2 s | 0 | 0 ms |
| ボタン | 98 | 100 | 96 | 100 | 2.0 s | 0 | 0 ms |
| キッチンシンク | 98 | 94 | 96 | 100 | 2.0 s | 0 | 0 ms |
| ブロック | 97 | 100 | 96 | 100 | 2.2 s | 0 | 0 ms |
| テーマビルダー | 98 | 93 | 96 | 92 | 2.1 s | 0 | 0 ms |
全面的にレイアウトシフトゼロ、ブロッキング時間ゼロという結果は、 キットの設計を反映しています: CSS ファーストのコンポーネント、 クライアントフレームワークなし、リスナーをインストールしたら邪魔を しないビヘイビア。100 未満の 2 つのアクセシビリティスコア(キッチン シンク、テーマビルダー)とテーマビルダーの SEO スコアは docs サイトの フォローアップとして追跡されています — それらはコンポーネントでは なく、当該ページのクロームに関するものです。
自分で実行する
Section titled “自分で実行する”npx lighthouse@12 \ https://hypermedia-components.ichimura-12c.workers.dev/hypermedia-components/ \ --only-categories=performance,accessibility,best-practices,seo \ --chrome-flags="--headless=new"キットのペイロードコスト(このサイトとは無関係にあなたのページが 払うもの)はバンドルサイズを 参照してください。