[Resolved] CLS Issue and LCP Issue

Home Forums Support [Resolved] CLS Issue and LCP Issue

Home Forums Support CLS Issue and LCP Issue

  • This topic has 13 replies, 3 voices, and was last updated 3 years ago by David.
Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #1670135
    David

    Hi,

    Would you mind advising if there is any obvious cause for the following issues please:

    CLS issue: more than 0.25 (mobile)
    LCP issue: longer than 4 s (mobile)

    The web address is http://www.darkstories.com.au

    Any advice will greatly appreciated.

    Kind Regards
    David

    #1670374
    David
    Staff
    Customer Support

    Hi there,

    lets see if we can fix the main CLS issues first by adding some height/width attributes you your mobile logo – this post explains how:

    https://generatepress.com/forums/topic/how-to-set-height-and-width-for-the-logo-image/#post-1563234

    #1671251
    David

    Thanks David, I have made the change. Can you recommend the best method for validating whether the change has taken effect?

    And I’m sorry for not reporting this in the first instance, but the issue also exists for desktop:-

    CLS issue: more than 0.25 (desktop)
    LCP issue: longer than 4 s (desktop)

    Would you have any recommended approach for this as well please?

    Kind Regards
    David

    #1671703
    David
    Staff
    Customer Support

    That code did work as the Logo image now has some height/width attributes. But made no difference to either of those metrics. Theres quite a bit of work to do here.

    First off I noticed you have this CSS:

    /*Stops Pages Displaying the Page Title */
    .page .entry-header {
          display: none;
    }

    Remove that as the SG optimizer is loading that CSS later causing the title to be display and then removed from the page. Instead use the Layout Element to disable the Content Title:

    https://docs.generatepress.com/article/layout-element-overview/

    You can set the Elements Display Rules to Pages > All Pages.

    #1671828
    David

    Hi David, thanks for that- I think I’ve made that change successfully.

    Regards
    David

    #1672427
    David
    Staff
    Customer Support

    Hmmm… seeing more CLS issues related to the Post Grid ( Book Now ) listing and other elements. It looks like the CSS for those page elements is being deferred ie. loaded after the page has been displayed.

    Are you using any optimization plugins ? Or is there any server side optimizations going on ?

    #1673274
    David

    Hi David,

    Thanks for your message.

    I have the Imagify Plugin for the purposes of optimizing images and using a webp version of the image files. Not sure if that is relevant.

    I don’t think there’s anything server side; I’d be very wary of setting anything in that space. The site is 4 years old and has gone through 3-4 redesigns, so I can only say I don’t think so.

    With regards to the various pages with Book Now references, I do have some page-specific CSS for rendering a png bullet point image and aligning bullet points, as well as controlling the screen size rendering i.e.- from memory, large tablets & laptop screens were rendering in mobile format originally.

    The book now pages also have a single iframe reference, that links into a booking system, that I simply have no other way of getting around.

    Using a single page as an example http://www.darkstories.com.au/maitland/

    I have created a duplicate test page without the page specific css at http://www.darkstories.com.au/headline-of-the-day/

    Not sure if that will help diagnosis in any way? Or is there a method for pre-loading the page specific css?

    My apologies- this is more than I expected to be reviewing. I am so sorry.

    Kind Regards
    David

    #1674160
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    It looks like you have WP Super Cache enabled on the site (can see the HTML comment in the page source). It would help you/us test if that was deactivated.

    This sort of thing is difficult for us to troubleshoot, as it’s likely that 99% of it is coming from your content/other plugins.

    Out of curiosity, how does a page with nothing but a regular block of text test?

    #1675561
    David

    Hi Tom,

    Thanks for your message.

    I have deactivated the WP Super Cache Plugin, and have set a basic block of text on my test page here:- http://www.darkstories.com.au/headline-of-the-day/

    Anything obvious that you can spot will be gratefully received.

    Best Regards
    David

    #1675873
    David
    Staff
    Customer Support

    Looking at the front page without the cache enabled – the largest CLS issue is related to the plugin that is creating the rows and columns …. you may want to try replacing that – have you thought of using the Block Editor and GenerateBlocks plugin instead ?

    The LCP element is due the to background image on your main container – the image files is over 800kb.

    #1676610
    David

    Hi David,

    Thanks for your message and assistance.

    Re: CLS; I tried using Block Editor and GenerateBlocks previously when initially released, and had massive problems at the time. That being said; it’s probably time for me to revisit it as a solution/tool that can also contribute to resolving CLS issues.

    Re: The LCP image; I have made a change to reduce the size of the background image which may help a little, and I’m also happy to switch it off for the mobile layout. I have added the below CSS to no effect; could I trouble you one last time to take a look at this CSS to possibly advise what’s missing please?

    /* Portrait tablets and small desktops */

    @media
    (min-width: 768px) and (max-width: 991px) {
    body{
    background-image: none;
    }
    }

    /* Landscape phones and portrait tablets */

    @media
    (max-width: 767px) {
    body{
    background-image: none;
    }
    }

    /* Portrait phones and smaller */

    @media
    (max-width: 480px) {
    body{
    background-image: none;
    }
    }

    Best Regards
    David

    #1676926
    David
    Staff
    Customer Support

    The image is actually added to the site content so try this:

    @media(max-width: 768px) {
      #page {
        background-image: none;
      }
    }
    #1678030
    David

    Thanks David, you guys makes things seem so easy. Appreciate all the help.

    Best Regards
    David

    #1678372
    David
    Staff
    Customer Support

    Glad to hear that !

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