Skip to content

Instantly share code, notes, and snippets.

@localnerve

localnerve/lighthouse-1.0.0-run-20160715

Created July 15, 2016 23:27
Show Gist options
  • Save localnerve/f2a0d51c46993dd8ee86619a1ecdcdcc to your computer and use it in GitHub Desktop.
Save localnerve/f2a0d51c46993dd8ee86619a1ecdcdcc to your computer and use it in GitHub Desktop.
Download ZIP
Raw
lighthouse-1.0.0-run-20160715
<!--
Copyright 2016 Google Inc. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Lighthouse report: https://pwa-stage.localnerve.net</title>
<style>
/**
* Copyright 2016 Google Inc. All rights reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 100;
src: local('Roboto Thin'), local('Roboto-Thin') format('woff');
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'), local('Roboto-Regular') format('woff');
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
src: local('Roboto Medium'), local('Roboto-Medium') format('woff');
}
* {
box-sizing: border-box;
}
html, body {
padding: 0;
margin: 0;
background: #F0F0F0;
color: #444;
font-family: Arial, sans-serif;
font-size: 15px;
}
body {
min-width: 845px;
}
a {
color: #57A0A8;
}
.report {
width: 100%;
margin: 0 auto;
border-radius: 0 0 4px 4px;
max-width: 1280px;
background: #FFF;
box-shadow: 0 0 6px 0 rgba(0,0,0,0.26);
}
.print {
width: 24px;
height: 24px;
background: url('data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjNDQ0IiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0xOSA4SDVjLTEuNjYgMC0zIDEuMzQtMyAzdjZoNHY0aDEydi00aDR2LTZjMC0xLjY2LTEuMzQtMy0zLTN6bS0zIDExSDh2LTVoOHY1em0zLTdjLS41NSAwLTEtLjQ1LTEtMXMuNDUtMSAxLTEgMSAuNDUgMSAxLS40NSAxLTEgMXptLTEtOUg2djRoMTJWM3oiLz4KICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4KPC9zdmc+Cg==');
border: none;
cursor: pointer;
}
.toggle {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
font-size: 13px;
margin-right: 26px;
}
.toggle__label {
padding: 0 10px 0 20px;
}
.toggle__title {
margin: 0;
font-weight: bold;
font-size: 13px;
}
.score-container__overall-score {
color: #FFF;
font-size: 92px;
font-weight: 100;
position: relative;
display: inline-block;
text-align: center;
min-width: 70px;
}
.score-container__overall-score::after {
content: 'Your score';
position: absolute;
bottom: -4px;
font-size: 14px;
font-weight: 500;
text-align: center;
width: 100%;
left: 0;
opacity: 0.5;
}
.score-container__max-score {
color: #57A0A8;
font-size: 28px;
font-weight: 500;
}
.report-body {
position: relative;
}
.report-body__content {
padding: 0 4% 0 4%;
margin-left: 22%;
position: relative;
}
.report-body__menu-container {
height: 100%;
width: 100%;
min-width: 230px;
max-width: 1280px;
position: fixed;
left: 50%;
transform: translateX(-50%);
top: 0;
pointer-events: none;
}
.menu {
width: 22%;
background: #FFFFFF;
min-width: 185px;
height: 100%;
top: 0;
left: 0;
pointer-events: auto;
border-right: 1px solid #DFDFDF;
}
.menu__header {
background: #2F3441;
padding: 0 20px;
height: 115px;
line-height: 54px;
color: #FFF;
font-family: 'Roboto', Arial, sans-serif;
font-size: 18px;
position: relative;
display: flex;
flex-direction: column;
align-self: center;
justify-content: center;
}
.menu__header::after {
content: '';
display: block;
width: 90px;
height: 90px;
position: absolute;
top: 0;
right: 0;
background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODYiIGhlaWdodD0iODYiIHZpZXdCb3g9IjAgMCA4NiA4NiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PHRpdGxlPkJldGE8L3RpdGxlPjxkZWZzPjxwYXRoIGlkPSJiIiBkPSJNLTExLjcwNCAxMy4xNDRIMTI1LjU4djMwSC0xMS43MDN6Ii8+PGZpbHRlciB4PSItNTAlIiB5PSItNTAlIiB3aWR0aD0iMjAwJSIgaGVpZ2h0PSIyMDAlIiBmaWx0ZXJVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIGlkPSJhIj48ZmVPZmZzZXQgZHk9IjEiIGluPSJTb3VyY2VBbHBoYSIgcmVzdWx0PSJzaGFkb3dPZmZzZXRPdXRlcjEiLz48ZmVHYXVzc2lhbkJsdXIgc3RkRGV2aWF0aW9uPSIxIiBpbj0ic2hhZG93T2Zmc2V0T3V0ZXIxIiByZXN1bHQ9InNoYWRvd0JsdXJPdXRlcjEiLz48ZmVDb2xvck1hdHJpeCB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAuNSAwIiBpbj0ic2hhZG93Qmx1ck91dGVyMSIvPjwvZmlsdGVyPjxwYXRoIGlkPSJkIiBkPSJNLjQgMTYuOTcyaDExOXYyOC40SC40eiIvPjxmaWx0ZXIgeD0iLTUwJSIgeT0iLTUwJSIgd2lkdGg9IjIwMCUiIGhlaWdodD0iMjAwJSIgZmlsdGVyVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IiBpZD0iYyI+PGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMy41IiBpbj0iU291cmNlQWxwaGEiIHJlc3VsdD0ic2hhZG93Qmx1cklubmVyMSIvPjxmZU9mZnNldCBpbj0ic2hhZG93Qmx1cklubmVyMSIgcmVzdWx0PSJzaGFkb3dPZmZzZXRJbm5lcjEiLz48ZmVDb21wb3NpdGUgaW49InNoYWRvd09mZnNldElubmVyMSIgaW4yPSJTb3VyY2VBbHBoYSIgb3BlcmF0b3I9ImFyaXRobWV0aWMiIGsyPSItMSIgazM9IjEiIHJlc3VsdD0ic2hhZG93SW5uZXJJbm5lcjEiLz48ZmVDb2xvck1hdHJpeCB2YWx1ZXM9IjAgMCAwIDAgMSAwIDAgMCAwIDEgMCAwIDAgMCAxIDAgMCAwIDAuNjg5NTA5NzM3IDAiIGluPSJzaGFkb3dJbm5lcklubmVyMSIvPjwvZmlsdGVyPjx0ZXh0IGlkPSJmIiBmb250LWZhbWlseT0iQXJpYWwtQm9sZE1ULCBBcmlhbCIgZm9udC1zaXplPSIxMyIgZm9udC13ZWlnaHQ9ImJvbGQiIGZpbGw9IiNGRkYiPjx0c3BhbiB4PSIzNy41NTYiIHk9IjM0LjU1NiI+QUxQSEE8L3RzcGFuPjwvdGV4dD48ZmlsdGVyIHg9Ii01MCUiIHk9Ii01MCUiIHdpZHRoPSIyMDAlIiBoZWlnaHQ9IjIwMCUiIGZpbHRlclVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgaWQ9ImUiPjxmZU9mZnNldCBkeT0iMSIgaW49IlNvdXJjZUFscGhhIiByZXN1bHQ9InNoYWRvd09mZnNldE91dGVyMSIvPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249Ii41IiBpbj0ic2hhZG93T2Zmc2V0T3V0ZXIxIiByZXN1bHQ9InNoYWRvd0JsdXJPdXRlcjEiLz48ZmVDb2xvck1hdHJpeCB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAuMTQwOTY0Njc0IDAiIGluPSJzaGFkb3dCbHVyT3V0ZXIxIi8+PC9maWx0ZXI+PC9kZWZzPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgbWFzaz0idXJsKCNtYXNrLTIpIiB0cmFuc2Zvcm09InJvdGF0ZSg0NSA1NS40NCAyNC41MjMpIj48dXNlIGZpbGw9IiMwMDAiIGZpbHRlcj0idXJsKCNhKSIgeGxpbms6aHJlZj0iI2IiLz48dXNlIGZpbGw9IiNDRjNBM0MiIHhsaW5rOmhyZWY9IiNiIi8+PC9nPjx1c2UgZmlsdGVyPSJ1cmwoI2MpIiB4bGluazpocmVmPSIjZCIgbWFzaz0idXJsKCNtYXNrLTIpIiB0cmFuc2Zvcm09InJvdGF0ZSg0NSA1OC40IDI3LjU1KSIgZmlsbD0iIzAwMCIvPjxnIG1hc2s9InVybCgjbWFzay0yKSIgdHJhbnNmb3JtPSJyb3RhdGUoNDUgNTguNTU2IDI2LjQzNSkiIGZpbGw9IiNGRkYiPjx1c2UgZmlsdGVyPSJ1cmwoI2UpIiB4bGluazpocmVmPSIjZiIvPjx1c2UgeGxpbms6aHJlZj0iI2YiLz48L2c+PHBhdGggZD0iTTguNS0uNWw4OC4yMDQgODguMjA0TTguNS0zOS41bDg4LjIwNCA4OC4yMDQiIHN0cm9rZT0iI0ZGRiIgc3Ryb2tlLWxpbmVjYXA9InNxdWFyZSIgc3Ryb2tlLWRhc2hhcnJheT0iMSwyIiBvcGFjaXR5PSIuMzg2IiBtYXNrPSJ1cmwoI21hc2stMikiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zKSIvPjwvZz48L3N2Zz4K') top right no-repeat;
}
.menu__header-title {
font-family: 'Roboto', Arial, sans-serif;
font-size: 22px;
font-weight: 400;
color: #FFFFFF;
margin: 0;
padding: 0;
line-height: 1.5;
}
.menu__header-url {
opacity: 0.74;
font-family: Roboto-Regular;
font-size: 14px;
color: #FFFFFF;
margin: 0;
padding: 0;
line-height: 1.5;
font-weight: 400;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 92%;
}
.menu__nav {
list-style: none;
margin: 0;
padding: 0;
}
.menu__nav-item {
height: 40px;
line-height: 40px;
border-top: 1px solid #EBEBEB;
}
.menu__link {
padding: 0 20px;
text-decoration: none;
color: #777;
display: flex;
}
.menu__link:hover {
background-color: #57A0A8;
color: #FFF;
}
.menu__link-label {
flex: 1;
color: #49525F;
font-weight: 500;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.menu__link-score {
padding-left: 20px;
}
.menu__link-score--good,
.report-section__score--good,
.report-section__item-value--good,
.report-section__title-score-total--good {
color: #76B530;
}
.menu__link-score--average,
.report-section__score--average,
.report-section__item-value--average,
.report-section__title-score-total--average {
color: #F5A623;
}
.menu__link-score--poor,
.report-section__score--poor,
.report-section__item-value--poor,
.report-section__title-score-total--poor {
color: #D0021B;
}
.menu__link:hover .menu__link-label,
.menu__link:hover .menu__link-score {
color: #FFF;
}
.report-body__breakdown {
flex: 1;
padding-top: 20px;
max-width: 100%;
}
.report-body__breakdown-item {
padding-bottom: 6px;
}
.report-body__breakdown-item:last-of-type {
border: none;
}
.report-body__header {
height: 58px;
border-bottom: 1px solid #EBEBEB;
background: #FAFAFA;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
padding: 0 4%;
}
.report-section__title {
-webkit-font-smoothing: antialiased;
font-family: 'Roboto', Arial, sans-serif;
font-size: 28px;
font-weight: 500;
color: #49525F;
display: flex;
margin: 1em 0 0.3em 0;
}
.report-section__title-main {
flex: 1;
}
.report-section__title-score-total {
font-weight: 500;
}
.report-section__title-score-max {
font-weight: 400;
font-size: 18px;
margin-left: -4px;
}
.report-section__subtitle {
-webkit-font-smoothing: antialiased;
font-family: 'Roboto', Arial, sans-serif;
font-size: 18px;
font-weight: 500;
color: #719EA8;
display: flex;
margin: 24px 0 6px 0;
}
.report-section__description {
color: #5F6875;
font-size: 16px;
margin: 0 0 2em 0;
line-height: 1.4;
max-width: 750px;
}
.report-section__aggregation-description {
font-style: italic;
color: #777;
font-size: 14px;
margin: 0.6em 0 0.8em 0;
line-height: 1.4;
max-width: 750px;
}
.report-section__label {
flex: 1;
}
.report-section__individual-results {
list-style: none;
padding: 0;
margin: 0;
}
.report-section__item {
padding-left: 32px;
background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNXB4IiBoZWlnaHQ9IjVweCIgdmlld0JveD0iMCAwIDUgNSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxjaXJjbGUgaWQ9Ik92YWwtNzAiIHN0cm9rZT0ibm9uZSIgZmlsbD0iIzY0NjQ2NCIgZmlsbC1ydWxlPSJldmVub2RkIiBjeD0iMi41IiBjeT0iMi41IiByPSIyLjUiPjwvY2lyY2xlPgo8L3N2Zz4K') 14px 8px no-repeat;
line-height: 24px;
}
.report-section__item-details {
display: flex;
}
.report-section__item-category {
font-weight: 700;
}
.report-section__item-extended-info {
font-size: 15px;
color: #555;
font-style: italic;
padding: 6px 6px 20px 6px;
}
.report-section__item-raw-value {
color: #777;
}
.report-section__item-description {
flex: 1;
}
.footer {
margin-top: 40px;
height: 130px;
line-height: 90px;
text-align: center;
font-size: 12px;
border-top: 1px solid #EBEBEB;
color: #999;
margin-left: 22%;
}
.toggle__label {
width: 120px;
height: 24px;
position: relative;
margin-left: 20px;
}
.toggle-view {
position: absolute;
left: 50%;
top: 40%;
transform: translate(-50%, -50%);
z-index: 0;
}
.toggle__display {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
}
.toggle__display::before,
.toggle__display::after,
.toggle__focus-ring {
display: block;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
text-align: center;
line-height: 24px;
font-size: 13px;
color: #333;
transition: opacity 0.2s cubic-bezier(0,0,0.3,1);
}
.toggle__display::before {
content: attr(data-on);
opacity: 0;
background: #57A0A8;
box-shadow: inset 0 1px 2px rgba(0,0,0,0.5);
border-radius: 12px;
color: #FFF;
}
.toggle__display::after {
content: attr(data-off);
opacity: 1;
background: #E7E7E8;
box-shadow: inset 0 1px 2px rgba(0,0,0,0.5);
border-radius: 12px;
}
.toggle__focus-ring {
border-radius: 12px;
}
.toggle__slider {
position: absolute;
left: 4px;
top: 4px;
border-radius: 50%;
background: #FFF;
width: 16px;
height: 16px;
box-shadow: 0 1px 2px rgba(0,0,0,0.5);
transition: transform 0.1s cubic-bezier(0,0,0.3,1);
z-index: 2;
}
.toggle-view:focus ~ .toggle__focus-ring,
.toggle__label:active .toggle__focus-ring {
box-shadow: 0 0 5px 2px #83BFFC;
}
.toggle-view:checked ~ .toggle__display::before {
opacity: 1;
}
.toggle-view:checked ~ .toggle__display::after {
opacity: 0;
}
.toggle-view:checked ~ .toggle__display .toggle__slider {
transform: translateX(96px);
}
.coming-soon, .coming-soon * {
color: #AAA;
}
.coming-soon .report-section__item-value {
font-size: 70%;
}
@media print {
.report {
box-shadow: none;
}
.report-body__header,
.report-body__menu-container {
display: none;
}
}
</style>
</head>
<body>
<div class="js-report report">
<section class="report-body">
<div class="report-body__header">
<div class="toggle">
<h1 class="toggle__title">View:</h1>
<label class="toggle__label" for="user-feature" aria-label="User feature">
<input name="view-toggle" class="js-toggle-view toggle-view" id="user-feature" type="checkbox" value="toggle">
<div role="presentation" class="toggle__display" data-on="Technology" data-off="User feature">
<div aria-hidden class="toggle__slider"></div>
</div>
<div role="presentation" class="toggle__focus-ring"></div>
</label>
</div>
<button class="print js-print"></button>
</div>
<div class="report-body__content">
<div class="report-body__menu-container">
<div class="menu">
<div class="menu__header">
<h1 class="menu__header-title">Lighthouse</h1>
<h2 class="menu__header-url">https://pwa-stage.localnerve.net</h2>
</div>
<ul class="menu__nav">
<li class="menu__nav-item">
<a class="menu__link" href="#progressive-web-app">
Progressive Web App
</a>
</li>
<li class="menu__nav-item">
<a class="menu__link" href="#best-practices">
Best Practices
</a>
</li>
<li class="menu__nav-item">
<a class="menu__link" href="#performance-metrics">
Performance Metrics
</a>
</li>
</ul>
</div>
</div>
<div class="js-breakdown report-body__breakdown">
<h1 class="report-section__title" id="progressive-web-app">
<span class="report-section__title-main">Progressive Web App</span>
<span class="report-section__title-score">
<span class="report-section__title-score-total report-section__title-score-total--good">100</span>
<span class="report-section__title-score-max"> / 100</span>
</span>
</h1>
<p class="report-section__description">
These audits validate the aspects of a Progressive Web App.
</p>
<div class="js-report-by-user-feature">
<section class="report-body__breakdown-item">
<h1 class="report-section__subtitle">App can load on offline/flaky connections</h1>
<p class="report-section__aggregation-description">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
<a href="https://developers.google.com/web/fundamentals/primers/service-worker/">Service Worker</a>.</p>
<ul class="report-section__individual-results">
<li class="report-section__item ">
<div class="report-section__item-details">
<span class="report-section__item-description">
Has a registered Service Worker
</span>
<span class="report-section__item-value report-section__item-value--good">Yes</span>
</div>
</li>
<li class="report-section__item ">
<div class="report-section__item-details">
<span class="report-section__item-description">
URL responds with a 200 when offline
</span>
<span class="report-section__item-value report-section__item-value--good">Yes</span>
</div>
</li>
<li class="report-section__item coming-soon">
<div class="report-section__item-details">
<span class="report-section__item-description">
Manifest&#x27;s start_url is in cache storage for offline use
(Coming soon)
</span>
<span class="report-section__item-value report-section__item-value--poor">¯\_(ツ)_/¯</span>
</div>
</li>
</ul>
</section>
<section class="report-body__breakdown-item">
<h1 class="report-section__subtitle">Page load performance is fast</h1>
<p class="report-section__aggregation-description">Users notice if sites and apps don't perform well. These top-level metrics capture
the most important perceived performance concerns.</p>
<ul class="report-section__individual-results">
<li class="report-section__item ">
<div class="report-section__item-details">
<span class="report-section__item-description">
First meaningful paint
(target value: 1,000ms)
</span>
<span class="report-section__item-value report-section__item-value--good">100</span>
<span class="report-section__item-raw-value">&nbsp;(693.50ms)</span>
</div>
</li>
<li class="report-section__item ">
<div class="report-section__item-details">
<span class="report-section__item-description">
Speed Index
(target value: 1,000)
</span>
<span class="report-section__item-value report-section__item-value--good">97</span>
<span class="report-section__item-raw-value">&nbsp;(1453)</span>
</div>
</li>
<li class="report-section__item coming-soon">
<div class="report-section__item-details">
<span class="report-section__item-description">
Content scrolls at 60fps
(Coming soon)
</span>
<span class="report-section__item-value report-section__item-value--poor">¯\_(ツ)_/¯</span>
</div>
</li>
<li class="report-section__item coming-soon">
<div class="report-section__item-details">
<span class="report-section__item-description">
Touch input gets a response in &lt; 150ms
(Coming soon)
</span>
<span class="report-section__item-value report-section__item-value--poor">¯\_(ツ)_/¯</span>
</div>
</li>
<li class="report-section__item coming-soon">
<div class="report-section__item-details">
<span class="report-section__item-description">
App is interactive without jank after the first meaningful paint
(Coming soon)
</span>
<span class="report-section__item-value report-section__item-value--poor">¯\_(ツ)_/¯</span>
</div>
</li>
</ul>
</section>
<section class="report-body__breakdown-item">
<h1 class="report-section__subtitle">Network connection is secure</h1>
<p class="report-section__aggregation-description">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.</p>
<ul class="report-section__individual-results">
<li class="report-section__item ">
<div class="report-section__item-details">
<span class="report-section__item-description">
Site is on HTTPS
</span>
<span class="report-section__item-value report-section__item-value--good">Yes</span>
</div>
</li>
<li class="report-section__item ">
<div class="report-section__item-details">
<span class="report-section__item-description">
Site redirects HTTP traffic to HTTPS
</span>
<span class="report-section__item-value report-section__item-value--good">Yes</span>
</div>
</li>
</ul>
</section>
<section class="report-body__breakdown-item">
<h1 class="report-section__subtitle">User can be prompted to Add to Homescreen</h1>
<p class="report-section__aggregation-description">While users can manually add your site to their homescreen in the browser menu, the
<a href="https://developers.google.com/web/updates/2015/03/increasing-engagement-with-app-install-banners-in-chrome-for-android?hl=en">prompt
(aka app install banner)</a> 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).</p>
<ul class="report-section__individual-results">
<li class="report-section__item ">
<div class="report-section__item-details">
<span class="report-section__item-description">
Has a registered Service Worker
</span>
<span class="report-section__item-value report-section__item-value--good">Yes</span>
</div>
</li>
<li class="report-section__item ">
<div class="report-section__item-details">
<span class="report-section__item-description">
Manifest exists
</span>
<span class="report-section__item-value report-section__item-value--good">Yes</span>
</div>
</li>
<li class="report-section__item ">
<div class="report-section__item-details">
<span class="report-section__item-description">
Manifest contains start_url
</span>
<span class="report-section__item-value report-section__item-value--good">Yes</span>
</div>
</li>
<li class="report-section__item ">
<div class="report-section__item-details">
<span class="report-section__item-description">
Manifest contains icons at least 144px
</span>
<span class="report-section__item-value report-section__item-value--good">Yes</span>
</div>
</li>
<li class="report-section__item ">
<div class="report-section__item-details">
<span class="report-section__item-description">
Manifest contains short_name
</span>
<span class="report-section__item-value report-section__item-value--good">Yes</span>
</div>
</li>
</ul>
</section>
<section class="report-body__breakdown-item">
<h1 class="report-section__subtitle">Installed web app will launch with custom splash screen</h1>
<p class="report-section__aggregation-description">A default splash screen will be constructed, but meeting these requirements guarantee a
high-quality and customizable <a href="https://developers.google.com/web/updates/2015/10/splashscreen?hl=en">splash screen</a>
the user sees between tapping the home screen icon and your app’s first paint.</p>
<ul class="report-section__individual-results">
<li class="report-section__item ">
<div class="report-section__item-details">
<span class="report-section__item-description">
Manifest exists
</span>
<span class="report-section__item-value report-section__item-value--good">Yes</span>
</div>
</li>
<li class="report-section__item ">
<div class="report-section__item-details">
<span class="report-section__item-description">
Manifest contains name
</span>
<span class="report-section__item-value report-section__item-value--good">Yes</span>
</div>
</li>
<li class="report-section__item ">
<div class="report-section__item-details">
<span class="report-section__item-description">
Manifest contains background_color
</span>
<span class="report-section__item-value report-section__item-value--good">Yes</span>
</div>
</li>
<li class="report-section__item ">
<div class="report-section__item-details">
<span class="report-section__item-description">
Manifest contains theme_color
</span>
<span class="report-section__item-value report-section__item-value--good">Yes</span>
</div>
</li>
<li class="report-section__item ">
<div class="report-section__item-details">
<span class="report-section__item-description">
Manifest contains icons at least 192px
</span>
<span class="report-section__item-value report-section__item-value--good">Yes</span>
</div>
</li>
</ul>
</section>
<section class="report-body__breakdown-item">
<h1 class="report-section__subtitle">Address bar matches brand colors</h1>
<p class="report-section__aggregation-description">The browser address bar can be themed to match your site. A theme-color
<a href="https://developers.google.com/web/updates/2014/11/Support-for-theme-color-in-Chrome-39-for-Android">meta tag</a>
will upgrade the address bar when a user browses the site, and the
<a href="https://developers.google.com/web/updates/2015/08/using-manifest-to-set-sitewide-theme-color">manifest theme-color</a>
will apply the same theme site-wide once it's been added to homescreen.</p>
<ul class="report-section__individual-results">
<li class="report-section__item ">
<div class="report-section__item-details">
<span class="report-section__item-description">
Manifest exists
</span>
<span class="report-section__item-value report-section__item-value--good">Yes</span>
</div>
</li>
<li class="report-section__item ">
<div class="report-section__item-details">
<span class="report-section__item-description">
Manifest contains theme_color
</span>
<span class="report-section__item-value report-section__item-value--good">Yes</span>
</div>
</li>
<li class="report-section__item ">
<div class="report-section__item-details">
<span class="report-section__item-description">
HTML has a theme-color &lt;meta&gt;
</span>
<span class="report-section__item-value report-section__item-value--good">Yes</span>
<span class="report-section__item-raw-value">&nbsp;(#6A1B9A)</span>
</div>
</li>
</ul>
</section>
<section class="report-body__breakdown-item">
<h1 class="report-section__subtitle">Design is mobile-friendly</h1>
<p class="report-section__aggregation-description">Users increasingly experience your app on mobile devices, so it's important to
ensure that the experience can adapt to smaller screens.</p>
<ul class="report-section__individual-results">
<li class="report-section__item ">
<div class="report-section__item-details">
<span class="report-section__item-description">
HTML has a viewport &lt;meta&gt;
</span>
<span class="report-section__item-value report-section__item-value--good">Yes</span>
</div>
</li>
</ul>
</section>
</div>
<div class="js-report-by-technology" hidden="hidden">
<section class="report-body__breakdown-item">
<h1 class="report-section__subtitle">Offline</h1>
<ul class="report-section__individual-results">
<li class="report-section__item ">
<div class="report-section__item-details">
<span class="report-section__item-description">
Has a registered Service Worker
</span>
<span class="report-section__item-value report-section__item-value--good">Yes</span>
</div>
</li>
<li class="report-section__item ">
<div class="report-section__item-details">
<span class="report-section__item-description">
URL responds with a 200 when offline
</span>
<span class="report-section__item-value report-section__item-value--good">Yes</span>
</div>
</li>
<li class="report-section__item coming-soon">
<div class="report-section__item-details">
<span class="report-section__item-description">
Manifest&#x27;s start_url is in cache storage for offline use
(Coming soon)
</span>
<span class="report-section__item-value report-section__item-value--poor">¯\_(ツ)_/¯</span>
</div>
</li>
</ul>
</section>
<section class="report-body__breakdown-item">
<h1 class="report-section__subtitle">Performance</h1>
<ul class="report-section__individual-results">
<li class="report-section__item ">
<div class="report-section__item-details">
<span class="report-section__item-description">
First meaningful paint
(target value: 1,000ms )
</span>
<span class="report-section__item-value report-section__item-value--good">100</span>
<span class="report-section__item-raw-value">&nbsp;(693.50ms)</span>
</div>
</li>
<li class="report-section__item ">
<div class="report-section__item-details">
<span class="report-section__item-description">
Speed Index
(target value: 1,000 )
</span>
<span class="report-section__item-value report-section__item-value--good">97</span>
<span class="report-section__item-raw-value">&nbsp;(1453)</span>
</div>
</li>
</ul>
</section>
<section class="report-body__breakdown-item">
<h1 class="report-section__subtitle">UX</h1>
<ul class="report-section__individual-results">
<li class="report-section__item coming-soon">
<div class="report-section__item-details">
<span class="report-section__item-description">
Content scrolls at 60fps
(Coming soon)
</span>
<span class="report-section__item-value report-section__item-value--poor">¯\_(ツ)_/¯</span>
</div>
</li>
</ul>
</section>
<section class="report-body__breakdown-item">
<h1 class="report-section__subtitle">Security</h1>
<ul class="report-section__individual-results">
<li class="report-section__item ">
<div class="report-section__item-details">
<span class="report-section__item-description">
Site is on HTTPS
</span>
<span class="report-section__item-value report-section__item-value--good">Yes</span>
</div>
</li>
<li class="report-section__item ">
<div class="report-section__item-details">
<span class="report-section__item-description">
Site redirects HTTP traffic to HTTPS
</span>
<span class="report-section__item-value report-section__item-value--good">Yes</span>
</div>
</li>
</ul>
</section>
<section class="report-body__breakdown-item">
<h1 class="report-section__subtitle">Manifest</h1>
<ul class="report-section__individual-results">
<li class="report-section__item ">
<div class="report-section__item-details">
<span class="report-section__item-description">
Manifest exists
</span>
<span class="report-section__item-value report-section__item-value--good">Yes</span>
</div>
</li>
<li class="report-section__item ">
<div class="report-section__item-details">
<span class="report-section__item-description">
Manifest contains start_url
</span>
<span class="report-section__item-value report-section__item-value--good">Yes</span>
</div>
</li>
<li class="report-section__item ">
<div class="report-section__item-details">
<span class="report-section__item-description">
Manifest contains icons at least 144px
</span>
<span class="report-section__item-value report-section__item-value--good">Yes</span>
</div>
</li>
<li class="report-section__item ">
<div class="report-section__item-details">
<span class="report-section__item-description">
Manifest contains short_name
</span>
<span class="report-section__item-value report-section__item-value--good">Yes</span>
</div>
</li>
<li class="report-section__item ">
<div class="report-section__item-details">
<span class="report-section__item-description">
Manifest contains name
</span>
<span class="report-section__item-value report-section__item-value--good">Yes</span>
</div>
</li>
<li class="report-section__item ">
<div class="report-section__item-details">
<span class="report-section__item-description">
Manifest contains background_color
</span>
<span class="report-section__item-value report-section__item-value--good">Yes</span>
</div>
</li>
<li class="report-section__item ">
<div class="report-section__item-details">
<span class="report-section__item-description">
Manifest contains theme_color
</span>
<span class="report-section__item-value report-section__item-value--good">Yes</span>
</div>
</li>
<li class="report-section__item ">
<div class="report-section__item-details">
<span class="report-section__item-description">
Manifest contains icons at least 192px
</span>
<span class="report-section__item-value report-section__item-value--good">Yes</span>
</div>
</li>
</ul>
</section>
<section class="report-body__breakdown-item">
<h1 class="report-section__subtitle">HTML</h1>
<ul class="report-section__individual-results">
<li class="report-section__item ">
<div class="report-section__item-details">
<span class="report-section__item-description">
HTML has a theme-color &lt;meta&gt;
</span>
<span class="report-section__item-value report-section__item-value--good">Yes</span>
<span class="report-section__item-raw-value">&nbsp;(#6A1B9A)</span>
</div>
</li>
</ul>
</section>
<section class="report-body__breakdown-item">
<h1 class="report-section__subtitle">Mobile Friendly</h1>
<ul class="report-section__individual-results">
<li class="report-section__item ">
<div class="report-section__item-details">
<span class="report-section__item-description">
HTML has a viewport &lt;meta&gt;
</span>
<span class="report-section__item-value report-section__item-value--good">Yes</span>
</div>
</li>
</ul>
</section>
</div>
<h1 class="report-section__title" id="best-practices">Best Practices</h1>
<p class="report-section__description">
These audits do not affect your score but are worth a look.
</p>
<section class="report-body__breakdown-item">
<ul class="report-section__individual-results">
<li class="report-section__item ">
<div class="report-section__item-details">
<span class="report-section__item-description">
<span class="report-section__item-category">Accessibility:</span> Element aria-* roles are valid
</span>
<span class="report-section__item-value report-section__item-value--good">Yes</span>
</div>
</li>
<li class="report-section__item ">
<div class="report-section__item-details">
<span class="report-section__item-description">
<span class="report-section__item-category">Accessibility:</span> Element aria-* attributes are valid ARIA attributes
</span>
<span class="report-section__item-value report-section__item-value--good">Yes</span>
</div>
</li>
<li class="report-section__item ">
<div class="report-section__item-details">
<span class="report-section__item-description">
<span class="report-section__item-category">Accessibility:</span> Background and foreground colors have a sufficient contrast ratio
</span>
<span class="report-section__item-value report-section__item-value--good">Yes</span>
</div>
</li>
<li class="report-section__item ">
<div class="report-section__item-details">
<span class="report-section__item-description">
<span class="report-section__item-category">Accessibility:</span> Every image element has an alt attribute
</span>
<span class="report-section__item-value report-section__item-value--good">Yes</span>
</div>
</li>
<li class="report-section__item ">
<div class="report-section__item-details">
<span class="report-section__item-description">
<span class="report-section__item-category">Accessibility:</span> Every form element has a label
</span>
<span class="report-section__item-value report-section__item-value--good">Yes</span>
</div>
</li>
<li class="report-section__item ">
<div class="report-section__item-details">
<span class="report-section__item-description">
<span class="report-section__item-category">Accessibility:</span> No element has a tabindex attribute greater than 0
</span>
<span class="report-section__item-value report-section__item-value--good">Yes</span>
</div>
</li>
<li class="report-section__item ">
<div class="report-section__item-details">
<span class="report-section__item-description">
<span class="report-section__item-category">Manifest:</span> Manifest&#x27;s short_name won&#x27;t be truncated when displayed on homescreen
</span>
<span class="report-section__item-value report-section__item-value--good">Yes</span>
</div>
</li>
<li class="report-section__item ">
<div class="report-section__item-details">
<span class="report-section__item-description">
<span class="report-section__item-category">Manifest:</span> Manifest&#x27;s display property set to standalone/fullscreen to allow launching without address bar
</span>
<span class="report-section__item-value report-section__item-value--good">Yes</span>
<span class="report-section__item-raw-value">&nbsp;(standalone)</span>
</div>
</li>
<li class="report-section__item coming-soon">
<div class="report-section__item-details">
<span class="report-section__item-description">
<span class="report-section__item-category">UX:</span> Service worker makes use of push notifications, if appropriate
(Coming soon)
</span>
<span class="report-section__item-value report-section__item-value--poor">¯\_(ツ)_/¯</span>
</div>
</li>
<li class="report-section__item coming-soon">
<div class="report-section__item-details">
<span class="report-section__item-description">
<span class="report-section__item-category">UX:</span> Tap targets are appropriately sized for touch
(Coming soon)
</span>
<span class="report-section__item-value report-section__item-value--poor">¯\_(ツ)_/¯</span>
</div>
</li>
<li class="report-section__item coming-soon">
<div class="report-section__item-details">
<span class="report-section__item-description">
<span class="report-section__item-category">UX:</span> Payment forms marked up with [autocomplete] attributes
(Coming soon)
</span>
<span class="report-section__item-value report-section__item-value--poor">¯\_(ツ)_/¯</span>
</div>
</li>
<li class="report-section__item coming-soon">
<div class="report-section__item-details">
<span class="report-section__item-description">
<span class="report-section__item-category">UX:</span> Login forms marked up with [autocomplete] attributes
(Coming soon)
</span>
<span class="report-section__item-value report-section__item-value--poor">¯\_(ツ)_/¯</span>
</div>
</li>
<li class="report-section__item coming-soon">
<div class="report-section__item-details">
<span class="report-section__item-description">
<span class="report-section__item-category">UX:</span> Input fields use appropriate [type] attributes for custom keyboards
(Coming soon)
</span>
<span class="report-section__item-value report-section__item-value--poor">¯\_(ツ)_/¯</span>
</div>
</li>
</ul>
</section>
<h1 class="report-section__title" id="performance-metrics">Performance Metrics</h1>
<p class="report-section__description">
These encapsulate your app's performance.
</p>
<section class="report-body__breakdown-item">
<ul class="report-section__individual-results">
<li class="report-section__item">
<div class="report-section__item-details">
<span class="report-section__item-description">
Critical Request Chains
</span>
<span class="report-section__item-value">
3
</span>
</div>
<div class="report-section__item-extended-info">
<style>
.tree-marker {
width: 12px;
height: 26px;
display: block;
float: left;
background-position: top left;
}
.horiz-down {
background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjE2cHgiIGhlaWdodD0iMjZweCIgdmlld0JveD0iMCAwIDE2IDI2IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCAzLjcuMiAoMjgyNzYpIC0gaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoIC0tPgogICAgPHRpdGxlPmhvcml6LWRvd248L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz48L2RlZnM+CiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iaG9yaXotZG93biIgZmlsbD0iI0Q4RDhEOCI+CiAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMTM4IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg3LjAwMDAwMCwgMTMuMDAwMDAwKSByb3RhdGUoLTI3MC4wMDAwMDApIHRyYW5zbGF0ZSgtNy4wMDAwMDAsIC0xMy4wMDAwMDApICIgeD0iNiIgeT0iNCIgd2lkdGg9IjIiIGhlaWdodD0iMTgiPjwvcmVjdD4KICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZS0xMzkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDguMDAwMDAwLCAxOS4wMDAwMDApIHJvdGF0ZSgtMjcwLjAwMDAwMCkgdHJhbnNsYXRlKC04LjAwMDAwMCwgLTE5LjAwMDAwMCkgIiB4PSIxIiB5PSIxOCIgd2lkdGg9IjE0IiBoZWlnaHQ9IjIiPjwvcmVjdD4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==');
}
.right {
background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjE2cHgiIGhlaWdodD0iMjZweCIgdmlld0JveD0iMCAwIDE2IDI2IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCAzLjcuMiAoMjgyNzYpIC0gaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoIC0tPgogICAgPHRpdGxlPnJpZ2h0PC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9InJpZ2h0IiBmaWxsPSIjRDhEOEQ4Ij4KICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZS0xMzgiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDguMDAwMDAwLCAxMy4wMDAwMDApIHJvdGF0ZSgtMjcwLjAwMDAwMCkgdHJhbnNsYXRlKC04LjAwMDAwMCwgLTEzLjAwMDAwMCkgIiB4PSI3IiB5PSI1IiB3aWR0aD0iMiIgaGVpZ2h0PSIxNiI+PC9yZWN0PgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+');
}
.up-right {
background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjE2cHgiIGhlaWdodD0iMjZweCIgdmlld0JveD0iMCAwIDE2IDI2IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCAzLjcuMiAoMjgyNzYpIC0gaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoIC0tPgogICAgPHRpdGxlPnVwLXJpZ2h0PC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9InVwLXJpZ2h0IiBmaWxsPSIjRDhEOEQ4Ij4KICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZS0xMzgiIHg9IjciIHk9IjAiIHdpZHRoPSIyIiBoZWlnaHQ9IjE0Ij48L3JlY3Q+CiAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMTM5IiB4PSI5IiB5PSIxMiIgd2lkdGg9IjciIGhlaWdodD0iMiI+PC9yZWN0PgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+');
}
.vert-right {
background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjE2cHgiIGhlaWdodD0iMjZweCIgdmlld0JveD0iMCAwIDE2IDI2IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCAzLjcuMiAoMjgyNzYpIC0gaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoIC0tPgogICAgPHRpdGxlPnZlcnQtcmlnaHQ8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz48L2RlZnM+CiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0idmVydC1yaWdodCIgZmlsbD0iI0Q4RDhEOCI+CiAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMTM4IiB4PSI3IiB5PSIwIiB3aWR0aD0iMiIgaGVpZ2h0PSIyNyI+PC9yZWN0PgogICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTEzOSIgeD0iOSIgeT0iMTIiIHdpZHRoPSI3IiBoZWlnaHQ9IjIiPjwvcmVjdD4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==');
}
.vert {
background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjE2cHgiIGhlaWdodD0iMjZweCIgdmlld0JveD0iMCAwIDE2IDI2IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCAzLjcuMiAoMjgyNzYpIC0gaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoIC0tPgogICAgPHRpdGxlPnZlcnQ8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz48L2RlZnM+CiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0idmVydCIgZmlsbD0iI0Q4RDhEOCI+CiAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMTM4IiB4PSI3IiB5PSIwIiB3aWR0aD0iMiIgaGVpZ2h0PSIyNiI+PC9yZWN0PgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+');
}
.space {
background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgdmlld0JveD0iMCAwIDE2IDE2IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCAzLjcuMiAoMjgyNzYpIC0gaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoIC0tPgogICAgPHRpdGxlPmhvcml6LWRvd248L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz48L2RlZnM+CiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iaG9yaXotZG93biI+PC9nPgogICAgPC9nPgo8L3N2Zz4=');
}
.cnc-tree {
font-size: 14px;
width: 100%;
overflow-x: auto;
}
.cnc-node {
height: 26px;
line-height: 26px;
white-space: nowrap;
}
.cnc-node__tree-value {
margin-left: 10px;
}
.cnc-node__chain-duration {
font-weight: bold;
}
.cnc-node__tree-hostname {
color: #999;
}
</style>
<div class="cnc-tree">
<div>Longest request chain (shorter is better): <strong>2</strong></div>
<div>Longest chain duration (shorter is better): <strong>1636.55ms</strong></div>
<div>
<div>Initial navigation</div>
<div class="cnc-node" title="55920.1">
<span class="cnc-node__tree-marker">
<span class="tree-marker vert-right"></span>
<span class="tree-marker right"></span>
<span class="tree-marker horiz-down"></span>
</span>
<span class="cnc-node__tree-value">
<span class="cnc-node__tree-file">/</span>
<span class="cnc-node__tree-hostname">(pwa-stage.localnerve.net)</span>
</span>
</div>
<div class="cnc-node" title="55920.6">
<span class="cnc-node__tree-marker">
<span class="tree-marker vert"></span>
<span class="tree-marker space"></span>
<span class="tree-marker vert-right"></span>
<span class="tree-marker right"></span>
<span class="tree-marker right"></span>
</span>
<span class="cnc-node__tree-value">
<span class="cnc-node__tree-file">v9/ODelI1aHBYDBqgeIAH2zlNV_2ngZ8dMf8fLgjYEouxg.woff2</span>
<span class="cnc-node__tree-hostname">(fonts.gstatic.com)</span>
- <span class="cnc-node__chain-duration">1079.19ms</span>
</span>
</div>
<div class="cnc-node" title="55920.5">
<span class="cnc-node__tree-marker">
<span class="tree-marker vert"></span>
<span class="tree-marker space"></span>
<span class="tree-marker up-right"></span>
<span class="tree-marker right"></span>
<span class="tree-marker right"></span>
</span>
<span class="cnc-node__tree-value">
<span class="cnc-node__tree-file">scripts/main.b490ba8ebe65ca38865d.min.js</span>
<span class="cnc-node__tree-hostname">(pwa-stage.localnerve.net)</span>
- <span class="cnc-node__chain-duration">1351.99ms</span>
</span>
</div>
<div class="cnc-node" title="55920.62">
<span class="cnc-node__tree-marker">
<span class="tree-marker up-right"></span>
<span class="tree-marker right"></span>
<span class="tree-marker right"></span>
</span>
<span class="cnc-node__tree-value">
<span class="cnc-node__tree-file">images/favicon-5ce10b3605.ico</span>
<span class="cnc-node__tree-hostname">(pwa-stage.localnerve.net)</span>
- <span class="cnc-node__chain-duration">164.47ms</span>
</span>
</div>
</div>
</div>
</div>
</li>
<li class="report-section__item">
<div class="report-section__item-details">
<span class="report-section__item-description">
User Timing measures
</span>
<span class="report-section__item-value">
0
</span>
</div>
</li>
</ul>
</section>
</div>
</div>
<footer class="footer">
Generated by Lighthouse on 7/15/2016, 7:10:35 PM EDT | <a href="https://github.com/GoogleChrome/Lighthouse/issues" target="_blank">File an issue</a>
</footer>
</section>
</div>
<script>/**
* @license
* Copyright 2016 Google Inc. All rights reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/* global window, document */
'use strict';
/* Using ES5 to broaden support */
function LighthouseReport() {
this.printButton = document.querySelector('.js-print');
this.checkboxToggleView = document.querySelector('.js-toggle-view');
this.viewUserFeature = document.querySelector('.js-report-by-user-feature');
this.viewTechnology = document.querySelector('.js-report-by-technology');
this.updateView = this.updateView.bind(this);
this.addEventListeners();
}
LighthouseReport.prototype = {
onPrint: function() {
window.print();
},
updateView: function() {
if (this.checkboxToggleView.checked) {
this.viewUserFeature.setAttribute('hidden', 'hidden');
this.viewTechnology.removeAttribute('hidden');
} else {
this.viewUserFeature.removeAttribute('hidden');
this.viewTechnology.setAttribute('hidden', 'hidden');
}
},
addEventListeners: function() {
this.printButton.addEventListener('click', this.onPrint);
this.checkboxToggleView.addEventListener('change', this.updateView);
}
};
(function() {
return new LighthouseReport();
})();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment