ATF isnot detected for background images in certain cases (with attribute markup, inline, multi markup) about wp-rocket HOT 12 CLOSED

@MathieuLamiot We need to check if this has not been addressed in @Miraeld PR

from wp-rocket.

Same happened for inline bg here https://new.rocketlabsqa.ovh/lcp_bg_inline_template and here https://new.rocketlabsqa.ovh/lcp_bg_multimage_template, https://e2e.rocketlabsqa.ovh/lcp_bg_samestyle_template, https://e2e.rocketlabsqa.ovh/lcp_bg_responsive_webkit_template

from wp-rocket.

Identify the root cause ✅

above_the_fold_images is only checking for img unlike LCP that check for img, background-images.

var above_the_fold_images = document.querySelectorAll("img");

Scope a solution ✅

We need to extend above_the_fold_images to check for background images and not just img or we could extend the LCPCandidates function to get above_the_fold_images, LCPCandidates already has all the images(img, background) and only the top candidates(usually 1) is used as lcp, we can used the rest of the image as ATF.

Estimate the effort ✅

[XS]

from wp-rocket.

@Miraeld wondering if this is already captured in your PR

from wp-rocket.

Umm I don't think so, as I did not modify this line

from wp-rocket.

@Miraeld Shouldn't the ATf part of the beacon script be modified as well to cover the acceptance criteria related to "exclude ATf from lazyload" of the issues #6530, #6531, #6532, etc... ?

from wp-rocket.

@Mai-Saad may I know which template is used on https://new.rocketlabsqa.ovh/lcp_attributes ?
I got a lcp_attributes_template but it's a different page. Thanks

from wp-rocket.

Moving this back to Grooming in Progress: We indeed need to change the var above_the_fold_images = document.querySelectorAll("img"); but it might not be sufficient: @Miraeld had to add a method getElementInfo to get the src depending on the element type (it is note always image.src).

@Miraeld, can you explain with your PR how the type field is set for ATF? I don't see it set in the beacon for ATf images, and not in the AJAX endpoint either.

I suggest the following:

• Base a new branch on Gael's PR #6559
• In the beacon script, rework the LCPCandidates method so that: if ( rect.width > 0 && rect.height > 0 && isIntersecting( rect )), do the same as now + push the {element, elementInfo} in a atfCandidates array; so that we keep track of all ATF. - Make LCPCandidates return what it currently returns + the atfCandidates array. So LCPCandidates will return [filteredArray, atfCandidates].
• In the beacon script, remove:

 var above_the_fold_images = document.querySelectorAll("img");
for (var i = 0; i < above_the_fold_images.length; i++) {...}

And replace it with a loop over atfCandidates, doing the same thing, except we don't need to check if intersecting anymore and we should push in performance_images the whole elementInfo and label: "above-the-fold".

So overall, we will loop once over all elements, keep all intersecting as ATF, and the largest one as LCP. Then we would just put all this in a performance_images array to send it to the AJAX endpoint.

WDYT? Can we have a grooming in that direction?

from wp-rocket.

Hello hello,

I've made a branch enhancement/preload-background-image-atf which is from my own branch enhancement/preload-background-image.
However the newest includes changes for above the fold images to be detected the same way as LCPs.
It hasn't been optimized yet, but @Khadreal said he will manage that part.

from wp-rocket.

Thanks for the update.
Moving this to in progress then.

from wp-rocket.

@Khadreal Can you summarize the specification of this issue? From what you posted here, I understand the scope of the PR evolved quite a bit compared to the original issue. This needs to be clearly explained for everyone to be able to validate, QA can think about test plans and also for Product to know how it will behave now.
Especially if there are new hooks/features, it must be communicated and update the doc as well. Thanks 🙏

from wp-rocket.

I implemented a new elements filter called rocket_above_the_fold_elements. This filter accepts an array, allowing anyone to extend the predefined elements captured by LCP/ATF without needing to directly edit the beacon scripts. The predefined elements currently include img, video, picture, p, main, div, li, and svg. By using this filter, you can easily add or remove elements as needed for LCP/ATF.

from wp-rocket.