刷新の実測値
測定日 2026-07-22
Lighthouse / 本番URL・モバイル想定・回線スロットリングあり。刷新前後とも同じ条件・同じURLで測定。各1回の計測のため誤差は含む。
- ページ総重量
- 7,875 KB → 278 KB
- 最大要素の描画時間
- 21.6 s → 2.4 s
- JS転送量（gzip）
- 228 KB → 162 KB
- Lighthouse
- Performance 75 → 96 / Accessibility 96 → 100 / Best Practices 100 / SEO 100
改善しなかった指標も載せる。First Contentful Paint は 1.1s → 1.5s、Speed Index は 2.5s → 3.8s とやや悪化した。背景に敷いていた装飾画像を撤去した結果、主役の画像が最大表示要素になり優先読み込みされるようになったことが要因と見ている（撤去前は最大表示要素の描画に21.6秒かかっていた）。
使っているもの
- CSS Scroll-driven Animations
- 入場演出をJavaScriptなしで行う。コンポジタスレッドで動くため操作の応答性に影響しない。animation-timeline 非対応のブラウザでは @supports で括り、アニメーションなしで即表示にフォールバックする。
- Popover API + CSS Anchor Positioning
- このパネル自体がその実装。トップレイヤー表示・Esc・フォーカス管理をブラウザに任せ、モーダル用のライブラリを持たない。anchor 非対応の環境では中央表示にフォールバックする。
- Tailwind CSS v4 の CSS-first 設定
- 色・タイポ・形状のトークンを @theme に一元化。tailwind.config.js は存在しない。light-dark() でライト/ダークを1箇所に書く。
- Container Queries / :has() / Subgrid
- カードは置かれた幅で表示を変える。SPEC を開いているカードの枠色は :has() で切り替えており、開閉状態をJSでクラス名に反映する処理を持たない。
- React Server Components
- 全4ページがサーバー側で完結する。クライアント側で動くのはナビゲーションとテーマ切替のみ。
あえて使わなかったもの
- View Transitions API
- ブラウザ側の対応は揃っており、当初は採用する前提で設計していた。ただしフレームワークの統合機能が experimental 扱いで、公式ドキュメントが本番利用を明確に非推奨としていたため見送った。見た目の滑らかさと引き換えに、就職・受注の窓口になるサイトで実験的な機能に依存するのは割に合わないと判断している。対応状況が変われば入れる。
- Cache Components（use cache）
- 全ページが静的に生成されるため、キャッシュ制御を足す理由がない。使えるから使う、はしない。
- アニメーションライブラリ
- 用途がフェードとホバーだけだったため、CSSに置き換えて依存を削除した。JS転送量が約25%減った。
- 日本語Webフォント
- 字数が多く、ウェイトごとに全字形を配信するため転送量が跳ね上がる。実測で初回1.6MBに達したため、システムフォントを指定する方針に切り替えた。等幅は英数字のみのため self-host している。
- スクロールスナップ
- 固定ヘッダーとの重なり順の競合があり、画面より高いセクションで下部が読めなくなる問題を抱えていたため廃止した。