Comments (12)
@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
wp-rocket/assets/js/lcp-beacon.js
Line 139 in 52c5d80
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 aatfCandidates
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.
Related Issues (20)
- Change the way the description for the Clear button is displayed
- Add query string to force LRC hash injection HOT 3
- [DEV] Enable requireFileExists rule in phpstan
- rocket_lrc_processed_tags should be case insensitive HOT 1
- 3.17 Regex processor - Optimize the regex
- 3.17 - Maybe use libxml_get_errors or something else to identify DOMDocument modifications and bail out HOT 1
- 3.17 - Identify unwanted body modification from DOMDocument to bail out early HOT 1
- 3.17 - Replace HTML Write operation from DOMDocument with Regex for LRC hash injection
- Avoid use of multiple Template redirect action
- Auto-exclude Trust Index Google Widget CSS from LazyLoad for CSS Background Images HOT 3
- OCI: when using a CDN that's a subdomain cdn.site.com, imagesrcset urls inside preload tag are not replaced to use the CDN cname HOT 1
- UI issue after clear cache and apply LRC with certain template HOT 6
- Beacon script can be injected multiple times when there are multiple </body> in the page.
- LRC Hash are not injected on tags with special characters
- LRC hashes are injected to the first found matching tag, which might not be the targeted one
- OCI & LRC optimizations should not be applied, even if available, on SaaS visits
- Safeguard DOMDocument empty HTML
- Updating menu and widgets, and WP Rocket->Clear cache results in 502 timeout
- Typo in French translation HOT 3
- wpr-beacon.min.js is added even if DONOTROCKETOPTIMIZE is set to true
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from wp-rocket.