[Resolved] Avoid large layout shifts?

Home Forums Support Avoid large layout shifts?

  • This topic has 5 replies, 2 voices, and was last updated 3 months ago by David.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1343194
    Amanda

    I am not 100% sure this is in the theme or elsewhere, but I tried some other fixes for layout shifts here in the support forum already and none seemed to work. The shifting elements according to pagespeed tests look like the main content container and navigation. Is this a theme issue?

    Thanks for your time.

    Message from test:

    `Avoid large layout shifts 4 elements found
    These DOM elements contribute most to the CLS of the page.
    Element
    2020 Alaska PFD: Announcement, Amount, and News Last Updated June 12, 2020. Th…
    <div class=”content-area grid-parent mobile-grid-100 grid-70 tablet-grid-70″>
    Menu
    <div class=”inside-navigation grid-container grid-parent”>
    Life with Gremlins
    <a href=”https://www.lifewithgremlins.com/&#8221; title=”Life with Gremlins” rel=”home”>
    div
    <div>`

    #1343348
    David
    Staff
    Customer Support

    Hi there,

    the main issue i see is all of the theme and plugins CSS files are combined and in a single cached file. It totals 27,000 lines of CSS…. and the Themes CSS is in the bottom half of this which results in FOUC.

    Try disabling the combine CSS option in your cache plugin then re-run the test and we can take another look.

    #1343350
    Amanda

    I turned off combined CSS and still see the same list of elements, so that doesn’t appear to be the issue, but on that note, when I turn that back on should I exclude GeneratePress’ CSS? I’m using WP rocket and it does have that option.

    #1343511
    David
    Staff
    Customer Support

    So that has removed the FOUC on the theme elements – no longer do you see the flash of unstyled menu.

    Now the element that is causing nav and content to shift is the Banner advert, between load, cookie notice and the advert notice the placeholder for the advert changes size 2 – 3 times.

    The recommendation here is to move the banner ad to a position below the fold.

    #1343551
    Amanda

    Ah, my ad provider was supposed to have fixed that. Thanks for your help.

    #1343575
    David
    Staff
    Customer Support

    You’re welcome – lets us know how it goes 🙂

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