Largest Contentful Paint element Angular 17 - SSR Mobile | Angular Community | Page 1

chrome tapir Mar 31, 2024, 1:29 AM

#

How can I optimize this part of the banner when it is mobile, however on desktop this does not happen even with a slightly heavier and larger image, I do not understand why it throws high LCP even though I use an image, I put preload in the index and I have the Angular's ngImage directives and the image is adapted to mobile size with an acceptable weight of approximately 50kb or less.
The domain is https://kids-gamarra.lat/
Using Angular 17.3.1 with SSR
https://pagespeed.web.dev/analysis/https-kids-gamarra-lat/w3o25ra4hm?form_factor=mobile

outer raptor Mar 31, 2024, 1:57 AM

#

did you set width and height on tag img to prevent image shift ?

#

other thing is you cant use src attr with ngsrc attr

#

check out the reason

#

https://angular.io/guide/image-directive#why-cant-i-use-src-with-ngoptimizedimage

chrome tapir Mar 31, 2024, 2:11 AM

#

outer raptor did you set width and height on tag img to prevent image shift ?

i used a fill true , i understand when use fill true no need use hight and widh or i am wrong?

#

Code in HTML

#

I use fill with instructitions of angular documentation
https://angular.io/guide/image-directive#does-ngoptimizedimage-support-the-background-image-css-property

outer raptor Mar 31, 2024, 2:24 AM

#

chrome tapir i used a fill true , i understand when use fill true no need use hight and widh ...

Correct

chrome tapir Mar 31, 2024, 2:25 AM

#

then why pagespeed throw a LCP hight ? xd

outer raptor Mar 31, 2024, 2:40 AM

#

fetchpriority attr looks incorrect and if you are using priority attr you dont need to added fetchpriority as well is redudant

#

but , make sure where this resources are hosted cause its may increase the lcp as well

chrome tapir Mar 31, 2024, 2:47 AM

#

assets in the same server in assets folders of Angular , is stranger because with other image more resolution a size in desktop not show error

outer raptor Mar 31, 2024, 2:49 AM

#

chrome tapir assets in the same server in assets folders of Angular , is stranger because wit...

the others images are treated lazy

chrome tapir Mar 31, 2024, 2:50 AM

#

The same page but in desktop see the image with more resolution and size not show lcp error
https://pagespeed.web.dev/analysis/https-kids-gamarra-lat/w3o25ra4hm?form_factor=desktop

outer raptor Mar 31, 2024, 2:51 AM

#

chrome tapir Code in HTML

did you already fix the fetchpriority value as i sad before ?

#

dont exist height as value ...

chrome tapir Mar 31, 2024, 2:53 AM

#

no always had a fetchPriority exist , yes not exist height or width because i use a fill true

#

i use fill because i need similiar behavior of css background in my banner

outer raptor Mar 31, 2024, 2:53 AM

#

nope ...

outer raptor Mar 31, 2024, 2:54 AM

#

chrome tapir Code in HTML

look fetchpriority attr

chrome tapir Mar 31, 2024, 2:54 AM

#

ahh i see

outer raptor Mar 31, 2024, 2:54 AM

#

chrome tapir Code in HTML

#

This value dont exist as well

#

You can delete this line since you are using priority attr…

chrome tapir Mar 31, 2024, 2:55 AM

#

ok update with the next

#

add loading eager addicionally

outer raptor Mar 31, 2024, 2:56 AM

#

Dont needs as well

#

https://angular.io/guide/image-directive#step-4-mark-images-as-priority

#

read this

chrome tapir Mar 31, 2024, 3:06 AM

#

oh interesting

#

same error with LCP with the corrections

#

i see angular add loading eager , fetchPriority high

outer raptor Mar 31, 2024, 3:24 AM

#

So , your LCP tests in browser (desktop display) seems correct because the img tag are properly defined …

#

Your “sources” for mobile display not look good

#

If you really need to resize your image consider use this

#Largest Contentful Paint element Angular 17 - SSR Mobile