k-logging
Version:
1,495 lines (1,282 loc) • 235 kB
HTML
<!--
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 lang="en" data-report-context="cli">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
<link rel="shortcut icon" href="https://raw.githubusercontent.com/GoogleChrome/lighthouse/master/assets/lh_logo_icon.png">
<title>Lighthouse report: https://airhorner.com/</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.
*/
* {
box-sizing: border-box;
}
span, div, p, section, header, h1, h2, li, ul {
margin: 0;
padding: 0;
line-height: inherit;
}
:root {
--text-font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
--text-color: #222;
--secondary-text-color: #606060;
--accent-color: #3879d9;
--poor-color: #eb211e;
--good-color: #1ac123;
--average-color: #ffae00;
--warning-color: #f6be00;
--gutter-gap: 12px;
--gutter-width: 40px;
--body-font-size: 14px;
--body-line-height: 20px;
--subitem-font-size: 14px;
--subitem-line-height: 20px;
--subheading-font-size: 16px;
--subheading-line-height: 24px;
--subheading-color: inherit;
--heading-font-size: 24px;
--heading-line-height: 32px;
--subitem-indent: 24px;
--max-line-length: none;
--report-width: 1280px;
--report-menu-width: 280px;
--report-header-height: 58px;
}
:root[data-report-context="devtools"] {
--text-font-family: '.SFNSDisplay-Regular', 'Helvetica Neue', 'Lucida Grande', sans-serif;
--body-font-size: 13px;
--body-line-height: 17px;
--subitem-font-size: 14px;
--subitem-line-height: 18px;
--subheading-font-size: 16px;
--subheading-line-height: 20px;
--report-header-height: 0;
--heading-font-size: 20px;
--heading-line-height: 24px;
--subitem-indent: 24px;
--max-line-length: calc(60 * var(--body-font-size));
}
html {
font-family: var(--text-font-family);
font-size: var(--body-font-size);
line-height: 1;
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
/* When deep linking to a section, bump the heading down so it's not covered by the top nav. */
:target.aggregations {
padding-top: calc(var(--report-header-height) + var(--heading-line-height)) !important;
}
a {
color: #15c;
}
body {
display: flex;
flex-direction: column;
align-items: stretch;
margin: 0;
background: #f5f5f5;
}
.report-error {
font-family: consolas, monospace;
}
.error-stack {
white-space: pre-wrap;
}
.error-results {
background: #dedede;
max-height: 600px;
overflow: auto;
border-radius: 2px;
}
.report {
width: 100%;
margin: 0 auto;
max-width: var(--report-width);
background: #fff;
box-shadow: 0 0 6px 0 rgba(0,0,0,0.26);
}
.report-body__icon {
width: 24px;
height: 24px;
border: none;
cursor: pointer;
flex: 0 0 auto;
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
background-color: transparent;
margin-left: 8px;
opacity: 0.7;
}
.report-body__icon:hover {
opacity: 1;
}
.report__icon.share {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z"/></svg>');
display: none;
height: 20px;
}
.report__icon.print {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 8H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H6v4h12V3z"/><path fill="none" d="M0 0h24v24H0z"/></svg>');
}
.report__icon.copy {
background-image: url('data:image/svg+xml;utf8,<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/></svg>');
}
.report__icon.open {
background-image: url('data:image/svg+xml;utf8,<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 4H5c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h4v-2H5V8h14v10h-4v2h4c1.1 0 2-.9 2-2V6c0-1.1-.89-2-2-2zm-7 6l-4 4h3v6h2v-6h3l-4-4z"/></svg>');
}
.report__icon.download {
background-image: url('data:image/svg+xml;utf8,<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>');
}
#lhresults-dump {
display: none !important;
}
@keyframes rotate {
from {
transform: none;
}
to {
transform: rotate(360deg);
}
}
.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 {
margin-left: var(--report-menu-width);
position: relative;
}
.report-body__aggregations-container {
will-change: transform;
padding-top: var(--report-header-height);
}
.report-body__menu-container {
height: 100%;
width: 100%;
min-width: 230px;
max-width: var(--report-width);
position: fixed;
will-change: transform;
left: 50%;
transform: translateX(-50%);
top: 0;
pointer-events: none;
}
.menu {
width: var(--report-menu-width);
background: #fff;
height: 100%;
top: 0;
left: 0;
pointer-events: auto;
border-right: 1px solid #dfdfdf;
}
.menu__header {
background: #2238b3;
padding: 0 20px;
height: 115px;
line-height: 54px;
color: #fff;
font-family: var(--text-font-family);
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;utf-8,<svg width="86" height="86" viewBox="0 0 86 86" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>Beta</title><defs><path id="b" d="M-11.704 13.144H125.58v30H-11.703z"/><filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="a"><feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0" in="shadowBlurOuter1"/></filter><path id="d" d="M.4 16.972h119v28.4H.4z"/><filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="c"><feGaussianBlur stdDeviation="3.5" in="SourceAlpha" result="shadowBlurInner1"/><feOffset in="shadowBlurInner1" result="shadowOffsetInner1"/><feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"/><feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.689509737 0" in="shadowInnerInner1"/></filter><text id="f" font-family="Arial-BoldMT, Arial" font-size="13" font-weight="bold" fill="#FFF"><tspan x="37.556" y="34.556">BETA</tspan></text><filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="e"><feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur stdDeviation=".5" in="shadowOffsetOuter1" result="shadowBlurOuter1"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.140964674 0" in="shadowBlurOuter1"/></filter></defs><g fill="none" fill-rule="evenodd"><g mask="url(#mask-2)" transform="rotate(45 55.44 24.523)"><use fill="#000" filter="url(#a)" xlink:href="#b"/><use fill="#CF3A3C" xlink:href="#b"/></g><use filter="url(#c)" xlink:href="#d" mask="url(#mask-2)" transform="rotate(45 58.4 27.55)" fill="#000"/><g mask="url(#mask-2)" transform="rotate(45 52.556 36.435)" fill="white"><use filter="url(#e)" xlink:href="#f"/><use xlink:href="#f"/></g><path d="M8.5-.5l88.204 88.204M8.5-39.5l88.204 88.204" stroke="#FFF" stroke-linecap="square" stroke-dasharray="1,2" opacity=".386" mask="url(#mask-2)" transform="translate(-3)"/></g></svg>') top right no-repeat;
}
.menu__header-title {
font-family: var(--text-font-family);
font-weight: 300;
color: #fff;
margin: 0;
padding: 0;
line-height: 1.5;
}
.menu__header-version {
opacity: 0.4;
color: #fff;
font-family: var(--text-font-family);
font-size: 14px;
line-height: 1.5;
}
.menu__report-tab {
padding: 3px 13px;
color: #777;
border-top: 1px solid #ebebeb;
display: flex;
flex-direction: column;
cursor: pointer;
text-decoration: none;
height: 55px;
}
.menu__report-tab:hover {
background-color: #448aff;
color: #fff;
}
.menu__report-tab__url {
font-size: 15px;
font-weight: 700;
text-overflow: ellipsis;
line-height: 30px;
white-space: nowrap;
overflow: hidden;
}
.menu__report-tab__time {
font-size: 11px;
line-height: 11px;
padding-left: 2px;
}
.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__report-tab + .menu__nav .menu__link {
padding-left: 35px;
}
.menu__link:hover {
background-color: #448aff;
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;
}
.report-body__metadata {
flex: 1 1 0;
white-space: nowrap;
padding-right: 10px;
overflow: hidden;
}
.report-body__buttons {
display: flex;
align-items: center;
flex-shrink: 0;
}
.report-body__url {
font-family: var(--text-font-family);
white-space: nowrap;
font-size: 13px;
font-weight: 400;
color: var(--secondary-text-color);
line-height: 20px;
overflow: hidden;
text-overflow: ellipsis;
}
.report-body__url a {
color: currentColor;
}
.report-body__breakdown {
flex: 1;
max-width: 100%;
}
.report-body__breakdown-item {
padding-bottom: 6px;
}
.report-body__breakdown-item:last-of-type {
border: none;
}
.report-body__header {
height: var(--report-header-height);
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
border-bottom: 1px solid #ebebeb;
padding-right: 14px;
position: fixed;
width: calc(100vw - var(--report-menu-width));
max-width: calc( var(--report-width) - var(--report-menu-width));
z-index: 1;
will-change: transform;
background: #fafafa;
}
.report-body__header-toggle {
background-image: url('data:image/svg+xml;utf8,<svg fill="black" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"/><path d="M0-.25h24v24H0z" fill="none"/></svg>');
width: 24px;
height: 24px;
border: none;
flex: 0 0 auto;
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
background-color: transparent;
margin: 0 8px 0 8px;
cursor: pointer;
}
.report-body__header-container.expanded .report-body__header-toggle {
background-image: url('data:image/svg+xml;utf8,<svg fill="black" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/><path d="M0 0h24v24H0z" fill="none"/></svg>');
}
.report-body__header-content {
display: none;
padding: 10px 0 10px 42px;
top: 100%;
left: 0;
position: absolute;
width: 100%;
background: inherit;
}
.report-body__header-container.expanded .report-body__header-content {
display: block;
border-bottom: 1px solid #ebebeb;
}
.report-body__header-content .config-section {
padding: 15px 0 15px 0;
}
.report-body__header-content .config-section__title {
font-size: var(--subheading-font-size);
font-weight: 400;
line-height: var(--subheading-line-height);
color: var(--subheading-color);
}
.report-body__header-content .config-section__items {
margin-left: 30px;
margin-top: 15px;
}
.report-body__header-content .config-section__item {
margin-top: 5px;
}
.report-body__header-content .config-section__desc {
line-height: var(--subitem-line-height);
word-wrap: break-word;
}
.report-body__fixed-footer-container {
margin-left: var(--report-menu-width);
max-width: calc( var(--report-width) - var(--report-menu-width));
width: calc(100vw - var(--report-menu-width));
position: fixed;
bottom: 0;
z-index: 1;
}
.report-section__title {
-webkit-font-smoothing: antialiased;
font-family: var(--text-font-family);
font-size: 28px;
font-weight: 500;
color: #49525F;
display: flex;
margin: 0.4em 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: var(--text-font-family);
font-size: 18px;
font-weight: 500;
color: #719EA8;
display: flex;
margin: 24px 0 16px 0;
}
.report-section__description {
color: #5f6875;
font-size: 16px;
margin: 0 0 1em 0;
line-height: 1.4;
max-width: 750px;
}
.report-section__description:empty {
margin: 0;
}
.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;
margin: 0 0 16px 24px;
max-width: 90%;
}
.report-section__item-extended-info:empty {
margin: 0;
}
.report-section__item-helptext {
font-size: 14px;
color: #999;
font-style: italic;
padding: 8px 0 16px 24px;
max-width: 90%;
}
.report-section__item-help-toggle {
color: currentColor;
border-radius: 50%;
width: 21px;
height: 21px;
display: inline-flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: all 0.2s cubic-bezier(0,0,0.3,1);
font-size: 90%;
font-weight: 600;
margin-left: 8px;
vertical-align: top;
opacity: 0.6;
box-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.report-section__item-help-toggle:hover {
opacity: 1;
box-shadow: 0 1px 2px rgba(0,0,0,0.7);
}
.report-section__item-raw-value {
color: #777;
}
.report-section__item-description {
flex: 1;
}
.footer {
margin-top: 40px;
margin-left: var(--report-menu-width);
height: 130px;
line-height: 90px;
text-align: center;
font-size: 12px;
border-top: 1px solid #ebebeb;
color: #999;
}
.devtabs {
flex: 0 1 auto;
background: right 0 / auto 27px no-repeat url(tabs_right.png),
0 0 / auto 27px no-repeat url(tabs_left.png),
0 0 / auto 27px repeat-x url(tabs_center.png);
height: 27px;
}
.aggregations__header {
position: relative;
}
.aggregations__header > h2 {
font-size: var(--heading-font-size);
font-weight: 400;
line-height: var(--heading-line-height);
}
.aggregations {
padding: var(--heading-line-height);
padding-left: calc(var(--heading-line-height) + var(--gutter-width) + var(--gutter-gap));
}
.aggregations:not(:first-child) {
border-top: 1px solid #ccc;
}
.aggregations__desc {
font-size: var(--body-font-size);
line-height: var(--body-line-height);
margin-top: calc(var(--body-line-height) / 2);
}
.section-result {
position: absolute;
top: 0;
left: calc((var(--gutter-width) + var(--gutter-gap)) * -1);
width: var(--gutter-width);
display: flex;
flex-direction: column;
align-items: flex-end;
}
.section-result__score {
display: flex;
flex-direction: column;
align-items: stretch;
background: #000;
color: #fff;
text-align: center;
padding: 4px 8px;
border-radius: 2px;
}
.section-result__points {
font-size: var(--heading-font-size);
}
.section-result__divider {
display: none;
}
.section-result__total {
font-size: var(--body-font-size);
margin-top: 2px;
border-top: 1px solid #fff;
padding-top: 4px;
}
.aggregation__header {
max-width: var(--max-line-length);
}
.aggregation__header > h2 {
font-size: var(--subheading-font-size);
font-weight: 400;
line-height: var(--subheading-line-height);
color: var(--subheading-color);
}
.aggregation {
margin-top: var(--subheading-line-height);
max-width: var(--max-line-length);
}
.aggregation__desc {
font-size: var(--body-font-size);
line-height: var(--body-line-height);
margin-top: calc(var(--body-line-height) / 2);
}
.subitems {
list-style: none;
margin-top: var(--subitem-line-height);
}
.subitem {
position: relative;
font-size: var(--subitem-font-size);
padding-left: calc(var(--subitem-indent) + var(--gutter-width) + var(--gutter-gap));
margin-top: calc(var(--subitem-line-height) / 2);
}
.subitem strong {
font-weight: 700;
}
.subitem small {
font-size: var(--body-font-size);
}
.subitem__desc {
line-height: var(--subitem-line-height);
}
.subitem-result {
position: absolute;
top: 0;
left: var(--subitem-indent);
width: var(--gutter-width);
display: flex;
flex-direction: column;
align-items: flex-end;
}
.subitem-result__good, .subitem-result__poor, .subitem-result__unknown {
position: relative;
display: block;
overflow: hidden;
margin-top: calc((var(--subitem-line-height) - 16px) / 2);
width: 16px;
height: 16px;
border-radius: 50%;
color: transparent;
background-color: #000;
}
.subitem-result__good::after, .subitem-result__poor::after, .subitem-result__unknown::after {
content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: #fff;
}
.subitem-result__good::after {
background: url('data:image/svg+xml;utf8,<svg width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><title>good</title><path d="M9.17 2.33L4.5 7 2.83 5.33 1.5 6.66l3 3 6-6z" fill="white" fill-rule="evenodd"/></svg>') no-repeat 50% 50%;
background-size: 12px;
}
.subitem-result__poor::after {
background: url('data:image/svg+xml;utf8,<svg width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><title>poor</title><path d="M8.33 2.33l1.33 1.33-2.335 2.335L9.66 8.33 8.33 9.66 5.995 7.325 3.66 9.66 2.33 8.33l2.335-2.335L2.33 3.66l1.33-1.33 2.335 2.335z" fill="white"/></svg>') no-repeat 50% 50%;
background-size: 12px;
}
.subitem-result__unknown::after {
background: url('data:image/svg+xml;utf8,<svg width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><title>neutral</title><path d="M2 5h8v2H2z" fill="white" fill-rule="evenodd"/></svg>') no-repeat 50% 50%;
background-size: 12px;
}
.subitem-result__points {
margin-top: calc((var(--subitem-line-height) - var(--subitem-font-size) - 4px) / 2);
background: #000;
padding: 2px 4px;
border-radius: 1px;
color: #fff;
border-radius: 2px;
}
.subitem__details {
list-style: none;
margin: 0;
padding: 0;
margin-left: var(--subitem-indent);
}
.subitem__detail {
font-size: var(--body-font-size);
line-height: var(--body-line-height);
margin-top: calc(var(--body-line-height) / 2);
}
.subitem__help-toggle {
-webkit-appearance: none;
-moz-appearance: none;
width: 16px;
height: 16px;
border-radius: 50%;
border: 1px solid #ccc;
vertical-align: middle;
margin-left: 8px;
outline: 0;
cursor: pointer;
}
.subitem__help-toggle + label {
position: relative;
display: inline-block;
height: 12px;
width: 12px;
left: -21px;
top: 2px;
pointer-events: none;
}
.subitem__help-toggle + label::after {
content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
height: 12px;
width: 12px;
display: inline-block;
background: url('data:image/svg+xml;utf8,<svg width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><title>help</title><path d="M5.216 7.457c0-.237.011-.452.033-.645.021-.194.058-.372.11-.535a1.918 1.918 0 0 1 .55-.847 3.65 3.65 0 0 0 .545-.597c.133-.19.2-.398.2-.623 0-.28-.053-.485-.16-.616-.107-.13-.268-.196-.482-.196a.583.583 0 0 0-.457.207.834.834 0 0 0-.15.271c-.04.111-.062.244-.065.398H3.67c.003-.401.067-.745.19-1.032a1.96 1.96 0 0 1 .5-.707c.208-.185.455-.32.738-.406A3.13 3.13 0 0 1 6.012 2c.359 0 .682.046.968.137.287.091.53.227.729.406.2.18.352.401.457.667.105.265.158.571.158.919 0 .233-.03.44-.091.624-.061.182-.145.353-.252.51-.107.158-.233.311-.378.46-.145.149-.3.306-.465.47a2.084 2.084 0 0 0-.24.275c-.063.09-.115.183-.152.282a1.57 1.57 0 0 0-.084.323 2.966 2.966 0 0 0-.033.384H5.216zm-.202 1.634a.96.96 0 0 1 .067-.36.828.828 0 0 1 .19-.287.913.913 0 0 1 .291-.191.969.969 0 0 1 .376-.07c.138 0 .263.023.375.07.112.046.21.11.292.19.082.081.146.177.19.288a.96.96 0 0 1 .067.36.96.96 0 0 1-.067.36.828.828 0 0 1-.19.288.913.913 0 0 1-.292.191.969.969 0 0 1-.375.07.969.969 0 0 1-.376-.07.913.913 0 0 1-.291-.19.828.828 0 0 1-.19-.288.96.96 0 0 1-.067-.36z" fill="rgb(117,117,117)"/></svg>') no-repeat 50% 50%;
}
.subitem__help-toggle:hover {
border-color: var(--secondary-text-color);
}
.subitem__help-toggle:checked {
background-color: var(--accent-color);
border-color: var(--accent-color);
}
.subitem__help-toggle:checked + label::after {
content: '';
background: url('data:image/svg+xml;utf8,<svg width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><title>help</title><path d="M5.216 7.457c0-.237.011-.452.033-.645.021-.194.058-.372.11-.535a1.918 1.918 0 0 1 .55-.847 3.65 3.65 0 0 0 .545-.597c.133-.19.2-.398.2-.623 0-.28-.053-.485-.16-.616-.107-.13-.268-.196-.482-.196a.583.583 0 0 0-.457.207.834.834 0 0 0-.15.271c-.04.111-.062.244-.065.398H3.67c.003-.401.067-.745.19-1.032a1.96 1.96 0 0 1 .5-.707c.208-.185.455-.32.738-.406A3.13 3.13 0 0 1 6.012 2c.359 0 .682.046.968.137.287.091.53.227.729.406.2.18.352.401.457.667.105.265.158.571.158.919 0 .233-.03.44-.091.624-.061.182-.145.353-.252.51-.107.158-.233.311-.378.46-.145.149-.3.306-.465.47a2.084 2.084 0 0 0-.24.275c-.063.09-.115.183-.152.282a1.57 1.57 0 0 0-.084.323 2.966 2.966 0 0 0-.033.384H5.216zm-.202 1.634a.96.96 0 0 1 .067-.36.828.828 0 0 1 .19-.287.913.913 0 0 1 .291-.191.969.969 0 0 1 .376-.07c.138 0 .263.023.375.07.112.046.21.11.292.19.082.081.146.177.19.288a.96.96 0 0 1 .067.36.96.96 0 0 1-.067.36.828.828 0 0 1-.19.288.913.913 0 0 1-.292.191.969.969 0 0 1-.375.07.969.969 0 0 1-.376-.07.913.913 0 0 1-.291-.19.828.828 0 0 1-.19-.288.96.96 0 0 1-.067-.36z" fill="white"/></svg>') no-repeat 50% 50%;
background-size: contain;
border-radius: 50%;
background-color: var(--accent-color);
}
.subitem__help {
display: none;
font-size: var(--body-font-size);
line-height: var(--body-line-height);
margin-top: calc(var(--body-line-height) / 2);
margin-left: var(--subitem-indent);
}
.subitem__help-toggle:checked ~ .subitem__help {
display: block;
}
.subitem__debug {
font-size: var(--body-font-size);
line-height: var(--body-line-height);
margin-top: calc(var(--body-line-height) / 2);
margin-left: var(--subitem-indent);
color: var(--poor-color);
}
.score-good-bg {
background-color: var(--good-color);
}
.score-average-bg {
background-color: var(--average-color);
}
.score-poor-bg {
background-color: var(--poor-color);
}
.score-warning-bg {
background-color: var(--warning-color);
}
.export-section {
position: relative;
}
.export-button {
display: inline-flex;
background-color: #fff;
border: 1px solid #ccc;
box-sizing: border-box;
min-width: 5.14em;
padding: 0.7em 1.1em;
letter-spacing: 0.02em;
border-radius: 3px;
cursor: pointer;
color: var(--secondary-text-color);
outline: 0;
font-weight: 500;
}
.export-dropdown {
position: absolute;
background-color: #fafafa;
border: 1px solid #ccc;
border-radius: 3px;
margin: 0;
padding: 8px 0;
cursor: pointer;
top: 36px;
right: 0;
z-index: 1;
box-shadow: 1px 1px 3px #ccc;
min-width: 125px;
list-style: none;
line-height: 1.5em;
visibility: hidden;
clip: rect(0, 164px, 0, 0);
opacity: 0;
transition: all 200ms cubic-bezier(0,0,0.2,1);
}
.export-button:focus,
.export-button.active {
box-shadow: 1px 1px 3px #ccc;
}
.export-button.active + .export-dropdown {
visibility: visible;
opacity: 1;
clip: rect(0, 164px, 200px, 0);
}
.export-dropdown a {
display: block;
color: currentColor;
text-decoration: none;
white-space: nowrap;
padding: 0 12px;
line-height: 1.8;
}
.export-dropdown a:hover,
.export-dropdown a:focus {
background-color: rgb(239,239,239);
outline: 0;
}
.export-dropdown .report__icon {
background-repeat: no-repeat;
background-position: 8px 50%;
background-size: 18px;
text-indent: 18px;
}
/* copy icon is needs slight adjustments to look great */
.export-dropdown .report__icon.copy {
background-size: 16px;
background-position: 9px 50%;
}
.log-wrapper {
position: fixed;
top: 0;
display: flex;
align-content: center;
width: 100%;
pointer-events: none;
}
#log {
margin: 0 auto;
padding: 16px 32px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
background: rgba(0,0,0,0.6);
max-width: 500px;
line-height: 1.4;
color: #fff; /*#E53935;*/
font-size: 16px;
transition: transform 300ms ease-in-out;
transform: translateY(-100%);
}
#log.show {
transform: translateY(0);
}
@media print {
body {
-webkit-print-color-adjust: exact; /* print background colors */
}
.report {
box-shadow: none;
}
.report-body__header-container,
.report-body__menu-container {
display: none;
}
.report-body__content {
margin-left: 0;
}
.log-wrapper {
display: none;
}
}
@media screen and (max-width: 400px) {
.report-body__metadata {
margin-right: 8px;
max-width: 65%;
}
}
@media screen and (max-width: 767px) {
:root {
--subitem-indent: 8px;
--gutter-width: 16px;
}
.aggregations {
padding-right: 8px;
}
.report-body__menu-container {
display: none;
}
.report-body__content,
.report-body__fixed-footer-container {
margin-left: 0;
}
.report-body__header,
.report-body__fixed-footer-container {
width: 100%;
}
.report-body__header {
padding-right: 8px;
}
.export-dropdown {
right: 0;
left: initial;
}
.footer {
margin-top: 0;
margin-left: 0;
height: auto;
}
}
:root[data-report-context="devtools"] .report {
margin: 10px 10px;
padding: 10px;
box-shadow: none;
max-width: none;
width: auto;
}
:root[data-report-context="devtools"] .report-body__aggregations-container > section:first-child {
padding-top: calc(var(--heading-line-height) / 3);
}
:root[data-report-context="devtools"] .report-body__menu-container {
display: none;
}
:root[data-report-context="devtools"] .report-body__header-container {
display: none;
}
:root[data-report-context="devtools"] .report-body__content {
margin-left: 0;
}
:root[data-report-context="devtools"] .footer {
display: none;
}
:root[data-report-context="viewer"] .share {
display: initial;
}
/* app z-indexes */
.log-wrapper {
z-index: 3;
}
.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;
}
.table_list {
--image-preview: 24px;
margin-top: 8px;
border: 1px solid #EBEBEB;
border-spacing: 0;
table-layout: fixed;
}
.table_list.multicolumn {
width: 100%;
}
.table_list th,
.table_list td {
overflow: auto;
}
.table_list th {
background-color: #eee;
padding: 12px 10px;
line-height: 1.2;
}
.table_list td {
padding: 10px;
}
.table_list th:first-of-type,
.table_list td:first-of-type {
white-space: nowrap;
}
.table_list tr:nth-child(even),
.table_list tr:hover {
background-color: #fafafa;
}
.table_list code, .table_list pre {
white-space: pre;
font-family: monospace;
display: block;
margin: 0;
}
.table_list em + code, .table_list em + pre {
margin-top: 10px;
}
.table_list td img {
height: var(--image-preview);
width: var(--image-preview);
object-fit: contain;
}
.table_list .preview-image {
width: calc(var(--image-preview) * 2);
}
.http-resource__protocol,
.http-resource__code {
color: var(--secondary-text-color);
}
.http-resource__code {
text-overflow: ellipsis;
overflow: hidden;
white-space: pre-line;
}
.ut-measure_listing-duration {
font-weight: bold;
}
/*# sourceURL=inline-styles.css */
</style>
</head>
<body>
<div class="js-report report">
<section class="report-body">
<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>
<div class="menu__header-version">Version: 1.5.1</div>
</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>
<li class="menu__nav-item">
<a class="menu__link" href="#fancier-stuff">
Fancier stuff
</a>
</li>
</ul> </div>
</div>
<div class="report-body__header-container js-header-container">
<div class="report-body__header">
<button class="report-body__header-toggle js-header-toggle" title="See report's runtime settings"></button>
<div class="report-body__metadata">
<div class="report-body__url">Results for: <a href="https://airhorner.com/" target="_blank" rel="noopener">https://airhorner.com/</a></div>
<div class="report-body__url">Generated on: 2/21/2017, 9:13:29 AM GMT+8</div>
</div>
<div class="report-body__buttons">
<div class="export-section">
<button class="export-button js-export" title="Export report in different formats">Export...</button>
<ul class="export-dropdown">
<li><a href="#" class="report__icon print" data-action="print">Print...</a></li>
<li><a href="#" class="report__icon copy" data-action="copy">Copy JSON</a></li>
<li><a href="#" class="report__icon download" data-action="save-html" data-context="cli">Save as HTML</a></li>
<li><a href="#" class="report__icon download" data-action="save-json" data-context="cli">Save as JSON</a></li>
<li><a href="#" class="report__icon open" data-action="open-viewer" data-context="cli">Open in Viewer</a></li>
</ul>
</div>
<button class="report__icon report-body__icon share js-share" title="Share report on GitHub"></button>
</div>
<div class="report-body__header-content">
<section class="config-section">
<h2 class="config-section__title">Runtime Environment</h2>
<ul class="config-section__items">
<li class="config-section__item">
<p class="config-section__desc">
Device Emulation (Nexus 5X):
<strong> Enabled</strong>
</p>
</li>
<li class="config-section__item">
<p class="config-section__desc">
Network Throttling (150ms RTT, 1.6Mbps down, 0.7Mbps up):
<strong> Enabled</strong>
</p>
</li>
<li class="config-section__item">
<p class="config-section__desc">
CPU Throttling (5x slowdown):
<strong> Disabled</strong>
</p>
</li>
</ul>
</section>
</div>
</div>
</div>
<div class="report-body__aggregations-container">
<section class="js-breakdown aggregations" id="progressive-web-app">
<header class="aggregations__header">
<h2>Progressive Web App</h2>
<p class="aggregations__desc">These audits validate the aspects of a Progressive Web App.</p>
<div class="section-result">
<span class="section-result__score score-good-bg">
<span class="section-result__points">99</span>
<span class="section-result__divider">/</span>
<span class="section-result__total">100</span>
</span>
</div>
</header>
<div class="js-report-by-user-feature">
<section class="aggregation">
<header class="aggregation__header">
<h2>App can load on offline/flaky connections</h2>
<p class="aggregation__desc">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/" target="_blank" rel="noopener" >Service Worker</a>.</p>
</header>
<ul class="subitems">
<li class="subitem ">
<p class="subitem__desc">
Registers a Service Worker
<input type="checkbox" class="subitem__help-toggle" title="Toggle help text">
<label class="subitem__help-toggle-label"></label>
<span class="subitem__help">
The service worker is the technology that enables your app to use many Progressive Web App features, such as offline, add to homescreen, and push notifications. <a href="https://developers.google.com/web/tools/lighthouse/audits/registered-service-worker" target="_blank" rel="noopener" >Learn more</a>.
</span>
</p>
<div class="subitem-result">
<span class="subitem-result__good score-good-bg">Pass</span>
</div> </li>
<li class="subitem ">
<p class="subitem__desc">
Responds with a 200 when offline
<input type="checkbox" class="subitem__help-toggle" title="Toggle help text">
<label class="subitem__help-toggle-label"></label>
<span class="subitem__help">
If you're building a Progressive Web App, consider using a service worker so that your app can work offline. <a href="https://developers.google.com/web/tools/lighthouse/audits/http-200-when-offline" target="_blank" rel="noopener" >Learn more</a>.
</span>
</p>
<div class="subitem-result">
<span class="subitem-result__good score-good-bg">Pass</span>
</div> </li>
</ul>
</section>
<section class="aggregation">
<header class="aggregation__header">
<h2>Page load performance is fast</h2>
<p class="aggregation__desc">Users notice if sites and apps don't perform well. These top-level metrics capture the most important perceived performance concerns.</p>
</header>
<ul class="subitems">
<li class="subitem ">
<p class="subitem__desc">
First meaningful paint<strong class="subitem__raw-value">: 2465.2ms</strong>
<small>(target: 1,600ms)</small>
<input type="checkbox" class="subitem__help-toggle" title="Toggle help text">
<label class="subitem__help-toggle-label"></label>
<span class="subitem__help">
First meaningful paint measures when the primary content of a page is visible. <a href="https://developers.google.com/web/tools/lighthouse/audits/first-meaningful-paint" target="_blank" rel="noopener" >Learn more</a>.
</span>
</p>
<div class="subitem-result">
<span class="subitem-result__points score-good-bg">
83
</span>
</div> </li>
<li class="subitem ">
<p class="subitem__desc">
Perceptual Speed Index<strong class="subitem__raw-value">: 2480</strong>
<small>(target: 1,250)</small>
<input type="checkbox" class="subitem__help-toggle" title="Toggle help text">
<label class="subitem__help-toggle-label"></label>
<span class="subitem__help">
Speed Index shows how quickly the contents of a page are visibly populated. <a href="https://developers.google.com/web/tools/lighthouse/audits/speed-index" target="_blank" rel="noopener" >Learn more</a>.
</span>
</p>
<div class="subitem-result">
<span class="subitem-result__points score-good-bg">
87
</span>
</div><ul class="subitem__details">
<li class="subitem__detail">First Visual Change: <strong>2480ms</strong></li>
<li class="subitem__detail">Last Visual Change: <strong>2480ms</strong></li>
</ul>
</li>
<li class="subitem ">
<p class="subitem__desc">
Estimated Input Latency<strong class="subitem__raw-value">: 16ms</strong>
<small>(target: 50ms)</small>
<input type="checkbox" class="subitem__help-toggle" title="Toggle help text">
<label class="subitem__help-toggle-label"></label>
<span class="subitem__help">
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 of latency, or less. 10% of the time a user can expect additional latency. If your score is higher than Lighthouse's target score, users may perceive your app as laggy. <a href="https://developers.google.com/web/tools/lighthouse/audits/estimated-input-latency" target="_blank" rel="noopener" >Learn more</a>.
</span>
</p>
<div class="subitem-result">
<span class="subitem-result__points score-good-bg">
100
</span>
</div> </li>
<li class="subitem ">
<p class="subitem__desc">
Time To Interactive (alpha)<strong class="subitem__raw-value">: 2474ms</strong>
<small>(target: 5,000ms)</small>
<input type="checkbox" class="subitem__help-toggle" title="Toggle help text">
<label class="subitem__help-toggle-label"></label>
<span class="subitem__help">
Time to Interactive identifies the time at which your app appears to be ready enough to interact with. <a href="https://developers.google.com/web/tools/lighthouse/audits/time-to-interactive" target="_blank" rel="noopener" >Learn more</a>.
</span>
</p>
<div class="subitem-result">
<span class="subitem-result__points score-good-bg">
89
</span>
</div> </li>
</ul>
</section>
<section class="aggregation">
<header class="aggregation__header">
<h2>Site is progressively enhanced</h2>
<p class="aggregation__desc">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 still functional experience.</p>
</header>
<ul class="subitems">
<li class="subitem ">
<p class="subitem__desc">
Contains some content when JavaScript is not available
<input type="checkbox" class="subitem__help-toggle" title="Toggle help text">
<label class="subitem__help-toggle-label"></label>
<span class="subitem__help">
Your app should display some content when JavaScript is disabled, even if it's just a warning to the user that JavaScript is required to use the app. <a href="https://developers.google.com/web/tools/lighthouse/audits/no-js" target="_blank" rel="noopener" >Learn more</a>.
</span>
</p>
<div class="subitem-result">