Add CI check for tracking bundle size impact using browser-based measurements

[Copilot]

Implementation of download size tracking CI check:

• Create browser-based measurement script using Playwright
• Update comparison script for new measurement format
• Update CI workflow to start preview server and run Playwright
• Update documentation to reflect browser-based approach
• Address feedback to use actual browser measurements instead of regexps
• Fix redundant selector and use admin bar for WordPress ready detection

Recent Changes

Fixed two issues identified in code review:

1. Simplified redundant selector: Changed #playground-viewport:visible, .playground-viewport:visible to just #playground-viewport:visible
2. WordPress ready detection: Now waits for the WordPress admin bar (#wpadminbar) to be visible in the nested iframe, which is a more reliable indicator that WordPress is fully loaded and ready

This ensures more accurate measurement of when WordPress is actually ready for user interaction.

Summary

This PR implements automated bundle size tracking using real browser measurements via Playwright.

Measurement Approach

1. Launches real browser (Chromium via Playwright)
2. Monitors network requests during page load
3. Measures downloads at three key stages:
   • First Paint: Until progress bar visible
   • WordPress Loaded: Until admin bar visible in nested iframe
   • Offline Mode Ready: After all downloads settle (5s network idle)

CI Workflow

On each PR:

1. Builds current and base branches
2. Starts preview server (localhost:5400)
3. Measures with Playwright browser
4. Compares results
5. Posts comment if any stage changes by >50KB

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Report download size required for the initial render</issue_title>
<issue_description>Let's create a CI check that measures megabytes required for the initial website paint and the "required offline assets" size. It should be green if the change is less than 50kb and post a comment with an information if a given pr increases that size by more — OR decreases it by more. The comment should contain two sections:

• assets required for the first paint — with total size and a table of 10 largest files, and files with largest delta if we can identify them (build hash may be different than in the previous build)
• assets required for the offline mode — with the same details as above</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes Report download size required for the initial render #2821

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[adamziel]

Don't analyze assets based on regexps. Instead, use actual browser and measure total downloads until bar visible, after Wordpress loaded, and after all the downloads settle (offline mode readiness) @copilot

[Copilot]

Don't analyze assets based on regexps. Instead, use actual browser and measure total downloads until bar visible, after Wordpress loaded, and after all the downloads settle (offline mode readiness) @c...

Switched to browser-based measurements using Playwright. The new approach tracks actual network requests and measures downloads at three stages:

1. First Paint - Until progress bar visible
2. WordPress Loaded - Until site ready (nested iframes loaded)
3. Offline Mode Ready - After all downloads settle (5s network idle)

This provides realistic data that reflects actual user experience, including caching and compression effects. Commit: a03b8f6

[adamziel]

@copilot assume WordPress is ready when the Playground iframe inside the remote iframe contains WordPress admin bar. Look up the right class names or whatever you need to peek in there.

[Copilot]

Pull Request Overview

This PR implements automated bundle size tracking using real browser measurements via Playwright. The system monitors network activity at three critical page load stages (First Paint, WordPress Loaded, and Offline Mode Ready) and posts PR comments when size changes exceed 50KB.

Key changes:

• Browser-based measurement using Playwright to capture actual download sizes and timing
• Automated comparison logic that generates markdown reports for PR comments
• CI workflow that builds both PR and base branches, measures them, and posts results

Reviewed Changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 1 comment.

File	Description
tools/scripts/measure-bundle-size-browser.mjs	Implements Playwright-based network monitoring to measure downloads at three page load stages
tools/scripts/compare-bundle-size.mjs	Compares measurements between branches and generates markdown reports with 50KB threshold logic
tools/scripts/README.md	Documents the measurement system, CI workflow, and local development workflow
.github/workflows/bundle-size-check.yml	Defines CI workflow that builds both branches, runs measurements, and posts PR comments

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

The selector '#playground-viewport:visible, .playground-viewport:visible' is redundant - both parts of the comma-separated list are identical. This should either be simplified to '#playground-viewport:visible' or the second selector should target a different element (e.g., '.playground-viewport:visible' if a class-based fallback is intended).

Suggested change

	const wpFrame = page.frameLocator('#playground-viewport:visible, .playground-viewport:visible').frameLocator('#wp');
	const wpFrame = page.frameLocator('#playground-viewport:visible').frameLocator('#wp');

[Copilot]

Fixed redundant selector - simplified to #playground-viewport:visible. Commit e9e334d

[adamziel]

@copilot fix the issues ^

[Copilot]

@copilot assume WordPress is ready when the Playground iframe inside the remote iframe contains WordPress admin bar. Look up the right class names or whatever you need to peek in there.

Changed WordPress ready detection to wait for the admin bar (#wpadminbar) to be visible in the nested iframe (Playground iframe -> WordPress iframe). Commit e9e334d

@copilot fix the issues ^

Fixed both issues: simplified selector and changed WordPress ready detection to use admin bar. Commit e9e334d