VercelがAIエージェント向けにWebページ容量を500KB→2KBに削減した方法
(vercel.com)中核となる問題認識
- AIエージェントは人間と異なり、CSS、クライアントJS、画像などをまったく必要としない
- こうした要素はトークンを浪費するだけで、実際に有用な情報はほとんど提供しない
- エージェントに必要なのは、クリーンで構造化されたテキストだけ
Vercelの解決策
- コンテンツネゴシエーション(Content Negotiation)というHTTPメカニズムを活用
- 同一URLでクライアントのリクエストに応じて異なるフォーマットを返す
- 人間(ブラウザ) → 完全なHTML + CSS + JSの体験
- AIエージェント → Markdownを提供
- 別サイトやコンテンツの重複なしに実装
動作方式 (Acceptヘッダー基盤)
- エージェントが送るヘッダー例
Accept: text/markdown, text/html, */*- → markdownを最優先で希望していることを明示
- VercelミドルウェアがAcceptヘッダーを検査
- markdown優先時 → Next.jsルートハンドラーに渡す
- Contentful rich-textコンテンツをmarkdownに変換して応答
- コードブロック: シンタックスハイライトマーカーを維持
- タイトル: 階層構造を保持
- リンク: そのまま維持
効果と数値
- 一般的なブログ記事
- HTML版: 約500KB
- Markdown版: 約2KB
- 容量削減率: 99.6%
- 利点
- トークン予算の効率を最大化 → マークアップではなく実際の情報に集中
- リクエストあたりでより多くのコンテンツを処理可能
- より高速に動作し、トークン上限にも達しにくい
技術的な保守
- Next.js 16のremote cache + 共有slugを活用
- Contentfulのコンテンツ更新時、HTML版とmarkdown版を同時に再更新 → 同期を維持
エージェントの探索を支援
- markdown形式の専用sitemapを提供
- 含まれる情報: 公開日、コンテンツ種別、HTML/Markdown各版への直接リンクなど
- エージェントが利用可能な全コンテンツの地図を把握 → 最適なフォーマットを選びやすい
結論的な意味
- 人間とAIのWeb消費方式が根本的に異なることを認める
- 各クライアントに最適化された体験を提供する実用的な事例
- 人間とAIの両方のためのWebに向けた重要な出発点
2件のコメント
こういうのは見習うとよさそうです。
将来のWebは、UI/UXのない形になるかもしれませんね..