Improve page loading time - Image is LCP

[jacjanowski]

So my LCP for each blog post is my header <img>, which is loaded with

<img id="featured-image" fetchpriority="high" alt="{{content.featured_image_alt_text}}" src="{{ resize_image_url( content.featured_image,600 ) }}" width="570" height="358"/>

I was sure to put ‘fetchpriority=“high”’ as recommended, as well as preloading my CSS file as shown below:

 <!-- Load the stylesheet that will reference the LCP image. -->
 <link rel="stylesheet" href="{{ get_asset_url('/Heartland_November2018 Theme/Coded Files/Heartland_November2018-style.css') }}">

 <!-- Preload the LCP image with a high fetchpriority so it starts loading with the stylesheet. -->
 <link rel="preload" fetchpriority="high" as="image" href="{{content.featured_image}}" type="image/webp">

After doing the SEO scan, I still get the error that my picture is the LCP and I need to find a way to reduce the time for it to load.

How am I supposed to fix this? I’ve read the articles that Hubspot recommends me, as well as countless of other artciles and can’t find a way to solve this. HELP PLEASE.

[jnix284]

Hi @jacjanowski this is the best article I’ve found and refer to it every time I solve LCP issues.

You mentioned code related changes, have you already looked at optimizing the image files directly?

[jacjanowski]

So I converted my images into WebP, resized them to their appropriate dimensions so that they don’t have to resize on page load, and compressed them as much as possible. I don’t know what else to do besides that.

[jnix284]

@jacjanowski I looked at PageSpeed Insights to see if there was any more detail.

I think the only other thing you could do to improve it would be to load it as a background image or move it out of the viewport so it’s not at the top of the page…

[jacjanowski]

I’ll give this a shot. I will report back.

[jacjanowski]

So I gave it a try, and created a <div> that’s the same height and width as the dimensions of the image that’s rendered on the page. Here it is:

 #featured-image {
 background-image: url({{ content.featured_image }});
 height: 358px;
 width: 570px;
 float: left;
 margin-right: 30px;
 }

//HTML code
<div id="featured-image" ></div>

This code is creating a <div> that has the background image of the blog’s featured image. The LCP remained the same as it was originally.

I feel like this could be somewhat related as well, as it seems to be trying to use <script> tags that I turned off (or meant to).

Lastly, this is what Google Lighthouse said; get scores on LCP and TBT, except these errors may have some signficance:

Any further help would be greatly appreciated. Thanks ahaed of time!

[MDevTeam3]

Did you find any solution? If yes then please mention it here. I am facing the same issue

[jacjanowski]

My SEO numbers have not changed from making the changes above, unfortunately. The best I was able to do was to have the code that I sent above in this chain and make sure to compress images as much as possible. This link was sent over to me which should be making a difference, but wasn’t in my case: Optimizing The Image Element LCP — Smashing Magazine

Sorry I couldn’t help more.

[jnix284]

@MDevTeam3 @jacjanowski one thing you might try is using RumVisions real-time core web vitals and competitor tracking, this will give you more insight into how much of an impact the LCP is actually having so you can determine if it’s worth pursuing a better score.

[ellimccale]

Hi there! In addition to the article Jennifer linked (which is a fantastic resource), this one was just posted a few days ago with some additional tips:

Optimizing The Image Element LCP — Smashing Magazine

Check out the tips for `srcset` and `fetchpriority`.

Regardless of any optimizations, the largest image within the current viewport is the most likely candidate for LCP. The best we can do is make sure it’s the right size and format for our users.

[jnix284]

Thanks for sharing @ellimccale this is a great article, I’ve saved it to my list!

[jacjanowski]

Okay thanks for linking the articles. I have referenced the web.dev article a handful of times, but I’ll take a look into the other one that was linked. I work tomorrow, so I will update tomorrow with what I come across. Thanks again, I’ll be in touch.

[jacjanowski]

Following up: I just went ahead and tried it out. I referenced that article that was sent over, but I’m not sure if I have it written in correctly. Here it is

<img id="featured-image" fetchpriority="high" alt="{{content.featured_image_alt_text}}" src="{{ resize_image_url( content.featured_image ) }}" srcset="{{ resize_image_url(content.featured_image, 0, 0, 480) }} 480w, {{ resize_image_url(content.featured_image, 0, 0, 800) }} 800w"
 sizes="(max-width: 600px) 480px,
 800px" width="570" height="358"/>

The SEO hasn’t changed.

[jacjanowski]

Furthermore, I have this in the <head> as mentioned on the article that was linked:

 <!-- Load the stylesheet that will reference the LCP image. -->
 <link rel="stylesheet" href="{{ get_asset_url('/Heartland_November2018 Theme/Coded Files/Heartland_November2018-style.css') }}" crossorigin>

 <!-- Preload the LCP image with a high fetchpriority so it starts loading with the stylesheet. -->
 <link rel="preload" fetchpriority="high" as="image" href="{{content.featured_image}}" type="image/webp" crossorigin>

With this, I got a warning in my console. I don’t think it’s set up correctly. It’s saying I set up my preload attribute, but it’s not being used.

[system]

Hi,

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

HubSpot Marketplace

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

[IMakkar]

Hi, @jacjanowski

I think you’re actually pretty close here. The fact that the featured image is showing as the LCP element isn’t really the problem , the main thing is getting that image to load and render faster.

You’ve already covered fetch priority and preloading, so I’d check the actual LCP breakdown next. One thing I’d look at is whether the image you’re preloading is the same optimized/resized image that the page is actually displaying. If the browser preloads the original but the page ends up requesting a different version, you can still end up waiting for the actual LCP image.

After that, I’d look at the image itself. Since it’s being displayed around 570px wide, make sure you’re not sending a much larger image than needed and that it’s properly compressed as WebP /AVIF. If the image is already small but the download is still taking a while, then I’d look at the CDN/server response time.

So I wouldn’t try to get the image out of the LCP report. I’d first make sure the exact LCP image is being preloaded, then work on reducing its actual download time. That’s what should bring the LCP down.

You could also try Website Speedy for the image optimization side, especially if you have a lot of blog images.

Disclaimer: I’m affiliated with Website Speedy.

Note: I wrote this out and used AI to clean up the formatting.