update
This commit is contained in:
463
html/pagespeedmetrics.md2.html
Normal file
463
html/pagespeedmetrics.md2.html
Normal file
@@ -0,0 +1,463 @@
|
||||
<h1 id="awesome-page-speed-metrics-awesome">Awesome Page Speed Metrics
|
||||
<a href="https://awesome.re"><img src="https://awesome.re/badge.svg"
|
||||
alt="Awesome" /></a></h1>
|
||||
<blockquote>
|
||||
<p>Metrics to help understand page speed and user experience.</p>
|
||||
</blockquote>
|
||||
<p>If you’re just getting started check out <a
|
||||
href="https://web.dev/metrics/">web.dev/metrics</a> first.</p>
|
||||
<h2 id="contents">Contents</h2>
|
||||
<!-- toc -->
|
||||
<ul>
|
||||
<li><a href="#concepts">Concepts</a>
|
||||
<ul>
|
||||
<li><a href="#lab-data-synthetic-measurements">Lab Data (Synthetic
|
||||
Measurements)</a></li>
|
||||
<li><a href="#field-data-real-user-monitoring---rum">Field Data (Real
|
||||
User Monitoring - RUM)</a></li>
|
||||
<li><a href="#critical-rendering-path">Critical rendering path</a></li>
|
||||
<li><a href="#long-tasks">Long tasks</a></li>
|
||||
<li><a href="#user-centric-metrics">User-centric metrics</a></li>
|
||||
</ul></li>
|
||||
<li><a href="#rendering-metrics">Rendering metrics</a>
|
||||
<ul>
|
||||
<li><a href="#first-contentful-paint-fcp">First Contentful Paint
|
||||
(FCP)</a></li>
|
||||
<li><a href="#largest-contentful-paint-lcp">Largest Contentful Paint
|
||||
(LCP)</a></li>
|
||||
<li><a href="#cumulative-layout-shift-cls">Cumulative Layout Shift
|
||||
(CLS)</a></li>
|
||||
<li><a href="#visually-complete">Visually Complete</a></li>
|
||||
<li><a href="#speed-index">Speed Index</a></li>
|
||||
<li><a href="#hero-element-timing">(Hero) Element Timing</a></li>
|
||||
</ul></li>
|
||||
<li><a href="#interactivity-metrics">Interactivity metrics</a>
|
||||
<ul>
|
||||
<li><a href="#time-to-interactive-tti">Time to Interactive
|
||||
(TTI)</a></li>
|
||||
<li><a href="#total-blocking-time-tbt">Total Blocking Time
|
||||
(TBT)</a></li>
|
||||
<li><a href="#first-input-delay-fid">First Input Delay (FID)</a></li>
|
||||
<li><a href="#max-potential-first-input-delay">Max Potential First Input
|
||||
Delay</a></li>
|
||||
</ul></li>
|
||||
<li><a href="#network-metrics">Network metrics</a>
|
||||
<ul>
|
||||
<li><a href="#dns-latency">DNS latency</a></li>
|
||||
<li><a href="#tcp-and-ssltls-latency">TCP and SSL/TLS latency</a></li>
|
||||
<li><a href="#time-to-first-byte-ttfb">Time to First Byte
|
||||
(TTFB)</a></li>
|
||||
<li><a href="#transferred-bytes">Transferred bytes</a></li>
|
||||
</ul></li>
|
||||
<li><a href="#other-metrics">Other metrics</a>
|
||||
<ul>
|
||||
<li><a href="#google-pagespeed-insights-score">Google PageSpeed Insights
|
||||
score</a></li>
|
||||
<li><a href="#user-timing">User Timing</a></li>
|
||||
<li><a href="#server-timing">Server Timing</a></li>
|
||||
<li><a href="#frame-rate">Frame rate</a></li>
|
||||
<li><a href="#domcontentloaded">DOMContentLoaded</a></li>
|
||||
<li><a href="#windowload">window.load</a></li>
|
||||
</ul></li>
|
||||
</ul>
|
||||
<!-- tocstop -->
|
||||
<h2 id="concepts">Concepts</h2>
|
||||
<h3 id="lab-data-synthetic-measurements">Lab Data (Synthetic
|
||||
Measurements)</h3>
|
||||
<p>Make a request to your page with a tool and evaluate performance. Be
|
||||
sure to make it realistic (e.g. by throttling network and CPU) and
|
||||
reduce noise (e.g. by running multiple times).</p>
|
||||
<ul>
|
||||
<li><a
|
||||
href="https://developers.google.com/web/tools/lighthouse/">Lighthouse</a>
|
||||
- A tool built on Google Chrome to audit web pages. You can run it from
|
||||
Chrome DevTools, a Chrome Extension or from the command line (even with
|
||||
headless Chrome).</li>
|
||||
<li><a
|
||||
href="https://developers.google.com/speed/pagespeed/insights/">Google
|
||||
PageSpeed Insights</a> - Free and hosted Lighthouse reporting (and more)
|
||||
by Google.</li>
|
||||
<li><a href="https://www.webpagetest.org/">WebpageTest</a> - Free and
|
||||
hosted web performance testing (also an open source project).</li>
|
||||
<li><a href="https://www.sitespeed.io/">Sitespeed.io</a> - A set of open
|
||||
source performance monitoring tools.</li>
|
||||
<li><a href="https://calibreapp.com">Calibre</a> - Web performance
|
||||
monitoring SaaS.</li>
|
||||
<li><a href="https://treo.sh/">treo.sh</a> - Web performance monitoring
|
||||
SaaS.</li>
|
||||
<li><a href="https://speedcurve.com/">SpeedCurve</a> - Web performance
|
||||
monitoring SaaS.</li>
|
||||
<li><a href="https://awesometechstack.com/">AwesomeTechStack</a> -
|
||||
Website awesomeness monitoring Tool.</li>
|
||||
</ul>
|
||||
<hr />
|
||||
<h3 id="field-data-real-user-monitoring---rum">Field Data (Real User
|
||||
Monitoring - RUM)</h3>
|
||||
<p>Collect performance data from real users visiting your page. Be
|
||||
mindful of the actual overhead, as it runs in your user’s browser and
|
||||
watch out for browser support of more recent metrics (e.g. compared to
|
||||
your user-base).</p>
|
||||
<ul>
|
||||
<li><a
|
||||
href="https://philipwalton.com/articles/the-google-analytics-setup-i-use-on-every-site-i-build/#performance-tracking">Performance
|
||||
tracking with Google Analytics (GA)</a></li>
|
||||
<li><a
|
||||
href="https://developers.google.com/web/tools/chrome-user-experience-report/">Chrome
|
||||
User Experience Report (CrUX)</a></li>
|
||||
<li><a
|
||||
href="https://developers.google.com/web/updates/2017/06/user-centric-performance-metrics#load_abandonment">Load
|
||||
abandonment</a> - Track <code>visibilitychange</code> to account for
|
||||
survivorship bias.</li>
|
||||
<li><a href="https://speedcurve.com/features/lux/">SpeedCurve LUX</a> -
|
||||
Real User Monitoring SaaS.</li>
|
||||
<li><a
|
||||
href="https://www.akamai.com/uk/en/products/performance/mpulse-real-user-monitoring.jsp">Akamai
|
||||
mPulse</a> - Real User Monitoring SaaS.</li>
|
||||
<li><a href="https://sematext.com/experience/">Sematext Experience</a> -
|
||||
Real User Monitoring SaaS.</li>
|
||||
<li><a href="https://zizzamia.github.io/perfume/">Perfume.js</a> - Open
|
||||
Source Library to collect Field Data.</li>
|
||||
<li><a href="https://github.com/GoogleChrome/web-vitals">Web Vitals</a>
|
||||
- Open Source Library to collect Field Data.</li>
|
||||
<li><a href="https://vercel.com/docs/analytics">Vercel Analytics</a> -
|
||||
Real User Monitoring based on Web Vitals.</li>
|
||||
</ul>
|
||||
<h3 id="critical-rendering-path">Critical rendering path</h3>
|
||||
<p>The critical rendering path is <strong>everything that happens
|
||||
between receiving network bytes and rendering something on the
|
||||
screen</strong>. To optimize any rendering metrics like <a
|
||||
href="#first-contentful-paint-fcp">First Contentful Paint (FCP)</a> or
|
||||
<a href="#speed-index">Speed Index</a> you have to understand how the
|
||||
critical rendering path works.</p>
|
||||
<ul>
|
||||
<li><a
|
||||
href="https://developers.google.com/web/fundamentals/performance/critical-rendering-path/">Critical
|
||||
rendering path</a></li>
|
||||
</ul>
|
||||
<h3 id="long-tasks">Long tasks</h3>
|
||||
<p>The browser Main Thread that handles user input is also the one
|
||||
executing JavaScript (among many other things). Blocking the Main Thread
|
||||
for too long can make your page unresponsive.</p>
|
||||
<p>A user perceives any visual change within 100ms as instant. Any task
|
||||
blocking the Main Thread by <strong>taking longer than 50ms is
|
||||
considered a long task</strong> (as it might make the browser
|
||||
unresponsive to user input).</p>
|
||||
<p>To optimize interactivity metrics like <a
|
||||
href="#total-blocking-time-tbt">Total Blocking Time (TBT)</a> and <a
|
||||
href="#first-input-delay-fid">First Input Delay (FID)</a> you have to
|
||||
understand long tasks and how to avoid them as much as possible.</p>
|
||||
<ul>
|
||||
<li><a href="https://w3c.github.io/longtasks/">Spec - Long
|
||||
Tasks</a></li>
|
||||
<li><a
|
||||
href="https://calendar.perfplanet.com/2017/tracking-cpu-with-long-tasks-api/">Blogpost
|
||||
- Tracking CPU with Long Tasks API</a></li>
|
||||
</ul>
|
||||
<h3 id="user-centric-metrics">User-centric metrics</h3>
|
||||
<p>It’s important to track metrics relevant to users and their
|
||||
experience. To measure the perceived performance we can choose metrics
|
||||
by framing them around a few key questions.</p>
|
||||
<ul>
|
||||
<li><a href="https://web.dev/user-centric-performance-metrics/">Docs -
|
||||
User-centric Performance Metrics - web.dev</a></li>
|
||||
<li>Is it happening? - Did the navigation start successfully? Has the
|
||||
server responded? (e.g <a
|
||||
href="https://github.com/csabapalfi/awesome-web-performance-metrics/#first-contentful-paint-fcp">FCP</a>)</li>
|
||||
<li>Is it useful/meaningful? - Has enough content rendered that users
|
||||
can engage with it? (e.g. <a
|
||||
href="https://github.com/csabapalfi/awesome-web-performance-metrics/#largest-contentful-paint-lcp">LCP</a>)</li>
|
||||
<li>Is it usable - Can users interact with the page, or is it still busy
|
||||
loading? (e.g <a
|
||||
href="https://github.com/csabapalfi/awesome-web-performance-metrics/#total-blocking-time-tbt">TBT</a>)</li>
|
||||
<li>Is it delightful/smooth? - Are the interactions smooth and natural,
|
||||
free of lag and jank?</li>
|
||||
</ul>
|
||||
<hr />
|
||||
<h2 id="rendering-metrics">Rendering metrics</h2>
|
||||
<h3 id="first-contentful-paint-fcp">First Contentful Paint (FCP)</h3>
|
||||
<p>The First Contentful Paint (FCP) metric measures the time from when
|
||||
the page starts loading to when any part of the page’s content is
|
||||
rendered on the screen. For this metric, “content” refers to text,
|
||||
images (including background images), <code><svg></code> elements,
|
||||
or non-white <code><canvas></code> elements.</p>
|
||||
<ul>
|
||||
<li>Lab: Lighthouse</li>
|
||||
<li>Field: Chrome 60+, CrUX</li>
|
||||
<li><a href="https://web.dev/fcp/">Docs - FCP - web.dev</a></li>
|
||||
<li><a href="https://w3c.github.io/paint-timing/">Spec - Paint Timing -
|
||||
W3C</a></li>
|
||||
</ul>
|
||||
<h3 id="largest-contentful-paint-lcp">Largest Contentful Paint
|
||||
(LCP)</h3>
|
||||
<p>The Largest Contentful Paint (LCP) metric reports the render time of
|
||||
the largest content element visible within the viewport.</p>
|
||||
<ul>
|
||||
<li>Lab: Lighthouse/WPT</li>
|
||||
<li>Field: Chrome 77+</li>
|
||||
<li><a href="https://web.dev/largest-contentful-paint/">Docs - LCP -
|
||||
web.dev</a></li>
|
||||
<li><a
|
||||
href="https://github.com/WICG/largest-contentful-paint#readme">Spec -
|
||||
LCP - W3C</a></li>
|
||||
</ul>
|
||||
<h3 id="cumulative-layout-shift-cls">Cumulative Layout Shift (CLS)</h3>
|
||||
<p>A layout shift occurs any time a visible element changes its position
|
||||
from one frame to the next. CLS measures the sum total of all individual
|
||||
layout shift scores for every unexpected layout shift that occurs during
|
||||
the entire lifespan of the page.</p>
|
||||
<ul>
|
||||
<li>Lab: Lighthouse/WPT</li>
|
||||
<li>Field: Chrome 77+</li>
|
||||
<li><a href="https://web.dev/cls/">Docs - CLS - web.dev</a></li>
|
||||
<li><a href="https://github.com/WICG/layout-instability">Spec - Layout
|
||||
Instability API - W3C</a></li>
|
||||
</ul>
|
||||
<h3 id="visually-complete">Visually Complete</h3>
|
||||
<p>The Visually Complete is the time from the start of the initial
|
||||
navigation until the <strong>visible (above the fold) part of your page
|
||||
is no longer changing</strong>. (e.g. WPT measures this using a color
|
||||
histogram of the page based on video/screenshots recording).</p>
|
||||
<ul>
|
||||
<li>Lab: WPT</li>
|
||||
<li>Field: N/A</li>
|
||||
<li><a
|
||||
href="https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index">Docs
|
||||
- Visually Complete - WPT</a></li>
|
||||
</ul>
|
||||
<h3 id="speed-index">Speed Index</h3>
|
||||
<p>Speed Index shows <strong>how quickly the contents of a page are
|
||||
visibly populated</strong> (lower numbers are better). This is done by
|
||||
frequently measuring visual completeness during loading. The quicker the
|
||||
page is more visually complete the lower the value.</p>
|
||||
<ul>
|
||||
<li>Lab: Lighthouse, WPT (but slightly different spec)</li>
|
||||
<li>Field: N/A</li>
|
||||
<li><a href="https://web.dev/speed-index/">Docs - Speed Index -
|
||||
web.dev</a></li>
|
||||
<li><a
|
||||
href="https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index">Docs
|
||||
- Speed Index - WPT</a></li>
|
||||
<li><a
|
||||
href="https://ldnwebperf.org/sessions/speed-perception-and-lighthouse/">Talk
|
||||
- Speed Perception and Lighthouse</a></li>
|
||||
</ul>
|
||||
<h3 id="hero-element-timing">(Hero) Element Timing</h3>
|
||||
<p>Element Timing captures <strong>when specific elements are
|
||||
painted</strong> by the browser. Hero elements can be defined as the
|
||||
largest h1, img or background image (or custom ones using the Element
|
||||
Timing API)</p>
|
||||
<ul>
|
||||
<li>Lab: WPT</li>
|
||||
<li>Field: Chrome 77+</li>
|
||||
<li><a
|
||||
href="https://github.com/WPO-Foundation/webpagetest/blob/master/docs/Metrics/HeroElements.md">Docs
|
||||
- Last Painted Hero - WPT</a></li>
|
||||
<li><a href="https://wicg.github.io/element-timing/">Spec - Element
|
||||
Timing API</a></li>
|
||||
<li><a
|
||||
href="https://speedcurve.com/blog/web-performance-monitoring-hero-times/">Blogpost
|
||||
- Hero Element Timing - SpeedCurve</a></li>
|
||||
</ul>
|
||||
<hr />
|
||||
<h2 id="interactivity-metrics">Interactivity metrics</h2>
|
||||
<h3 id="time-to-interactive-tti">Time to Interactive (TTI)</h3>
|
||||
<p>Time to interactive is <strong>the time it takes for the page to
|
||||
become fully interactive</strong> (as in Main Thread quiet for 5s).
|
||||
Sometimes called Consistently Interactice and not to be confused with
|
||||
First Interactive or First CPU Idle. (Warning: one of the most confusing
|
||||
and misunderstood metrics).</p>
|
||||
<ul>
|
||||
<li>Lab: Lighthouse, WPT</li>
|
||||
<li>Field: Not recommended as users interacting with your page can skew
|
||||
field measurements of TTI</li>
|
||||
<li><a href="https://web.dev/tti/">Docs - TTI - web.dev</a></li>
|
||||
<li><a
|
||||
href="https://docs.google.com/document/d/1GGiI9-7KeY3TPqS3YT271upUVimo-XiL5mwWorDUD4c/edit">Spec
|
||||
- TTI - Lighthouse</a></li>
|
||||
<li><a
|
||||
href="https://blog.dareboost.com/en/2019/05/measuring-interactivity-time-to-interactive/">Blogpost
|
||||
- TTI</a></li>
|
||||
</ul>
|
||||
<h3 id="total-blocking-time-tbt">Total Blocking Time (TBT)</h3>
|
||||
<p>The Total Blocking Time (TBT) metric measures the total amount of
|
||||
time between First Contentful Paint (FCP) and Time to Interactive (TTI)
|
||||
where the main thread was blocked for long enough to prevent input
|
||||
responsiveness.</p>
|
||||
<ul>
|
||||
<li>Lab: Lighthouse</li>
|
||||
<li>Field: N/A</li>
|
||||
<li><a href="https://web.dev/tbt/">Docs - TBT - web.dev</a></li>
|
||||
</ul>
|
||||
<h3 id="first-input-delay-fid">First Input Delay (FID)</h3>
|
||||
<p>First Input Delay (FID) measures <strong>the time from when a user
|
||||
first interacts with your site to the time when the browser is actually
|
||||
able to respond</strong> to that interaction. An interaction can be when
|
||||
users click a link, tap on a button, or use a custom, JavaScript-powered
|
||||
control.</p>
|
||||
<ul>
|
||||
<li>Lab: N/A (as it requires the user to interact with the page)</li>
|
||||
<li>Field: IE9+ (and Safari, Chrome, Firefox) (with polyfill -
|
||||
0.4KB)</li>
|
||||
<li><a href="https://web.dev/fid/">Docs - FID - web.dev</a></li>
|
||||
<li><a
|
||||
href="https://github.com/GoogleChromeLabs/first-input-delay">Polyfill -
|
||||
FID</a></li>
|
||||
</ul>
|
||||
<h3 id="max-potential-first-input-delay">Max Potential First Input
|
||||
Delay</h3>
|
||||
<p>The maximum potential <a href="#first-input-delay-fid">First Input
|
||||
Delay</a> that your users could experience. Basically equals to the
|
||||
duration of the longest <a href="#long-tasks">long task</a> on the
|
||||
browser Main Thread.</p>
|
||||
<ul>
|
||||
<li>Lab: Lighthouse</li>
|
||||
<li>Field: N/A</li>
|
||||
<li><a href="https://web.dev/lighthouse-max-potential-fid/">Docs - Max
|
||||
Potential FID - web.dev</a></li>
|
||||
</ul>
|
||||
<hr />
|
||||
<h2 id="network-metrics">Network metrics</h2>
|
||||
<p>Network timing field data can uncover a non-optimized TLS setup, slow
|
||||
DNS lookups or server side processing and issues with CDN configuration.
|
||||
See also a separate section about measuring <a
|
||||
href="#transferred-bytes">transferred bytes</a>.</p>
|
||||
<ul>
|
||||
<li><a
|
||||
href="https://developers.google.com/web/fundamentals/performance/navigation-and-resource-timing/">Blogpost
|
||||
- Navigation and Resource Timing</a></li>
|
||||
<li><a href="https://www.w3.org/TR/navigation-timing-2/">Spec -
|
||||
Navigation Timing</a></li>
|
||||
<li><a href="https://www.w3.org/TR/resource-timing-2/">Spec - Resource
|
||||
Timing</a></li>
|
||||
</ul>
|
||||
<h3 id="dns-latency">DNS latency</h3>
|
||||
<ul>
|
||||
<li>Lab: DNS performance testing tools</li>
|
||||
<li>Field: IE9+, Safari 9+</li>
|
||||
</ul>
|
||||
<div class="sourceCode" id="cb1"><pre class="sourceCode js"><code class="sourceCode javascript"><span id="cb1-1"><a href="#cb1-1" aria-hidden="true" tabindex="-1"></a><span class="co">// Measuring DNS lookup time</span></span>
|
||||
<span id="cb1-2"><a href="#cb1-2" aria-hidden="true" tabindex="-1"></a><span class="kw">var</span> pageNav <span class="op">=</span> <span class="bu">performance</span><span class="op">.</span><span class="fu">getEntriesByType</span>(<span class="st">"navigation"</span>)[<span class="dv">0</span>]<span class="op">;</span></span>
|
||||
<span id="cb1-3"><a href="#cb1-3" aria-hidden="true" tabindex="-1"></a><span class="kw">var</span> dnsTime <span class="op">=</span> pageNav<span class="op">.</span><span class="at">domainLookupEnd</span> <span class="op">-</span> pageNav<span class="op">.</span><span class="at">domainLookupStart</span><span class="op">;</span></span></code></pre></div>
|
||||
<h3 id="tcp-and-ssltls-latency">TCP and SSL/TLS latency</h3>
|
||||
<ul>
|
||||
<li>Lab: See <a href="https://www.ssllabs.com/ssltest/index.html">Qualys
|
||||
SSL Labs</a> for an audit</li>
|
||||
<li>Field: IE9+, Safari 9+</li>
|
||||
</ul>
|
||||
<div class="sourceCode" id="cb2"><pre class="sourceCode js"><code class="sourceCode javascript"><span id="cb2-1"><a href="#cb2-1" aria-hidden="true" tabindex="-1"></a><span class="co">// Quantifying total connection time</span></span>
|
||||
<span id="cb2-2"><a href="#cb2-2" aria-hidden="true" tabindex="-1"></a><span class="kw">var</span> pageNav <span class="op">=</span> <span class="bu">performance</span><span class="op">.</span><span class="fu">getEntriesByType</span>(<span class="st">"navigation"</span>)[<span class="dv">0</span>]<span class="op">;</span></span>
|
||||
<span id="cb2-3"><a href="#cb2-3" aria-hidden="true" tabindex="-1"></a><span class="kw">var</span> connectionTime <span class="op">=</span> pageNav<span class="op">.</span><span class="at">connectEnd</span> <span class="op">-</span> pageNav<span class="op">.</span><span class="at">connectStart</span><span class="op">;</span></span>
|
||||
<span id="cb2-4"><a href="#cb2-4" aria-hidden="true" tabindex="-1"></a><span class="kw">var</span> tlsTime <span class="op">=</span> <span class="dv">0</span><span class="op">;</span> <span class="co">// <-- Assume 0 by default</span></span>
|
||||
<span id="cb2-5"><a href="#cb2-5" aria-hidden="true" tabindex="-1"></a></span>
|
||||
<span id="cb2-6"><a href="#cb2-6" aria-hidden="true" tabindex="-1"></a><span class="co">// Did any TLS stuff happen?</span></span>
|
||||
<span id="cb2-7"><a href="#cb2-7" aria-hidden="true" tabindex="-1"></a><span class="cf">if</span> (pageNav<span class="op">.</span><span class="at">secureConnectionStart</span> <span class="op">></span> <span class="dv">0</span>) {</span>
|
||||
<span id="cb2-8"><a href="#cb2-8" aria-hidden="true" tabindex="-1"></a> <span class="co">// Awesome! Calculate it!</span></span>
|
||||
<span id="cb2-9"><a href="#cb2-9" aria-hidden="true" tabindex="-1"></a> tlsTime <span class="op">=</span> pageNav<span class="op">.</span><span class="at">connectEnd</span> <span class="op">-</span> pageNav<span class="op">.</span><span class="at">secureConnectionStart</span><span class="op">;</span></span>
|
||||
<span id="cb2-10"><a href="#cb2-10" aria-hidden="true" tabindex="-1"></a>}</span></code></pre></div>
|
||||
<h3 id="time-to-first-byte-ttfb">Time to First Byte (TTFB)</h3>
|
||||
<ul>
|
||||
<li>Lab: most server load testing tools report this</li>
|
||||
<li>Field: IE9+, Safari 9+</li>
|
||||
</ul>
|
||||
<div class="sourceCode" id="cb3"><pre class="sourceCode js"><code class="sourceCode javascript"><span id="cb3-1"><a href="#cb3-1" aria-hidden="true" tabindex="-1"></a><span class="kw">var</span> ttfb <span class="op">=</span> pageNav<span class="op">.</span><span class="at">responseStart</span> <span class="op">-</span> pageNav<span class="op">.</span><span class="at">requestStart</span><span class="op">;</span></span></code></pre></div>
|
||||
<h3 id="transferred-bytes">Transferred bytes</h3>
|
||||
<p>You can measure the byte weight of your assets with a number of
|
||||
tools. You would normally track these Lab only as the numbers are
|
||||
usually the same in the Field (but be mindful of device type or
|
||||
geographical location specific pages).</p>
|
||||
<p>Measuring own (and third-party) JavaScript bytes is crucial as
|
||||
JavaScript is the main cause of high <a
|
||||
href="#time-to-interactive-tti">TTI</a> or <a
|
||||
href="#first-input-delay-fid">FID</a> values.</p>
|
||||
<ul>
|
||||
<li>Lab: Lighthouse (budgets), Sitespeed.io, custom tools</li>
|
||||
<li>Field: N/A - but numbers usually the same as in Lab</li>
|
||||
<li><a
|
||||
href="https://www.sitespeed.io/documentation/pagexray/">Sitespeed.io
|
||||
PageXray</a></li>
|
||||
<li><a
|
||||
href="https://developers.google.com/web/tools/lighthouse/audits/budgets">Lighthouse
|
||||
Performance Budgets</a></li>
|
||||
<li><a
|
||||
href="https://infrequently.org/2017/10/can-you-afford-it-real-world-web-performance-budgets/">Can
|
||||
You Afford It?: Real-world Web Performance Budgets</a></li>
|
||||
<li><a href="https://github.com/patrickhulce/third-party-web">Which
|
||||
third party scripts are most excessive</a></li>
|
||||
</ul>
|
||||
<hr />
|
||||
<h2 id="other-metrics">Other metrics</h2>
|
||||
<h3 id="google-pagespeed-insights-score">Google PageSpeed Insights
|
||||
score</h3>
|
||||
<ul>
|
||||
<li><a
|
||||
href="https://developers.google.com/speed/docs/insights/v5/about">About
|
||||
PageSpeed Insights</a></li>
|
||||
<li><a
|
||||
href="https://medium.com/expedia-group-tech/whats-in-the-google-pagespeed-score-a5fc93f91e91">What’s
|
||||
in the Google PageSpeed score</a></li>
|
||||
<li><a href="https://calibreapp.com/blog/how-pagespeed-works/">How
|
||||
Google Pagespeed works</a></li>
|
||||
</ul>
|
||||
<h3 id="user-timing">User Timing</h3>
|
||||
<p>The User Timing API allows the developer to create application
|
||||
specific timestamps that are part of the browser’s performance timeline.
|
||||
e.g. you can create a user timing mark to measure when your JS has
|
||||
loaded for a specific component on the page.</p>
|
||||
<ul>
|
||||
<li>Lab: Lighthouse, WPT</li>
|
||||
<li>Field: IE 10+, Safari 11+ (and Chrome, Firefox of course)</li>
|
||||
<li><a href="https://www.w3.org/TR/user-timing/">Spec - User
|
||||
Timing</a></li>
|
||||
</ul>
|
||||
<h3 id="server-timing">Server Timing</h3>
|
||||
<p>Surface any backend server timing metrics (e.g. database latency,
|
||||
etc.) in the developer tools in the user’s browser or in the
|
||||
PerformanceServerTiming interface.</p>
|
||||
<ul>
|
||||
<li><a
|
||||
href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Server-Timing">Docs
|
||||
- Server Timing</a></li>
|
||||
</ul>
|
||||
<h3 id="frame-rate">Frame rate</h3>
|
||||
<p>The frame rate is the <strong>frequency at which the browser can
|
||||
display frames</strong>. A frame represents the amount of work a browser
|
||||
does in one event loop iteration such as processing DOM events,
|
||||
resizing, scrolling, rendering, CSS animations, etc. A frame rate of 60
|
||||
fps (frames per second) is a common target for a good responsive user
|
||||
experience. This means the browser should process a frame in about 16.7
|
||||
ms.</p>
|
||||
<ul>
|
||||
<li>Lab: Chrome and FF Devtools</li>
|
||||
<li>Field: No browser implements the Frame Timing API yet but you can
|
||||
roll your own fps meter using <code>requestAnimationFrame</code></li>
|
||||
<li><a
|
||||
href="https://developer.mozilla.org/en-US/docs/Web/API/Frame_Timing_API">Docs
|
||||
- Frame Timing API</a></li>
|
||||
<li><a
|
||||
href="https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/#analyze_frames_per_second">Docs
|
||||
- Chrome Devtools - FPS</a></li>
|
||||
<li><a
|
||||
href="https://developer.mozilla.org/en-US/docs/Tools/Performance/Frame_rate">Docs
|
||||
- Firefox Developer Tools - Frame rate</a></li>
|
||||
</ul>
|
||||
<h3 id="domcontentloaded">DOMContentLoaded</h3>
|
||||
<ul>
|
||||
<li><a
|
||||
href="https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded">Docs
|
||||
- <code>DOMContentLoaded</code></a></li>
|
||||
</ul>
|
||||
<h3 id="window.load">window.load</h3>
|
||||
<ul>
|
||||
<li><a
|
||||
href="https://developer.mozilla.org/en-US/docs/Web/Events/load">Docs -
|
||||
<code>window.load</code></a></li>
|
||||
</ul>
|
||||
<h2 id="license">License</h2>
|
||||
<p><a href="https://creativecommons.org/publicdomain/zero/1.0/"><img
|
||||
src="http://mirrors.creativecommons.org/presskit/buttons/88x31/svg/cc-zero.svg"
|
||||
alt="CC0" /></a></p>
|
||||
<p>To the extent possible under law, Csaba Palfi has waived all
|
||||
copyright and related or neighboring rights to this work.</p>
|
||||
<p><a
|
||||
href="https://github.com/csabapalfi/awesome-pagespeed-metrics">pagespeedmetrics.md
|
||||
Github</a></p>
|
||||
Reference in New Issue
Block a user