Skip to content

fix(common): fix LCP image detection with duplicate URLs#67081

Open
SkyZeroZx wants to merge 1 commit intoangular:mainfrom
SkyZeroZx:fix/img-directive-duplicate
Open

fix(common): fix LCP image detection with duplicate URLs#67081
SkyZeroZx wants to merge 1 commit intoangular:mainfrom
SkyZeroZx:fix/img-directive-duplicate

Conversation

@SkyZeroZx
Copy link
Contributor

This change adds a counter for each image URL. The observer only treats an image as gone when the count hits zero, so LCP stays accurate even with duplicate URLs.

Fixes #53278

@angular-robot angular-robot bot added the area: common Issues related to APIs in the @angular/common package label Feb 15, 2026
@ngbot ngbot bot added this to the Backlog milestone Feb 15, 2026
@SkyZeroZx SkyZeroZx marked this pull request as ready for review February 15, 2026 19:48
@pullapprove pullapprove bot requested a review from mmalerba February 15, 2026 19:48
Copy link
Contributor

@mmalerba mmalerba left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

please also add tests for the cases mentioned below

existingState.count++;
} else {
const newObservedImageState: ObservedImageState = {
priority: isPriority,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

should priority also be a count? that way we can decrement and realize that it is no longer priority if it hits 0

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since we also generate preload links when we're in SSR, I'm not sure (as I recall, once it's preloaded it stays in the browser cache), so we can say that it would persist.

}
}

updateImage(originalSrc: string, newSrc: string) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

doesn't this need to be updated as well? as is it would move the full count to the new src, I assume its only intended to move one of them?

Copy link
Contributor Author

@SkyZeroZx SkyZeroZx Feb 18, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Updated, although in this case I don't have a concrete idea of ​​how we could test it as such in an e2e test.

I see we don't have unit tests given the nature of LCPImageObserver

Addresses an issue where the LCP image observer incorrectly identified LCP elements when the same image URL was used multiple times on a page

Fixes angular#53278
@SkyZeroZx SkyZeroZx force-pushed the fix/img-directive-duplicate branch from 04a97ef to 2bc2b6f Compare February 18, 2026 23:34
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area: common Issues related to APIs in the @angular/common package

Projects

None yet

Development

Successfully merging this pull request may close these issues.

fix: 🐛 NgOptimizedImage shows error in console when priority image also is displayed in a smaller version on the same page

2 participants

Comments