Lighthouse

lighthouse lighthouse

PWA

progressive web apps

PWA

PWA

service worker

service worker manifest

service worker manifest short_name

service worker manifest short_name https

service worker manifest short_name https 144×144 icon

service worker manifest short_name https 144×144 icon loadable front page

service worker manifest short_name https 144×144 icon loadable front page png icon format

service worker manifest short_name https 144×144 icon loadable front page png icon format two visits within an hour

service worker manifest short_name https 144×144 icon loadable front page png icon format two visits within an hour not cancelled with onbeforeinstallprompt

service worker manifest short_name https 144×144 icon loadable front page png icon format two visits within an hour not cancelled with onbeforeinstallprompt ...whatever other requirements come up...

stop the madness stop the madness

lighthouse lighthouse

• 90% probability of input latency at 16.0ms or shorter.

(50%: 16.0ms, 75%: 16.0ms, 90%: 16.0ms, 99%: 54.1ms, 100%: 67.1ms)

-- Time To Interactive (alpha): 100 (0ms)

-- Content scrolls at 60fps:

-- Touch input gets a response in < 150ms: Site is progressively enhanced: 100%

-- Page contains some content when its scripts are not available: true Network connection is secure: 100%

-- Site is on HTTPS: true

-- Site redirects HTTP traffic to HTTPS: true User can be prompted to Add to Homescreen: 20%

-- Has a registered Service Worker: true

-- Manifest exists: false

Unable to retrieve manifest

-- Manifest contains start_url: false

-- Manifest contains icons at least 144px: false

WARNING: No icons found in the manifest

-- Manifest contains short_name: false Installed web app will launch with custom splash screen: 0%

-- Manifest exists: false

Unable to retrieve manifest

-- Manifest contains name: false

-- Manifest contains background_color: false

-- Manifest contains theme_color: false

-- Manifest contains icons at least 192px: false

WARNING: No icons found in the manifest Address bar matches brand colors: 33%

-- Manifest exists: false

Unable to retrieve manifest

-- HTML has a theme-color <meta>: true (#2196F3)

-- Manifest contains theme_color: false Design is mobile-friendly: 100%

-- HTML has a viewport <meta>: true

-- Content is sized correctly for the viewport: true Name: Best Practices Description: These audits do not affect your score but are worth a look.

-- Element aria-* roles are valid: true

-- Element aria-* attributes are valid ARIA attributes: true

-- Background and foreground colors have a sufficient contrast ratio: false

Elements must have sufficient color contrast (Failed on 1 element)

• Rating: critical

• See: https://dequeuniversity.com/rules/axe/1.1/color-contrast

• Nodes: 1 nodes identified (see HTML output for details)

-- Every image element has an alt attribute: true

-- Every form element has a label: true

-- Manifest's short_name won't be truncated when displayed on homescreen: false

-- Manifest's display property is set: false

Manifest display property should be set.

-- Service worker makes use of push notifications, if appropriate:

-- Tap targets are appropriately sized for touch:

github.com/GoogleChrome/lighthouse

questions? @sil