Stop burning tokens on DOM noise: a Playwright MCP optimizer layer

Dev.to / 4/17/2026

📰 NewsDeveloper Stack & InfrastructureSignals & Early TrendsTools & Practical Usage

Key Points

  • The article highlights that Playwright MCP browser automation can waste massive model context by sending the entire DOM tree on every navigation, causing token blowups for simple “browse and act” tasks.
  • It introduces an open-source Playwright MCP optimizer layer that sits between the model and Playwright to forward only relevant DOM parts, reducing unnecessary markup.
  • The optimizer applies three main filter rules: prioritizing interactive elements, grouping content semantically by page regions (navigation/main/form/footer), and skipping task-irrelevant sections like sidebars and ad banners.
  • In measured “cart → checkout” tests with GPT-4, token usage dropped significantly, and end-to-end round-trip latency improved as a secondary benefit.
  • The author positions the optimizer as a cost- and speed-friendly option for automation agents, while recommending vanilla Playwright MCP when full DOM accuracy is required for QA or validation-heavy workflows.

If you've used Playwright MCP for AI browser automation, you know the pain. Every page navigation dumps the full DOM tree into the model context. Simple flows like "order 5 items from this shop" can burn hundreds of thousands of tokens on navbar/sidebar/footer noise that has nothing to do with the task.

We built a small MCP layer that sits in front of Playwright and only forwards the relevant bits. Open sourced it.

📚 Full writeup: https://treesoop.com/blog/playwright-mcp-optimizer-token-saving-2026
🔧 GitHub: https://github.com/treesoop/claude-native-plugin

The problem

Playwright MCP serializes the full DOM:

AI ← {ENTIRE_DOM_JSON} ← Playwright MCP

This works for QA where you need to see everything. For "browse and take an action" it's 5-10× the tokens you actually need.

The optimizer

AI ← {relevant_only} ← Optimizer ← {full DOM} ← Playwright MCP

Three filter rules:

  1. Interactive elements first: button, input, a — not decorative div/span
  2. Semantic grouping: navigation / main / form / footer regions, so the model knows where it is
  3. Task-aware skipping: if the current task is "checkout", skip sidebar recommendations and ad banners

Measured impact

On a "cart → checkout" flow with GPT-4: tokens dropped substantially, and round-trip latency improved as a side effect (smaller payloads → faster agent decisions).

Not a silver bullet. For QA tasks where you need full DOM accuracy, use vanilla Playwright MCP. For general browsing / automation agents, this is the cheaper + faster path.

Tool comparison (our testing)

Tool Strength Use for
playwright-mcp (default) Full DOM accuracy QA, complex validation
playwright-optimizer (this) Token efficiency Automation agents, browsing
vercel-browser-agent Code generation speed Simple browsing
claude-chrome-extension Uses logged-in session Tasks needing auth state

We use all four for different jobs.

Install

npm install -g @treesoop/playwright-optimizer
claude mcp add playwright-opt -- playwright-optimizer
  • MIT licensed
  • Configurable per-site presets
  • --log-tokens flag for measurement

More OSS from TreeSoop: ai-news-mcp, hwp-mcp, whisper_transcription, claude2codex

Blog: https://treesoop.com/blog