Organic traffic impacted by site speed, specifically Cumulative Layout Shift (CLS)

Technical Q&A
1

In the last 12 months, shopwudn.com has experienced an 80% reduction in organic impressions and clicks across virtually all of our most relevant keywords. Investigating google search console, we seem to have a major problem with Google’s evaluation of our page performance. There are a few problems, but Cumulative Layout Shift (CLS) seems to be a major contributor. As of today, we don’t have a single page on the site rated good or fair due primarily to high CLS.

So far:

Gone through our theme in detail and turned off all optional or unnecessary features.
Turned off virtually every app that can impact page load speed.
Ruthlessly optimized our images.
Disconnected the facebook pixel.

I have gone through the theme in as much detail as I possibly can looking for elements contributing to slow page loading and specifically Layout shifts. I have turned off virtually every “optional” feature on the collection and product pages.

Sidebar off
Pop-ups off
Removed all collection header images
Recently viewed products off
Recently purchased products off
Announcement bar off
Parallax off
Reduced the number of Main menu items in the header

It’s hard to tell but it looks like the layout shifts are coming from the main menu resizing itself a couple of times (at least) during the page load. It’s 8 simple text items in a standard font. I don’t get why the menu would behave so poorly.

Any thoughts from the community on how to make changes or improvements here?

2

The slide out menus for navigation and login on mobile are loading first, as if they were out, and then having their hidden styles applying to them, causing the layout shift.

You need to make sure that they are hidden to start with, if your mobile menu isn’t really well constructed HTML order wise, this might cause errors on desktop, and you’ll probably want to re-construct the menus

Also, remember that no one knows exactly how much an effect your performance metrics make a diference in your google ranking.

3

On this: Turned off virtually every app that can impact page load speed.

Also make sure that you don’t have any leftover app code in your theme. Most of the time you’ll find it in theme.liquid. When you delete a Shopify app it loses access to your store, so it’s unable to clean up after itself if it previously added code to your theme.

Steps to remove old app code:

  1. Duplicate your live theme

  2. On this new theme, read the files to look for old app code (most of the time the code will be in theme.liquid, so just read that one to take care of probably 90% of situations of extra app code)

  3. Test and publish the new theme

Sounds like you removed a lot of features, I would be careful about that. Google PageSpeed Insights is a general tool, not geared well for ecommerce sites (especially ecommerce sites using 3rd party apps).

Keep in mind the score with that tool is not equal to actual performance (there are some case studies on the topic here: https://speedboostr.com/category/case-studies/), so my recommendation is to optimize what you can, but don’t go overboard deleting features just to get a good score.

About the layout shift, that one is tricky… I recently optimized a site that improved 12 points on Google PSI just by adding image dimensions to a single small image. That had zero affect on performance, and since it was so small an image caused no layout shift, but it’s a good example of how the scoring works - it’s algorithmic and automated to predict possible performance issues, not tell you actual performance issues.

This has no effect on speed: Reduced the number of Main menu items in the header

  • Loading simple text doesn’t affect speed. The main factors are images, videos, and 3rd party resources.

If you want to explore deeper performance and scoring on Shopify, this post breaks down various tools and scoring for Shopify: https://speedboostr.com/understanding-load-speed-on-shopify

Lastly, to quickly find actual performance issues on a Shopify site, run your url through the Shopify Analyzer. That’s a performance analysis tool specifically for Shopify that my team built free for the community.

The layout shift one can be a pain, I’m not sure it’s worth recoding entire sections of your website to appease that one. My real-life test is to load your site on a slow connection device (or weak signal) and see how it feels to you. The real benefit of performance is actual load speed (use webpagetest.org to measure when you’re optimizing or to see how apps and features affect a page) and perceived load speed by the user. For perceived load speed, that’s where the testing comes in, also use preloading for key resources (https://speedboostr.com/preloading/) - that won’t be picked up on most analysis tools, but it contributes to significantly faster load speed for users that visit more than 1 page.

4

As a counter arguement to JoesIdeas’ comment about CLS is that avoiding visible CLS helps a site look more professional, and in some cases, more usuable.

I can’t tell you how many times I have been scrolling through a news article, reading, then the text JUMPS down, as an image loads, I freaking hate that.

5

@oreoorbitz for sure, you definitely want to fix actual visible layout shift, that’s a poor UX when it happens. You’ll often get points knocked off on PSI for bogus warnings, or a non-perceivable layout shift, but for real layout shifts that’s 100% worth investing in fixing.

6

Joe,

Thanks for the response. Agreed, layout bleep are terribly distracting and
painful or the user. Thankfully these are pretty small adjustments
visually. It just seems like google is counting all of them and penalizing
our SEO juice as a result. (it’s a working theory, but I don’t have a better
one right now).

1 Like
7

“The slide out menus for navigation and login on mobile are loading first,
as if they were out, and then having their hidden styles applying to them,
causing the layout shift.”

Hmm. Interesting. The menu is being built by the shopify theme. I have
examined the theme in detail and there don’t appear to be any “settings”
that could or would change the way the menu renders.

On mobile, you can’t see any of the layout shifts and the site feels fast -
even the main front page with the largest images.

On desktop, it’s still fast, but you can see the menu load and shift
multiple times as the menu-items resize and find their ultimate position.
It’s small but obvious.

All of this is largely irrelevant except, in the last 12-months we have lost
our once excellent ranking (1-4) on most of our best key phrases. We have
basically been relegated to page-3 and are seeing an 80% reduction in
organic traffic.

I am grasping at straws to understand d what changed.

8

Google works in misterious ways, you could hire a SEO specialist to advise.

AS for the layoutshift, you can see it on mobile.

See image bellow of menu loading first.

Screenshot_9.png
Screenshot_9.png508×604 20.6 KB

The menu loads first, then is hidden, causing the Layout Shift. If you want to fix that, it’s up to you, but i’m confident that’s the cause of the CLS.