Core web vitals: Astra performs bad

Hi @nicoter,

Are you using a page builder plugin? What is happening if you temporarily switch the Astra theme to a?nother? ?Do you have any site URL we can check?

???Kind regards,
?Herman ??

Hi @brainstormteam,

I concur on this. There are a few examples at https://nemowine.com/wine/2016-donna-olimpia-1898-millepassi/

For example, the plus and minus buttons on this page are impossible to custom style to avoid a layout shift as far as I can see, without overriding code that I’d rather not override.

Thanks,
John

Hi @brainstormteam

Regarding your questions:

1) No, only Gutenberg and the Ultimate Gutenberg Addons, which are also coded by you.

2) How is that relevant to this issue? Obviously when I switch the theme the whole CSS is different, depending on the theme. But to be specific: I switched to Generatepress 3.0 (the beta) and the issue was gone.

3) Sorry no, but you can check on any Astra install. E.g. I picked the URL @johncandrew provided and see how alone the font size of the H4 gets overwritten multiple times in two different files (inline and external CSS file), see https://i.imgur.com/xQacdEs.png

Thanks

Hi @nicoter,

I will bring this to our concerned team ?so we can check on the code level. If we find anything that needs to be fixed/improvised, we will surely do any necessary steps and push it on our future updates. Thank you for your insight on this.
?
?And @johncandrew, as of now, there’s no dedicated option to style the plus/minus buttons on the product page. However, if I check your site and the CLS is good for both desktop and mobile.
?
???Kind regards,
?Herman ??

Hi @brainstormteam,

I think that this is becoming increasingly important. Yes, the lighthouse information suggests that the product pages have reasonable CLSs but the Chrome field data disagrees with this.

I think that this is down to the way that JS is being used in Astra.

Whilst I do believe that Google have a bugs all over their Crux data (for instance, I think that they’re attributing my mobile data to my desktop site and vice versa at the moment), I still have to live with it because it’s Google.

If you’d like me to work through this with a developer, I’d be happy to do a call with someone so that we can either a) propose options to improve performance on the Astra, or b) ameliorate the situation with a patch fix or general advice that might help me and others.

Thanks,
John

Hello @johncandrew

Yes, we do agree, we can take a further look.

Please do reach out to us through our Support Portal or email us at [email protected] with your inputs we would definitely look forward to making necessary changes. Also, do mention this topic URL in the ticket.

Looking forward to hearing from you.

Regards,
Suman ??

Hi Suman,

Thanks for your attention to this.

Please don’t check nemowine.com for examples though as I’m doing stuff to that site and I don’t want everyone to get confused between my horrible FOUT problems (mostly caused by my trying to get the best balance between load time and CLS anyway) and this CLS problem.

On that page (https://nemowine.com/wine/2016-donna-olimpia-1898-millepassi/), there are several layout shifts visible in Performance tab on Chrome (best to slow it down 6x to simulate field data). The layout shift that I think is affected by this on that page is: div.main-navigation.

Also, any site with the Astra +/- signs on it is going to suffer from this because they are inserted post-render by JS.

(And, @nicoter, I will look into all the CSS overrides and what’s causing them. Thank you for bringing it up, although it isn’t the cause of the problem that I was talking about.)

Thanks,
John

Hello together.
I have a similar issue with CLS on a customer Site using astra theme.
https://dein-technerd.de/
I haven’t done a deep investigation yet but as I can see via chrome Dev tools, it’s mostly caused by the nav menu and the site identity.
You can check it by ur own.

BR
Lip

Hi,

I am using Astra for the past 1 year. I too have a CLS issue.

After a small investigation, I found that Linking text, table of contents plugin, and website LOGO in header bar caused me CLS problem.

I tried the popular WordPress Table of Contents plugins. They are working without a CLS issue on my other websites. Using the table of contents plugin resulting me CLS around 1.7

In a few posts, I found that linking the text caused me a CLS issue. weird.

I need someone to help me out to avoid the CLS issue while using a table of contents plugin.

My website: https://www.mronn.com/

Hi @starkswebdesign @mronn,

So sorry for the huge delay. Would you mind reaching out to us through our Support Portal so we can take a look at this further?

We found that the CLS issue on our users’ sites was related to the other thing rather than Astra, e.g. a plugin caused it.

Kind regards,
Herman ??

Hi @brainstormteam,

Would you mind sharing some of the plugins that may have caused this issue?

While the site loads quite fast and passed the other Core Web Vitals, I’m getting the same problems with CLS.

Hoping to get an update on this one.

Hi @gelosick,

Please refer to this thread and this one.

I hope it will help.

Kind regards,
Herman ??

https://www.loom.com/share/33f47a88217b4ece9cf84eb217674587

Hi @deniskorablev,

Thanks for the video.

As mentioned in one of the threads in my previous response, we are working on this stuff which will be included in the next major update. I would ask for you to wait patiently until it’s released.

Kind regards,
Herman ??

Hi, I haven’t started working/investigating too much on it yet, but I’ve got the same issues of the video too at the moment. They are main related to the menu and top header bar.

When do you think to publish the next release with this fix?
Google is pushing a lot in that direction (Core Web Vitals update May 2021).

Thank you so much!
Regards.