[MWPW-189469] Eager loading of media in upload marquee

[vipu0303]

Eager loading of the LCP image in upload marquee to improve performance.

Resolves: MWPW-189649

Test URLs:

• Before: https://stage--cc--adobecom.aem.live/drafts/vipulg/doodlebug/vg-doodlebug-dark?unitylibs=stage
• After: https://vg-db5--cc--adobecom.aem.live/drafts/vipulg/doodlebug/vg-doodlebug-dark?unitylibs=stage

[aem-code-sync]

Hello, I'm the AEM Code Sync Bot and I will run some actions to deploy your branch and validate page speed.
In case there are problems, just click a checkbox below to rerun the respective action.

• Re-run PSI checks
• Re-sync branch

Commits

• 0462b55 ✅ (latest)
• 3e4e041 ✅
• 30bf228 ✅
• 8ece17f ✅
• 82b0f06 ✅
• 665f27d ❌
• d5bcc2d ❌
• 21d0296 ❌
• db70fca ❌
• 8d18445 ❌
• b19448f ❌
• 274f20e ❌
• 8ab7fee ❌
• 2aa0d2a ❌
• 1150cc6 ❌
• c30f710 ❌

[aem-code-sync]

	Page	Scores	Audits	Google
📱	/drafts/vipulg/doodlebug/vg-doodlebug-dark?unitylibs=stage
🖥️	/drafts/vipulg/doodlebug/vg-doodlebug-dark?unitylibs=stage

[nkthakur48]

See if you could use getScreenSizeCategory from utils.js

[nkthakur48]

You could img.src directly instead of getAttribute, which is cleaner and slightly faster.

[nkthakur48]

You could source.srcset directly instead of getAttribute, which is cleaner and slightly faster.

[nkthakur48]

You could do an early return for missing picture

A tighter version could be:

function getBaseImageUrlFromPicture(picture) {
  if (!picture) return null;

  const imgSrc = picture.querySelector('img')?.src;
  if (imgSrc) return imgSrc.split('?')[0];

  const srcset = picture.querySelector('source[srcset]')?.srcset;
  if (!srcset) return null;

  const url = srcset.split(',')[0].trim().split(/\s+/)[0];
  return url ? url.split('?')[0] : null;
}