Does not provide fallback content when JavaScript is not available
Published on • Updated on
Progressive Enhancement is a web development strategy that ensures that your site is accessible to the largest possible audience. The core principle is that basic content and page functionality should rely on only the most fundamental web technologies. Enhanced experiences, such as sophisticated styling using CSS or interactivity using JavaScript, can be layered on top for browsers that support those technologies. But basic content and page functionality should not rely on CSS or JavaScript.
How the Lighthouse fallback content audit fails
Lighthouse flags pages that don't contain some content when JavaScript is unavailable:
Lighthouse disables JavaScript on the page and then inspects the page's HTML. If the HTML is empty, the audit fails.
In the Lighthouse report UI the full PWA badge is given when you pass all of the audits in all of the PWA subcategories (Fast and reliable, Installable, and PWA optimized).
How to ensure your page has content without JavaScript
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 Smashing Magazine's 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.
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.
Resources
Updated on • Improve article