Estimated Input Latency: 68.8ms(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.

81

Time To Interactive (alpha): 4051.6ms(target: 5,000ms)
Time to Interactive identifies the time at which your app appears to be ready enough to interact with. Learn more.

64

Site is progressively enhanced

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.

Contains some content when JavaScript is 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.

Pass

Network connection is secure

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.

Uses 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.

Pass

Redirects HTTP traffic to HTTPS
If you've already set up HTTPS, make sure that you redirect all HTTP traffic to HTTPS. Learn more.

Fail

User can be prompted to Add to Homescreen

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).

Registers a 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.

Pass

Manifest exists
The web app manifest is the technology that enables users to add your web app to their homescreen. Learn more.

Pass

Manifest contains start_url
Add a start_url to instruct the browser to launch a specific URL whenever your app is launched from a homescreen. Learn more.

Manifest contains short_name
The short_name property is a requirement for Add To Homescreen. Learn more.

Pass

Installed web app will launch with custom splash screen

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
The web app manifest is the technology that enables users to add your web app to their homescreen. Learn more.

Pass

Manifest contains name
The name property identifies your app and is required. Learn more.

Pass

Manifest contains background_color
When your app launches from a user's homescreen, the browser uses background_color to paint the background of the browser while your app loads for a smooth transition experience. Learn more.

Pass

Manifest contains theme_color
Add a theme_color to set the color of the browser's address bar. Learn more.

Pass

Manifest contains icons at least 192px: found sizes: 192x192, 384x384
A 192px icon ensures that your app's icon displays well on the homescreens of the largest mobile devices. Learn more.

Pass

Address bar matches brand colors

The browser address bar can be themed to match your site. A theme-colormeta 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
The web app manifest is the technology that enables users to add your web app to their homescreen. Learn more.

Pass

Has a <meta name="theme-color"> tag: #222222

Pass

Manifest contains theme_color
Add a theme_color to set the color of the browser's address bar. Learn more.

Pass

Design is mobile-friendly

Users increasingly experience your app on mobile devices, so it's important to ensure that the experience can adapt to smaller screens.

Has a <meta name="viewport"> tag with width or initial-scale
Add a viewport meta tag to optimize your app for mobile screens. Learn more.

Pass

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.

Pass

Best Practices

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.

Using modern protocols

Uses 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.

Pass

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.

Pass

Using modern CSS features

Avoids old CSS flexbox
The 2009 spec of Flexbox is deprecated and is 2.3x slower than the latest spec. Learn more.

Avoiding APIs that harm the user experience

Opens external anchors using rel="noopener"
Open new tabs using rel="noopener" to improve performance and prevent security vulnerabilities. Learn more.

Pass

Avoids requesting the geolocation permission 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.

Pass

Avoids requesting the notification permission 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.

Pass

Avoiding deprecated APIs and browser interventions

Avoids deprecated APIs: 1 warning found
Deprecated APIs will eventually be removed from the browser. Learn more.

Background and foreground colors have a sufficient contrast ratio
Low-contrast text is difficult or impossible for many users to read. Learn more.

Pass

Every image element has an alt attribute
Screen reader users rely on alt text to provide descriptions of images. It's also used as fallback content when an image fails to load. Learn more.

Pass

Every form element has a label
Labels ensure that form controls are announced properly by assistive technologies, like screen readers. Learn more.

Pass

No element has a tabindex attribute greater than 0
A value greater than 0 implies an explicit navigation ordering. Although technically valid, this often creates frustrating experiences for users who rely on assistive technologies. Learn more.

Pass

Other

Manifest's short_name won't be truncated when displayed on homescreen
Make your app's short_name less than 12 characters to ensure that it's not truncated on homescreens. Learn more.

Pass

Manifest's display property is set: standalone
Set the display property to specify how your app launches from the homescreen. Learn more.

Pass

Performance

These encapsulate your app's performance.

Unoptimized images
Images should be optimized to save network bytes. The following images could have smaller file sizes when compressed with WebP or JPEG at 80 quality. Learn more about image optimization.

Pass

Oversized Images
Image sizes served should be based on the device display size to save network bytes. Learn more about responsive images and client hints.

Pass

Critical Request Chains: 6
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.

Avoids 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.