search

wp-media / wp-rocket

Performance optimization plugin for WordPress
https://wp-rocket.me
GNU General Public License v2.0
687 stars 215 forks source link

Largest element with a background-image that is not kept (such as linear-gradient) makes the OCI optimization have no LCP #6728

Open MathieuLamiot opened 3 months ago

MathieuLamiot commented 3 months ago

Context The issue is reported here: https://wp-media.slack.com/archives/C072P5EU5DF/p1718772180824549

Checking with WPR Inspector, I can see the beacon returns this to AJAX: image

I added a JS file identical to the beacon in Chrome dev tools, added a log of firstElementWithInfo and found the LCP element was div.x-section.e9265-e1.m75d-0.m75d-1.hero-section. It is indeed the largest element with a background-image. But the background image is linear-gradient(164deg, rgb(0, 0, 0) 0%, rgb(0, 65, 85) 53%, rgb(35, 213, 171) 97%) which is not kept in the else branch of _getElementInfo (I think it does not passes the regex there). As a result, the method _getElementInfo returns an element with an elementInfo, but it is empty. This empty element takes the place of LCP.

Expected behavior TBC with Product team: I think we don't want to account for linear-gradient and instead, pick the next element as LCP. Is this correct?

Acceptance Criteria TBC with Product team.

Additional information If we want to skip elements with a background-image that is set but not as expected currently (for instance linaer-gradient), then I as able to get this behavior by just adding:

            if (element_info.bg_set.length <= 0) {
                return null;
            }

in _getElementInfo just before if (element_info.bg_set.length > 0) {

DahmaniAdame commented 3 months ago

LCP elements should only be considered if there is an actual image on it. It's safe to skip to the next candidate if only the gradient is declared.

The element will still be a valid LCP if a gradient + an image is being used. Example: 

background: linear-gradient(164deg,rgba(0,0,0,1) 0%,rgba(0,65,85,1) 53%,rgba(35,213,171,1) 97%), url(https://dummyimage.com/600x400/000/fff);

We should still reference https://dummyimage.com/600x400/000/fff as the image to optimize in this case.

tristan1970 commented 2 months ago

I really need this issue to be fixed. Any idea when this can be expected?

piotrbak commented 2 months ago

@MathieuLamiot Wouldn't it be related? https://github.com/wp-media/wp-rocket/issues/6599

MathieuLamiot commented 2 months ago

A little bit. 6599 can make the LCP field being empty. This issue is to fallback on another LCP candidate in that case.

tristan1970 commented 1 month ago

Any updates? I am in dire need of having this fixed!

juricazuanovic commented 3 weeks ago

Another issue https://secure.helpscout.net/conversation/2670870897/506073/?folderId=3572910

DahmaniAdame commented 3 weeks ago

@piotrbak can we bump the priority on this one? I'm seeing more page builders/themes affected by this behavior. Sample for QA for testing: https://gist.github.com/DahmaniAdame/7ba7c1d11772fe33f2d6a1ad1488235b

timbad2 commented 1 week ago

I signed up for WP Rocket only recently, only to discover that this is a crucial issue holding back my site's LCP problem. I use Thrive Theme Builder, from Thrive Themes, and I'm currently wondering whether I wasted my money on this plugin.

Would you please share the projected ETA for this bugfix?

WordPresseur commented 1 week ago

https://secure.helpscout.net/conversation/2688201235/509015/