wp-media
Incorrect lcp detection when having linear-gradient background before a real image
Before submitting an issue please check that you’ve completed the following steps:
- Made sure you’re on the latest version Yes
- Used the search feature to ensure that the bug hasn’t been reported before Yes
Describe the bug
Check the following template file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<?php wp_head(); ?>
<style>
#test_lcp{
border-radius: 24px;
bottom: 0;
height: 100%;
left: 0;
position: absolute;
right: 0;
top: 0;
z-index: 1;
}
#test_lcp:before{
content: '';
background: linear-gradient(0deg, rgba(0, 0, 0, .4) 0, rgba(0, 0, 0, .1) 100%);
width: 100%;
height: 100%;
position: absolute;
border-radius: 24px;
}
.container{
position: relative;
}
img {
}
</style>
</head>
<body>
<div class="container">
<div id="test_lcp">
Test message
</div>
<img src="http://xxx.xxx/wp-content/uploads/2024/05/600px-Mapang-test.gif" alt="test">
</div>
<?php wp_footer(); ?>
</body>
</html>
So when having an element before an image with background as linear-gradient, it detects it as lcp instead of the real image, and because the background url is not found it returns "not found" in the lcp.
To Reproduce Steps to reproduce the behavior:
- Create a page with the previously mentioned template.
- Clear priority elements
- Visit that page in incognito
- Check the console log
- You will see the lcp is detected as "not found"
Expected behavior We should detect lcp properly and ignore that background without a url.
Technical details so our code detects that div as lcp because it's the first item added to the array of performance image (even if it has no details as below)
When I changed this line:
https://github.com/wp-media/rocket-scripts/blob/2fc8f31f3f505e83f93fd388ec43347f984ad6c9/src/BeaconLcp.js#L168
to be:
const firstElementWithInfo = elements.find((item) => {
return item.elementInfo !== null && (item.elementInfo.src || item.elementInfo.srcset);
});
it works.
So seems like the regex here
https://github.com/wp-media/rocket-scripts/blob/2fc8f31f3f505e83f93fd388ec43347f984ad6c9/src/BeaconLcp.js#L150
returns empty values when it fails and we don't check on that.
Screenshots If applicable, add screenshots to help explain your problem.
Additional context Add any other context about the problem here.
Acceptance Criteria (for WP Media team use only) Clear instructions for developers, to be added before the grooming
Related case: https://secure.helpscout.net/conversation/2715339893/513759?folderId=377611
Tested this through #6728 and confirming that if a page has an element before an image with background as linear-gradient, the image will be picked up as LCP and not the before element.
This issue occurs with radial-gradient on background-image as well
https://secure.helpscout.net/conversation/2741917563/519175?folderId=377611
Also related: https://secure.helpscout.net/conversation/2778790060/527591?viewId=2952229
related: https://secure.helpscout.net/conversation/2810672523/533442?viewId=5547167
related: https://secure.helpscout.net/conversation/2820187243/535173?viewId=5547167