Wrong OCI if scroll happens before beacon fires

[DahmaniAdame]

Before submitting an issue please check that you’ve completed the following steps:

• Made sure you’re on the latest version [x]
• Used the search feature to ensure that the bug hasn’t been reported before [x]

Describe the bug OCI need to be collected for the initial above the fold layout.

In the current state, we collect the wrong OCI data if the beacon runs way below the fold:

• User scrolls before the beacon runs (likely to happen on mobile)
• User refreshes away from the fold and this coincides with the beacon running for the first time on the page (change of size for example)

To Reproduce Steps to reproduce the behavior:

1. Use - https://gist.github.com/DahmaniAdame/bd58d4be051f5995aa2318d341eb342a
2. Scroll to the last image
3. Hit refresh while making sure the beacon runs
4. See the LCP image will be related to the current viewport

Expected behavior Bail off collecting OCI if the current viewport was scrolled. Report a hint about why it wasn't collect on logs. This will delay OCI discovery on real visits but will make sure we are getting the accurate items to process. SaaS OCI collection will remain unaffected as there is no scrolling involved.

Screenshots N/A

Additional context Investigated here - https://wp-media.slack.com/archives/CUKB44GNN/p1726654205520499 Confirmed through testing.

Acceptance Criteria (for WP Media team use only) Clear instructions for developers, to be added before the grooming

[IvanPellya]

I confirm that I have the same problem. With an anchor link, the browser does not display the relevant information, since the page has not been fully loaded.

[Miraeld]

Reproduce the problem

• Use - https://gist.github.com/DahmaniAdame/bd58d4be051f5995aa2318d341eb342a
• Scroll to the last image
• Hit refresh while making sure the beacon runs
• See the LCP image will be related to the current viewport

Identify the root cause

The issue is that the OCI data is collected incorrectly if the user scrolls before the beacon fires. This can happen when the user scrolls on mobile or refreshes the page away from the fold.

Scope a solution

To solve the issue, we must create a new function in BeaconManager.js:

  _isPageScrolled() {
        return window.pageYOffset > 0 || document.documentElement.scrollTop > 0;
    }

and finalize the process of beacon if it returns true:

    async init() {
        this.scriptTimer = new Date();
        if (!await this._isValidPreconditions()) {
            this._finalize();
            return;
        }

        if (this._isPageScrolled()) {
            this.logger.logMessage('Bailing out because the page has been scrolled');
            this._finalize();
            return;
        }
// ...

Development steps:

• [ ] Create the function _isPageScrolled()
• [ ] Modify init function to finalize if the newly added function returns true.

Effort estimation:

XS

Is a refactor needed in that part of the codebase?

No