Filter to exclude elements from LCP

[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 In some edge cases, discovered LCP will be inaccurate and getting the proper element will require extensive logic and comparison, or will just not be possible.

We need a filter to help exclude LCP element depending on their selector or image path fragment.

The following worked on a website with the issue:

Replacing:

const firstElementWithInfo = elements.find(item => item.elementInfo !== null);

Under _initWithFirstElementWithInfo(elements) { ... } with:

const selectorsToExclude = ['.selector'];
const imagesToExclude = ['frament/path/to/image.jpg'];

const firstElementWithInfo = elements.find(item => 
  item.elementInfo !== null && 
  !selectorsToExclude.some(selector => item.element.matches(selector)) &&
  !imagesToExclude.some(image => 
    (item.elementInfo.src && item.elementInfo.src.includes(image)) || 
    (item.elementInfo.srcset && item.elementInfo.srcset.includes(image))
  )
);

To Reproduce For testing, you can simulate it using:

https://woodmart.xtemos.com/blog/category/wooden-accessories/?opt=blog_default

By adding the following style to simulate the issue:

.main-page-wrapper {
    background-image: url(https://images.pexels.com/photos/214574/pexels-photo-214574.jpeg?auto=compress&cs=tinysrgb&w=50&dpr=1);
    background-repeat: no-repeat;
}

and test excluding either:

const selectorsToExclude = ['.main-page-wrapper'];
const imagesToExclude = ['214574/pexels-photo-214574.jpeg'];

Expected behavior Customers, support, product (for known layouts), should be able to exclude inaccurate LCP element when needed.

Screenshots N/A

Additional context Slack discussion - https://wp-media.slack.com/archives/C08N8J6VC/p1719941962200769?thread_ts=1719857870.817579&cid=C08N8J6VC

Acceptance Criteria (for WP Media team use only)

• Allow users to exclude elements from LCP using a filter
• Filter should support specific selectors
• Filter should support partial image links for starter (regex no needed to avoid a possible performance cost on the frontend)
• Will not require adding anything to the dynamic lists or the backend for now, until we have a usercase requiring a global exclusion reported from support.

[alfonso100]

I applied the suggested code on the customer website, and it succeed in skipping the matching element frament/path/to/image.jpg

[webtrainingwheels]

Would the opposite be possible in addition? i.e. not only excluding elements but being able to specify the exact element that is the LCP?

[webtrainingwheels]

another case where this would solve the problem of not detecting the correct lcp image https://secure.helpscout.net/conversation/3108685994/592711?viewId=377611