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.
Asset countThe total number of requests.

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.

Page heuristics

Page heuristic metrics provide helpful context on the makeup of a page.

MetricDescription
DOM SizeThe total number of DOM elements on a page.

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.