Latest Astra update to 4.7.2 causing layout shifts, non-composited animations

  • Resolved grevillea859

    (@grevillea859)


    4 months, 3 weeks ago

    Hi,

    Following updating to the latest Astra update to ver 4.7.2 Google PageSpeed Insights is flagging large layout shifts and non-composited animations on both the mobile and desk top versions of my home page.

    I had none of these issues before. Any advice on how to fix would be greatly appreciated.

    The cumulative layout shifts are to do with the search box, one block on mobile view and a different one on the desktop.

    With the non-composited animations below Google PSI flags:

    • The unsupported CSS Property is flex-grow on my search box; and
    • For a block cover the unsupported CSS Property is color. I changed the text colour but it still came back as “non-composited”.

    As said above before this update I didn’t see layout shifts or issues with linked headings etc. I don’t understand what composited animations really means in terms of fixing them, or layout shifts. Any help with fixing these issues would be greatly appreciated!

    Thank you for your time.

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

Viewing 4 replies - 1 through 4 (of 4 total)

  • Hi @grevillea859,

    To make sure this is due to the latest update, please try rolling back Astra to the previous version and see whether or not the issue gets fixed. You can use a plugin like WP Rollback to roll back Astra with ease. Please don’t forget to create a proper backup of your site before you roll back. Just in case.

    Please let us know how you go.

    Kind regards,
    Herman ??

    Thread Starter grevillea859

    (@grevillea859)

    Hi @bsfherman,

    Thank you for your fast reply. There were no layout shifts or non-composited animations on the roll-back to the previous version.

    Returning to the latest update there is on mobile:

    • one layout shift: <div class=”wp-block-columns is-layout-flex wp-container-core-columns-is-layout-1 wp-b…”> and
    • Two animations that are not composited as before, the unsupported CSS Property: color for a block cover text and the unsupported CSS Property: flex-grow for the top search bar.

    On the desk top version there are 12 layout shifts, all to do with the search box button. The other layout shift is the whole block: <div class=”wp-block-columns is-layout-flex wp-container-core-columns-is-layout-1 wp-b…”>. It makes no sense as I have not seen these before.

    Also on the desk top view as for mobile there are the two non-composited animations as above.

    Any ideas, suggestions on fixing these would be greatly appreciated. I cannot see what to do, and have no idea what flex-grow means or “color” in terms of fixing the problem.

    Thank you for your time and I look forward to your response.

    Thread Starter grevillea859

    (@grevillea859)

    Hi @bsfherman,

    I have been trying to fix the above issues with but can’t see what the problem is. I have been looking into causes of CLS and saw that it can also be caused by async loading of CSS.

    CSS stylesheets on my site are delayed. I don’t understand any of this, it seems all hit and miss. However when I excluded the /wp-content/themes/astra/assets/css/minified/style.min.css stylesheet from delay, the CLS reported above disappeared on mobile and desktop views (and reduced the render blocking) on Google PSI.

    While that issue is fixed I now have some unused CSS although not much. Fix one thing and another pops up. As far as the CLS is concerned I will now close this ticket, thank you.

    Hi @grevillea859,

    Thank you for the update and for sharing the way how you fix it. This can be useful for other users who face the same thing.

    Feel free to start a new thread if there’s anything else related to Astra, we can help you with.

    Kind regards,
    Herman ??

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