Progressive Web AppThese 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 toproviding your users a good experience. This is achieved through use of a Service Worker.

Page load performance is fast

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

100100

Has a registered Service Worker

The service worker is the technology that enables your app to use many ProgressiveWeb App features, such as offline, add to homescreen, and push notifications. Learnmore.

URL responds with a 200 when offline

If you're building a Progressive Web App, consider using a service worker so thatyour app can work offline. Learn more.

First meaningful paint: 1387.5ms ﴾target: 1,600ms﴿

First meaningful paint measures when the primary content of a page is visible. Learnmore.

98

Perceptual Speed Index: 1720 ﴾target: 1,250﴿

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

First Visual Change: 619ms

Last Visual Change: 2231ms

95

Estimated Input Latency: 16.2ms ﴾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 oflatency, or less. 10% of the time a user can expect additional latency. If your score ishigher than Lighthouse's target score, users may perceive your app as laggy. Learnmore.

100

Time To Interactive ﴾alpha﴿: 2004.7ms ﴾target: 5,000ms﴿

Time to Interactive identifies the time at which your app appears to be ready enoughto interact with. Learn more.

95

Content scrolls at 60fps ﴾Coming soon﴿

Site is progressively enhanced

Progressive enhancement means that everyone can access the basic content and functionality of apage in any browser, and those without certain browser features may receive a reduced but stillfunctional experience.

Network connection is secure

Security is an important part of the web for both developers and users. Moving forward, TransportLayer Security ﴾TLS﴿ support will be required for many APIs.

User can be prompted to Add to Homescreen

While users can manually add your site to their homescreen in the browser menu, the prompt ﴾akaapp install banner﴿ will proactively prompt the user to install the app if the below requirements aremet and the user has visited your site at least twice ﴾with at least five minutes between visits﴿.

Touch input gets a response in < 150ms ﴾Coming soon﴿

App is interactive without jank after the first meaningful paint ﴾Coming soon﴿

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 awarning to the user that JavaScript is required to use the app. Learn more.

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 thecommunications between your app and your users, and is a prerequisite for HTTP/2and 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.

Has a registered Service Worker

The service worker is the technology that enables your app to use many ProgressiveWeb App features, such as offline, add to homescreen, and push notifications. Learnmore.

Manifest exists

Manifest contains start_url

Manifest contains icons at least 144px: found sizes: 192x192, 256x256, 257x257

Manifest contains short_name

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 andyour app’s first paint.

Address bar matches brand colors

The browser address bar can be themed to match your site. A theme‐color meta tag will upgrade theaddress bar when a user browses the site, and the manifest theme‐color will apply the same themesite‐wide once it's been added to homescreen.

Design is mobile‐friendly

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

Manifest exists

Manifest contains name

Manifest contains background_color

Manifest contains theme_color

Manifest contains icons at least 192px: found sizes: 192x192, 256x256, 257x257

Manifest exists

HTML has a theme‐color <meta>: #92bf92

Manifest contains theme_color

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 appmight not be optimized for mobile screens. Learn more.

Best PracticesWe've compiled some recommendations for modernizing your web app and avoiding performancepitfalls. These audits do not affect your score but are worth a look.

Using modern offline features

Offline: Site does not use Application Cache

Using modern protocols

Using modern CSS features

Using modern JavaScript features

Application Cache has been deprecated by Service Workers. Consider implementingan offline solution using the Cache Storage API.

Offline: Site does not use WebSQL DB.

Web SQL Database is deprecated. Consider implementing an offline solution usingIndexedDB.

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 thecommunications between your app and your users, and is a prerequisite for HTTP/2and many new web platform APIs. Learn more.

Performance: Site uses HTTP/2 for its own resources: 17 resources were not servedover h2

h2 offers many benefits over its http/1.1 predecessor: binary, multiplexing, serverpush, etc. See this FAQ for more information.

URLs

CSS: Site does not use the old CSS flexbox

The older spec for CSS Flexbox ﴾display: box﴿ is deprecated and less performant.Consider using the newer version ﴾display: flex﴿, which does not suffer from thesame issues.

JavaScript: Site does not use Date.now﴾﴿ in its own scripts

Consider using performance.now﴾﴿, which has better precision than Date.now() andalways increases at a constant rate, independent of the system clock.

JavaScript: Site does not use console.time﴾﴿ in its own scripts

Consider using the User Timine API ﴾performance.mark﴾﴿ andperformance.measure﴾﴿﴿, which is a standard, uses high resolution timestamps, andhas the added benefit of integrating with the DevTools timeline.

JavaScript: Site uses passive listeners to improve scrolling performance

Passive event listeners enable better scrolling performance. If you don't callpreventDefault() in your wheel,mousewheel,touchstart,touchmove eventlisteners, make them passive: addEventListener('touchstart', ...,{passive: true}).

Avoiding APIs that harm the user experience

Accessibility

Other

JavaScript: Site does not use Mutation Events in its own scripts

Using Mutation events degrades application performance. They are deprecated inthe DOM events spec, replaced by MutationObservers.

Performance: Site does not use document.write﴾﴿

Consider using <script async> to load scripts. document.write() is consideredharmful for performance.

Performance: Site does not use <link> that delay first paint

<link> elements are delaying the first paint of your page! For stylesheets, considerinlining or using the disabled and media attributes. For HTML Imports, use theasync attribute. These techniques will make the resource﴾s﴿ non‐render blocking.

Performance: Site does not use <script> in head that delays first paint: 10 resourcesdelayed first paint by 552ms

<script> elements are delaying the first paint of your page! Consider inlining oradding async or defer attributes.

URLs

Performance: Site opens external anchors using rel="noopener".

Anchors that open in a new tab should use target="_blank" and rel="noopener"so the opening page's performance does not suffer.

UX: Page does not automatically request geolocation on page load

Using the geolocation without context is a poor user experience. Always tie APIpermissions to user interactions.

Accessibility: Element aria‐* roles are valid

Accessibility: Element aria‐* attributes are valid ARIA attributes

Accessibility: Background and foreground colors have a sufficient contrast ratio

Accessibility: Every image element has an alt attribute

Accessibility: Every form element has a label

Form elements must have labels ﴾Failed on 1 element﴿

1 element fails this test learn more

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: fullscreen

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 MetricsThese encapsulate your app's performance.

Performance: Critical Request Chains: 18

The Critical Request Chains below show you what resources are required for firstrender of this page. Improve page load by reducing the length of chains, reducingthe download size of resources, or deferring the download of unnecessary resources.Learn more.

Longest request chain ﴾shorter is better﴿: 2

Longest chain duration ﴾shorter is better﴿: 2849.95ms

Longest chain transfer size ﴾smaller is better﴿: 66.44KB

Initial navigation/ ﴾ccserving.com﴿

/in.js ﴾platform.linkedin.com﴿ ‐ 689.88ms, 11.53KB

scripts/ccDevTools.js ﴾ccserving.com﴿ ‐ 733.19ms, 11.11KB

scripts/jquery.mobile.custom.min.js ﴾ccserving.com﴿ ‐ 747.64ms, 12.51KB

scripts/jquery.validate.min.js ﴾ccserving.com﴿ ‐ 832.68ms, 16.86KB

scripts/ccserving.js ﴾ccserving.com﴿ ‐ 969.58ms, 26.86KB

1.12.0/jquery.min.js ﴾ajax.googleapis.com﴿ ‐ 1133.18ms, 42.51KB

1.12.0/jquery‐ui.min.js ﴾ajax.googleapis.com﴿ ‐ 1319.61ms, 75.84KB

images/clear_pixel.gif ﴾ccserving.com﴿ ‐ 1547.74ms, 9.68KB

images/gear.png ﴾ccserving.com﴿ ‐ 1604.75ms, 11.76KB

images/lipstick.png ﴾ccserving.com﴿ ‐ 1647.75ms, 12.73KB

images/experts.jpg ﴾ccserving.com﴿ ‐ 1976.90ms, 18.79KB

images/share‐256.png ﴾ccserving.com﴿ ‐ 2057.98ms, 19.38KB

images/google_off_icon.png ﴾ccserving.com﴿ ‐ 2058.48ms, 12.77KB

images/twitter_off_icon.png ﴾ccserving.com﴿ ‐ 2183.01ms, 18.38KB

Generated by Lighthouse on 12/2/2016, 12:31:25 PM CST | File an issue

images/cc_logo_2016.png ﴾ccserving.com﴿ ‐ 2206.38ms, 25.23KB

images/linkedin_off_icon.png ﴾ccserving.com﴿ ‐ 2370.49ms, 13.67KB

images/facebook_off_icon.png ﴾ccserving.com﴿ ‐ 2455.85ms, 16.79KB

images/red_x.png ﴾ccserving.com﴿ ‐ 2849.95ms, 40.73KB

Performance: User Timing marks and measures: 3

Consider instrumenting your app with the User Timing API to create custom, real‐world measurements of key user experiences. Learn more.

Mark: 1392.74ms ‐ mark_ready_start

Measure 15.32ms ‐ measure_ready_process

Mark: 1408.07ms ‐ mark_ready_process