[Support request] LCP and CLS issues

Home Forums Support [Support request] LCP and CLS issues

Home Forums Support LCP and CLS issues

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1720816
    Dave

    Hey Guys,
    Just launched the new site and love GP.
    I have noticed a few issues on Lighthouse that I hope you can help me with.
    1st I have this div class=”page-hero lazyloaded” kicking an error for LCP on all of my page headers.
    Is there a way to fix this?
    Also, I am getting a CLS error with my svg’s. On this page, I am using 2 different svg’s and one for the logo. I can seee the logo is kicking the same error on other pages as well.
    Any help would be appreciated.

    cheers,

    Dave

    #1721220
    David
    Staff
    Customer Support

    Hi there,

    the main issue looks to be the minified CSS delivery that the Nitro plugin is generating.
    The header elements background images are set by CSS – and this CSS looks like it is deferred by Nitro.

    This is also happening with the styles that set the SVG sizes…. on initial load they have no styles so are filling their container.

    I would suggest speaking with Nitro on how to set up their optimized CSS delivery so these elements aren’t affected.

    #1726157
    Dave

    Thanks David.
    Do you know how I would find the selector?
    This was their response: ” if you wish to include the element that holds the site logo in the critical CSS, simply inspect the site, locate the selector and add it in the field. do the same with the page hero as well.”

    Cheers,

    Dave

    #1726435
    David
    Staff
    Customer Support

    Various classes:

    site logo(s): is-logo-image
    Header Elements: page-hero
    GB SVG icons: gb-icon

    However the SVG icon class is for the <span> wrapper so that probably wouldn’t work.

    You may want to try: svg as thats the image element tag…. if not then you would need to edit the SVG HTML and include a class in it – for example i added svg-image as a class to this.

    <svg class="svg-image" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve"> <g id="Layer_1"> ..... more code here

    #1726452
    Dave

    thanks David. I will give it a shot targetting just “svg” and see if that works. If not I will give the svg’s their own class.

    cheers,

    Dave

    #1726456
    David
    Staff
    Customer Support

    You’re welcome

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