{{>header}}

{{>nav}}

	<div class="o-techdocs-main o-techdocs-content">

		<h1>Usage and performance</h1>

		{{#if errors}}

		<p><em>Some usage stats cannot be shown, probably because you need to configure the environment variables needed to get data from external services.  The specific errors are shown below</em></p>

		<pre><code class="nohighlight">{{#each errors}}{{.}}
{{/each}}</code></pre>

		{{/if}}

		<p>The public instance of the polyfill service is hosted by the Financial Times, with the generous support of Fastly, who provide CDN distribution.  <a href='http://www.fastly.com/network/'>View Fastly network map</a></p>

		{{#if fastly.byday}}

		<h3>Traffic volume</h3>

		<p>This shows the number of requests we have served per day, over the last 180 days, measured by <strong>Fastly</strong>:</p>

		<div id="chart-requests" class='o-techdocs-content'>
			<table class='chart-data o-techdocs-table'>
			<thead><tr><th>Date</th><th>Requests</th></tr></thead>
			<tbody>
			{{#each fastly.byday}}
				<tr><td>{{prettifyDate date}}</td><td>{{requests}}</td></tr>
			{{/each}}
			</tbody>
			</table>
		</div>

		{{/if}}

		<div class='o-grid-row' style='margin: 0 -10px'>
			{{#if respTimes}}
			<div data-o-grid-colspan='S12 L4'>
				<h3>Response time</h3>
				<p>Mean global response time, ms, from <strong>Pingdom</strong>:</p>
				<div id="chart-resptime" class='o-techdocs-content'>
					<table class='chart-data o-techdocs-table'>
						<thead><tr><th>Date</th><th>Response time (ms)</th></tr></thead>
						<tbody>
						{{#each respTimes}}
							<tr><td>{{prettifyDate date}}</td><td>{{respTime}}</td></tr>
						{{/each}}
						</tbody>
					</table>
				</div>
			</div>
			{{/if}}
			{{#if fastly.rollup}}
			<div data-o-grid-colspan='S12 M6 L4'>
				<h3>Caching</h3>
				<p>Hit ratio, last 7 days, from <strong>Fastly</strong>:</p>
				<div id="chart-hitratio" class='o-techdocs-content'>
					<table class='chart-data o-techdocs-table'>
						<thead><tr><th>Cache result</th><th>Requests</th></tr></thead>
						<tbody>
							<tr><td>Hits</td><td>{{fastly.rollup.hits}}</td></tr>
							<tr><td>Misses</td><td>{{fastly.rollup.miss}}</td></tr>
						</tbody>
					</table>
				</div>
			</div>
			{{/if}}
			{{#if outages}}
			<div data-o-grid-colspan='S12 M6 L4'>
				<h3>Availability</h3>
				<p>Total downtime, according to <strong>Pingdom</strong>:</p>
				<div class='o-techdocs-content'>
				<table class='outages o-techdocs-table'>
					<tr><th>Last 30 days</th><td>{{prettifyDuration outages.30d}}</td></tr>
					<tr><th>Last 3 months</th><td>{{prettifyDuration outages.3m}}</td></tr>
					<tr><th>Last 12 months</th><td>{{prettifyDuration outages.12m}}</td></tr>
				</table>
				</div>
			</div>
			{{/if}}
		</div>

		<p>Caching responses that vary by <code>User-Agent</code> is very hard to do with good cache performance. We use a <a href='http://labs.ft.com/2014/10/caching-user-agent-specific-responses-with-fastly/'>custom Fastly VCL configuration</a> that separates the UA normalisation from the polyfill bundle.</p>

		{{#if rumPerf}}
		<h3>Network performance in detail</h3>

		<p>95th percentile and median resource timing metrics, broken down by Fastly edge point of presence, measured using the <strong>resource timing API</strong> from live polyfill service requests that opted in to anonymously report performance data.  Last {{rumPerf.period}} days, showing only POPs that have served more than {{rumPerf.minSample}} RUM-enabled requests.</p>

		<table class='rum-perf-data'>
		<tr>
			<th class="rum-perf-data__pop">PoP</th>
			<th class="rum-perf-data__count">Sample</th>
			<th class='rum-perf-data__nettimeline'>Per connection phase (95th percentile and median)</th>
			<th class="rum-perf-data__total">Overall</th>
		</tr>
		{{#each rumPerf.rows}}
		<tr>
			<td class="rum-perf-data__pop">{{data_center}}</td>
			<td class="rum-perf-data__count">{{number_format count}}</td>
			<td class='rum-perf-data__nettimeline'>
				<div class='nettimeline__container'><div class="nettimeline nettimeline--dns" style="width:{{percent perf_dns_95P @root.rumPerf.scaleMax}}%" title="DNS lookup: {{perf_dns_95P}}ms, {{perf_dns_count}} non-zero samples"></div><div class="nettimeline nettimeline--connect" style="width:{{percent perf_connect_95P @root.rumPerf.scaleMax}}%" title="TCP connect / SSL: {{perf_connect_95P}}ms, {{perf_connect_count}} non-zero samples"></div><div class="nettimeline nettimeline--req" style="width:{{percent perf_req_95P @root.rumPerf.scaleMax}}%" title="Request: {{perf_req_95P}}ms, {{perf_req_count}} non-zero samples"></div><div class="nettimeline nettimeline--resp" style="width:{{percent perf_resp_95P @root.rumPerf.scaleMax}}%" title="Response: {{perf_resp_95P}}ms, {{perf_resp_count}} non-zero samples"></div></div>
				<div class='nettimeline__container'><div class="nettimeline nettimeline--smaller nettimeline--dns" style="width:{{percent perf_dns_median @root.rumPerf.scaleMax}}%" title="DNS lookup: {{perf_dns_median}}ms, {{perf_dns_count}} non-zero samples"></div><div class="nettimeline nettimeline--smaller nettimeline--connect" style="width:{{percent perf_connect_median @root.rumPerf.scaleMax}}%" title="TCP connect / SSL: {{perf_connect_median}}ms, {{perf_connect_count}} non-zero samples"></div><div class="nettimeline nettimeline--smaller nettimeline--req" style="width:{{percent perf_req_median @root.rumPerf.scaleMax}}%" title="Request: {{perf_req_median}}ms, {{perf_req_count}} non-zero samples"></div><div class="nettimeline nettimeline--smaller nettimeline--resp" style="width:{{percent perf_resp_median @root.rumPerf.scaleMax}}%" title="Response: {{perf_resp_median}}ms, {{perf_resp_count}} non-zero samples"></div></div>
			</td>
			<td class="rum-perf-data__total"><span title='95% percentile of total RTT'>{{number_format perf_total_95P}}ms<br/><small title='Median total RTT'>({{number_format perf_total_median}}ms)</small></td>
		</tr>
		{{/each}}
		</table>

		<p>Only non-zero samples are counted, which in practice means there are far fewer DNS lookup and TCP connect datapoints, because if reusing a keep-alive connection, both will be zero.  Timings for individual connection phases do not sum to the overall RTT because, for example, the request that exhibits the 95th percentile DNS time, will most likely not also be the 95th percentile on all other connection metrics.</p>

		<p>Typically Polyfill.io is loaded at a point where the browser is very busy. To speed up loading, consider using <a href='https://www.w3.org/TR/resource-hints/#preconnect'>preconnect</a> or <a href='https://www.w3.org/TR/preload/#link-type-preload'>preload</a>.
		{{/if}}

	</div>

{{>footer}}