Contains some content when JavaScript is not available

Progressive Enhancement is a web development strategy that ensures that your site is accessible to the largest possible audience. The most common definition of progressive enhancement is as follows:

Basic content and page functionality should rely on only the most fundamental web technologies, to ensure that the page is usable across all browsing conditions. Enhanced experiences, such as sophisticated styling using CSS, or interactivity using JavaScript, can be layered on top for the browsers that support those technologies. But basic content and page functionality should not rely on CSS or JavaScript.

Lighthouse flags pages that don't contain some content when JavaScript is unavailable:

Lighthouse audit showing page doesn't contain some content when JS is unavailable
Page doesn't contain some content when JS is unavailable.

How this audit fails

Lighthouse disables JavaScript on the page and then inspects the page's HTML. If the HTML is empty then the audit fails. If the HTML is not empty then the audit passes.

Each PWA audit is weighted equally in the Lighthouse PWA Score, except for three manual audits: Site works cross-browser, Page transitions don't feel like they block on the network, and Each page has a URL. Learn more in the Lighthouse Scoring Guide.


Progressive enhancement is a large and contentious topic. One camp says that, in order to adhere to the strategy of progressive enhancement, pages should be layered so that basic content and page functionality only require HTML. See Progressive Enhancement: What It Is, And How To Use It for an example of this approach.

Another camp believes that this strict approach is unfeasible or unnecessary for many modern, large-scale web applications and suggests using inline critical path CSS in the document <head> for absolutely critical page styles. See Critical Rendering Path for more on this approach.

Given these considerations, this Lighthouse audit performs a simple check to ensure that your page isn't blank when JavaScript is disabled. How strictly your app adheres to progressive enhancement is a topic of debate, but there's widespread agreement that all pages should display at least some information when JavaScript is disabled, even if the content is just an alert to the user that JavaScript is required to use the page.

For pages that absolutely must rely on JavaScript, one approach is to use a <noscript> element to alert the user that JavaScript is required for the page. This is better than a blank page, because the blank page leaves users uncertain about whether there's a problem with the page, their browsers, or their computers.

To see how your site looks and performs when JavaScript is disabled, use Chrome DevTools' Disable JavaScript feature.

More information

Page doesn't contain content when JS unavailable audit source

Last updated: Improve article