Astra Theme Having CLS Issue With Header Menu
Ulmerju opened this issue · comments
Impacted plugin
Super Cache
Quick summary
The desktop header menu of the Astra theme should consistently display in a horizontal format without causing any layout shifts or contributing to Cumulative Layout Shift (CLS) issues in mobil view. See this Image.
Steps to reproduce
- Clear Cache
- Continue to monitor the website over time to see if the vertical menu appearance reoccurs after a while.
A clear and concise description of what you expected to happen.
A permanent solution to fix the CLS issue caused by the Astra theme's CSS without needing to uninstall the cache plugin.
What actually happened
The desktop header menu initially appears vertically for a brief moment on mobile view before switching to the correct horizontal format. This causes a noticeable CLS issue, affecting website ranking. Clearing the cache temporarily resolves the issue, but it reoccurs after some time. This problem is linked to the Astra theme's frontend CSS and is not isolated to a single website but affects other major websites using the Astra theme as well.
Impact
Some (< 50%)
Available workarounds?
No but the platform is still usable
Platform (Simple and/or Atomic)
No response
Logs or notes
It looks like the issue is being caused by this css file: wp-content/themes/astra/assets/css/minified/frontend.min.css
👋 Hello @Ulmerju - could you please provide more steps to reproduce the issue? Is it happening just only by clearing the cache in the WP Super Cache plugin?
Maybe a screen recording would give us more clarity on how it behaves on your side when shifting the layout.
I found your original thread about this.
I also found this thread (note the slight difference in the slug) and it appears that enabling mobile support in the caching plugin fixes the problem. I guess Astra serves different CSS or HTML files to mobile visitors?
BTW - I couldn't replicate the problem on a test site using the free Astra theme with a single pulldown menu. I tested in Firefox on my phone and made sure it was being served a cached page using the debug log.
@Ulmerju I'll reply on your WPORG thread too, since you may not be monitoring Github.
I'm closing this as the problem happens with other caching plugins too. The original thread above says it occurs in Litespeed cache, so it's likely an issue with Astra.