Skip to content

Comments

Report page load asset size#66224

Merged
dmlemeshko merged 45 commits intoelastic:masterfrom
dmlemeshko:ftr/report-all-file-sizes
Jun 5, 2020
Merged

Report page load asset size#66224
dmlemeshko merged 45 commits intoelastic:masterfrom
dmlemeshko:ftr/report-all-file-sizes

Conversation

@dmlemeshko
Copy link
Contributor

@dmlemeshko dmlemeshko commented May 12, 2020 •
edited
Loading

Summary

Using puppeteer and CDP client to get size of each resource loaded during app navigation.

Since the goal is to determine which assets are always loaded regardless of the application, we load several apps across Kibana. We only report the assets that appear on in all the apps, ignoring the app-specific ones.

Only a few requests contain "content-length" header, we cannot use puppeteer-only approach with request interception. We use CDP event listeners as an alternative.

Still response in CDP has encodedDataLength and we can get it via puppeteer.
Turned out, there is a DevTools bug that encodedDataLength includes headers size, so I'm using approach suggested here

Update: It turned out that the proper way to get size is to sum data length chunks for the same request-id.

Start Kibana/ES: x-pack: node scripts/functional_tests_server.js --config test/page_load_metrics/config.ts

Capture and print out metrics (local run): node scripts/page_load_metrics.js --kibana-url=http://localhost:5620

#65524

Checklist

Delete any items that are not applicable to this PR.

For maintainers

@dmlemeshko dmlemeshko changed the title [skip ci ] report all file sizes loaded on Kibana page [skip ci] report all file sizes loaded on Kibana page May 12, 2020
dmlemeshko
dmlemeshko commented May 19, 2020
View reviewed changes
spalger
spalger reviewed May 19, 2020
View reviewed changes
@dmlemeshko dmlemeshko changed the title [skip ci] report all file sizes loaded on Kibana page report all file sizes loaded on Kibana page May 19, 2020
mshustov
mshustov reviewed May 19, 2020
View reviewed changes
spalger
spalger reviewed May 29, 2020
View reviewed changes
@spalger
Copy link
Contributor

spalger commented May 29, 2020

@elasticmachine merge upstream

@dmlemeshko dmlemeshko added v8.0.0 release_note:skip Skip the PR/issue when compiling release notes labels May 29, 2020
@dmlemeshko dmlemeshko requested review from mshustov and spalger May 29, 2020 07:31
@dmlemeshko dmlemeshko marked this pull request as ready for review May 29, 2020 07:31
@dmlemeshko dmlemeshko requested a review from a team as a code owner May 29, 2020 07:31
@dmlemeshko dmlemeshko requested a review from spalger June 5, 2020 13:06
@spalger
Copy link
Contributor

spalger commented Jun 5, 2020

@spalger I found the reason for flakiness:
Navigating to http://localhost:5620/app/maps actually may have 2 results:
new map page: http://localhost:5620/app/maps#/map?_g=(filters:!(),refreshInterval:(pause:!f,value:0),time:(from:now-15m,to:now))&_a=(filters:!(),query:(language:kuery,query:''))
landing page: http://localhost:5620/app/maps#/?_g=()

The 2nd result happens rarely, but I was able to get it locally running the same script. I updated the locator in d6ee29b to be the common between those 2 pages.

@elastic/kibana-gis Is this expected behavior?

@kibanamachine
Copy link
Contributor

kibanamachine commented Jun 5, 2020

💚 Build Succeeded

History

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

@nreese
Copy link
Contributor

nreese commented Jun 5, 2020 •
edited
Loading

@elastic/kibana-gis Is this expected behavior?

Yes. the route http://localhost:5620/app/maps resolves to maps listing page when one or more maps saved object exists. The route http://localhost:5620/app/maps routes to a new map when there are no maps saved objects. The thinking was, why send users to an empty listing page that then requires them to click "New map". Why not just directly send them to a new map.

@dmlemeshko dmlemeshko merged commit 6f57fa0 into elastic:master Jun 5, 2020
@dmlemeshko dmlemeshko mentioned this pull request Jun 5, 2020
Merged
dmlemeshko added a commit to dmlemeshko/kibana that referenced this pull request Jun 5, 2020
@dmlemeshko @elasticmachine @mshustov
Report page load asset size (elastic#66224)
d2054ff 
* performance_tests: draft version

* update cli runner and script

* ingest metrics

* save asset type for plugins

* Update src/dev/performance/ingest_metrics.ts

Co-authored-by: Spencer <email@spalger.com>

* follow review comments

* fix size calc, add FTR config, move src to kbn/test

* fix import, remove unused interface

* Update packages/kbn-test/src/page_load_metrics/capture_page_load_metrics.ts

Co-authored-by: Spencer <email@spalger.com>

* start chromium with no-sandbox

* add logging

* check page contains expected element, cut apps to 5

* fix locator & typo

* Update packages/kbn-test/src/page_load_metrics/navigation.ts

Co-authored-by: Spencer <email@spalger.com>

* Update navigation.ts

* Update navigation.ts

* bump puppeteer version

* fix typo

* update navigation script

* update config file

* update yarn.lock

* fix

* take screenshot on failure

* update screenshot title

* fix screenshot saving and error

* invalid locator

* Revert "invalid locator"

This reverts commit 3007539.

* run script in a loop 10 times

* Revert "run script in a loop 10 times"

This reverts commit 6cfa219.

* path config value directly

* fix screenshots directory setup

* update maps locator, common for landing and new map

Co-authored-by: Spencer <email@spalger.com>
Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
Co-authored-by: Mikhail Shustov <restrry@gmail.com>
dmlemeshko added a commit to dmlemeshko/kibana that referenced this pull request Jun 5, 2020
@dmlemeshko @elasticmachine @mshustov
Report page load asset size (elastic#66224)
1a271dc 
* performance_tests: draft version

* update cli runner and script

* ingest metrics

* save asset type for plugins

* Update src/dev/performance/ingest_metrics.ts

Co-authored-by: Spencer <email@spalger.com>

* follow review comments

* fix size calc, add FTR config, move src to kbn/test

* fix import, remove unused interface

* Update packages/kbn-test/src/page_load_metrics/capture_page_load_metrics.ts

Co-authored-by: Spencer <email@spalger.com>

* start chromium with no-sandbox

* add logging

* check page contains expected element, cut apps to 5

* fix locator & typo

* Update packages/kbn-test/src/page_load_metrics/navigation.ts

Co-authored-by: Spencer <email@spalger.com>

* Update navigation.ts

* Update navigation.ts

* bump puppeteer version

* fix typo

* update navigation script

* update config file

* update yarn.lock

* fix

* take screenshot on failure

* update screenshot title

* fix screenshot saving and error

* invalid locator

* Revert "invalid locator"

This reverts commit 3007539.

* run script in a loop 10 times

* Revert "run script in a loop 10 times"

This reverts commit 6cfa219.

* path config value directly

* fix screenshots directory setup

* update maps locator, common for landing and new map

Co-authored-by: Spencer <email@spalger.com>
Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
Co-authored-by: Mikhail Shustov <restrry@gmail.com>
# Conflicts:
#	Jenkinsfile
@dmlemeshko dmlemeshko mentioned this pull request Jun 5, 2020
Merged
dmlemeshko added a commit that referenced this pull request Jun 5, 2020
@dmlemeshko @elasticmachine @mshustov
Report page load asset size (#66224) (#68383)
8e50e59 
* performance_tests: draft version

* update cli runner and script

* ingest metrics

* save asset type for plugins

* Update src/dev/performance/ingest_metrics.ts

Co-authored-by: Spencer <email@spalger.com>

* follow review comments

* fix size calc, add FTR config, move src to kbn/test

* fix import, remove unused interface

* Update packages/kbn-test/src/page_load_metrics/capture_page_load_metrics.ts

Co-authored-by: Spencer <email@spalger.com>

* start chromium with no-sandbox

* add logging

* check page contains expected element, cut apps to 5

* fix locator & typo

* Update packages/kbn-test/src/page_load_metrics/navigation.ts

Co-authored-by: Spencer <email@spalger.com>

* Update navigation.ts

* Update navigation.ts

* bump puppeteer version

* fix typo

* update navigation script

* update config file

* update yarn.lock

* fix

* take screenshot on failure

* update screenshot title

* fix screenshot saving and error

* invalid locator

* Revert "invalid locator"

This reverts commit 3007539.

* run script in a loop 10 times

* Revert "run script in a loop 10 times"

This reverts commit 6cfa219.

* path config value directly

* fix screenshots directory setup

* update maps locator, common for landing and new map

Co-authored-by: Spencer <email@spalger.com>
Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
Co-authored-by: Mikhail Shustov <restrry@gmail.com>

Co-authored-by: Spencer <email@spalger.com>
Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
Co-authored-by: Mikhail Shustov <restrry@gmail.com>
dmlemeshko added a commit that referenced this pull request Jun 6, 2020
@dmlemeshko
[7.8] Report page load asset size (#66224) (#68387)
b6d6889 
* Report page load asset size (#66224)

* performance_tests: draft version

* update cli runner and script

* ingest metrics

* save asset type for plugins

* Update src/dev/performance/ingest_metrics.ts

Co-authored-by: Spencer <email@spalger.com>

* follow review comments

* fix size calc, add FTR config, move src to kbn/test

* fix import, remove unused interface

* Update packages/kbn-test/src/page_load_metrics/capture_page_load_metrics.ts

Co-authored-by: Spencer <email@spalger.com>

* start chromium with no-sandbox

* add logging

* check page contains expected element, cut apps to 5

* fix locator & typo

* Update packages/kbn-test/src/page_load_metrics/navigation.ts

Co-authored-by: Spencer <email@spalger.com>

* Update navigation.ts

* Update navigation.ts

* bump puppeteer version

* fix typo

* update navigation script

* update config file

* update yarn.lock

* fix

* take screenshot on failure

* update screenshot title

* fix screenshot saving and error

* invalid locator

* Revert "invalid locator"

This reverts commit 3007539.

* run script in a loop 10 times

* Revert "run script in a loop 10 times"

This reverts commit 6cfa219.

* path config value directly

* fix screenshots directory setup

* update maps locator, common for landing and new map

Co-authored-by: Spencer <email@spalger.com>
Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
Co-authored-by: Mikhail Shustov <restrry@gmail.com>
# Conflicts:
#	Jenkinsfile

* [page_load_metrics] fix path for discover

* fix url formatting

* fix screenshot title
@dmlemeshko
Copy link
Contributor Author

dmlemeshko commented Jun 6, 2020

7.x 8e50e59
7.8 b6d6889

gmmorris added a commit to gmmorris/kibana that referenced this pull request Jun 8, 2020
@gmmorris
Merge branch 'master' into alerting/consumer-based-rbac
665c427 
* master: (57 commits)
  Add app arch team as owner of datemath package (elastic#66880)
  [Observability] Landing page for Observability (elastic#67467)
  [SIEM] Fix timeline buildGlobalQuery (elastic#68320)
  Optimize saved objects getScopedClient and HTTP API (elastic#68221)
  [Maps] Fix mb-style interpolate style rule (elastic#68413)
  update script to always download node (elastic#68421)
  [SECURITY SOLEIL] Fix selection of event type when no siem index signal created (elastic#68291)
  [DOCS] Adds note about configuring File Data Visualizer (elastic#68407)
  [DOCS] Adds link from remote clusters to index patterns (elastic#68406)
  [QA] slack notify on failure (elastic#68126)
  upgrade eslint-plugin-react-hooks from 2.3.0 to 4.0.4 (elastic#68295)
  moving to jira to a gold license (elastic#67178)
  [DOCS] Revises doc on adding data (elastic#68038)
  [APM] Add ThemeProvider to support dark mode (elastic#68242)
  Make welcome screen disabling first action in loginIfPrompted (elastic#68238)
  [QA] Code coverage: unskip tests, collect tests results, exclude bundles from report (elastic#64477)
  [ML] Functional tests - disable flaky regression and classification creation test
  [Alerting] change eventLog ILM requests to absolute URLs (elastic#68331)
  Report page load asset size (elastic#66224)
  [SIEM][CASE] Change SIEM to Security (elastic#68365)
  ...
@spalger spalger mentioned this pull request Jun 10, 2020
Closed
7 tasks
spalger added a commit to spalger/kibana that referenced this pull request Jul 9, 2020
@spalger
Revert "Report page load asset size (elastic#66224)"
cac0717 
This reverts commit 6f57fa0.
This was referenced Jul 9, 2020
Merged
Closed
spalger added a commit that referenced this pull request Jul 15, 2020
@spalger @elasticmachine
[kbn/optimizer] report sizes of assets produced by optimizer (#71319)
a0f7dce 
* Revert "Report page load asset size (#66224)"

This reverts commit 6f57fa0.

* [kbn/optimizer] report sizes of assets produced by optimizer

* coalese the fast-glob versions we're using to prevent additional installs

* update kbn/pm dist

* Revert "update kbn/pm dist"

This reverts commit 68e24f0.

* Revert "coalese the fast-glob versions we're using to prevent additional installs"

This reverts commit 4201fb6.

* remove fast-glob, just recursivly call readdirSync()

* update integration tests to use new chunk filename

Co-authored-by: spalger <spalger@users.noreply.github.com>
Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
spalger added a commit to spalger/kibana that referenced this pull request Jul 15, 2020
@spalger @elasticmachine
[kbn/optimizer] report sizes of assets produced by optimizer (elastic…
728a2bb 
…#71319)

* Revert "Report page load asset size (elastic#66224)"

This reverts commit 6f57fa0.

* [kbn/optimizer] report sizes of assets produced by optimizer

* coalese the fast-glob versions we're using to prevent additional installs

* update kbn/pm dist

* Revert "update kbn/pm dist"

This reverts commit 68e24f0.

* Revert "coalese the fast-glob versions we're using to prevent additional installs"

This reverts commit 4201fb6.

* remove fast-glob, just recursivly call readdirSync()

* update integration tests to use new chunk filename

Co-authored-by: spalger <spalger@users.noreply.github.com>
Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
# Conflicts:
#	packages/kbn-optimizer/src/integration_tests/basic_optimization.test.ts
#	yarn.lock
@dmlemeshko dmlemeshko deleted the ftr/report-all-file-sizes branch January 31, 2022 12:21
@thomasneirynck thomasneirynck mentioned this pull request Feb 20, 2025
Closed
@dmlemeshko dmlemeshko mentioned this pull request Feb 28, 2025
Merged
dmlemeshko added a commit that referenced this pull request Mar 14, 2025
@dmlemeshko @kibanamachine
[Space time] extending Scout with perfTracker fixture (#212397)
b5f158b 
## Summary

On-Week project "Client-side performance insights with Playwright &
Lighthouse"

revisiting old PR #66224

This PR extends Scout with `perfTracker` fixture designed to analyze
JavaScript bundle performance and page-level performance metrics in
Kibana by leveraging Chrome DevTools Protocol (CDP).

It intercepts network requests, filters static bundles, and computes
bundle size statistics per page load. Additionally, it collects CDP
Performance Domain Metrics, allowing in-depth analysis of rendering and
script execution times.


[README](https://github.com/elastic/kibana/blob/c013c39b7ed92248b94716d953ad692e9328a08d/src/platform/packages/shared/kbn-scout/src/playwright/fixtures/test/performance/README.md)
file with more details and examples was added

Output example for `/app/discover` (shorten, just to share the idea):

```
{
  "url": "http://localhost:5620/app/discover#/",
  "bundleCount": 87,
  "totalSize": 3133420,
  "pluginCount": 9,
  "plugins": [
    {
      "name": "aiops",
      "bundlesCount": 2,
      "totalSize": 5982,
      "bundles": [
        {
          "name": "aiops.chunk.1.js",
          "transferredSize": 2013
        },
        ...
      ]
    },
    {
      "name": "discover",
      "bundlesCount": 17,
      "totalSize": 631605,
      "bundles": [
        {
          "name": "discover.chunk.1.js",
          "transferredSize": 41915
        },
        ...
      ]
    },
    {
      "name": "eventAnnotation",
      "bundlesCount": 1,
      "totalSize": 8652,
      "bundles": [
        {
          "name": "eventAnnotation.chunk.1.js",
          "transferredSize": 8652
        }
      ]
    },
    {
      "name": "expressionXY",
      "bundlesCount": 5,
      "totalSize": 203127,
      "bundles": [
        {
          "name": "expressionXY.chunk.2.js",
          "transferredSize": 5328
        },
        ...
      ]
    },
  ]
}
```

You can create a Scout UI test and start bundle tracker whenever you
want to compute collected stats when all loading is done. Designed as
test, it allows you to have individual validations for plugins, total
bundle size, individual plugin size, etc.

```
      // Ensure all JS bundles are loaded
      await perfTracker.waitForJsLoad(cdp);

      // Collect and validate stats
      const stats = perfTracker.collectJsBundleStats(currentUrl);
      expect(
        stats.totalSize,
        `Total bundles size loaded on page should not exceed 3.0 MB`
      ).toBeLessThan(3 * 1024 * 1024);
      expect(stats.bundleCount, {
        message: `Total bundle chunks count loaded on page should not exceed 100`,
      }).toBeLessThan(100);
      expect(
        stats.plugins.map((p) => p.name),
        { message: 'Unexpected plugins were loaded on page' }
      ).toStrictEqual([
        'aiops',
        'discover',
        'eventAnnotation',
        'expressionXY',
        'kbn-ui-shared-deps-npm',
        'lens',
        'maps',
        'unifiedHistogram',
        'unifiedSearch',
      ]);
      // Validate individual plugin bundle sizes
      expect(stats.plugins.find((p) => p.name === 'discover')?.totalSize, {
        message: `Total 'discover' bundles size should not exceed 625 KB`,
      }).toBeLessThan(625 * 1024);
```

Full test example:
https://github.com/elastic/kibana/blob/7b18e85541d00c3c33a9640cd38a5896b3a758ed/x-pack/platform/plugins/private/discover_enhanced/ui_tests/tests/discover_cdp_perf.spec.ts

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
dmlemeshko added a commit to dmlemeshko/kibana that referenced this pull request Mar 18, 2025
@dmlemeshko
[Space time] extending Scout with perfTracker fixture (elastic#212397)
4a44fb8 
## Summary

On-Week project "Client-side performance insights with Playwright &
Lighthouse"

revisiting old PR elastic#66224

This PR extends Scout with `perfTracker` fixture designed to analyze
JavaScript bundle performance and page-level performance metrics in
Kibana by leveraging Chrome DevTools Protocol (CDP).

It intercepts network requests, filters static bundles, and computes
bundle size statistics per page load. Additionally, it collects CDP
Performance Domain Metrics, allowing in-depth analysis of rendering and
script execution times.

[README](https://github.com/elastic/kibana/blob/c013c39b7ed92248b94716d953ad692e9328a08d/src/platform/packages/shared/kbn-scout/src/playwright/fixtures/test/performance/README.md)
file with more details and examples was added

Output example for `/app/discover` (shorten, just to share the idea):

```
{
  "url": "http://localhost:5620/app/discover#/",
  "bundleCount": 87,
  "totalSize": 3133420,
  "pluginCount": 9,
  "plugins": [
    {
      "name": "aiops",
      "bundlesCount": 2,
      "totalSize": 5982,
      "bundles": [
        {
          "name": "aiops.chunk.1.js",
          "transferredSize": 2013
        },
        ...
      ]
    },
    {
      "name": "discover",
      "bundlesCount": 17,
      "totalSize": 631605,
      "bundles": [
        {
          "name": "discover.chunk.1.js",
          "transferredSize": 41915
        },
        ...
      ]
    },
    {
      "name": "eventAnnotation",
      "bundlesCount": 1,
      "totalSize": 8652,
      "bundles": [
        {
          "name": "eventAnnotation.chunk.1.js",
          "transferredSize": 8652
        }
      ]
    },
    {
      "name": "expressionXY",
      "bundlesCount": 5,
      "totalSize": 203127,
      "bundles": [
        {
          "name": "expressionXY.chunk.2.js",
          "transferredSize": 5328
        },
        ...
      ]
    },
  ]
}
```

You can create a Scout UI test and start bundle tracker whenever you
want to compute collected stats when all loading is done. Designed as
test, it allows you to have individual validations for plugins, total
bundle size, individual plugin size, etc.

```
      // Ensure all JS bundles are loaded
      await perfTracker.waitForJsLoad(cdp);

      // Collect and validate stats
      const stats = perfTracker.collectJsBundleStats(currentUrl);
      expect(
        stats.totalSize,
        `Total bundles size loaded on page should not exceed 3.0 MB`
      ).toBeLessThan(3 * 1024 * 1024);
      expect(stats.bundleCount, {
        message: `Total bundle chunks count loaded on page should not exceed 100`,
      }).toBeLessThan(100);
      expect(
        stats.plugins.map((p) => p.name),
        { message: 'Unexpected plugins were loaded on page' }
      ).toStrictEqual([
        'aiops',
        'discover',
        'eventAnnotation',
        'expressionXY',
        'kbn-ui-shared-deps-npm',
        'lens',
        'maps',
        'unifiedHistogram',
        'unifiedSearch',
      ]);
      // Validate individual plugin bundle sizes
      expect(stats.plugins.find((p) => p.name === 'discover')?.totalSize, {
        message: `Total 'discover' bundles size should not exceed 625 KB`,
      }).toBeLessThan(625 * 1024);
```

Full test example:
https://github.com/elastic/kibana/blob/7b18e85541d00c3c33a9640cd38a5896b3a758ed/x-pack/platform/plugins/private/discover_enhanced/ui_tests/tests/discover_cdp_perf.spec.ts

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
(cherry picked from commit b5f158b)

# Conflicts:
#	yarn.lock
dmlemeshko added a commit that referenced this pull request Mar 19, 2025
@dmlemeshko
[9.0] [Space time] extending Scout with perfTracker fixture (#212397) (…
270867b 
…#215016)

# Backport

This will backport the following commits from `main` to `9.0`:
- [[Space time] extending Scout with perfTracker fixture
(#212397)](#212397)

<!--- Backport version: 9.6.6 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sorenlouv/backport)

<!--BACKPORT [{"author":{"name":"Dzmitry
Lemechko","email":"dzmitry.lemechko@elastic.co"},"sourceCommit":{"committedDate":"2025-03-14T17:35:31Z","message":"[Space
time] extending Scout with perfTracker fixture (#212397)\n\n##
Summary\n\nOn-Week project \"Client-side performance insights with
Playwright &\nLighthouse\"\n\nrevisiting old PR #66224\n\nThis PR
extends Scout with `perfTracker` fixture designed to analyze\nJavaScript
bundle performance and page-level performance metrics in\nKibana by
leveraging Chrome DevTools Protocol (CDP).\n\nIt intercepts network
requests, filters static bundles, and computes\nbundle size statistics
per page load. Additionally, it collects CDP\nPerformance Domain
Metrics, allowing in-depth analysis of rendering and\nscript execution
times.\n\n\n[README](https://github.com/elastic/kibana/blob/c013c39b7ed92248b94716d953ad692e9328a08d/src/platform/packages/shared/kbn-scout/src/playwright/fixtures/test/performance/README.md)\nfile
with more details and examples was added\n\nOutput example for
`/app/discover` (shorten, just to share the idea):\n\n```\n{\n \"url\":
\"http://localhost:5620/app/discover#/\",\n \"bundleCount\": 87,\n
\"totalSize\": 3133420,\n \"pluginCount\": 9,\n \"plugins\": [\n {\n
\"name\": \"aiops\",\n \"bundlesCount\": 2,\n \"totalSize\": 5982,\n
\"bundles\": [\n {\n \"name\": \"aiops.chunk.1.js\",\n
\"transferredSize\": 2013\n },\n ...\n ]\n },\n {\n \"name\":
\"discover\",\n \"bundlesCount\": 17,\n \"totalSize\": 631605,\n
\"bundles\": [\n {\n \"name\": \"discover.chunk.1.js\",\n
\"transferredSize\": 41915\n },\n ...\n ]\n },\n {\n \"name\":
\"eventAnnotation\",\n \"bundlesCount\": 1,\n \"totalSize\": 8652,\n
\"bundles\": [\n {\n \"name\": \"eventAnnotation.chunk.1.js\",\n
\"transferredSize\": 8652\n }\n ]\n },\n {\n \"name\":
\"expressionXY\",\n \"bundlesCount\": 5,\n \"totalSize\": 203127,\n
\"bundles\": [\n {\n \"name\": \"expressionXY.chunk.2.js\",\n
\"transferredSize\": 5328\n },\n ...\n ]\n },\n ]\n}\n```\n\nYou can
create a Scout UI test and start bundle tracker whenever you\nwant to
compute collected stats when all loading is done. Designed as\ntest, it
allows you to have individual validations for plugins, total\nbundle
size, individual plugin size, etc.\n\n```\n // Ensure all JS bundles are
loaded\n await perfTracker.waitForJsLoad(cdp);\n\n // Collect and
validate stats\n const stats =
perfTracker.collectJsBundleStats(currentUrl);\n expect(\n
stats.totalSize,\n `Total bundles size loaded on page should not exceed
3.0 MB`\n ).toBeLessThan(3 * 1024 * 1024);\n expect(stats.bundleCount,
{\n message: `Total bundle chunks count loaded on page should not exceed
100`,\n }).toBeLessThan(100);\n expect(\n stats.plugins.map((p) =>
p.name),\n { message: 'Unexpected plugins were loaded on page' }\n
).toStrictEqual([\n 'aiops',\n 'discover',\n 'eventAnnotation',\n
'expressionXY',\n 'kbn-ui-shared-deps-npm',\n 'lens',\n 'maps',\n
'unifiedHistogram',\n 'unifiedSearch',\n ]);\n // Validate individual
plugin bundle sizes\n expect(stats.plugins.find((p) => p.name ===
'discover')?.totalSize, {\n message: `Total 'discover' bundles size
should not exceed 625 KB`,\n }).toBeLessThan(625 * 1024);\n```\n\nFull
test
example:\nhttps://github.com/elastic/kibana/blob/7b18e85541d00c3c33a9640cd38a5896b3a758ed/x-pack/platform/plugins/private/discover_enhanced/ui_tests/tests/discover_cdp_perf.spec.ts\n\n---------\n\nCo-authored-by:
kibanamachine
<42973632+kibanamachine@users.noreply.github.com>","sha":"b5f158bc42285c37911abca17c371f4459106fa7","branchLabelMapping":{"^v9.1.0$":"main","^v8.19.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","wg:performance","backport:version","test:scout","v9.1.0","v8.19.0"],"title":"[Space
time] extending Scout with perfTracker
fixture","number":212397,"url":"https://github.com/elastic/kibana/pull/212397","mergeCommit":{"message":"[Space
time] extending Scout with perfTracker fixture (#212397)\n\n##
Summary\n\nOn-Week project \"Client-side performance insights with
Playwright &\nLighthouse\"\n\nrevisiting old PR #66224\n\nThis PR
extends Scout with `perfTracker` fixture designed to analyze\nJavaScript
bundle performance and page-level performance metrics in\nKibana by
leveraging Chrome DevTools Protocol (CDP).\n\nIt intercepts network
requests, filters static bundles, and computes\nbundle size statistics
per page load. Additionally, it collects CDP\nPerformance Domain
Metrics, allowing in-depth analysis of rendering and\nscript execution
times.\n\n\n[README](https://github.com/elastic/kibana/blob/c013c39b7ed92248b94716d953ad692e9328a08d/src/platform/packages/shared/kbn-scout/src/playwright/fixtures/test/performance/README.md)\nfile
with more details and examples was added\n\nOutput example for
`/app/discover` (shorten, just to share the idea):\n\n```\n{\n \"url\":
\"http://localhost:5620/app/discover#/\",\n \"bundleCount\": 87,\n
\"totalSize\": 3133420,\n \"pluginCount\": 9,\n \"plugins\": [\n {\n
\"name\": \"aiops\",\n \"bundlesCount\": 2,\n \"totalSize\": 5982,\n
\"bundles\": [\n {\n \"name\": \"aiops.chunk.1.js\",\n
\"transferredSize\": 2013\n },\n ...\n ]\n },\n {\n \"name\":
\"discover\",\n \"bundlesCount\": 17,\n \"totalSize\": 631605,\n
\"bundles\": [\n {\n \"name\": \"discover.chunk.1.js\",\n
\"transferredSize\": 41915\n },\n ...\n ]\n },\n {\n \"name\":
\"eventAnnotation\",\n \"bundlesCount\": 1,\n \"totalSize\": 8652,\n
\"bundles\": [\n {\n \"name\": \"eventAnnotation.chunk.1.js\",\n
\"transferredSize\": 8652\n }\n ]\n },\n {\n \"name\":
\"expressionXY\",\n \"bundlesCount\": 5,\n \"totalSize\": 203127,\n
\"bundles\": [\n {\n \"name\": \"expressionXY.chunk.2.js\",\n
\"transferredSize\": 5328\n },\n ...\n ]\n },\n ]\n}\n```\n\nYou can
create a Scout UI test and start bundle tracker whenever you\nwant to
compute collected stats when all loading is done. Designed as\ntest, it
allows you to have individual validations for plugins, total\nbundle
size, individual plugin size, etc.\n\n```\n // Ensure all JS bundles are
loaded\n await perfTracker.waitForJsLoad(cdp);\n\n // Collect and
validate stats\n const stats =
perfTracker.collectJsBundleStats(currentUrl);\n expect(\n
stats.totalSize,\n `Total bundles size loaded on page should not exceed
3.0 MB`\n ).toBeLessThan(3 * 1024 * 1024);\n expect(stats.bundleCount,
{\n message: `Total bundle chunks count loaded on page should not exceed
100`,\n }).toBeLessThan(100);\n expect(\n stats.plugins.map((p) =>
p.name),\n { message: 'Unexpected plugins were loaded on page' }\n
).toStrictEqual([\n 'aiops',\n 'discover',\n 'eventAnnotation',\n
'expressionXY',\n 'kbn-ui-shared-deps-npm',\n 'lens',\n 'maps',\n
'unifiedHistogram',\n 'unifiedSearch',\n ]);\n // Validate individual
plugin bundle sizes\n expect(stats.plugins.find((p) => p.name ===
'discover')?.totalSize, {\n message: `Total 'discover' bundles size
should not exceed 625 KB`,\n }).toBeLessThan(625 * 1024);\n```\n\nFull
test
example:\nhttps://github.com/elastic/kibana/blob/7b18e85541d00c3c33a9640cd38a5896b3a758ed/x-pack/platform/plugins/private/discover_enhanced/ui_tests/tests/discover_cdp_perf.spec.ts\n\n---------\n\nCo-authored-by:
kibanamachine
<42973632+kibanamachine@users.noreply.github.com>","sha":"b5f158bc42285c37911abca17c371f4459106fa7"}},"sourceBranch":"main","suggestedTargetBranches":["9.0","8.x"],"targetPullRequestStates":[{"branch":"9.0","label":"v9.0.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v9.1.0","branchLabelMappingKey":"^v9.1.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/212397","number":212397,"mergeCommit":{"message":"[Space
time] extending Scout with perfTracker fixture (#212397)\n\n##
Summary\n\nOn-Week project \"Client-side performance insights with
Playwright &\nLighthouse\"\n\nrevisiting old PR #66224\n\nThis PR
extends Scout with `perfTracker` fixture designed to analyze\nJavaScript
bundle performance and page-level performance metrics in\nKibana by
leveraging Chrome DevTools Protocol (CDP).\n\nIt intercepts network
requests, filters static bundles, and computes\nbundle size statistics
per page load. Additionally, it collects CDP\nPerformance Domain
Metrics, allowing in-depth analysis of rendering and\nscript execution
times.\n\n\n[README](https://github.com/elastic/kibana/blob/c013c39b7ed92248b94716d953ad692e9328a08d/src/platform/packages/shared/kbn-scout/src/playwright/fixtures/test/performance/README.md)\nfile
with more details and examples was added\n\nOutput example for
`/app/discover` (shorten, just to share the idea):\n\n```\n{\n \"url\":
\"http://localhost:5620/app/discover#/\",\n \"bundleCount\": 87,\n
\"totalSize\": 3133420,\n \"pluginCount\": 9,\n \"plugins\": [\n {\n
\"name\": \"aiops\",\n \"bundlesCount\": 2,\n \"totalSize\": 5982,\n
\"bundles\": [\n {\n \"name\": \"aiops.chunk.1.js\",\n
\"transferredSize\": 2013\n },\n ...\n ]\n },\n {\n \"name\":
\"discover\",\n \"bundlesCount\": 17,\n \"totalSize\": 631605,\n
\"bundles\": [\n {\n \"name\": \"discover.chunk.1.js\",\n
\"transferredSize\": 41915\n },\n ...\n ]\n },\n {\n \"name\":
\"eventAnnotation\",\n \"bundlesCount\": 1,\n \"totalSize\": 8652,\n
\"bundles\": [\n {\n \"name\": \"eventAnnotation.chunk.1.js\",\n
\"transferredSize\": 8652\n }\n ]\n },\n {\n \"name\":
\"expressionXY\",\n \"bundlesCount\": 5,\n \"totalSize\": 203127,\n
\"bundles\": [\n {\n \"name\": \"expressionXY.chunk.2.js\",\n
\"transferredSize\": 5328\n },\n ...\n ]\n },\n ]\n}\n```\n\nYou can
create a Scout UI test and start bundle tracker whenever you\nwant to
compute collected stats when all loading is done. Designed as\ntest, it
allows you to have individual validations for plugins, total\nbundle
size, individual plugin size, etc.\n\n```\n // Ensure all JS bundles are
loaded\n await perfTracker.waitForJsLoad(cdp);\n\n // Collect and
validate stats\n const stats =
perfTracker.collectJsBundleStats(currentUrl);\n expect(\n
stats.totalSize,\n `Total bundles size loaded on page should not exceed
3.0 MB`\n ).toBeLessThan(3 * 1024 * 1024);\n expect(stats.bundleCount,
{\n message: `Total bundle chunks count loaded on page should not exceed
100`,\n }).toBeLessThan(100);\n expect(\n stats.plugins.map((p) =>
p.name),\n { message: 'Unexpected plugins were loaded on page' }\n
).toStrictEqual([\n 'aiops',\n 'discover',\n 'eventAnnotation',\n
'expressionXY',\n 'kbn-ui-shared-deps-npm',\n 'lens',\n 'maps',\n
'unifiedHistogram',\n 'unifiedSearch',\n ]);\n // Validate individual
plugin bundle sizes\n expect(stats.plugins.find((p) => p.name ===
'discover')?.totalSize, {\n message: `Total 'discover' bundles size
should not exceed 625 KB`,\n }).toBeLessThan(625 * 1024);\n```\n\nFull
test
example:\nhttps://github.com/elastic/kibana/blob/7b18e85541d00c3c33a9640cd38a5896b3a758ed/x-pack/platform/plugins/private/discover_enhanced/ui_tests/tests/discover_cdp_perf.spec.ts\n\n---------\n\nCo-authored-by:
kibanamachine
<42973632+kibanamachine@users.noreply.github.com>","sha":"b5f158bc42285c37911abca17c371f4459106fa7"}},{"branch":"8.x","label":"v8.19.0","branchLabelMappingKey":"^v8.19.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->
dmlemeshko added a commit to dmlemeshko/kibana that referenced this pull request Mar 19, 2025
@dmlemeshko
[Space time] extending Scout with perfTracker fixture (elastic#212397)
a9668e4 
## Summary

On-Week project "Client-side performance insights with Playwright &
Lighthouse"

revisiting old PR elastic#66224

This PR extends Scout with `perfTracker` fixture designed to analyze
JavaScript bundle performance and page-level performance metrics in
Kibana by leveraging Chrome DevTools Protocol (CDP).

It intercepts network requests, filters static bundles, and computes
bundle size statistics per page load. Additionally, it collects CDP
Performance Domain Metrics, allowing in-depth analysis of rendering and
script execution times.

[README](https://github.com/elastic/kibana/blob/c013c39b7ed92248b94716d953ad692e9328a08d/src/platform/packages/shared/kbn-scout/src/playwright/fixtures/test/performance/README.md)
file with more details and examples was added

Output example for `/app/discover` (shorten, just to share the idea):

```
{
  "url": "http://localhost:5620/app/discover#/",
  "bundleCount": 87,
  "totalSize": 3133420,
  "pluginCount": 9,
  "plugins": [
    {
      "name": "aiops",
      "bundlesCount": 2,
      "totalSize": 5982,
      "bundles": [
        {
          "name": "aiops.chunk.1.js",
          "transferredSize": 2013
        },
        ...
      ]
    },
    {
      "name": "discover",
      "bundlesCount": 17,
      "totalSize": 631605,
      "bundles": [
        {
          "name": "discover.chunk.1.js",
          "transferredSize": 41915
        },
        ...
      ]
    },
    {
      "name": "eventAnnotation",
      "bundlesCount": 1,
      "totalSize": 8652,
      "bundles": [
        {
          "name": "eventAnnotation.chunk.1.js",
          "transferredSize": 8652
        }
      ]
    },
    {
      "name": "expressionXY",
      "bundlesCount": 5,
      "totalSize": 203127,
      "bundles": [
        {
          "name": "expressionXY.chunk.2.js",
          "transferredSize": 5328
        },
        ...
      ]
    },
  ]
}
```

You can create a Scout UI test and start bundle tracker whenever you
want to compute collected stats when all loading is done. Designed as
test, it allows you to have individual validations for plugins, total
bundle size, individual plugin size, etc.

```
      // Ensure all JS bundles are loaded
      await perfTracker.waitForJsLoad(cdp);

      // Collect and validate stats
      const stats = perfTracker.collectJsBundleStats(currentUrl);
      expect(
        stats.totalSize,
        `Total bundles size loaded on page should not exceed 3.0 MB`
      ).toBeLessThan(3 * 1024 * 1024);
      expect(stats.bundleCount, {
        message: `Total bundle chunks count loaded on page should not exceed 100`,
      }).toBeLessThan(100);
      expect(
        stats.plugins.map((p) => p.name),
        { message: 'Unexpected plugins were loaded on page' }
      ).toStrictEqual([
        'aiops',
        'discover',
        'eventAnnotation',
        'expressionXY',
        'kbn-ui-shared-deps-npm',
        'lens',
        'maps',
        'unifiedHistogram',
        'unifiedSearch',
      ]);
      // Validate individual plugin bundle sizes
      expect(stats.plugins.find((p) => p.name === 'discover')?.totalSize, {
        message: `Total 'discover' bundles size should not exceed 625 KB`,
      }).toBeLessThan(625 * 1024);
```

Full test example:
https://github.com/elastic/kibana/blob/7b18e85541d00c3c33a9640cd38a5896b3a758ed/x-pack/platform/plugins/private/discover_enhanced/ui_tests/tests/discover_cdp_perf.spec.ts

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
(cherry picked from commit b5f158b)

# Conflicts:
#	renovate.json
#	yarn.lock
dmlemeshko added a commit that referenced this pull request Mar 19, 2025
@dmlemeshko @kibanamachine
[8.x] [Space time] extending Scout with perfTracker fixture (#212397) (…
0c2e8cd 
…#215141)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[Space time] extending Scout with perfTracker fixture
(#212397)](#212397)

<!--- Backport version: 9.6.6 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sorenlouv/backport)

<!--BACKPORT [{"author":{"name":"Dzmitry
Lemechko","email":"dzmitry.lemechko@elastic.co"},"sourceCommit":{"committedDate":"2025-03-14T17:35:31Z","message":"[Space
time] extending Scout with perfTracker fixture (#212397)\n\n##
Summary\n\nOn-Week project \"Client-side performance insights with
Playwright &\nLighthouse\"\n\nrevisiting old PR #66224\n\nThis PR
extends Scout with `perfTracker` fixture designed to analyze\nJavaScript
bundle performance and page-level performance metrics in\nKibana by
leveraging Chrome DevTools Protocol (CDP).\n\nIt intercepts network
requests, filters static bundles, and computes\nbundle size statistics
per page load. Additionally, it collects CDP\nPerformance Domain
Metrics, allowing in-depth analysis of rendering and\nscript execution
times.\n\n\n[README](https://github.com/elastic/kibana/blob/c013c39b7ed92248b94716d953ad692e9328a08d/src/platform/packages/shared/kbn-scout/src/playwright/fixtures/test/performance/README.md)\nfile
with more details and examples was added\n\nOutput example for
`/app/discover` (shorten, just to share the idea):\n\n```\n{\n \"url\":
\"http://localhost:5620/app/discover#/\",\n \"bundleCount\": 87,\n
\"totalSize\": 3133420,\n \"pluginCount\": 9,\n \"plugins\": [\n {\n
\"name\": \"aiops\",\n \"bundlesCount\": 2,\n \"totalSize\": 5982,\n
\"bundles\": [\n {\n \"name\": \"aiops.chunk.1.js\",\n
\"transferredSize\": 2013\n },\n ...\n ]\n },\n {\n \"name\":
\"discover\",\n \"bundlesCount\": 17,\n \"totalSize\": 631605,\n
\"bundles\": [\n {\n \"name\": \"discover.chunk.1.js\",\n
\"transferredSize\": 41915\n },\n ...\n ]\n },\n {\n \"name\":
\"eventAnnotation\",\n \"bundlesCount\": 1,\n \"totalSize\": 8652,\n
\"bundles\": [\n {\n \"name\": \"eventAnnotation.chunk.1.js\",\n
\"transferredSize\": 8652\n }\n ]\n },\n {\n \"name\":
\"expressionXY\",\n \"bundlesCount\": 5,\n \"totalSize\": 203127,\n
\"bundles\": [\n {\n \"name\": \"expressionXY.chunk.2.js\",\n
\"transferredSize\": 5328\n },\n ...\n ]\n },\n ]\n}\n```\n\nYou can
create a Scout UI test and start bundle tracker whenever you\nwant to
compute collected stats when all loading is done. Designed as\ntest, it
allows you to have individual validations for plugins, total\nbundle
size, individual plugin size, etc.\n\n```\n // Ensure all JS bundles are
loaded\n await perfTracker.waitForJsLoad(cdp);\n\n // Collect and
validate stats\n const stats =
perfTracker.collectJsBundleStats(currentUrl);\n expect(\n
stats.totalSize,\n `Total bundles size loaded on page should not exceed
3.0 MB`\n ).toBeLessThan(3 * 1024 * 1024);\n expect(stats.bundleCount,
{\n message: `Total bundle chunks count loaded on page should not exceed
100`,\n }).toBeLessThan(100);\n expect(\n stats.plugins.map((p) =>
p.name),\n { message: 'Unexpected plugins were loaded on page' }\n
).toStrictEqual([\n 'aiops',\n 'discover',\n 'eventAnnotation',\n
'expressionXY',\n 'kbn-ui-shared-deps-npm',\n 'lens',\n 'maps',\n
'unifiedHistogram',\n 'unifiedSearch',\n ]);\n // Validate individual
plugin bundle sizes\n expect(stats.plugins.find((p) => p.name ===
'discover')?.totalSize, {\n message: `Total 'discover' bundles size
should not exceed 625 KB`,\n }).toBeLessThan(625 * 1024);\n```\n\nFull
test
example:\nhttps://github.com/elastic/kibana/blob/7b18e85541d00c3c33a9640cd38a5896b3a758ed/x-pack/platform/plugins/private/discover_enhanced/ui_tests/tests/discover_cdp_perf.spec.ts\n\n---------\n\nCo-authored-by:
kibanamachine
<42973632+kibanamachine@users.noreply.github.com>","sha":"b5f158bc42285c37911abca17c371f4459106fa7","branchLabelMapping":{"^v9.1.0$":"main","^v8.19.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","wg:performance","backport:version","test:scout","v9.1.0","v8.19.0"],"title":"[Space
time] extending Scout with perfTracker
fixture","number":212397,"url":"https://github.com/elastic/kibana/pull/212397","mergeCommit":{"message":"[Space
time] extending Scout with perfTracker fixture (#212397)\n\n##
Summary\n\nOn-Week project \"Client-side performance insights with
Playwright &\nLighthouse\"\n\nrevisiting old PR #66224\n\nThis PR
extends Scout with `perfTracker` fixture designed to analyze\nJavaScript
bundle performance and page-level performance metrics in\nKibana by
leveraging Chrome DevTools Protocol (CDP).\n\nIt intercepts network
requests, filters static bundles, and computes\nbundle size statistics
per page load. Additionally, it collects CDP\nPerformance Domain
Metrics, allowing in-depth analysis of rendering and\nscript execution
times.\n\n\n[README](https://github.com/elastic/kibana/blob/c013c39b7ed92248b94716d953ad692e9328a08d/src/platform/packages/shared/kbn-scout/src/playwright/fixtures/test/performance/README.md)\nfile
with more details and examples was added\n\nOutput example for
`/app/discover` (shorten, just to share the idea):\n\n```\n{\n \"url\":
\"http://localhost:5620/app/discover#/\",\n \"bundleCount\": 87,\n
\"totalSize\": 3133420,\n \"pluginCount\": 9,\n \"plugins\": [\n {\n
\"name\": \"aiops\",\n \"bundlesCount\": 2,\n \"totalSize\": 5982,\n
\"bundles\": [\n {\n \"name\": \"aiops.chunk.1.js\",\n
\"transferredSize\": 2013\n },\n ...\n ]\n },\n {\n \"name\":
\"discover\",\n \"bundlesCount\": 17,\n \"totalSize\": 631605,\n
\"bundles\": [\n {\n \"name\": \"discover.chunk.1.js\",\n
\"transferredSize\": 41915\n },\n ...\n ]\n },\n {\n \"name\":
\"eventAnnotation\",\n \"bundlesCount\": 1,\n \"totalSize\": 8652,\n
\"bundles\": [\n {\n \"name\": \"eventAnnotation.chunk.1.js\",\n
\"transferredSize\": 8652\n }\n ]\n },\n {\n \"name\":
\"expressionXY\",\n \"bundlesCount\": 5,\n \"totalSize\": 203127,\n
\"bundles\": [\n {\n \"name\": \"expressionXY.chunk.2.js\",\n
\"transferredSize\": 5328\n },\n ...\n ]\n },\n ]\n}\n```\n\nYou can
create a Scout UI test and start bundle tracker whenever you\nwant to
compute collected stats when all loading is done. Designed as\ntest, it
allows you to have individual validations for plugins, total\nbundle
size, individual plugin size, etc.\n\n```\n // Ensure all JS bundles are
loaded\n await perfTracker.waitForJsLoad(cdp);\n\n // Collect and
validate stats\n const stats =
perfTracker.collectJsBundleStats(currentUrl);\n expect(\n
stats.totalSize,\n `Total bundles size loaded on page should not exceed
3.0 MB`\n ).toBeLessThan(3 * 1024 * 1024);\n expect(stats.bundleCount,
{\n message: `Total bundle chunks count loaded on page should not exceed
100`,\n }).toBeLessThan(100);\n expect(\n stats.plugins.map((p) =>
p.name),\n { message: 'Unexpected plugins were loaded on page' }\n
).toStrictEqual([\n 'aiops',\n 'discover',\n 'eventAnnotation',\n
'expressionXY',\n 'kbn-ui-shared-deps-npm',\n 'lens',\n 'maps',\n
'unifiedHistogram',\n 'unifiedSearch',\n ]);\n // Validate individual
plugin bundle sizes\n expect(stats.plugins.find((p) => p.name ===
'discover')?.totalSize, {\n message: `Total 'discover' bundles size
should not exceed 625 KB`,\n }).toBeLessThan(625 * 1024);\n```\n\nFull
test
example:\nhttps://github.com/elastic/kibana/blob/7b18e85541d00c3c33a9640cd38a5896b3a758ed/x-pack/platform/plugins/private/discover_enhanced/ui_tests/tests/discover_cdp_perf.spec.ts\n\n---------\n\nCo-authored-by:
kibanamachine
<42973632+kibanamachine@users.noreply.github.com>","sha":"b5f158bc42285c37911abca17c371f4459106fa7"}},"sourceBranch":"main","suggestedTargetBranches":["8.x"],"targetPullRequestStates":[{"branch":"9.0","label":"v9.0.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"url":"https://github.com/elastic/kibana/pull/215016","number":215016,"state":"MERGED","mergeCommit":{"sha":"270867bac6f803fcd9ccb12357710300c0770a15","message":"[9.0]
[Space time] extending Scout with perfTracker fixture (#212397)
(#215016)\n\n# Backport\n\nThis will backport the following commits from
`main` to `9.0`:\n- [[Space time] extending Scout with perfTracker
fixture\n(#212397)](https://github.com/elastic/kibana/pull/212397)\n\n\n\n###
Questions ?\nPlease refer to the [Backport
tool\ndocumentation](https://github.com/sorenlouv/backport)\n\n"}},{"branch":"main","label":"v9.1.0","branchLabelMappingKey":"^v9.1.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/212397","number":212397,"mergeCommit":{"message":"[Space
time] extending Scout with perfTracker fixture (#212397)\n\n##
Summary\n\nOn-Week project \"Client-side performance insights with
Playwright &\nLighthouse\"\n\nrevisiting old PR #66224\n\nThis PR
extends Scout with `perfTracker` fixture designed to analyze\nJavaScript
bundle performance and page-level performance metrics in\nKibana by
leveraging Chrome DevTools Protocol (CDP).\n\nIt intercepts network
requests, filters static bundles, and computes\nbundle size statistics
per page load. Additionally, it collects CDP\nPerformance Domain
Metrics, allowing in-depth analysis of rendering and\nscript execution
times.\n\n\n[README](https://github.com/elastic/kibana/blob/c013c39b7ed92248b94716d953ad692e9328a08d/src/platform/packages/shared/kbn-scout/src/playwright/fixtures/test/performance/README.md)\nfile
with more details and examples was added\n\nOutput example for
`/app/discover` (shorten, just to share the idea):\n\n```\n{\n \"url\":
\"http://localhost:5620/app/discover#/\",\n \"bundleCount\": 87,\n
\"totalSize\": 3133420,\n \"pluginCount\": 9,\n \"plugins\": [\n {\n
\"name\": \"aiops\",\n \"bundlesCount\": 2,\n \"totalSize\": 5982,\n
\"bundles\": [\n {\n \"name\": \"aiops.chunk.1.js\",\n
\"transferredSize\": 2013\n },\n ...\n ]\n },\n {\n \"name\":
\"discover\",\n \"bundlesCount\": 17,\n \"totalSize\": 631605,\n
\"bundles\": [\n {\n \"name\": \"discover.chunk.1.js\",\n
\"transferredSize\": 41915\n },\n ...\n ]\n },\n {\n \"name\":
\"eventAnnotation\",\n \"bundlesCount\": 1,\n \"totalSize\": 8652,\n
\"bundles\": [\n {\n \"name\": \"eventAnnotation.chunk.1.js\",\n
\"transferredSize\": 8652\n }\n ]\n },\n {\n \"name\":
\"expressionXY\",\n \"bundlesCount\": 5,\n \"totalSize\": 203127,\n
\"bundles\": [\n {\n \"name\": \"expressionXY.chunk.2.js\",\n
\"transferredSize\": 5328\n },\n ...\n ]\n },\n ]\n}\n```\n\nYou can
create a Scout UI test and start bundle tracker whenever you\nwant to
compute collected stats when all loading is done. Designed as\ntest, it
allows you to have individual validations for plugins, total\nbundle
size, individual plugin size, etc.\n\n```\n // Ensure all JS bundles are
loaded\n await perfTracker.waitForJsLoad(cdp);\n\n // Collect and
validate stats\n const stats =
perfTracker.collectJsBundleStats(currentUrl);\n expect(\n
stats.totalSize,\n `Total bundles size loaded on page should not exceed
3.0 MB`\n ).toBeLessThan(3 * 1024 * 1024);\n expect(stats.bundleCount,
{\n message: `Total bundle chunks count loaded on page should not exceed
100`,\n }).toBeLessThan(100);\n expect(\n stats.plugins.map((p) =>
p.name),\n { message: 'Unexpected plugins were loaded on page' }\n
).toStrictEqual([\n 'aiops',\n 'discover',\n 'eventAnnotation',\n
'expressionXY',\n 'kbn-ui-shared-deps-npm',\n 'lens',\n 'maps',\n
'unifiedHistogram',\n 'unifiedSearch',\n ]);\n // Validate individual
plugin bundle sizes\n expect(stats.plugins.find((p) => p.name ===
'discover')?.totalSize, {\n message: `Total 'discover' bundles size
should not exceed 625 KB`,\n }).toBeLessThan(625 * 1024);\n```\n\nFull
test
example:\nhttps://github.com/elastic/kibana/blob/7b18e85541d00c3c33a9640cd38a5896b3a758ed/x-pack/platform/plugins/private/discover_enhanced/ui_tests/tests/discover_cdp_perf.spec.ts\n\n---------\n\nCo-authored-by:
kibanamachine
<42973632+kibanamachine@users.noreply.github.com>","sha":"b5f158bc42285c37911abca17c371f4459106fa7"}},{"branch":"8.x","label":"v8.19.0","branchLabelMappingKey":"^v8.19.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
clintandrewhall pushed a commit to clintandrewhall/kibana that referenced this pull request Mar 20, 2025
@dmlemeshko @kibanamachine @clintandrewhall
[Space time] extending Scout with perfTracker fixture (elastic#212397)
79e2273 
## Summary

On-Week project "Client-side performance insights with Playwright &
Lighthouse"

revisiting old PR elastic#66224

This PR extends Scout with `perfTracker` fixture designed to analyze
JavaScript bundle performance and page-level performance metrics in
Kibana by leveraging Chrome DevTools Protocol (CDP).

It intercepts network requests, filters static bundles, and computes
bundle size statistics per page load. Additionally, it collects CDP
Performance Domain Metrics, allowing in-depth analysis of rendering and
script execution times.


[README](https://github.com/elastic/kibana/blob/c013c39b7ed92248b94716d953ad692e9328a08d/src/platform/packages/shared/kbn-scout/src/playwright/fixtures/test/performance/README.md)
file with more details and examples was added

Output example for `/app/discover` (shorten, just to share the idea):

```
{
  "url": "http://localhost:5620/app/discover#/",
  "bundleCount": 87,
  "totalSize": 3133420,
  "pluginCount": 9,
  "plugins": [
    {
      "name": "aiops",
      "bundlesCount": 2,
      "totalSize": 5982,
      "bundles": [
        {
          "name": "aiops.chunk.1.js",
          "transferredSize": 2013
        },
        ...
      ]
    },
    {
      "name": "discover",
      "bundlesCount": 17,
      "totalSize": 631605,
      "bundles": [
        {
          "name": "discover.chunk.1.js",
          "transferredSize": 41915
        },
        ...
      ]
    },
    {
      "name": "eventAnnotation",
      "bundlesCount": 1,
      "totalSize": 8652,
      "bundles": [
        {
          "name": "eventAnnotation.chunk.1.js",
          "transferredSize": 8652
        }
      ]
    },
    {
      "name": "expressionXY",
      "bundlesCount": 5,
      "totalSize": 203127,
      "bundles": [
        {
          "name": "expressionXY.chunk.2.js",
          "transferredSize": 5328
        },
        ...
      ]
    },
  ]
}
```

You can create a Scout UI test and start bundle tracker whenever you
want to compute collected stats when all loading is done. Designed as
test, it allows you to have individual validations for plugins, total
bundle size, individual plugin size, etc.

```
      // Ensure all JS bundles are loaded
      await perfTracker.waitForJsLoad(cdp);

      // Collect and validate stats
      const stats = perfTracker.collectJsBundleStats(currentUrl);
      expect(
        stats.totalSize,
        `Total bundles size loaded on page should not exceed 3.0 MB`
      ).toBeLessThan(3 * 1024 * 1024);
      expect(stats.bundleCount, {
        message: `Total bundle chunks count loaded on page should not exceed 100`,
      }).toBeLessThan(100);
      expect(
        stats.plugins.map((p) => p.name),
        { message: 'Unexpected plugins were loaded on page' }
      ).toStrictEqual([
        'aiops',
        'discover',
        'eventAnnotation',
        'expressionXY',
        'kbn-ui-shared-deps-npm',
        'lens',
        'maps',
        'unifiedHistogram',
        'unifiedSearch',
      ]);
      // Validate individual plugin bundle sizes
      expect(stats.plugins.find((p) => p.name === 'discover')?.totalSize, {
        message: `Total 'discover' bundles size should not exceed 625 KB`,
      }).toBeLessThan(625 * 1024);
```

Full test example:
https://github.com/elastic/kibana/blob/7b18e85541d00c3c33a9640cd38a5896b3a758ed/x-pack/platform/plugins/private/discover_enhanced/ui_tests/tests/discover_cdp_perf.spec.ts

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
CAWilson94 pushed a commit to CAWilson94/kibana that referenced this pull request Mar 22, 2025
@dmlemeshko @kibanamachine @CAWilson94
[Space time] extending Scout with perfTracker fixture (elastic#212397)
d21671b 
## Summary

On-Week project "Client-side performance insights with Playwright &
Lighthouse"

revisiting old PR elastic#66224

This PR extends Scout with `perfTracker` fixture designed to analyze
JavaScript bundle performance and page-level performance metrics in
Kibana by leveraging Chrome DevTools Protocol (CDP).

It intercepts network requests, filters static bundles, and computes
bundle size statistics per page load. Additionally, it collects CDP
Performance Domain Metrics, allowing in-depth analysis of rendering and
script execution times.


[README](https://github.com/elastic/kibana/blob/c013c39b7ed92248b94716d953ad692e9328a08d/src/platform/packages/shared/kbn-scout/src/playwright/fixtures/test/performance/README.md)
file with more details and examples was added

Output example for `/app/discover` (shorten, just to share the idea):

```
{
  "url": "http://localhost:5620/app/discover#/",
  "bundleCount": 87,
  "totalSize": 3133420,
  "pluginCount": 9,
  "plugins": [
    {
      "name": "aiops",
      "bundlesCount": 2,
      "totalSize": 5982,
      "bundles": [
        {
          "name": "aiops.chunk.1.js",
          "transferredSize": 2013
        },
        ...
      ]
    },
    {
      "name": "discover",
      "bundlesCount": 17,
      "totalSize": 631605,
      "bundles": [
        {
          "name": "discover.chunk.1.js",
          "transferredSize": 41915
        },
        ...
      ]
    },
    {
      "name": "eventAnnotation",
      "bundlesCount": 1,
      "totalSize": 8652,
      "bundles": [
        {
          "name": "eventAnnotation.chunk.1.js",
          "transferredSize": 8652
        }
      ]
    },
    {
      "name": "expressionXY",
      "bundlesCount": 5,
      "totalSize": 203127,
      "bundles": [
        {
          "name": "expressionXY.chunk.2.js",
          "transferredSize": 5328
        },
        ...
      ]
    },
  ]
}
```

You can create a Scout UI test and start bundle tracker whenever you
want to compute collected stats when all loading is done. Designed as
test, it allows you to have individual validations for plugins, total
bundle size, individual plugin size, etc.

```
      // Ensure all JS bundles are loaded
      await perfTracker.waitForJsLoad(cdp);

      // Collect and validate stats
      const stats = perfTracker.collectJsBundleStats(currentUrl);
      expect(
        stats.totalSize,
        `Total bundles size loaded on page should not exceed 3.0 MB`
      ).toBeLessThan(3 * 1024 * 1024);
      expect(stats.bundleCount, {
        message: `Total bundle chunks count loaded on page should not exceed 100`,
      }).toBeLessThan(100);
      expect(
        stats.plugins.map((p) => p.name),
        { message: 'Unexpected plugins were loaded on page' }
      ).toStrictEqual([
        'aiops',
        'discover',
        'eventAnnotation',
        'expressionXY',
        'kbn-ui-shared-deps-npm',
        'lens',
        'maps',
        'unifiedHistogram',
        'unifiedSearch',
      ]);
      // Validate individual plugin bundle sizes
      expect(stats.plugins.find((p) => p.name === 'discover')?.totalSize, {
        message: `Total 'discover' bundles size should not exceed 625 KB`,
      }).toBeLessThan(625 * 1024);
```

Full test example:
https://github.com/elastic/kibana/blob/7b18e85541d00c3c33a9640cd38a5896b3a758ed/x-pack/platform/plugins/private/discover_enhanced/ui_tests/tests/discover_cdp_perf.spec.ts

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

2 more reviewers

@spalger spalger spalger approved these changes

@mshustov mshustov mshustov approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

release_note:skip Skip the PR/issue when compiling release notes v7.8.0 v7.9.0 v8.0.0

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

6 participants

@dmlemeshko @spalger @kibanamachine @nreese @mshustov @elasticmachine