First Contentful Paint ( 82 / 100 )

First Contentful Paint marks the time at which the first text or image is painted.

Speed Index ( 91 / 100 )

Speed Index shows how quickly the contents of a page are visibly populated.

Time to Interactive ( 91 / 100 )

Time to interactive is the amount of time it takes for the page to become fully interactive.

Total Blocking Time ( 98 / 100 )

Sum of all time periods between FCP and Time to Interactive, when task length exceeded 50ms, expressed in milliseconds.

Cumulative Layout Shift ( 100 / 100 )

Cumulative Layout Shift measures the movement of visible elements within the viewport.

Max Potential First Input Delay ( 95 / 100 )

The maximum potential First Input Delay that your users could experience is the duration of the longest task.

First Meaningful Paint ( 94 / 100 )

First Meaningful Paint measures when the primary content of a page is visible.

Properly size images ( 100 / 100 )

Serve images that are appropriately-sized to save cellular data and improve load time.

Defer offscreen images ( 100 / 100 )

Consider lazy-loading offscreen and hidden images after all critical resources have finished loading to lower time to interactive.

Minify CSS ( 88 / 100 )

Minifying CSS files can reduce network payload sizes.

Efficiently encode images ( 100 / 100 )

Optimized images load faster and consume less cellular data.

Serve images in next-gen formats ( 100 / 100 )

Image formats like WebP and AVIF often provide better compression than PNG or JPEG, which means faster downloads and less data consumption.

Preconnect to required origins ( 100 / 100 )

Consider adding `preconnect` or `dns-prefetch` resource hints to establish early connections to important third-party origins.

Initial server response time was short ( 100 / 100 )

Keep the server response time for the main document short because all other requests depend on it.

Avoid multiple page redirects ( 100 / 100 )

Redirects introduce additional delays before the page can be loaded.

Use HTTP/2 ( 100 / 100 )

HTTP/2 offers many benefits over HTTP/1.1, including binary headers and multiplexing.

Use video formats for animated content ( 100 / 100 )

Large GIFs are inefficient for delivering animated content. Consider using MPEG4/WebM videos for animations and PNG/WebP for static images instead of GIF to save network bytes.

Remove duplicate modules in JavaScript bundles ( 100 / 100 )

Remove large, duplicate JavaScript modules from bundles to reduce unnecessary bytes consumed by network activity.

Avoid serving legacy JavaScript to modern browsers ( 100 / 100 )

Polyfills and transforms enable legacy browsers to use new JavaScript features. However, many aren't necessary for modern browsers. For your bundled JavaScript, adopt a modern script deployment strategy using module/nomodule feature detection to reduce the amount of code shipped to modern browsers, while retaining support for legacy browsers. [Learn More](https://philipwalton.com/articles/deploying-es2015-code-in-production-today/)

Avoids enormous network payloads ( 100 / 100 )

Large network payloads cost users real money and are highly correlated with long load times.

Avoid an excessive DOM size ( 87 / 100 )

A large DOM will increase memory usage, cause longer [style calculations](https://developers.google.com/web/fundamentals/performance/rendering/reduce-the-scope-and-complexity-of-style-calculations), and produce costly [layout reflows](https://developers.google.com/speed/articles/reflow).

JavaScript execution time ( 100 / 100 )

Consider reducing the time spent parsing, compiling, and executing JS. You may find delivering smaller JS payloads helps with this.

Minimizes main-thread work ( 99 / 100 )

Consider reducing the time spent parsing, compiling and executing JS. You may find delivering smaller JS payloads helps with this.

Uses passive listeners to improve scrolling performance ( 100 / 100 )

Consider marking your touch and wheel event listeners as `passive` to improve your page's scroll performance.

Avoids `document.write()` ( 100 / 100 )

For users on slow connections, external scripts dynamically injected via `document.write()` can delay page load by tens of seconds.

`[accesskey]` values are unique ( 100 / 100 )

Access keys let users quickly focus a part of the page. For proper navigation, each access key must be unique.

`[aria-hidden="true"]` is not present on the document `<body>` ( 100 / 100 )

Assistive technologies, like screen readers, work inconsistently when `aria-hidden="true"` is set on the document `<body>`.

`[aria-hidden="true"]` elements do not contain focusable descendents ( 100 / 100 )

Focusable descendents within an `[aria-hidden="true"]` element prevent those interactive elements from being available to users of assistive technologies like screen readers.

`[role]`s have all required `[aria-*]` attributes ( 100 / 100 )

Some ARIA roles have required attributes that describe the state of the element to screen readers.

`[role]` values are valid ( 100 / 100 )

ARIA roles must have valid values in order to perform their intended accessibility functions.

The page contains a heading, skip link, or landmark region ( 100 / 100 )

Adding ways to bypass repetitive content lets keyboard users navigate the page more efficiently.

`<dl>`'s contain only properly-ordered `<dt>` and `<dd>` groups, `<script>`, `<template>` or `<div>` elements. ( 100 / 100 )

When definition lists are not properly marked up, screen readers may produce confusing or inaccurate output.

Definition list items are wrapped in `<dl>` elements ( 100 / 100 )

Definition list items (`<dt>` and `<dd>`) must be wrapped in a parent `<dl>` element to ensure that screen readers can properly announce them.

Document has a `<title>` element ( 100 / 100 )

The title gives screen reader users an overview of the page, and search engine users rely on it heavily to determine if a page is relevant to their search.

ARIA IDs are unique ( 100 / 100 )

The value of an ARIA ID must be unique to prevent other instances from being overlooked by assistive technologies.

Heading elements appear in a sequentially-descending order ( 100 / 100 )

Properly ordered headings that do not skip levels convey the semantic structure of the page, making it easier to navigate and understand when using assistive technologies.

`<html>` element has a `[lang]` attribute ( 100 / 100 )

If a page doesn't specify a lang attribute, a screen reader assumes that the page is in the default language that the user chose when setting up the screen reader. If the page isn't actually in the default language, then the screen reader might not announce the page's text correctly.

`<html>` element has a valid value for its `[lang]` attribute ( 100 / 100 )

Specifying a valid [BCP 47 language](https://www.w3.org/International/questions/qa-choosing-language-tags#question) helps screen readers announce text properly.

Form elements have associated labels ( 100 / 100 )

Labels ensure that form controls are announced properly by assistive technologies, like screen readers.

Lists contain only `<li>` elements and script supporting elements (`<script>` and `<template>`). ( 100 / 100 )

Screen readers have a specific way of announcing lists. Ensuring proper list structure aids screen reader output.

`[user-scalable="no"]` is not used in the `<meta name="viewport">` element and the `[maximum-scale]` attribute is not less than 5. ( 100 / 100 )

Disabling zooming is problematic for users with low vision who rely on screen magnification to properly see the contents of a web page.

Links to cross-origin destinations are safe ( 100 / 100 )

Add `rel="noopener"` or `rel="noreferrer"` to any external links to improve performance and prevent security vulnerabilities.

Avoids requesting the geolocation permission on page load ( 100 / 100 )

Users are mistrustful of or confused by sites that request their location without context. Consider tying the request to a user action instead.

Avoids requesting the notification permission on page load ( 100 / 100 )

Users are mistrustful of or confused by sites that request to send notifications without context. Consider tying the request to user gestures instead.

Allows users to paste into password fields ( 100 / 100 )

Preventing password pasting undermines good security policy.

Displays images with correct aspect ratio ( 100 / 100 )

Image display dimensions should match natural aspect ratio.

Page has the HTML doctype ( 100 / 100 )

Specifying a doctype prevents the browser from switching to quirks-mode.

Properly defines charset ( 100 / 100 )

A character encoding declaration is required. It can be done with a `<meta>` tag in the first 1024 bytes of the HTML or in the Content-Type HTTP response header.

Avoids `unload` event listeners ( 100 / 100 )

The `unload` event does not fire reliably and listening for it can prevent browser optimizations like the Back-Forward Cache. Consider using the `pagehide` or `visibilitychange` events instead.

Avoids Application Cache ( 100 / 100 )

Application Cache is deprecated.

Detected JavaScript libraries ( 100 / 100 )

All front-end JavaScript libraries detected on the page.

Avoids deprecated APIs ( 100 / 100 )

Deprecated APIs will eventually be removed from the browser.

No browser errors logged to the console ( 100 / 100 )

Errors logged to the console indicate unresolved problems. They can come from network request failures and other browser concerns.

Page has valid source maps ( 100 / 100 )

Source maps translate minified code to the original source code. This helps developers debug in production. In addition, Lighthouse is able to provide further insights. Consider deploying source maps to take advantage of these benefits.

No issues in the `Issues` panel in Chrome Devtools ( 100 / 100 )

Issues logged to the `Issues` panel in Chrome Devtools indicate unresolved problems. They can come from network request failures, insufficient security controls, and other browser concerns. Open up the Issues panel in Chrome DevTools for more details on each issue.

Redirects HTTP traffic to HTTPS ( 100 / 100 )

If you've already set up HTTPS, make sure that you redirect all HTTP traffic to HTTPS in order to enable secure web features for all your users.

Content is sized correctly for the viewport ( 100 / 100 )

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.

Has a `<meta name="viewport">` tag with `width` or `initial-scale` ( 100 / 100 )

Add a `<meta name="viewport">` tag to optimize your app for mobile screens.