# View:

# Progressive Web App 95 / 100

These audits validate the aspects of a Progressive Web App.

# App can load on offline/flaky connections

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 Yes
- URL responds with a 200 when offline Yes
- Manifest's start_url is in cache storage for offline use (Coming soon) ¯\_(ツ)_/¯

# Page load performance is fast

Users notice if sites and apps don't perform well. These top-level metrics capture the most important perceived performance concerns.

- First meaningful paint (target: 1,600ms) (3570.4ms) 59
- Speed Index (target: 1,250) (4217) 65
  First Visual Change: 2291ms
  Last Visual Change: 5459ms
- 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) ¯\_(ツ)_/¯

# 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 not unfunctioning experience.

- Page contains some content when its scripts are not available Yes

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

- Site is on HTTPS Yes
- Site redirects HTTP traffic to HTTPS Yes

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

- Has a registered Service Worker Yes
- Manifest exists Yes
- Manifest contains start_url Yes
- Manifest contains icons at least 144px Yes
- Manifest contains short_name Yes

# 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 Yes
- Manifest contains name Yes
- Manifest contains background_color Yes
- Manifest contains theme_color Yes
- Manifest contains icons at least 192px Yes

# Address bar matches brand colors

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 Yes
- HTML has a theme-color <meta> (#ffffff) Yes
- Manifest contains theme_color Yes

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

- HTML has a viewport <meta> Yes

# Offline

- Has a registered Service Worker Yes
- URL responds with a 200 when offline Yes
- Manifest's start_url is in cache storage for offline use (Coming soon) ¯\_(ツ)_/¯

# Performance

- First meaningful paint (target: 1,600ms) (3570.4ms) 59
- Speed Index (target: 1,250) (4217) 65
  First Visual Change: 2291ms
  Last Visual Change: 5459ms

# UX

- Content scrolls at 60fps (Coming soon) ¯\_(ツ)_/¯

# JavaScript

- Page contains some content when its scripts are not available Yes

# Security

- Site is on HTTPS Yes
- Site redirects HTTP traffic to HTTPS Yes

# Manifest

- Manifest exists Yes
- Manifest contains start_url Yes
- Manifest contains icons at least 144px Yes
- Manifest contains short_name Yes
- Manifest contains name Yes
- Manifest contains background_color Yes
- Manifest contains theme_color Yes
- Manifest contains icons at least 192px Yes

# HTML

- HTML has a theme-color <meta> (#ffffff) Yes

# Mobile Friendly

- HTML has a viewport <meta> Yes

# Best Practices

These audits do not affect your score but are worth a look.

- Accessibility: Element aria-* roles are valid Yes
- Accessibility: Element aria-* attributes are valid ARIA attributes Yes
- Accessibility: Background and foreground colors have a sufficient contrast ratio No
  Elements must have sufficient color contrast
  - `#ms-downloadbar-wrap > .ms-downloadbar > .download-btn.ms-rc-ripple.ms-rc-custom`
  - `body > article > .ms-rc-active > .util-clearfix.fadeIn.animated > li:nth-of-type(1) > a > .flash-deals.ms-rc-shadow > .time > .countdown.ms-rc-hide`
  - `body > article > .ms-rc-active > .util-clearfix.fadeIn.animated > li:nth-of-type(1) > a > .flash-deals.ms-rc-shadow > .time > .countdown.ms-rc-hide > span:nth-of-type(1)`
  - `body > article > .ms-rc-active > .util-clearfix.fadeIn.animated > li:nth-of-type(1) > a > .flash-deals.ms-rc-shadow > .time > .countdown.ms-rc-hide > span:nth-of-type(2)`
  - `body > article > .ms-rc-active > .util-clearfix.fadeIn.animated > li:nth-of-type(1) > a > .flash-deals.ms-rc-shadow > .time > .countdown.ms-rc-hide > span:nth-of-type(3)`
  - `body > article > .ms-rc-active > .util-clearfix.fadeIn.animated > li:nth-of-type(2) > a > .super-deals.ms-rc-shadow > .time`
- Accessibility: Every image element has an alt attribute No
  Images must have alternate text
  - `#kv-container > div:nth-of-type(1) > a > img`
  - `#kv-container > div:nth-of-type(2) > a > img`
  - `#kv-container > div:nth-of-type(3) > a > img`
  - `#kv-container > div:nth-of-type(4) > a > img`
  - `#kv-container > div:nth-of-type(5) > a > img`
  - `body > article > .ms-rc-category.ms-rc-shadow > .util-clearfix > li:nth-of-type(1) > a > .pic > img`
  - `body > article > .ms-rc-category.ms-rc-shadow > .util-clearfix > li:nth-of-type(2) > a > .pic > img`
  - `body > article > .ms-rc-category.ms-rc-shadow > .util-clearfix > li:nth-of-type(3) > a > .pic > img`
  - `body > article > .ms-rc-active > .util-clearfix.fadeIn.animated > li:nth-of-type(1) > a > .flash-deals.ms-rc-shadow > .pic > img`
  - `body > article > .ms-rc-active > .util-clearfix.fadeIn.animated > li:nth-of-type(2) > a > .super-deals.ms-rc-shadow > .pic > img`
  - `body > .ms-drawer > .ms-drawer-loginInfo > .portrait > img`
- Accessibility: Every form element has a label Yes
- Manifest: Manifest's short_name won't be truncated when displayed on homescreen Yes
- Manifest: Manifest's display property set to standalone/fullscreen to allow launching without address bar (standalone) Yes
- 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) ¯\_(ツ)_/¯

# Performance Metrics

These encapsulate your app's performance.

- Performance: Critical Request Chains 5
  Longest request chain (shorter is better): 3
  Longest chain duration (shorter is better): 5624.45ms
  Initial navigation
  / (m.aliexpress.com)
  de/index.htm (m.aliexpress.com)
  ae-mobile/ (i.alicdn.com) - 1004.51ms
  atom/ (i.alicdn.com) - 1097.39ms
  ae-mobile/ (i.alicdn.com) - 1240.34ms
  iconfont/iconfontmd.3cc462f0.ttf (i.alicdn.com) - 1808.64ms
  img/favicon.ico (m.aliexpress.com) - 363.64ms
- Performance: User Timing marks and measures 0