Home Forums Weaver Xtreme Theme Cumulative layout shift

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #73831
    kenzi
    Participant

    For every screen other than the narrow mobile screen (like 480px wide) I align photos left or right.  To prevent a very small amount of text being displayed on the narrow screen alongside the aligned photo, i have used the following fix:

    .blog.is-phone .wvrx-posts .alignleft {float:none !important;margin-left:auto !important;margin-right:auto !important;}

    .single.is-phone .alignleft, .blog.is-phone .wvrx-posts .alignleft {float:none !important;margin-left:auto !important;margin-right:auto !important;}

    .single.is-phone .alignright, .blog.is-phone .wvrx-posts .alignright {float:none !important;margin-left:auto !important;margin-right:auto !important;}

     

    It works great, but apparently creates layout shift problems.

    Ideas?

    #73832
    User
    Participant

    Can you please provide a site URL for checking?

    Regards!

     

    #73833
    kenzi
    Participant
    #73834
    scrambler
    Moderator

    I am not sure I follow.

    In the page you gave us, I do not see any layout shift when reducing the browser to phone size.

    I also do not see your rule being applied to anything.

    So you may want to elaborate

    #73835
    kenzi
    Participant

    I don’t see the layout shift either, but Google apparently does.  As it only seems to occupy a fraction of a second, it is unlikely to be visible to the naked eye.

    #73836
    User
    Participant

    @Area33

    Using Lighthouse to test the site:

    Mobile:
    Cumulative Layout Shift = 0.101

    Their main culprit with 0.037 is:

    The Hunt For Jessie September 9 October 2022 RECIPES FOR LOVE AND MURDER – Sea…
    <div class="atw-content-2-col atw-cf">
    
    

    Desktop:
    Cumulative Layout Shift = 0.365

    Their culprit with 0.325 is:

    FEATURED POSTS TV Spinoffs – One Real, Three Imagined 21 December 2023 Set in …
    < div id="container" class="container container-page relative font-inherit">

    For details see:
    https://pagespeed.web.dev/analysis/https-areathirtythree-com-blog/kt28m6zpa8?form_factor=mobile

    Hope this helps where to look, as it seems to be the containers, not just the contents.

    Regards!

    #73837
    Weaver
    Keymaster

    @area33

    You have some sort of “optimizer” that is moving the loading of Weaver’s (and other plugins) CSS to the end, which is almost certainly the cause of the shift as the layout is being built using some default CSS values which then get overridden when the real style CSS is finally loaded.

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