Featured Image is creating LCP issue

Develop, Build & Integrate CMS Development
1

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!

MDevTeam3_0-1717695467675.png
MDevTeam3_0-1717695467675.png1362×767 146 KB

2

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

3

@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.

4

Hi @MDevTeam3 ,

There is a new app available on hubspot app marketplace for speed optimization and improving image LCP-

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

5

Hi, @MDevTeam3

Since you’ve already optimized the featured image and added fetch priority=“high”, I’d check whether the browser is actually discovering and loading the image early enough.

For the blog post, open Page Speed Insights and look at the LCP element and its resource loading breakdown.

If there’s a long delay before the image starts downloading, check whether it’s being loaded through CSS or JavaScript. Make sure it’s available in the initial HTML, isn’t lazy-loaded, and is sized appropriately for the space it occupies. If the image is already loading early, the LCP breakdown should help identify what’s still holding it up.

For the HubSpot form, I’d check its impact separately. Use Chrome DevTools’ Performance tab to see whether the form’s script is adding main-thread work. If the form is in the footer and doesn’t need to appear immediately, try loading it when visitors scroll closer to that section, if your HubSpot setup supports it.

Then test that the form still works properly.

If you’ve addressed the main issues and are still seeing poor performance, Website Speedy could be another option for optimizing the remaining resources.

Disclaimer: We are the developers of Website Speedy.

Note: Used AI to clean up the formatting.