[Support request] Largest Contentful Paint

[Bart]

Hi I am trying to fix Largest Contentful Paint on mobile. I try to do it by myself but just can’t.

[Elvin]

Hi,

You can follow the tips provided here.
https://web.dev/lcp/#how-to-improve-largest-contentful-paint-on-your-site

I’ve checked your site and the most probable cause for this flag is the page hero section or the “Wedding photographer Milton Keynes” section.

To address this, consider optimizing your images.

For this one, you’ll need an image optimization plugin. As for image optimization plugins, you can try Smush or Optimole.

[Bart]

Hi Elvin

Well, the photo is 1300px on the longer edge and have 85kb weight… I don’t think it can be optimized any more 😀

[David]

Hi there,

so the LCP is pointing to the Page Hero – looking at the network request, the uncompressed image size is around 299kb.

You also have the litespeed plugin serving Optimized CSS – which doesn’t include the CSS for the heros background image, which may be having an impact on that image being loaded later.

[Bart]

ok David, what should I do then?

[David]

You can try disabling some of the CSS Optimaztion settings:

https://blog.litespeedtech.com/2018/06/20/critical-css-and-litespeed-cache/

This should give you an idea as to whether that is the cause.

[Bart]

Hi David

I was really going through and I found out that the only option is to use a super small image in terms of weight. However, it is impossible to go so low with weight. However, I find out the problem is only on a mobile. So my question is Is there a way to have a separate header for mobile and separate for desktop? Or at least using different photo?

[David]

You can add a different image for mobile.
In the Header Element there is a Element Classes field – add a class there eg. mobile-background and then you can use some CSS to swap the image:

@media(max-width: 768px) {
    .mobile-background {
        background-image: url(full_url_to_mobile_image);
    }
}

[Bart]

I assume I am doing something wrong. Can you tell me if it is ok ?

I add class mobile-background to the existing front page header.
I upload a separate media which I wan to be used as mobile header background
I go to customization and add

.mobile-background {
background-image: url(address of my image );
}
}

And when I apply it, it switches my desktop background the mobile media which I upload…

What I am doing wrong?

[Marty]

Bart, I use Asset CleanUp (Pro) to prevent render-blocking CSS & JS from various plugins that are (unfortunately) loaded site-wide even when not used. That and other best practices, along with the light weight of GP, have helped me achieve full Web Vitals passed & great mobile Insights scores on nearly all posts.

PerfMatters is another plugin that has similar features. You might want to have a look at one of those as well.

[David]

Hi Bart,

sorry i didn’t enclose my code correctly – i updated above:

https://generatepress.com/forums/topic/largest-contentful-paint-2/#post-1620343

Please try that again.

[Bart]

Thanks Marty

I was just doing that for over an 2h I cant really find the way to drop my LCP. I know it is coming from the header but cant really do anything…

[Author]

Posts