Lighthouse Baseline Features Audit: Complete Guide for Developers

Modern web development is no longer only about building a website that looks good and loads quickly. Today's websites use an increasing number of modern CSS capabilities, JavaScript APIs, browser features, third-party libraries and web platform technologies. While these technologies make websites more powerful, they can also introduce browser compatibility considerations.

A feature that works perfectly in one browser may have different levels of support across other browsers. This is where Baseline becomes useful.

In July 2026, the Lighthouse Baseline Features audit became available as a diagnostic in the Lighthouse Best Practices category. The audit helps developers identify web platform features detected on a page and understand their Baseline status. It can also show where a feature appears in the page source and provide links to the corresponding information on webstatus.dev.

For developers working with modern technologies such as React, Next.js, JavaScript and advanced CSS, this gives another practical way to investigate browser interoperability during development and QA.

In this guide, we'll explain what the Lighthouse Baseline Features audit is, how it works, what the different Baseline statuses mean, how to run it, and how developers should respond to compatibility findings.

Modern web development services require more than visual design and performance; browser compatibility should also be considered throughout the development process.

What Is the Lighthouse Baseline Features Audit?

The Lighthouse Baseline Features audit is a diagnostic that identifies web platform features used by a webpage and reports their current Baseline status.

Rather than manually checking browser compatibility for every CSS property, JavaScript API or web platform feature used by an application, developers can use the Lighthouse report as an initial compatibility overview.

The audit is powered by the web-features package, which provides information about web platform features and their Baseline status. The report can identify detected features and provide additional information about where they are used.

The audit is particularly useful when working with modern websites that depend on a mixture of:

• Modern CSS capabilities and layout engines
• JavaScript APIs and browser capabilities
• Web platform features and browser APIs
• Frameworks, libraries, and runtime dependencies
• Third-party scripts, analytics, and marketing widgets
• Interactive UI components and dynamic features

What Is Baseline in Web Development?

Baseline provides developers with a clearer way to understand when web platform features have reached a level of interoperability across the core browser ecosystem.

For developers, this is important because browser compatibility is not simply a question of whether a feature exists. A feature might be available in one browser but not another, newly supported across major browsers, supported across browsers but relatively new, or mature and widely interoperable.

Baseline provides a common vocabulary for understanding that situation. This makes it easier for development teams to make technology decisions based on browser interoperability rather than relying entirely on individual browser testing.

What Are the Baseline Status Categories?

The Lighthouse Baseline Features audit can identify different Baseline states. The three important categories to understand are Widely available, Newly available, and Limited availability.

1. Widely Available

A Widely available feature has had time to mature after becoming interoperable across the core browser set. These features generally represent safer choices for websites that need broad browser compatibility.

For a development team, a Widely available feature typically means there is less reason to be concerned about basic interoperability, although normal testing should still be performed. For example, a production application targeting a broad international audience will generally benefit from relying on mature web platform capabilities whenever practical.

2. Newly Available

A Newly available feature has reached interoperability across the browsers considered by Baseline but is still relatively recent.

This does not mean developers should automatically avoid it. Instead, it means developers should understand that the feature is relatively new, browser implementations have reached interoperability, project browser requirements still matter, and testing remains important. For modern applications where the browser requirements are known, a Newly available feature may be an entirely reasonable choice.

3. Limited Availability

Limited availability is the status developers should investigate most carefully. A Limited availability feature does not yet have the level of interoperability required for the broader Baseline classification.

That doesn't automatically mean 'Remove this feature.' Instead, ask: Is the feature essential? Which browsers are affected? Is it used for core functionality? Is it only a visual enhancement? Is there a fallback? Can progressive enhancement be used? Does the target audience require broader compatibility?

This turns the audit into a decision-making tool rather than a simple pass/fail checklist.

How Does the Lighthouse Baseline Features Audit Work?

When Lighthouse analyzes a page, it examines the features it can detect from the page and associated code. The audit then provides information about the detected web platform features.

Depending on the feature, the report provides the feature name, Baseline status (Widely available, Newly available, Limited availability), source location, and links to documentation on webstatus.dev.

This workflow is useful because developers don't have to stop at 'This feature has limited availability.' They can continue investigating where it came from and determine whether it actually needs to be changed.

Why Source Location & Third-Party Scripts Matter

One of the most useful aspects of the audit is that it can help developers understand where a detected feature appears in the source. In a modern application (React -> UI Library -> Animation -> Analytics -> Cookie Banner -> Third-Party Widget), features can come from first-party code, dependencies, or external scripts.

The Baseline Features audit can identify features used in third-party scripts (Google Analytics, ad tags, social widgets, chat tools) as well as features associated with active browser extensions. If you see an unexpected feature in a report, don't immediately assume that your own application code caused it—first investigate its source.

How to Run the Lighthouse Baseline Features Audit

You can run Lighthouse directly through Chrome DevTools. Lighthouse is integrated into Chrome's developer tooling and is designed to help developers audit web pages across several areas of web quality.

• Step 1: Open Your Website in Google Chrome (production URL or local dev server e.g. http://localhost:3000).
• Step 2: Open Chrome DevTools (Ctrl + Shift + I on Windows/Linux or Cmd + Option + I on macOS).
• Step 3: Open the Lighthouse panel inside Chrome DevTools.
• Step 4: Select the 'Best Practices' category option.
• Step 5: Click Generate Report and inspect the Baseline Features diagnostic findings.

How to Interpret a Baseline Finding

Imagine Lighthouse reports a feature with 'Limited availability' sourced from app/page.tsx. Don't immediately delete the feature. Instead, follow this decision tree:

Feature detected -> Identify source -> Check Baseline status -> Review browser support -> Understand your audience -> Determine whether feature is essential -> Keep / Replace / Fallback / Progressively enhance.

Should you remove every Limited availability feature? No. A Limited feature may be acceptable when it is used only for decoration, the core experience works without it, you provide a fallback, your target browsers support it, or it is progressively enhanced.

Baseline Features vs Lighthouse Performance & Core Web Vitals

Lighthouse Performance focuses on loading efficiency, rendering, Core Web Vitals, and execution speed. Baseline Features focuses on browser interoperability and web platform maturity.

A website can have an excellent Lighthouse Performance score and still use a Limited availability feature. Evaluate both separately.

Core Web Vitals + Accessibility + SEO + Security + Baseline + Browser testing together provide a much stronger technical QA process. Baseline is not a replacement for a complete technical SEO and digital marketing strategy.

Why Baseline Matters for React, Next.js & International Projects

Modern React and Next.js projects contain layered dependencies (Next.js -> React -> CSS -> Web APIs -> UI Libraries -> Third-Party Tools). Framework compile success does not guarantee identical browser support across all visitor devices.

For international websites serving visitors across Chrome, Edge, Firefox, Safari, and mobile operating systems, browser compatibility must be verified during development and QA. See how SkySeeker approaches modern web development projects in our portfolio.

A Practical Browser Compatibility Workflow & QA Checklist

For production web applications, integrate Baseline testing into your team's technical QA process:

• 1. TypeScript check & linting
• 2. Production build verification
• 3. Responsive testing (Desktop, Mobile, Tablet)
• 4. Accessibility testing & Lighthouse audit
• 5. Baseline Features review (Widely, Newly, Limited)
• 6. Critical browser testing (Chrome, Safari, Firefox, Edge)
• 7. Fallback & progressive enhancement implementation
• 8. Security review & final production deployment

Conclusion & Frequently Asked Questions

The Lighthouse Baseline Features audit gives developers a practical way to understand web platform feature usage and browser interoperability. Don't treat Baseline as a list of technologies to avoid—treat it as compatibility intelligence.

Need help building a fast, reliable and SEO-friendly website? Book a Free Consultation with SkySeeker IT Solutions.