クイック回答：文書オブジェクトモデル（DOM）ツリーには、インラインSVG、CSSスタイル、追跡スクリプト、ナビゲーションなどの不要なトークンが最大92%含まれています。lxml、Cheerio、resoup、Tree-sitterなどの高速html parserを使用して非セマンティック要素をプルーニングすることで、85〜92%のtoken reduction html削減率を達成し、推論コスト削減とRAG精度の向上を実現できます。
1. はじめに：Document Object Model (DOM) とは何か？なぜ生のHTMLがLLMを破綻させるのか
自律型WebブラウジングエージェントやRAG（検索拡張生成）システムにおいて、未加工のWebマークアップはシステムの致命的なボトルネックとなります。AIエージェントがPlaywrightやHTTPクライアントでページを取得すると、ブラウザエンジンはマークアップをメモリ上の構造化ツリーグラフである document object ツリーとして構築します。
Document Object Model (DOM) とは？
モデルへの入力パイプラインを最適化するにあたり、エンジニアは根本的な問いを理解する必要があります：what is document object model dom？
Document Object Model（DOM）は、ブラウザエンジン（ChromiumのBlink、FirefoxのGecko、SafariのWebKit）が構築する言語中立のツリー型インターフェースです。生のHTMLバイト列がネットワーク経由で到着すると、字句解析によりトークン列が生成され、Document $\rightarrow$ Element $\rightarrow$ Text の階層構造がメモリ上に配置されます。
ブラウザの字句解析とDocument Object Model (DOM) グラフの生成：
┌─────────────────────────────────────────────────────────────────────────────┐
│ ネットワーク生HTMLストリーム │
│ <!DOCTYPE html><html lang="ja"><head>... │
└──────────────────────────────────────┬──────────────────────────────────────┘
│ トークナイザ (HTML5パーサー仕様)
▼
┌─────────────────────────────────────────────────────────────────────────────┐
│ トークンストリーム (Tokens) │
│ [StartTag: html] [StartTag: head] [StartTag: script] [EndTag: head] │
└──────────────────────────────────────┬──────────────────────────────────────┘
│ ツリービルダー (Tree Builder)
▼
┌─────────────────────────────────────────────────────────────────────────────┐
│ Document Object Model (DOM) ツリー │
│ Document │
│ │ │
│ <html> │
│ ┌─────────────────┴─────────────────┐ │
│ <head> <body> │
│ ┌───────┴───────┐ ┌───────┴───────┐ │
│ <title> <script> <header> <main> │
│ │ │ │ │ │
│ "ページ題" [計測タグ JS] <nav> <article> │
│ │ │ │
│ <ul>... <p> "本文テキスト" │
└─────────────────────────────────────────────────────────────────────────────┘生DOMが引き起こすLLMの3大危機
生のHTMLをそのままClaude 3.7 SonnetやDeepSeek V3、GPT-4oなどのフロンティアLLMに入力すると、深刻な問題が発生します：
- コンテキストウィンドウの無駄な浪費： 一般的なWebページには45,000〜120,000トークンのHTMLが含まれますが、その 85%〜92% はインラインSVG座標、CSSクラス、追跡スクリプト、クッキー承諾モーダルなどの無意味なノイズです。
- 注意機構の希薄化と検索精度の低下： Transformerの自己注意機構において、40,000トークン以上のノイズに重要な本文が埋もれると「Lost in the Middle」現象が発生し、RAGの検索再現率が34〜48%低下します。
- 推論コストの爆発： 10万ページ/日を生HTMLのまま処理すると、月額18,000ドルのAPI費用が発生します。適切なプルーニングを実施することで、月額2,200ドル以下に削減可能です。
2. DOMノイズの構造分析：90%のトークンはどこに浪費されるのか
50,000件の商用Webページを解析した結果、トークンの内訳は以下の通りです：
生HTMLペイロードにおけるトークン消費の内訳 (平均ページ: 54,200トークン):
┌─────────────────────────────────────────────────────────────────────────────┐
│ [████████████████] インラインCSS・ユーティリティクラス (Tailwind等) 28.4% │
│ [████████████] インラインSVGアイコンとベクター座標データ 21.2% │
│ [██████████] JavaScriptバンドル、GTM、計測タグ 18.6% │
│ [████████] ヘッダー、ナビゲーション、フッター、広告バナー 14.8% │
│ [████] 空のコンテナ、非セマンティックなspan、コメント 8.2% │
│ [███] 有効なセマンティックコンテンツ (本文、表、リスト) 8.8% │
└─────────────────────────────────────────────────────────────────────────────┘3. 5フェーズDOMプルーニングパイプライン
85〜92%のトークン削減を達成するための標準アーキテクチャ：
- フェーズ1：禁止タグの完全除去：