Featured Image is creating LCP issue

[MDevTeam3]

Hi everyone,

I have two questions to ask:

1. I have a blog post, and the featured image is causing a significant LCP (Largest Contentful Paint) issue. I've optimized the image in every possible way and used the fetchpriority attribute, but I'm still seeing SEO issues. What is the best way to address this problem?

2. I am using a HubSpot form in the footer, which is affecting my page speed. Is there any way to tackle this issue?
   
   Attaching the image for better understaning.

Thank you!

[Anton · Accepted solution]

Hi @MDevTeam3, 

you could try adding this script to your post template

{% require_head %}
        <link rel="preload" as="image" href="{{ content.featured_image }}">
{% end_require_head %}

As for optimization: What's the filesize of the image(s)?

If you haven't already - here's the documentation about {% require_js %} which might be benefitial

best, 

Anton

[IMakkar]

Hi @MDevTeam3 ,

There is a new app available on hubspot app marketplace for speed optimization and improving image LCP- 
https://ecosystem.hubspot.com/marketplace/apps/website-speedy

You can try it for free for 14 days, it works instantly.

[Jnix284 · Accepted solution]

@MDevTeam3 for the form issue, nothing you can do to optimize it - the best option would be to replace the form on the blog with a CTA section that directs them to a dedicated landing page with the form. You can also try a CTA pop-up that triggers based on exit intent, etc. that might be a little better than the form directly on the page.

[Anton · Accepted solution]

Hi @MDevTeam3, 

you could try adding this script to your post template

{% require_head %}
        <link rel="preload" as="image" href="{{ content.featured_image }}">
{% end_require_head %}

As for optimization: What's the filesize of the image(s)?

If you haven't already - here's the documentation about {% require_js %} which might be benefitial

best, 

Anton