diff --git a/docs/configuration.md b/docs/configuration.md index 00f8624d..0603bfbc 100644 --- a/docs/configuration.md +++ b/docs/configuration.md @@ -211,4 +211,55 @@ telemetries: [ } ], ] -``` \ No newline at end of file +``` + +## Time to Interactive (TTI) + +#### What is Time to interactive (TTI)? + +Time to interactive (TTI) is a measure of how long a page takes until it is interactive. AWS RUM Web Client provides a plugin you can use to record this measurement. + +#### How is TTI measured by the AWS RUM web client? + +The web client TTI plugin implements the [*Boomerang TTI algorithm*](https://akamai.github.io/boomerang/oss/BOOMR.plugins.Continuity.html#toc11__anchor), with some modifications. We have excluded the page busy metric from the Boomerang algorithm due to performance concerns. + +_Steps to calculate TTI:_ +1) Find visually ready timestamp (highest of domcontentLoadedEnd, First Contentful Paint or Largest Contentful Paint (whichever are available)). +2) Starting from the visually ready timestamp, find a 500ms quiet window. A quiet window has the following characteristics: + * No Long Tasks + * FPS (Frames Per Second) is above 20 (if enabled) +3) TTI is recorded as visually ready timestamp + time from visually ready to the start of the quiet window. + + +#### How to measure TTI using plugin? + +TTI can be used directly with the NPM installation of the web client. It cannot be used with the CDN installation. +You can enable TTI measurements by updating your web client configuration and using the plugin provided. + +``` +import { TTIPlugin } from "aws-rum-web"; + +const config = { + ... + sessionSampleRate: 1, + telemetries: ["performance", "errors", "http"], + eventPluginsToLoad: [new TTIPlugin()], + allowCookies: true, + enableXRay: false, + ... + }; + +``` + +By default, FPS (Frames per second) measurements are disabled when computing TTI. Enabling these measurement may result in some impact to your application's performance. To enable FPS measurements, simply pass option to the plugin your web client configuration: + +``` +eventPluginsToLoad: [new TTIPlugin(true)], +``` +Note: You must enable enable custom events to ingest TTI events in your application monitor settings. See +[*custom events*](https://docs.aws.amazon.com/AmazonCloudWatch/latest/monitoring/CloudWatch-RUM-custom-events.html) in the CloudWatch RUM user guide. Recording TTI events may incur Cloudwatch RUM extra charges for extra events ingested. + + +#### TTI Browser support + +TTI can be measured using the plugin only when running in a browser that supports [*Long Tasks*](https://developer.mozilla.org/en-US/docs/Web/API/PerformanceLongTaskTiming). \ No newline at end of file