Largest Content Paint

Hi Calvin,

Src is simply the source/URL where your image is coming from.

“The outerHTML is the HTML of an element including the element itself.”

Reference: https://ravisah.in/blog/what-is-the-difference-between-innerhtml-and-outerhtml

With regards to the LCP issue, your LCP score in the link you sent is still considered good.

See: https://web.dev/lcp/#what-is-a-good-lcp-score

I also tested personally, and found the you had great scores:

Lighthouse: https://share.getcloudapp.com/rRu1orRB

Pagespeed Insights: https://share.getcloudapp.com/geumqnGp

GTmetrix: https://gtmetrix.com/reports/mobileshalom.com/4OoFmwbk/

This is the largest content in your website: https://share.getcloudapp.com/geumqn9Q

And, as mentioned, you have great scores.

Kindly let us know if you’ll need further assistance or if we’ve missed anything. Hope this clarifies. :)

Hi Calvin
I can see that the image for the LCP is lazyloaded, I don´k know how your site do the lazyload, but these image must be excluded.
Most lazyload plugins do it adding a class to the image, some like skip-lazy, but your plugin may do this in a different way.
In the web vitals you have share in the outer html section you can see a laziloading class, this say the image is lazyloaded.

Great point! Thank you for the insight Longinos! Appreciate it!

This indeed causes LCP issues.

I also found this response which explains further: https://stackoverflow.com/questions/63962906/largest-contentful-paint-increased-dramatically-when-using-lazyload#:~:text=Why%20does%20my%20Largest%20Contentful%20Paint%20(LCP)%20time%20improve%20after%20removing%20lazy%20load%3F

Hope this helps further. :)