Your code uses browser APIs that are scheduled for removal. When browsers finally drop support, your site will break—fix these now while you still can.

What's Happening

Browser vendors deprecate APIs when better alternatives exist or when the API poses security/privacy risks. Deprecated APIs continue working for a grace period (months to years), but eventually get removed entirely. Lighthouse catches these early by monitoring Chrome's deprecation warnings.

When your JavaScript calls a deprecated API, Chrome logs a warning and reports it through the DevTools Protocol. Lighthouse collects these warnings and fails this audit if any are found. Common culprits include legacy DOM methods, outdated security APIs, and obsolete media features.

Diagnose

Check DevTools Console

1. Open DevTools (F12) and go to the Console tab
2. Look for yellow warnings mentioning "deprecated"
3. Click the warning to see the source location

Typical deprecation warnings look like:

[Deprecation] 'window.webkitStorageInfo' is deprecated. Please use 'navigator.storage' instead.
[Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated.
[Deprecation] 'document.domain' setter is deprecated.

Run Lighthouse

The Lighthouse "Uses deprecated APIs" audit lists each deprecation with:

• The deprecated API or feature
• The source file and line number
• Links to documentation about the replacement

Search Your Codebase

Once you know which APIs are flagged, search your code:

grep -r "webkitStorageInfo" --include="*.js" src/
grep -r "document.domain" --include="*.js" src/

Fix

1. Identify the Modern Replacement

Each deprecated API has a recommended replacement. Here are common deprecations and their fixes:

document.domain setter:

// Deprecated: relaxing same-origin policy
document.domain = 'example.com'

// Modern: use postMessage for cross-origin communication
window.parent.postMessage(data, 'https://example.com')

Synchronous XMLHttpRequest:

// Deprecated: blocks main thread
const xhr = new XMLHttpRequest()
xhr.open('GET', url, false) // sync = false is deprecated

// Modern: use async fetch or XHR
const response = await fetch(url)
const data = await response.json()

webkitStorageInfo:

// Deprecated: webkit-prefixed storage API
window.webkitStorageInfo.queryUsageAndQuota(...)

// Modern: Storage API
const estimate = await navigator.storage.estimate()
console.log(`Using ${estimate.usage} of ${estimate.quota} bytes`)

Event.path:

// Deprecated: non-standard event property
const path = event.path

// Modern: use composedPath()
const path = event.composedPath()

KeyboardEvent.keyCode:

// Deprecated: numeric key codes
if (event.keyCode === 13) { /* Enter */ }

// Modern: use key property
if (event.key === 'Enter') { /* Enter */ }

2. Handle Third-Party Dependencies

If deprecation warnings come from third-party scripts:

// Check if the issue is from node_modules
// Lighthouse shows source file paths in the audit

// Option 1: Update the dependency
npm update problematic-package

// Option 2: Find an alternative package
npm uninstall old-package
npm install modern-alternative

// Option 3: If it's a CDN script, check for newer versions
// <script src="https://cdn.example.com/lib@latest/lib.min.js">

3. Polyfill During Transition

If you can't immediately replace a deprecated API, polyfill it to suppress warnings while you plan the migration:

// Temporary polyfill for Event.path
if (!Event.prototype.composedPath) {
  Event.prototype.composedPath = function () {
    const path = []
    let el = this.target
    while (el) {
      path.push(el)
      el = el.parentElement
    }
    path.push(document, window)
    return path
  }
}

Note: Polyfills mask the problem but don't solve it. Plan for proper migration.

Verify the Fix

1. Clear browser cache and reload the page
2. Open DevTools Console and confirm no deprecation warnings appear
3. Run Lighthouse and verify "Avoids deprecated APIs" audit passes
4. Test affected functionality still works with the new APIs
5. If you updated dependencies, run your test suite

Common Mistakes

• Ignoring third-party scripts — Deprecation warnings from analytics, widgets, or ads still fail the audit. Pressure vendors to update or find alternatives.
• Only fixing in development — Production bundles may include different code paths. Test with production builds.
• Using deprecated APIs in feature detection — Even checking if (window.webkitStorageInfo) can trigger deprecation warnings in some browsers.
• Assuming deprecation means broken — Deprecated APIs still work, which is why they're easy to ignore. The danger is they'll break suddenly in a future browser update.
• Not checking polyfill sources — Some polyfill libraries themselves use deprecated APIs. Audit your dependencies.

Test Your Entire Site

Different pages may load different scripts, each potentially using deprecated APIs. A full site scan catches deprecations across all your JavaScript.

Related

• All Best Practices Issues
• MDN Deprecated Features