Astra Theme Site Title Layout Shift While Loading Causing High CLS – Fixed!!

I love the Astra WordPress Theme for my sites – it is clean and fast, but I was having issues with Cumulative Layout Shift (CLS).  As I’ve mentioned in a few other posts on this site, I like the pages to load extremely fast.  And the Astra theme has been mostly great for that.

However, I noticed some weird intermittent behavior.  Specifically, the header text would shift and move around in funny ways while the page was loading, usually noticed when loading the site on a mobile browser.  I could also recreate the problem by loading the page on the desktop, and then resizing the browser window to a narrower dimension.  Making the window narrower would cause the header text to redraw, starting vertically, and then moving it to the proper horizontal position.  It happens pretty fast and most visitors probably wouldn’t care at all.  But I noticed it and using Google Pagespeed Insights noticed it, causing a high “Cumulative Layout Shift” score – but only some of the time.  Intermittent problems are very frustrating to try to resolve.

On the Astra wordpress support forum, they generally recommended disabling cache plugins, saying that is what typically caused the problem. Of course, disabling a cache plugin may solve the layout problem, but it just creates different problems.

While I believe the Astra theme is fully responsive, I am thinking it is possible that some of the CSS or other rendering information gets stored in cache slightly differently for mobile pages compared to desktop pages.  I don’t know enough about CSS/JS to know for certain, but it seemed like if I viewed the site from my mobile phone first, then it would load fine after that without the CLS shifting when viewed again from mobile.  However, if I viewed the site first from my desktop, the cached version would then load on my mobile device with the high CLS. I’m not 100% sure that is consistently the case, but that seemed to be what happened for me.

I was about to give up on the Astra theme, and had been exploring other themes, but I couldn’t find any that I liked as much.  I was willing to consider the sacrifice though to avoid the CLS issue, but allow me to leverage cache for fast delivery.

Solution:

Then I stumbled across an option in the header settings.  When you go into the Astra theme settings, under Appearance > Customize, one of the options is “Header Builder”.  Within that list of settings, there is one labeled “Site Title & Logo” and then within that menu, there is an option “Inline Logo & Site Title”

I turned off the option for “Inline Logo & Site Title” and so far, that seems to have fixed my problem!  I was surprised, as I’m not sure yet exactly what that changes, but the site title / header now loads perfectly on desktop and mobile with no shifting.  And even with everything optimized in the cache, it all seems to load great.

Looking at the Astra documentation, the only thing I could find about the “Inline Log & Site Title” is that it is used to move the Site Title and Tag Line to the right side of the logo.  I don’t have a logo (as of the time of doing this post), so I’m not exactly sure what it is changing that it fixes the problem I’ve had.

That particular setting change removes from the header class the option “alt-logo-title-inline” in the source code.  And then checking the css style file I found:

.ast-logo-title-inline .ast-site-identity {
  -js-display: inline-flex;
  display: inline-flex;
  vertical-align: middle;
  align-items: center;
  transition: all 0.2s linear;
}

I did some troubleshooting, eliminating each of those lines and it turns out that the line:

transition: all 0.2s linear

is the one that causes the shifting header.  I’m a novice with CSS, but I believe that command means that the other qualities are implemented over a 0.2s period.  I’m not sure why they do this, but I’m just glad I figured out how to fix my problem.

So, if you are having that same problem, let me know if changing the “Inline Logo & Site Title” fixes the CLS problem for you.