From 763de6e1a8e95a071da1cd1d0676681f914c619b Mon Sep 17 00:00:00 2001 From: Paras Sakharkar Date: Thu, 30 Nov 2023 01:15:02 -0800 Subject: [PATCH 1/6] docs: Add docs for Time to Interactive --- docs/configuration.md | 49 ++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 48 insertions(+), 1 deletion(-) diff --git a/docs/configuration.md b/docs/configuration.md index 00f8624d..8d6433e8 100644 --- a/docs/configuration.md +++ b/docs/configuration.md @@ -211,4 +211,51 @@ 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 till 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. + +Steps to TTI calculation: +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: + a) No Long Tasks + b) 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. + +Note: TTI can measured using the plugin only when running in a browser that supports [*Long Tasks*](https://developer.mozilla.org/en-US/docs/Web/API/PerformanceLongTaskTiming). + +### How to measure TTI using plugin? + +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. See +[*Send 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. From c9ff054b6e812d9052777a93f033937fa7008dd6 Mon Sep 17 00:00:00 2001 From: Paras Sakharkar Date: Thu, 30 Nov 2023 01:23:39 -0800 Subject: [PATCH 2/6] edits --- docs/configuration.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/docs/configuration.md b/docs/configuration.md index 8d6433e8..906ec560 100644 --- a/docs/configuration.md +++ b/docs/configuration.md @@ -215,24 +215,24 @@ telemetries: [ ## Time to Interactive (TTI) -### What is Time to interactive (TTI)? +#### What is Time to interactive (TTI)? Time to interactive (TTI) is a measure of how long a page takes till 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? +#### 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. Steps to TTI calculation: 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: - a) No Long Tasks - b) FPS (Frames Per Second) is above 20 (if enabled) + * a) No Long Tasks + * b) 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. -Note: TTI can measured using the plugin only when running in a browser that supports [*Long Tasks*](https://developer.mozilla.org/en-US/docs/Web/API/PerformanceLongTaskTiming). +Note: 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). -### How to measure TTI using plugin? +#### How to measure TTI using plugin? You can enable TTI measurements by updating your web client configuration and using the plugin provided. @@ -257,5 +257,5 @@ By default, FPS (Frames per second) measurements are disabled when computing TTI eventPluginsToLoad: [new TTIPlugin(true)], ``` -Note: You must enable enable custom events to ingest TTI events. See +Note: You must enable enable custom events to ingest TTI events in your application monitor settings. See [*Send 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. From 4a9efc0109b59ff836b803971470969f10e40d75 Mon Sep 17 00:00:00 2001 From: Paras Sakharkar Date: Thu, 30 Nov 2023 01:25:57 -0800 Subject: [PATCH 3/6] edits --- docs/configuration.md | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/docs/configuration.md b/docs/configuration.md index 906ec560..836ff2ea 100644 --- a/docs/configuration.md +++ b/docs/configuration.md @@ -223,11 +223,11 @@ Time to interactive (TTI) is a measure of how long a page takes till it is inter 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. -Steps to TTI calculation: +_Steps to TTI calculation:_ 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: - * a) No Long Tasks - * b) FPS (Frames Per Second) is above 20 (if enabled) + * 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. Note: 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). @@ -255,7 +255,6 @@ By default, FPS (Frames per second) measurements are disabled when computing TTI ``` eventPluginsToLoad: [new TTIPlugin(true)], - ``` Note: You must enable enable custom events to ingest TTI events in your application monitor settings. See -[*Send 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. +[*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. From c58b1b65fd5dba6921ef5391d66b1014144533c9 Mon Sep 17 00:00:00 2001 From: Paras Sakharkar Date: Fri, 1 Dec 2023 12:38:24 -0800 Subject: [PATCH 4/6] more updates --- docs/configuration.md | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/docs/configuration.md b/docs/configuration.md index 836ff2ea..84b26a95 100644 --- a/docs/configuration.md +++ b/docs/configuration.md @@ -221,20 +221,19 @@ Time to interactive (TTI) is a measure of how long a page takes till it is inter #### 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. +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 TTI calculation:_ -1) Find visually ready timestamp (highest of domcontentLoadedEnd, First Contentful Paint or Largest Contentful Paint, whichever are available). +_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. -Note: 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). #### How to measure TTI using plugin? -You can enable TTI measurements by updating your web client configuration and using the plugin provided. +TTI can be used directly with the NPM installation of the web client. You can enable TTI measurements by updating your web client configuration and using the plugin provided. ``` import { TTIPlugin } from "aws-rum-web"; @@ -257,4 +256,9 @@ By default, FPS (Frames per second) measurements are disabled when computing TTI 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. +[*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 From 3c4d5250101bb1d34035cfee150e4fb1c3f9734f Mon Sep 17 00:00:00 2001 From: Paras Sakharkar Date: Fri, 1 Dec 2023 12:39:10 -0800 Subject: [PATCH 5/6] more updates --- docs/configuration.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/configuration.md b/docs/configuration.md index 84b26a95..7bca052c 100644 --- a/docs/configuration.md +++ b/docs/configuration.md @@ -217,7 +217,7 @@ telemetries: [ #### What is Time to interactive (TTI)? -Time to interactive (TTI) is a measure of how long a page takes till it is interactive. AWS RUM Web Client provides a plugin you can use to record this measurement. +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? From fc852aebda1393283bca39dfcf5cccae455a75b3 Mon Sep 17 00:00:00 2001 From: Paras Sakharkar Date: Fri, 1 Dec 2023 14:22:06 -0800 Subject: [PATCH 6/6] more updates --- docs/configuration.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/docs/configuration.md b/docs/configuration.md index 7bca052c..0603bfbc 100644 --- a/docs/configuration.md +++ b/docs/configuration.md @@ -233,7 +233,8 @@ _Steps to calculate TTI:_ #### How to measure TTI using plugin? -TTI can be used directly with the NPM installation of the web client. You can enable TTI measurements by updating your web client configuration and using the plugin provided. +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";