Skip to main content

App performance

We provide two groups out-of-the-box solutions for tracking app performance metrics:

  1. Plugins for our Web trackers with automatic performance tracking.
  2. Timing events available on most of our trackers for manual tracking.

Automatic performance tracking on Web​

The JavaScript tracker provides plugins that track performance events and context entities automatically.

Web vitals events​

Enables tracking web performance metrics categorized as Web Vitals.

Event: web_vitals

Schema for a web vitals tracking event. For more information on web vitals you can visit https://web.dev/vitals/.

Schema URI:iglu:com.snowplowanalytics.snowplow/web_vitals/jsonschema/1-0-0

WebMobileTracked automatically
✅❌✅
👀 Example
{
  "schema_name": "web_vitals",
  "cls": 0.05,
  "fcp": 0,
  "fid": "36:00.0",
  "inp": "36:00.0",
  "lcp": 1908,
  "navigationType": "navigate",
  "ttfb": 228.9
}
📃 Schema properties definition
PropertyTypeDescriptionRequired?
cls (Cumulative Layout Shift)["number","null"]A unitless metric for measuring visual stability because it helps quantify how often users experience unexpected layout shifts. For more information https://web.dev/cls/.❌
fid (First Input Delay)["number","null"]A metric for measuring load responsiveness because it quantifies the experience users feel when trying to interact with unresponsive pages. Measured in milliseconds. For more information https://web.dev/fid/.❌
lcp (Largest Contentful Paint)["number","null"]A metric for measuring perceived load speed because it marks the point in the page load timeline when the page's main content has likely loaded. Measured in milliseconds. For more information https://web.dev/lcp/.❌
fcp (First Contentful Paint)["number","null"]A metric for measuring perceived load speed because it marks the first point in the page load timeline where the user can see anything on the screen. Measured in milliseconds. For more information https://web.dev/fcp/.❌
inp (Interaction to Next Paint)["number","null"]A metric that assesses responsiveness. 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 that value. For more information https://web.dev/inp/.❌
ttfb (Time To First Byte)["number","null"]A DOMHighResTimeStamp referring to the time in milliseconds between the browser requesting a page and when it receives the first byte of information from the server. For more information https://web.dev/ttfb/.❌
navigationType["string","null"]The navigation type recognised from the Navigation Timing API https://www.w3.org/TR/navigation-timing-2/. E.g. 'navigate', 'reload', 'back-forward', 'back-forward-cache', 'prerender', 'restore'.❌
❓ How to query the event in the warehouse?
select
  unstruct_event_com_snowplowanalytics_snowplow_web_vitals_1_0_0
from
  PIPELINE_NAME.events events
where
  events.collector_tstamp > timestamp_sub(current_timestamp(), interval 1 hour)
  and events.event = 'unstruct'
  and events.event_name = 'web_vitals'
  and events.event_vendor = 'com.snowplowanalytics.snowplow'

How to track?​

Use the Web vitals plugin for the JavaScript tracker.

Modeled data using the snowplow-web dbt package​

To process raw web vitals event data, we have included an optional module to model in the snowplow-web dbt package.

This custom module consists of a series of dbt models which produce the following aggregated models from the raw web vitals events:

Derived tableTable description
snowplow_web_vitalsIncremental table used as a base for storing core web vital events (first event per page view).Docs
snowplow_web_vital_measurementsDrop and recompute table to use for visualizations that takes core web vital measurements at the user specified percentile point (defaulted to 75).Docs

Performance navigation timing context entity​

This plugin will add Performance Navigation Timing contexts to tracked events.

Context entity: PerformanceNavigationTiming

Schema for page navigation performance entity, based on the PerformanceNavigationTiming interface (see https://w3c.github.io/navigation-timing/)

Schema URI:iglu:org.w3/PerformanceNavigationTiming/jsonschema/1-0-0

WebMobileTracked automatically
✅❌✅
📃 Schema properties definition
PropertyTypeDescriptionRequired?
decodedBodySize["integer","null"]A number that is the size (in octets) received from the fetch (HTTP or cache) of the message body, after removing any applied content encoding.❌
encodedBodySize["integer","null"]A number representing the size (in octets) received from the fetch (HTTP or cache), of the payload body, before removing any applied content encodings.❌
redirectStart["number","null"]A DOMHighResTimeStamp that represents the start time of the fetch which initiates the redirect in milliseconds.❌
redirectEnd["number","null"]A DOMHighResTimeStamp immediately after receiving the last byte of the response of the last redirect in milliseconds.❌
fetchStart["number","null"]A DOMHighResTimeStamp immediately before the browser starts to fetch the resource in milliseconds.❌
domainLookupStart["number","null"]A DOMHighResTimeStamp immediately before the browser starts the domain name lookup for the resource in milliseconds.❌
domainLookupEnd["number","null"]A DOMHighResTimeStamp representing the time immediately after the browser finishes the domain name lookup for the resource in milliseconds.❌
connectStart["number","null"]A DOMHighResTimeStamp immediately before the browser starts to establish the connection to the server to retrieve the resource in milliseconds.❌
secureConnectionStart["number","null"]A DOMHighResTimeStamp immediately before the browser starts the handshake process to secure the current connection in milliseconds.❌
connectEnd["number","null"]A DOMHighResTimeStamp immediately after the browser finishes establishing the connection to the server to retrieve the resource in milliseconds.❌
requestStart["number","null"]A DOMHighResTimeStamp immediately before the browser starts requesting the resource from the server in milliseconds.❌
responseStart["number","null"]A DOMHighResTimeStamp immediately after the browser receives the first byte of the response from the server in milliseconds.❌
responseEnd["number","null"]A DOMHighResTimeStamp immediately after the browser receives the last byte of the resource or immediately before the transport connection is closed in milliseconds, whichever comes first.❌
unloadEventStart["number","null"]A DOMHighResTimeStamp representing the time immediately after the current document's unload event handler starts in milliseconds.❌
unloadEventEnd["number","null"]A DOMHighResTimeStamp representing the time immediately after the current document's unload event handler completes in milliseconds.❌
domInteractive["number","null"]A DOMHighResTimeStamp representing the time immediately before the user agent sets the document's readyState to 'interactive' in milliseconds.❌
domContentLoadedEventStart["number","null"]A DOMHighResTimeStamp representing the time immediately before the current document's DOMContentLoaded event handler starts in milliseconds.❌
domContentLoadedEventEnd["number","null"]A DOMHighResTimeStamp representing the time immediately after the current document's DOMContentLoaded event handler completes in milliseconds.❌
domComplete["number","null"]A DOMHighResTimeStamp representing the time immediately before the user agent sets the document's readyState to 'complete' in milliseconds.❌
loadEventStart["number","null"]A DOMHighResTimeStamp representing the time immediately after the current document's load event handler starts in milliseconds.❌
loadEventEnd["number","null"]A DOMHighResTimeStamp representing the time immediately after the current document's load event handler completes in milliseconds.❌
entryType["string","null"]The string 'navigation'.❌
redirectCount["integer","null"]A number representing the number of redirects since the last non-redirect navigation in the current browsing context.❌
type["string","null"]A string representing the navigation type. Either 'navigate', 'reload', 'back_forward' or 'prerender'.❌
workerStart["number","null"]Returns a DOMHighResTimeStamp immediately before dispatching the FetchEvent if a Service Worker thread is already running, or immediately before starting the Service Worker thread if it is not already running. If the resource is not intercepted by a Service Worker the property will always return 0.❌
nextHopProtocol["string","null"]A string representing the network protocol used to fetch the resource, as identified by the ALPN Protocol ID (RFC7301)❌
transferSize["integer","null"]A number representing the size (in octets) of the fetched resource. The size includes the response header fields plus the response payload body.❌
duration["number","null"]Returns a timestamp that is the difference between the loadEventEnd and startTime properties.❌
activationStart["number","null"]If the document is prerendered, activationStart represents the time between when the prerender was started and the document was actually activated.❌
deliveryType["string","null"]Expose information about how a resource was delivered e.g. resources which were delivered from the cache.❌
serverTiming["array","null"]Array of PerformanceServerTiming entries.❌

How to track?​

Using the Performance Navigation Timing plugin for the JavaScript tracker.

Manually tracked timing events​

Timing events are self-describing events available across most of our trackers. They enable you to manually track timing information measured within your app.

Event: timing

Schema for a user timing event

Schema URI:iglu:com.snowplowanalytics.snowplow/timing/jsonschema/1-0-0

WebMobileTracked automatically
✅✅❌
📃 Schema properties definition
PropertyTypeDescriptionRequired?
category"string"✅
variable"string"✅
timing"number"✅
label"string"❌
❓ How to query the event in the warehouse?
select
  unstruct_event_com_snowplowanalytics_snowplow_timing_1_0_0
from
  PIPELINE_NAME.events events
where
  events.collector_tstamp > timestamp_sub(current_timestamp(), interval 1 hour)
  and events.event = 'unstruct'
  and events.event_name = 'timing'
  and events.event_vendor = 'com.snowplowanalytics.snowplow'

How to track?​

  1. Using the JavaScript tracker on Web.
  2. iOS and Android trackers.