[Support request] Largest Contentful Paint

Home Forums Support [Support request] Largest Contentful Paint

Home Forums Support Largest Contentful Paint

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1615975
    Bart

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

    #1616494
    Elvin
    Staff
    Customer Support

    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.

    A wise man once said:
    "Have you cleared your cache?"

    #1616965
    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 😀

    #1617255
    David
    Staff
    Customer Support

    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.

    #1617283
    Bart

    ok David, what should I do then?

    #1617285
    David
    Staff
    Customer Support

    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.

    #1620221
    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?

    #1620343
    David
    Staff
    Customer Support

    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);
        }
    }
    #1620450
    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?

    #1620718
    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.

    #1621106
    David
    Staff
    Customer Support

    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.

    #1621117
    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…

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.