Overview


This guide includes all of the metrics that Calibre observes and calculates. You’ll learn how metrics are captured, what they indicate and the factors that influence them.

Paint

Paint based metrics describe the visual experience of a page during page load.

MetricDescription
First PaintThe time at which the first page paint event occurred.
First Contentful PaintThe time at which the browser rendered any text, image, non-white canvas or SVG content.
First Meaningful PaintThe time at which the the largest area of above-the-fold content was painted to the screen.
Largest Contentful Paint (LCP)The time at which the the largest image, video or text element was painted to the screen.
Speed IndexSpeed index is a timing metric that is calculated by analysing the time that the majority of the user’s viewport has rendered.
Visually Complete 85%A timing metric that is calculated by analysing the time that the user’s viewport has been 85% rendered.
Visually CompleteA timing metric that is calculated by analysing the time that the user’s viewport has fully rendered.

Runtime

Runtime metrics are calculated by observing the JavaScript main thread. These metrics will vary due to the CPU conditions of the test device.

MetricDescription
First CPU IdleThe moment at which the main thread has no active long tasks since First Contentful Paint
Total Blocking Time (TBT)The total duration of Main thread tasks observed between First Contentful Paint and Time to Interactive
JS Parse & CompileThe duration of the time taken to parse, compile and execute all JavaScript for a page.
Time to Interactive (TTI)The moment at which the main thread has had 5 seconds with no network activity or JavaScript long tasks.

Lighthouse scores

Lighthouse scores range from 0 to 100. Each metric refers to categorised audits and are calculated using a weighted average.

MetricDescription
Performance ScoreA number ranging from 0 to 100 evaluating the observed performance characteristics of a given page.
Accessibility ScoreA number ranging from 0 to 100 evaluating the accessibility properties of a given page.
SEO ScoreA number ranging from 0 to 100 evaluating the SEO potential of a page from pre-defined audits.
Best Practices ScoreA number ranging from 0 to 100 evaluating the implementation of a given page in relation to common best practices.
PWA ScoreA number ranging from 0 to 100 evaluating if a page meets the Progressive Web App definition guidelines.

Request

Request metrics relate to the over the wire transfer of HTML, Images, JavaScript, CSS, Font, JSON and Video assets. Each asset type is categorised by mime-type analysis.

These metrics are useful for setting budgets against and can quickly highlight common performance issues like when compression is accidentally turned off, a large library has been added, or when unoptimised images are added via CMS.

MetricDescription
Time to First Byte (TTFB)the time taken from the request being made until the first byte arriving back to the browser
Response timeTTFB plus the time taken for the entire request to be transferred from the server to the client
Total page transferredThe total filesize of all page assets transferred during the page load
Total HTML transferredThe total filesize of HTML assets transferred during the page load
Total Image transferredThe total filesize of Image (JPEG, PNG, GIF, Webp and SVG) assets transferred during the page load
Total JavaScript transferredThe total filesize of JavaScript assets transferred during the page load
Total CSS transferredThe total filesize of CSS assets transferred during the page load
Total Font transferredThe total filesize of Font (EOT, TTF, WOFF and WOFF2) assets transferred during the page load
Total JSON transferredThe total filesize of Font (EOT, TTF, WOFF and WOFF2) assets transferred during the page load
Total Video transferredThe total filesize of Video assets transferred during the page load

Byte size

Byte size metrics relate to the uncompressed size of HTML, Images, JavaScript, CSS, Font, JSON and Video assets once they have been delivered to the client.

These metrics are useful for setting budgets against and can quickly highlight common performance issues like when compression is accidentally turned off, a large library has been added, or when unoptimised images are added via CMS.

MetricDescription
Total Page size in bytesThe total, uncompressed filesize of all page assets transferred during the page load
Total HTML size in bytesThe total, uncompressed filesize of HTML assets transferred during the page load
Total Image size in bytesThe total, uncompressed filesize of Image (JPEG, PNG, GIF, Webp and SVG) assets transferred during the page load
Total JavaScript size in bytesThe total, uncompressed filesize of JavaScript assets transferred during the page load
Total CSS size in bytesThe total, uncompressed filesize of CSS assets transferred during the page load
Total Font size in bytesThe total, uncompressed filesize of Font (EOT, TTF, WOFF and WOFF2) assets transferred during the page load
Total JSON size in bytesThe total, uncompressed filesize of Font (EOT, TTF, WOFF and WOFF2) assets transferred during the page load
Total Video size in bytesThe total, uncompressed filesize of Video assets transferred during the page load

Historical metrics

These metrics were used in the early days of web monitoring. They’re not relevant because more modern metrics more accurately describe the user experience. Calibre monitors these metrics strictly for historic reference.

MetricDescription
onDomContentloadedThe browser emits onDomContentloaded when the document has been parsed and the DOM has been constructed.
onLoadThe browser emits onLoad when all initial resources have finished loading. This includes HTML, Images, CSS, JavaScript and Video media.