Closes #6527: Images intersecting viewport considered as lcp candidates

[Miraeld]

Description

Fixes #6527

This PR modifies the lcp-beacon.js file to change the way the Largest Contentful Paint (LCP) is calculated. The changes include creating a new function isIntersecting(rect) that checks if an image is intersecting the viewport and modifying the area computation to account only for the visible part of the image.

Documentation

User documentation

This change will improve the accuracy of the LCP calculation by considering images that intersect the viewport, not just those fully within it. This can lead to more accurate performance measurements and better user experience.

Technical documentation

The isIntersecting(rect) function checks if an image is intersecting the viewport by comparing the top and left properties of the image's bounding rectangle with the viewport's dimensions. The area computation is modified to calculate the visible area of the image by taking the minimum of the image's dimensions and the viewport's dimensions minus the image's position.

Type of change

• Enhancement (non-breaking change which improves an existing functionality).

New dependencies

N/A

Risks

N/A

Checklists

Feature validation

• I validated all the Acceptance Criteria. If possible, provide screenshots or videos.
• I triggered all changed lines of code at least once without new errors/warnings/notices.

Documentation

• I prepared the user documentation for the feature/enhancement and shared it in the PR or the GitHub issue.
• I prepared the technical documentation if needed, and shared it in the PR or the GitHub issue.

Code style

• I wrote self-explanatory code about what it does.
• I wrote comments to explain why it does it.
• I named variables and functions explicitly.
• I protected entry points against unexpected inputs.
• I did not introduce unnecessary complexity.
• I listed the introduced external dependencies explicitly on the PR.
• I validated the repo-specific guidelines from CONTRIBUTING.md.

[MathieuLamiot]

Looks good.

[Mai-Saad]

Test Note:

• We have a test case here https://wpmediaqa.testrail.io/index.php?/cases/view/15358
• related slack discussion https://wp-media.slack.com/archives/C070482U1TK/p1713903575198689
• we may need to add related templates in e2e if it wasn't there (desktop templates different than mobile for now)

[Miraeld]

@Mai-Saad Not sure why but I can't add any result on the test plan,
But here you go:

Step 1

Works perfectly.

Step 2

Works perfectly.

Step 3

Works perfectly.

[Mai-Saad]

@Mai-Saad Not sure why but I can't add any result on the test plan,

As that was just test case not inside test plan (as it's single test). Thanks for sharing the results 🙏