rhetenor/awesome-awesomeness
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
Files
c9485bf5767af02655955fc6b8fe7868364cdac6
awesome-awesomeness/html/pagespeedmetrics.html
rhetenor 5916c5c074 update lists
2025-07-18 22:22:32 +02:00

464 lines
22 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters
This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<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>&lt;svg&gt;</code> elements,
or non-white <code>&lt;canvas&gt;</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">&quot;navigation&quot;</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">&quot;navigation&quot;</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">// &lt;-- 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">&gt;</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 View Git Blame Copy Permalink