[MWPW-158773] : Aside notification CLS performance improvements #3536
Conversation
|
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## stage #3536 +/- ##
=======================================
Coverage 96.47% 96.47%
=======================================
Files 260 260
Lines 60582 60584 +2
=======================================
+ Hits 58444 58446 +2
Misses 2138 2138 ☔ View full report in Codecov by Sentry. |
|
This pull request is not passing all required checks. Please see this discussion for information on how to get all checks passing. Inconsistent checks can be manually retried. If a test absolutely can not pass for a good reason, please add a comment with an explanation to the PR. |
SilviuLCF
requested review from
overmyheadandbody,
robert-bogos,
SilviuLCF and
narcis-radu
|
For the failing NALA tests you could try to clear the cache with this: |
This is a specific issue due to the image asset itself because the ratio of dimensions of the default image within |
I have tried this a couple of times but cache refresh did not help overcome the failed NALA test. Can we please re-run this since the tests are failing for a an unrelated component wrt this PR |
|
@sharmeeatadobe - we can't ask authors to start changing such images, especially since we don't have a way to figure out all the pages where this might occur. Backwards compatibility needs to be maintained, without affecting layout. The tablet view would be even more affected with this change: We don't want to introduce visual regressions in favor of minor performance enhancements, other solutions should be considered to address this. CC: @SilviuLCF |
Sure, I'll try with some alternative solution. Do you have any suggestions in mind? |
Have implemented to hide the banner until the image loads. Please review again @overmyheadandbody @mokimo @robert-bogos |
libs/blocks/aside/aside.js
Outdated
| @@ -194,6 +194,17 @@ function decorateLayout(el) { | |||
| const iconClass = iconVariant ? `${iconVariant[1]}-area` : 'icon-area'; | |||
| if (iconVariant) loadIconography(); | |||
| iconArea.classList.add(iconClass); | |||
| const image = iconArea.querySelector('img'); | |||
| if (image) { | |||
There was a problem hiding this comment.
visible is default value for visibility so there is no need for first nested if
if (image && !image.complete) {
el.style.visibility = 'hidden';
image.addEventListener('load', () => {
el.style.visibility = 'visible';
});
}
There was a problem hiding this comment.
Made the suggested changes
|
@sharmeeatadobe along with cache clearing command, merging stage into your branch can help with NALA. |
Added test cases in latest commit |
| export function handleImageLoad(el, image) { | ||
| if (image && !image.complete) { | ||
| el.style.visibility = 'hidden'; | ||
| image.addEventListener('load', () => { |
There was a problem hiding this comment.
one thing I forgot, shouldn't there be a fallback if for some reason image is not loaded ? Are we okay with aside staying hidden if there is some problem with an image ?
https://developer.mozilla.org/en-US/docs/Web/API/Window/error_event
The aside notification component considers the width:auto for the lazy load image. This causes the text to shift right by the width of the loaded image and hence degrades CLS.
Resolves: MWPW-158773
Test URLs:
Before: https://main--bacom--adobecom.hlx.page/fragments/homepage/summit/summit-2025-product-page-promoid-5wyl7trb?martech=off
After: https://main--bacom--adobecom.hlx.page/fragments/homepage/summit/summit-2025-product-page-promoid-5wyl7trb?milolibs=mwpw-158773--milo--sharmeeatadobe&martech=off
Before: https://main--milo--adobecom.hlx.page/drafts/sharmeeb/aside-notification?martech=off
After: https://mwpw-158773--milo--sharmeeatadobe.hlx.page/drafts/sharmeeb/aside-notification?martech=off