Performance

Metrics

Core Web Vitals

Web Vitals is an initiative by Google that aims to provide quality signals regarding web performance. Its subset called Core Web Vitals consists of the most important of these signals. [web.dev, web.dev, web.dev, chromium.googlesource.com]

• Largest Contentful Paint (LCP) reports the render time of the largest image or text block visible within the viewport, relative to when the page first started loading. [web.dev]
• First Input Delay (FID) measures the time from when a user first interacts with a page (that is, when they click a link, tap on a button, or use a custom, JavaScript-powered control) to the time when the browser is actually able to begin processing event handlers in response to that interaction. FID will be replaced by INP in March 2024. [web.dev, web.dev]
• Interaction to Next Paint (INP) observes the latency of all interactions a user has made with the page, and reports a single value which all (or nearly all) interactions were below. INP will replace FID in March 2024. [web.dev, web.dev]
• Cumulative Layout Shift (CLS) is a measure of the largest burst of layout shift scores for every unexpected layout shift that occurs during the entire lifespan of a page. A layout shift occurs any time a visible element changes its position from one rendered frame to the next. [web.dev]

Web Vitals defines additional, non-core, metrics [web.dev]:

• Time to First Byte (TTFB)
• First Contentful Paint (FCP)
• Time to Interactive (TTI)
• Total Blocking Time (TBT)

Resource Hints

Resource hints are instructions to the browser to optimize (pre)loading of specific resources. They are specified with the <link> element [MDN] and the rel attribute [MDN].

• dns-prefetch performs a DNS lookup for the given URL. That is useful for cross-origin resources to load slightly faster as the DNS lookup already has been performed when they are referenced. [MDN]

• preconnect performs a DNS lookup and initiates a connection for the given URL. Similarly to dns-prefetch, this is useful for cross-origin resources only. [MDN]

• preload lets you declare resources that should be downloaded and cached with high priority. That can be used to tell the browser which resources will be used within a document so that they may be already available by the time they are referenced and do not block further rendering. [MDN]. Preloading works with several file types like scripts, stylesheets, fonts, images, documents, and more. The file type must be specified with the as attribute. [MDN]

• modulepreload specifies JavaScript modules that should be downloaded with high priority, parsed, and compiled. This can significantly improve loading times of modules with (nested) modules as their dependencies. [MDN]

• prefetch specifies resources that are likely needed for future navigations. These resources may be downloaded and cached with low priority, e.g. only after the browser has finished rendering and is idle. [MDN]

Priority Hints

Priority hints describes a browser API enabling developers to signal the priority of each resource they need to download. It introduces the fetchpriority attribute that may be used with HTML elements such as <img>, <link>, <script> and <iframe> and the priority attribute on the RequestInit of fetch. [wicg/priority-hints]

• wicg.github.io/priority-hints
• developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/fetchpriority
• developer.mozilla.org/en-US/docs/Web/API/HTMLLinkElement/fetchpriority
• developer.mozilla.org/en-US/docs/Web/API/Request/priority
• caniuse.com/?search=fetchpriority
• web.dev/articles/fetch-priority

Early Hints

• developer.mozilla.org/docs/Web/HTTP/Status/103
• html.spec.whatwg.org/multipage/semantics.html#early-hints
• httpwg.org/specs/rfc8297.html
• developer.chrome.com/docs/web-platform/early-hints