LLM Token Optimization — Cut Web Page Token Costs by 60-90%

Extract clean markdown, JSON DOM, or targeted elements from web pages before feeding them to your LLM. Cut input token costs from \$900/month to \$60/month at scale.

Vitalii Holben Updated

Feeding a raw web page to an LLM is expensive. A typical news article — maybe 2,000 words of actual content — arrives wrapped in 15,000-40,000 tokens of HTML: navigation menus, footer links, ad scripts, tracking pixels, cookie consent markup, SVG icons inlined as base64. The LLM processes all of it. You pay for all of it. And most of it adds nothing to the answer you're trying to get.

screenshotrun's Page Analyze endpoints solve this by extracting structured data from web pages before the content reaches your LLM. Instead of passing raw HTML, you pass clean markdown, a JSON DOM tree, or targeted element data — cutting token consumption by 60-90% depending on the page and extraction method. I'm behind screenshotrun, so weigh that accordingly. The token math below uses standard tokenizer counts you can verify with tiktoken or Anthropic's token counter.

The token cost of raw HTML

Take a standard blog post page. The visible content might be 800 words — roughly 1,100 tokens. But the full HTML source? That same page easily hits 25,000 tokens once you include the <head> with meta tags, Open Graph markup, JSON-LD structured data, CSS class names on every element, script tags, navigation with 40+ links, a footer with another 30 links, cookie banner markup, and whatever analytics the site embeds.

Your LLM doesn't need any of that to answer "what are the key points of this article?" But with raw HTML, it ingests all 25,000 tokens. At Claude's pricing ($3 per million input tokens on Sonnet), that single page costs $0.000075. Sounds trivial — until you're processing 10,000 pages per day for a research pipeline or RAG system. That's $0.75 daily just on input tokens, for content that's 95% markup noise.

E-commerce product pages are worse. A product listing on a major retailer might contain 50,000-80,000 tokens of raw HTML — product recommendations, related items, review widgets, image carousels with srcset attributes, structured data in multiple formats. The actual product information you want (name, price, description, specs) might be 200 tokens.

Three extraction approaches

screenshotrun's Page Analyze API offers three ways to strip a web page down to what matters for your LLM.

Website to Markdown

The website-to-markdown endpoint renders the page in a real browser (handling JavaScript, lazy loading, client-side routing) then converts the visible content to clean Markdown. Navigation, ads, scripts, tracking — all stripped. What remains is the content a human would actually read.

GET https://api.screenshotrun.com/v1/screenshots/capture?url=https://example.com/blog/post&render_markdown=true
Authorization: Bearer YOUR_API_KEY

# Response: clean markdown of the page content
# ~1,200 tokens instead of ~25,000 raw HTML tokens

For content-heavy pages (articles, documentation, blog posts), markdown conversion typically reduces tokens by 85-95%. The LLM receives the text it actually needs to reason about — headings, paragraphs, lists, links — without the rendering machinery surrounding it.

DOM to JSON

The DOM-to-JSON endpoint converts the rendered page into a structured JSON tree. Every visible element gets a node with its tag, text content, attributes, bounding box coordinates. This is more verbose than markdown but preserves spatial layout information — useful when your LLM needs to understand where elements appear on the page, not just what text they contain.

GET https://api.screenshotrun.com/v1/analyze?url=https://example.com/products/widget&output=dom_json
Authorization: Bearer YOUR_API_KEY

# Response: JSON tree of visible DOM elements
# ~3,000-5,000 tokens vs ~50,000 raw HTML tokens

Token reduction with DOM-to-JSON runs 70-90%. Less aggressive than markdown because the JSON structure adds overhead — but you keep layout context that plain text discards. If your LLM agent needs to click a button, fill a form, understand visual hierarchy — the JSON structure gives it the coordinates to work with.

Targeted element extraction

Sometimes you don't need the whole page. The extract-clickable-elements and element-coordinates endpoints pull specific element types — links, buttons, forms, images — with their positions and attributes. Feed just that subset to your LLM.

GET https://api.screenshotrun.com/v1/analyze?url=https://example.com&output=clickable_elements
Authorization: Bearer YOUR_API_KEY

# Response: array of clickable elements with coordinates
# ~500-1,500 tokens for navigation-relevant data only

For AI agents that browse the web — clicking links, filling forms, extracting specific data — targeted extraction cuts tokens to a fraction of what even markdown requires. You're not paying to process a 2,000-word article when your agent just needs to know which button to click.

Token reduction by page type

Page type Raw HTML tokens Markdown tokens DOM JSON tokens Reduction
Blog post / article ~25,000 ~1,200 ~4,000 84-95%
E-commerce product ~60,000 ~800 ~5,000 92-99%
Documentation page ~20,000 ~2,500 ~6,000 70-88%
News homepage ~80,000 ~3,000 ~8,000 90-96%
SaaS landing page ~35,000 ~1,500 ~4,500 87-96%
Login/form page ~15,000 ~300 ~1,200 92-98%

These numbers come from tokenizing real pages with tiktoken (cl100k_base encoding, used by GPT-4o) and comparing raw HTML source against screenshotrun's extracted output. Your actual reduction depends on how bloated the source HTML is — React/Next.js sites with hydration scripts tend to produce the highest raw token counts.

The cost math at scale

LLM pricing makes this optimization matter fast. Current rates for popular models:

Model Input cost per 1M tokens
Claude Sonnet 4 $3
Claude Opus 4 $15
GPT-4o $2.50
GPT-4o mini $0.15

Processing 10,000 web pages per day through Claude Sonnet with raw HTML (average 30,000 tokens each):

  • Raw HTML: 300M tokens/day × $3/1M = $900/month
  • After markdown extraction: ~20M tokens/day × $3/1M = $60/month
  • Savings: $840/month on LLM input costs alone

With Opus 4 ($15/1M), the same workload costs $4,500/month raw vs $300/month with markdown extraction. The screenshotrun API cost to extract those 10,000 pages is $99/month on the Business plan. The extraction pays for itself within the first day of LLM savings.

Better answers from cleaner input

Token reduction isn't just about cost. LLMs perform measurably better when you strip the noise.

Navigation menus, footer links, cookie banners, sidebar widgets — these aren't just wasted tokens. They're actively distracting. When you ask an LLM to summarize an article and the input includes 200 navigation links alongside the article text, the model has to filter signal from noise. It mostly succeeds, but not always. Extracted markdown eliminates the ambiguity entirely — the LLM receives only the content it needs to reason about.

Context window limits matter too. Claude Sonnet accepts 200K tokens, but performance degrades on tasks that require reasoning across very long inputs. A RAG pipeline that fetches 20 web pages to answer a question can easily fill 500,000+ tokens of raw HTML. After markdown extraction, those same 20 pages fit in ~30,000 tokens — well within the context window, with room for system prompts, conversation history, instructions.

Response quality improves because the signal-to-noise ratio improves. Fewer irrelevant tokens means more of the context window dedicated to actual content.

Integration patterns

The extraction fits into standard LLM pipelines with minimal code changes.

# Before: fetching raw HTML and passing to LLM
import requests

html = requests.get("https://example.com/article").text
# html is ~25,000 tokens of markup + content

response = anthropic.messages.create(
    model="claude-sonnet-4-20250514",
    messages=[{"role": "user", "content": f"Summarize this page:\n{html}"}]
)

# After: extracting markdown first, then passing to LLM
markdown = requests.get(
    "https://api.screenshotrun.com/v1/screenshots/capture",
    params={"url": "https://example.com/article", "render_markdown": "true"},
    headers={"Authorization": "Bearer YOUR_API_KEY"}
).text
# markdown is ~1,200 tokens of clean content

response = anthropic.messages.create(
    model="claude-sonnet-4-20250514",
    messages=[{"role": "user", "content": f"Summarize this page:\n{markdown}"}]
)

The change is one HTTP call before the LLM call. Your prompt stays the same. The LLM gets cleaner input, processes it faster (fewer tokens = lower latency). You pay less. For AI agent frameworks that browse multiple pages per task, wrapping every page fetch through the extraction API compounds savings across every step.

When raw HTML still makes sense

Not every use case benefits from extraction. If your LLM needs to analyze the HTML structure itself — auditing SEO tags, checking accessibility attributes, evaluating meta descriptions — stripping the HTML defeats the purpose. The DOM-to-JSON endpoint preserves tag structure while still removing scripts and non-visible content, which works for some HTML-analysis tasks. But if you genuinely need the raw source, extraction is the wrong tool.

Pages with very little markup overhead (plain text APIs, minimal HTML documents) won't show meaningful token savings either. The optimization matters most on modern, JavaScript-heavy websites where the HTML-to-content ratio is 10:1 or worse.

Choosing an extraction method

Match the method to what your LLM needs to do with the content:

Markdown works best for summarization, Q&A, content analysis, RAG retrieval — lowest token count with highest content fidelity. Default to this unless you have a reason not to. DOM JSON fits when layout matters: AI agents that need spatial awareness, visual QA tools checking element positions, accessibility audits. More tokens, but the structure carries meaning. Element extraction (clickable elements, form fields, links only) gives AI agents the minimum data to take action on a page — no content, just interaction targets. Raw HTML is only worth passing when the markup itself is the content: SEO audits, accessibility checks, HTML validation.

For most LLM workflows — chatbots answering questions about web content, research pipelines processing articles, agents summarizing competitor pages — markdown extraction gives the best token-to-quality ratio. Start there, switch to DOM JSON if your task needs spatial context.

The Page Analyze API documentation covers all extraction endpoints with parameter details. For AI agent workflows specifically, the structured page data for AI agents use case shows how to wire extraction into agent loops.

FAQ#

Token reduction depends on the page type and extraction method. Markdown extraction typically cuts tokens by 85-95% on content-heavy pages like articles and blog posts. DOM-to-JSON reduces tokens by 70-90% while preserving layout information. E-commerce pages with heavy markup see the largest reductions — from 60,000 raw HTML tokens down to 800 markdown tokens in some cases.

For most use cases — summarization, Q&A, RAG retrieval, content analysis — markdown extraction gives the best token-to-quality ratio. Use DOM-to-JSON when your LLM needs spatial awareness (element positions, visual layout). Use targeted element extraction when your AI agent only needs interaction targets like buttons and links, not page content.

Extraction generally improves response quality. Raw HTML includes navigation menus, footer links, ad markup, and tracking scripts that dilute the actual content. When you strip that noise, the LLM focuses entirely on relevant content. This is especially important for RAG pipelines where multiple pages need to fit within the context window.

The API renders pages in a real browser engine, executing JavaScript, handling lazy loading, client-side routing, and dynamic content. The extraction happens after the page fully renders — so you get the same content a visitor would see, not the raw server response with empty JavaScript placeholders.

At 10,000 pages per day through Claude Sonnet, raw HTML costs roughly $900/month in input tokens. After markdown extraction, the same workload costs about $60/month. The screenshotrun API to extract those pages runs $99/month on the Business plan — so the extraction cost is recovered within the first day of LLM token savings.

Written by

Vitalii Holben

Co-founder and CEO of ScreenshotRun. Full-stack developer building screenshot API tools that help developers capture, automate, and monitor web pages at scale. Based in Europe, shipping code since 201...

Screenshot API in a few clicks

Free plan includes 200 screenshots every month. No credit card required.

Sign up → copy your key → make your first call