Regarding LCP issue with Image an Video( Flynt)

[rajpatel2435]

Hi @aaronmeder @timohubois

I loaded the font locally as well as loaded jQuery locally. For fonts part, I don't have that issue any more but for jQuery still exists. For the third party login, I tried to use async strategy but I can not see too much difference.

What is your thought on these?

One more question, for LCP. I already preloaded the image as well as compressed the image but it is taking 11ms for LCP. Is there any different approach or solution?

Thanks

[aaronmeder]

Hey @rajpatel2435

You seem to already have been able to optimize the Core Web Vital metrics quite a bit for https://wordpress-1233981-4407119.cloudwaysapps.com/nfl/teams/baltimore-ravens/ - congratulations 👏🏻

Regarding the LCP (though it seems to me you were able to greatly improve it) it can be a bit complex because it is affected by all other things that are happening during the load time of your page.

However I find Google's official docs very helpful in understanding ways to improve the LCP performance for the better. They are actually linked from the Lighthouse / Pagespeed Insight reports (see the "Learn how to..." link in your screenshot) and really worth reading.

I would recommend these two resources on how to optimize LCP performance:

• ✍🏻 Optimize Largest Contentful Paint
• 📼 A deep dive into optimizing LCP

How that helps you to push further.
Aaron

[rajpatel2435]

Hi @aaron Is there any optimized way in flying to call the images to reduce the LCP issue? Thanks

…

On Thu, Jun 13, 2024 at 1:29 AM Aaron ***@***.***> wrote: Hey @rajpatel2435 <https://github.com/rajpatel2435> You seem to already have been able to optimize the Core Web Vital metrics quite a bit for https://wordpress-1233981-4407119.cloudwaysapps.com/nfl/teams/baltimore-ravens/ - congratulations 👏🏻 Regarding the LCP (though it seems to me you were able to greatly improve it) it can be a bit complex because it is affected by all other things that are happening during the load time of your page. However I find Google's official docs very helpful in understanding ways to improve the LCP performance for the better. They are actually linked from the Lighthouse / Pagespeed Insight reports (see the "Learn how to..." link in your screenshot) and really worth reading. I would recommend these two resources on how to optimize LCP performance: - ✍🏻 Optimize Largest Contentful Paint <https://web.dev/articles/optimize-lcp> - 📼 A deep dive into optimizing LCP <https://www.youtube.com/watch?v=fWoI9DXmpdk> How that helps you to push further. Aaron — Reply to this email directly, view it on GitHub <#563 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ATOTCTNQVTC66POBCQ5TZ53ZHEU4NAVCNFSM6AAAAABJHO6U2SVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4TONJZGA2TC> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[aaronmeder]

@rajpatel2435

Some points I am seeing on the page you could improve regarding the loading of images:

• Images that aren't visible in the initial viewport should be lazy loaded. You can use "lazysizes" that comes included with default Flynt (see a reference implementation in BlockImage) or have a look at the lazysizes documentation. Or alternatively use the native loading="lazy" attribute on the img tags (see docs).
• You could also inline the svgs instead of using img tags (e.g. for all icons). Has the downside of increasing the DOM size and maybe DOM depth; so be sure to check which one performs better.
• Some images are loaded which aren't visible to me at all (e.g. trophy3.png) - make sure they're not loading when they aren't needed (probably also fixed with lazyloading)
• The icons (e.g. Telegram-icon.svg) seem relatively large in file size. Try to optimize these using SVGOMG.

Aaron