CLS issues with Agama

  • Hi,

    Using agama of course. And we have a long outstanding ‘issue’ regarding the loading of the page.
    When checking gtmetrix, the agama slider is responsible for 0,5 seconds of CLS (content large layout shifts), which is clearly visible.
    Is there any way to resolve this?

    The culprit:

    <div id=”slider-wrapper” class=”agama-slider ls-direction-fix”>

    Using latest Agama,but this isn’t a new problem

    • This topic was modified 3 years, 6 months ago by bschelst.

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Theme Author themevision

    (@themevision)

    Hello @bschelst,

    We can see that are using cloudflare CDN service. Which optiomize the whole site incluing all those codes(html,css,js). But, still you are facing problem like this.

    So, As you mentioned about the report from gtmetrix. You can also checkout there advanced solution for solving this issue.

    Here you go the solution it might help you:
    ——————————————-

    How to avoid large layout shifts?
    Avoid large layout shifts by incorporating good practices into your development workflow, such as:

    1) Specifying image dimensions
    Always specify, both, width and height for your website’s image and video elements so that the correct spacing is used for images/videos.

    Alternatively, you can use CSS aspect ratio boxes to do the same.

    2) Reducing layout shifts caused by ads, embeds, and iframes
    To reduce layout shifts caused by ads, embeds, and iframes, do things like:

    Reserve ad slot size (preferably the largest) before loading the ad library.
    Move ads to the bottom or out of the viewport.
    Use placeholders when there is no ad available to show.

    3) Avoiding inserting new content above existing content
    Try and avoid inserting dynamic content (e.g., banners, forms, etc.) above existing content unless in response to user interaction. This helps prevent unexpected layout shifts.
    4) Preventing the Flash of Invisible Text (FOIT)
    The Flash of Invisible Text (FOIT) issue can also affect your page’s CLS. Ensure your text remains visible during webfont loads by preloading web-fonts and/or using the font-display attribute.

    5) Avoiding non-composited animations
    Where possible, only perform composited animations to reduce main-thread work and prevent repainting of pixels during the page load.

    ——————————————–
    Note: This is an advanced-level optimization
    Developer support is strongly recommended.
    ——————————————–

    Let us know if there anything else we can help you!

    Regards,

    • This reply was modified 3 years, 6 months ago by themevision.
    Thread Starter bschelst

    (@bschelst)

    But image dimensions,etc are coming from your template….

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘CLS issues with Agama’ is closed to new replies.