Improve page loading time - Image is LCP

jacjanowski · ‎Jan 20, 2023

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.

ellimccale · ‎Jan 20, 2023

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:

https://www.smashingmagazine.com/2023/01/optimizing-image-element-lcp/

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.

jacjanowski · ‎Jan 22, 2023

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 · ‎Jan 22, 2023

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 · ‎Jan 24, 2023

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.

Jnix284 · ‎Jan 22, 2023

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

If my reply answered your question please mark it as a solution to make it easier for others to find.

Jennifer Nixon - Delivery Lead at Aptitude 8

Jnix284 · ‎Jan 20, 2023

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?

If my reply answered your question please mark it as a solution to make it easier for others to find.

jacjanowski · ‎Jan 20, 2023

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 · ‎Jan 20, 2023

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

If my reply answered your question please mark it as a solution to make it easier for others to find.

jacjanowski · ‎Jan 20, 2023

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

jacjanowski · ‎Jan 20, 2023

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!

CMS Development