cumulative layout shift

Comments

6 comments

  • Avatar
    Keith

    I have the Flex theme and for some reason, I get a .3+ CLS issue. It looks like the div.container that holds the main content of the product page is going from a normal width to fullscreen width. I can not figure out what is causing the issue. But would really like to get it resolved. It is causing every single one of my product pages to fail the Core Web Vitals.

    0
    Comment actions Permalink
  • Avatar
    Alex

    Yeah, exactly the same, Keith.

    I'm running Turbo and it's only the product pages that are problematic. 

    Do we know if OOTS is doing anything about this?

    0
    Comment actions Permalink
  • Avatar
    Keith

    Here is the response I got from OOTS 19 days ago.

    "I've reached out to our developers and they've said there is currently nothing addressing CLS in the Flex pipeline right now. 

    Flex does have a release upcoming where some of the work may improve the metric, but nothing explicitly targeting this new metric.

    Unfortunately, that's all of the information I have on this right now.

    You can try going through these ideas and implementing the strategies to see if that improves the CLS metric, but for an immediate solution we'd recommend working with a third-party developer.

    All the best,
    Johnathon"

     

     

    Sounds like they arent going to do anything to solve this. 

    0
    Comment actions Permalink
  • Avatar
    Keith

    I dug in and am seeing a class for the sidebar on the product page that that I wrapped in some liquid which tells it not to render unless the Show Sidebar option in the theme customizer is checked. 

    {%- if section.settings.show_sidebar -%}section--has-sidebar-option{%- endif -%}

    Not sure if this is same for you but it seems to be solving the CLS issue. Since I do not and don't ever plan to use the sidebar I think this is acceptable. Though, it is coded in case I do turn on the sidebar the class will then be applied. Unless I am missing some reason this class needs to be applied without the sidebar in use. 

     

    Any input is appreciated.

    0
    Comment actions Permalink
  • Avatar
    David Roberts

    We have the Flex theme. Where did you place the code to correct this CLS issue with the sidebar?

    0
    Comment actions Permalink
  • Avatar
    Keith

    product.liquid

    Prob somewhere around line 135 for you.

     {% comment %} Product wrapper {% endcomment %}
    <section class="section
    {%- if section.settings.show_sidebar -%}section--has-sidebar-option{%- endif -%}">
    <div class="container">
    {% section 'product__sidebar' %}
    {% section 'product__main' %}
    {% section 'product__recommendations' %}
    </div>
    </section>

     

    0
    Comment actions Permalink

Please sign in to leave a comment.