First Contentful Paint (FCP)

How long, in seconds, it takes the browser to render the first piece of DOM content. A time under 2 seconds is good and anything over 4 seconds is bad.

Solutions

  • Improve font load timees
  • Eliminate render blocking CSS & JS and minfify
  • Optimize images

Largest Contentful Paint (LCP)

Measures the time it takes for the largest above the fold content element to load. A time under 2.5 seconds is considered good and anything above 4.0 seconds is considered poor.

Solutions

  • Use CDN's
  • optimizing the server response and mimimise the number of expensive render-time processes
  • minimise the size of assets (Images, svgs, videos)
  • caching assets locally, perhaps using a service worker to return the local version first

Speed Index

Measures how quickly content is visually displayed during page load. A time under 4.3 seconds is considered good and anything above 5.8 seconds is considered poor.

Time to Interactive (TTI)

The time when the page is capable of responding to user input. A time under 3.8 seconds is considered good and anything above 7 seconds is considered poor.

A page is considered fully interactive when:

  • The page displays useful content, which is measured by the First Contentful Paint,
  • Event handlers are registered for most visible page elements, and
  • The page responds to user interactions within 50 milliseconds.

Total Blocking Time (TBT)

FID — how quickly a page responds to a user’s action. This records the time from when a user interacts with the page (clicks, taps, key presses, etc.) to the time the browser begins processing that event handler. A delay of less than 100ms is considered good and anything above 300ms is considered poor. It only measures the delay in the event process, not the time taken to update a UI etc.

Solutions

  • reducing JavaScript execution time, typically by deferring non-critical code (dynamic improts etc)
  • breaking-up long-running tasks
  • using web workers to run tasks in a background thread
  • loading third-party JavaScript on demand

Cumulative Layout Shift (CLS)

CLS — the unexpected movement of content when viewing a page. A page may "jump" for example when an large image is being loaded and content is pushed up/down. A score under 0.1 is considered good and anything above 0.25 is considered poor.

Solutions

  • reserving space for media (images, videos, iframes) with width and height attributes, the CSS aspect-ratio property, etc
  • avoiding FOUT (Flash of Unstyled Text) and FOIT (Flash of Invisible Text) when loading web fonts. Preload or using similarly-sized fallback fonts
  • Don't inject DOM elements above content that is visible in the viewport during the first page load
  • using CSS animations over move heavy DOM animations

Time to first byte (TTFB)

TTFB measures the time that elapses between when a user requests a site, and when that user’s browser receives the first bit of information. It is typically reduced via server-side optimizations, such as enabling caching and database indexes. Often, the hosting provider that you choose also plays a large role in whether or not you have a good TTFB.