Fixing Document.Write Issues for Faster Rendering

document.write() is a relic from the 1990s web that still haunts modern sites — usually injected by third-party scripts. Chrome has started blocking it in some cases, and Lighthouse flags it as a performance problem. Here's why it's harmful and how to eliminate it.

Why document.write() Is Harmful

When the browser encounters document.write():

1. It pauses HTML parsing — the parser can't continue until the write completes
2. It can inject additional blocking resources — scripts inserted via document.write() block rendering too
3. On slow connections, Chrome blocks it entirely — showing broken pages instead

The Performance Impact

Normal script loading:
HTML Parse → Discover script → Download (async) → Execute → Continue parsing

document.write() script loading:
HTML Parse → STOP → Execute write → Discover NEW script → Download (blocking) → Execute → Resume

This can add 2-5 seconds to page load on mobile connections.

Detecting document.write()

Lighthouse

Lighthouse flags "Uses document.write()" in the diagnostics section.

Chrome DevTools Console

Chrome shows a warning:

[Violation] Avoid using document.write().

Search Your Codebase

grep -r "document.write" --include="*.js" --include="*.html" .

Common Sources

Most document.write() usage comes from third-party scripts:

• Old analytics snippets (pre-2015 Google Analytics)
• Legacy ad servers
• Old A/B testing scripts
• Some chat widgets
• Legacy comment systems

How to Replace document.write()

Pattern 1: Inserting a script tag

// BAD: document.write
document.write('<script src="https://example.com/widget.js"><\/script>');

// GOOD: DOM API
const script = document.createElement('script');
script.src = 'https://example.com/widget.js';
script.async = true;
document.head.appendChild(script);

Pattern 2: Inserting HTML content

// BAD: document.write
document.write('<div class="banner">Hello</div>');

// GOOD: DOM API
const div = document.createElement('div');
div.className = 'banner';
div.textContent = 'Hello';
document.getElementById('banner-container').appendChild(div);

Pattern 3: Inserting a stylesheet

// BAD: document.write
document.write('<link rel="stylesheet" href="/styles.css">');

// GOOD: DOM API
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = '/styles.css';
document.head.appendChild(link);

Dealing with Third-Party Scripts

If a third-party script uses document.write() internally:

1. Check for an updated version — most vendors have modernized their snippets
2. Load it asynchronously — add async to the script tag
3. Use Google Tag Manager — GTM can load scripts without document.write()
4. Replace the vendor — if they still use document.write(), they likely have other outdated practices too
5. Use a proxy script — intercept and rewrite the call:

// Override document.write to use safe insertion
const originalWrite = document.write;
document.write = function(html) {
  const container = document.createElement('div');
  container.innerHTML = html;
  document.body.appendChild(container);
};

Verify the Fix

After removing document.write():

• Run Lighthouse — the diagnostic should disappear
• Test on slow connections (Chrome DevTools → Network → Slow 3G)
• Check that third-party features still work

Monitor your rendering performance →