testing bg#772
Merged
Merged
Conversation
|
Hello, I'm the AEM Code Sync Bot and I will run some actions to deploy your branch and validate page speed.
Commits
|
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
With this change, I am seeing much better mobile scores.
Before:
After:
Summary of changes for LCP and resource load delay:
Preload at the start of
<head>The preload link is now inserted with document.head.insertBefore(preloadLink, document.head.firstChild) instead of appendChild. The browser sees the LCP image preload earlier, which can reduce load delay.
Use a real
<img>for the LCP imageThe background is no longer applied only via background-image on the section. The first picture is moved into a dedicated background layer and kept in the DOM as a real
<img>with:fetchpriority="high" – asks the browser to prioritize this image
loading="eager" – avoids lazy-loading so it starts loading immediately
PageSpeed and other tools treat visible
<img>elements as LCP candidates and prioritize them; CSS background images are often discovered and prioritized later. Keeping the hero image as an <img>in a full-bleed layer improves the chance it’s treated as LCP and loads earlier.A div with class hero-heritage-cc-bg-layer is inserted as the first child of the section.
The first picture (and its wrapper) is moved into this layer instead of being removed.
CSS makes the layer full-viewport with position: fixed; inset: 0; z-index: -1 and the image object-fit: cover so the look matches the previous fixed, cover background.
Test URLs:
Before: https://main--idfc--aemsites.aem.page/credit-card/metal-credit-card/mayura
After: https://769-svgtexture--idfc--aemsites.aem.page/credit-card/metal-credit-card/mayura
Before: https://main--idfc--aemsites.aem.page/credit-card/metal-credit-card/ashva
After: https://769-svgtexture--idfc--aemsites.aem.page/credit-card/metal-credit-card/ashva