These audits validate the aspects of a Progressive Web App.
Ensuring your web app can respond when the network connection is unavailable or flaky is critical to providing your users a good experience. This is achieved through use of a Service Worker.
Has a registered Service Worker The service worker is the technology that enables your app to use many Progressive Web App features, such as offline, add to homescreen, and push notifications. Learn more.
URL responds with a 200 when offline If you're building a Progressive Web App, consider using a service worker so that your app can work offline. Learn more.
Users notice if sites and apps don't perform well. These top-level metrics capture the most important perceived performance concerns.
First meaningful paint First meaningful paint measures when the primary content of a page is visible. Learn more.
Perceptual Speed Index: 157 (target: 1,250) Speed Index shows how quickly the contents of a page are visibly populated. Learn more.
Estimated Input Latency: 23.4ms (target: 50ms) The score above is an estimate of how long your app takes to respond to user input, in milliseconds. There is a 90% probability that a user encounters this amount of latency, or less. 10% of the time a user can expect additional latency. If your score is higher than Lighthouse's target score, users may perceive your app as laggy. Learn more.
Time To Interactive (alpha) (target: 5,000ms) Time to Interactive identifies the time at which your app appears to be ready enough to interact with. Learn more.
Content scrolls at 60fps (Coming soon)
Touch input gets a response in < 150ms (Coming soon)
App is interactive without jank after the first meaningful paint (Coming soon)
Progressive enhancement means that everyone can access the basic content and functionality of a page in any browser, and those without certain browser features may receive a reduced but still functional experience.
Page contains some content when its scripts are not available Your app should display some content when JavaScript is disabled, even if it's just a warning to the user that JavaScript is required to use the app. Learn more.
Security is an important part of the web for both developers and users. Moving forward, Transport Layer Security (TLS) support will be required for many APIs.
Site is on HTTPS All sites should be protected with HTTPS, even ones that don't handle sensitive data. HTTPS prevents intruders from tampering with or passively listening in on the communications between your app and your users, and is a prerequisite for HTTP/2 and many new web platform APIs. Learn more.
Site redirects HTTP traffic to HTTPS If you've already set up HTTPS, make sure that you redirect all HTTP traffic to HTTPS. Learn more.
While users can manually add your site to their homescreen in the browser menu, the prompt (aka app install banner) will proactively prompt the user to install the app if the below requirements are met and the user has visited your site at least twice (with at least five minutes between visits).
Has a registered Service Worker The service worker is the technology that enables your app to use many Progressive Web App features, such as offline, add to homescreen, and push notifications. Learn more.
Manifest exists
Manifest contains start_url
Manifest contains icons at least 144px
Manifest contains short_name
A default splash screen will be constructed, but meeting these requirements guarantee a high-quality and customizable splash screen the user sees between tapping the home screen icon and your app’s first paint.
Manifest exists
Manifest contains name
Manifest contains background_color
Manifest contains theme_color
Manifest contains icons at least 192px
The browser address bar can be themed to match your site. A theme-color meta tag will upgrade the address bar when a user browses the site, and the manifest theme-color will apply the same theme site-wide once it's been added to homescreen.
Manifest exists
HTML has a theme-color <meta>
Manifest contains theme_color
Users increasingly experience your app on mobile devices, so it's important to ensure that the experience can adapt to smaller screens.
HTML has a viewport <meta> Add a viewport meta tag to optimize your app for mobile screens. Learn more.
Content is sized correctly for the viewport If the width of your app's content doesn't match the width of the viewport, your app might not be optimized for mobile screens. Learn more.
We've compiled some recommendations for modernizing your web app and avoiding performance pitfalls. These audits do not affect your score but are worth a look.
Offline: Site does not use Application Cache Application Cache has been deprecated by Service Workers. Consider implementing an offline solution using the Cache Storage API.
Offline: Site does not use WebSQL DB. Web SQL is deprecated. Consider using IndexedDB instead. Learn more.
Security: Site is on HTTPS All sites should be protected with HTTPS, even ones that don't handle sensitive data. HTTPS prevents intruders from tampering with or passively listening in on the communications between your app and your users, and is a prerequisite for HTTP/2 and many new web platform APIs. Learn more.
Performance: Site uses HTTP/2 for its own resources HTTP/2 offers many benefits over HTTP/1.1, including binary headers, multiplexing, and server push. Learn more.
CSS: Site does not use the old CSS flexbox The 2009 spec of Flexbox is deprecated and is 2.3x slower than the latest spec. Learn more.
JavaScript:
Site uses passive listeners to improve scrolling performance
Consider marking your touch and wheel event listeners as passive to improve your page's scroll performance. Learn more.
JavaScript: Site does not use Mutation Events in its own scripts Mutation Events are deprecated and harm performance. Consider using Mutation Observers instead. Learn more.
Performance:
Site does not use document.write()
For users on slow connections, external scripts dynamically injected via document.write() can delay page load by tens of seconds. Learn more.
Performance: Site does not use <link> that delay first paint Link elements are blocking the first paint of your page. Consider inlining critical links and deferring non-critical ones. Learn more.
Performance: Site does not use <script> in head that delays first paint Script elements are blocking the first paint of your page. Consider inlining critical scripts and deferring non-critical ones. Learn more.
Performance:
Site opens external anchors using rel="noopener"
Open new tabs using rel="noopener" to improve performance and prevent security vulnerabilities. Learn more.
UX: Page does not automatically request geolocation on page load Users are mistrustful of or confused by sites that request their location without context. Consider tying the request to user gestures instead. Learn more.
UX: Page does not automatically request notification permissions on page load Users are mistrustful of or confused by sites that request to send notifications without context. Consider tying the request to user gestures instead. Learn more.
Accessibility: Element aria-* roles are valid
Accessibility: Elements with ARIA roles have the required aria-* attributes
Accessibility: Element aria-* attributes are valid and not misspelled or non-existent.
Accessibility: Element aria-* attributes have valid values
Accessibility: Background and foreground colors have a sufficient contrast ratio
#reload-buttonAccessibility: Every image element has an alt attribute
Accessibility: Every form element has a label
Accessibility: No element has a tabindex attribute greater than 0
Manifest: Manifest's short_name won't be truncated when displayed on homescreen
Manifest: Manifest's display property is set
UX: Service worker makes use of push notifications, if appropriate (Coming soon)
UX: Tap targets are appropriately sized for touch (Coming soon)
UX: Payment forms marked up with [autocomplete] attributes (Coming soon)
UX: Login forms marked up with [autocomplete] attributes (Coming soon)
UX: Input fields use appropriate [type] attributes for custom keyboards (Coming soon)
These encapsulate your app's performance.
Performance: Critical Request Chains: 2 The Critical Request Chains below show you what resources are required for first render of this page. Improve page load by reducing the length of chains, reducing the download size of resources, or deferring the download of unnecessary resources. Learn more.
Performance: User Timing marks and measures: 0 Consider instrumenting your app with the User Timing API to create custom, real-world measurements of key user experiences. Learn more.
A list of newer features that you could be using in your app. These audits do not affect your score and are just suggestions.
JavaScript:
Site does not use Date.now() in its own scripts
Consider using performance.now() from the User Timing API instead. It provides high-precision timestamps, independent of the system clock. Learn more.
JavaScript:
Site does not use console.time() in its own scripts
Consider using performance.mark() and performance.measure() from the User Timing API instead. They provide high-precision timestamps, independent of the system clock, and are integrated in the Chrome DevTools Timeline. Learn more.