John, assuming this is your website (www.eclectic-ware.com) I agree there appears to be no issue that should be triggering CLS issues, although in the large mobile resolution this momentarily appears as the threshold is approached

And in small tablet likewise

Both are in the footer so perhaps this is what google is being pedantic about?

Okay, horizontal scrolling. But isn't CLS about the movement of objects (images and text)?

I am actually wondering if Google is sending us on a wild goose hunt just to keep SEO agencies afloat. When I do these Lighthouse tests or Page Speed Insights with this one, the results change from moment to moment. It gave my home page a score of 80 when it showed me the above CLS issue. Then I do it again a few minutes later and my score is 45. Way too much of a fluctuation for either score to be right.

And as you just pointed out "when you reach the threshhold...." Who is doing that? If you are on your phone up and down or sideways, on your tablet, or laptop, who is actually changing the size of their browser windows? Only us to look at how our work changes. But the user isn't. Most everyone opens Edge or Chrome and starts searching. They don't say, what if I make the width of my browswer window 2" less, I wonder how this website will look. No one is doing that.

So Google has found a nice way to occupy all our time. And that bit of code, it is on my other pages too, and none of them were flagged with a .745 for CLS. THUS, why is Google lying to me???????

Just for fun too, I looked at Page Speed Insights for a competitor, and then some really big name websites like: Pepsi, Dell, Sam's Club, Walmart, and Amazon. All of their page speeds suck and their CLS is through the roof. And they rank! So who is Google trying to fool with this crap? Just trying to scare all us little guys to hire SEO pros in hope that we fix things?

Your opinion on the above would be very welcome. And I will look into the horizontal scrolling just in case.

Esahc, seems like the horizontal scroll bar appears at every viewport shift. But again, when on your specific device, no one will see this. You can only see it on a PC or laptop when you are purposely adjusting the width of your browser. And of course things jump from viewport to viewport. We have to go into Website X5 and select the viewport in the Template and move things over or else they fall off into oblivion to the far right and cannot be seen. And everything in the header or footer on a laptop and PC view is definitely not present in the two smallest viewports. Who wants a footer five screens tall on a cell phone?

So there is something else going on with this CLS.

Are there any tools besides Google's that can measure this and tell you the lines of code in your HTML that are causing it? I watched a video last night where it seems the responsive design and the lack of dimensions stated with the graphics is part of the cause.  https://web.dev/optimize-cls/

I understand what they are saying about things jumping on the screen. When I had dial up, I saw a lot of that. Even with my fast connection now, when you go to sites like CNN and start reading, the ad will then jump up top, throw all the text way down the screen, and yes, I agree, annoy the heck out of you. For those of us who do like to read instead of just watching the video.

I guess a lot more looking into this is necessary. And kind of urgent. In 2021 Google has already announced that the Core Web Vitals will become a major ranking indicator. I really do want to be ready, well in advance.

Thank you, Stefano. Google very much so plans to initiate the Core Web Vitals as ranking factors in 2021. Search Engine Journal has written about it. It is coming. Hope the engineers find a solution soon.

I am going to try to find a tool that points out precisely what is causing the CLS to trigger. Google seems wishy washy in telling you. Like in the above example. That line is in other pages of my html, and they are not triggering it. I can see sites like CNN and others that have tons of ads that make things move on the screen having this issue. But I do not do that to my customers. I'm really starting to wonder how accurate Google is being about these problems. Scare tactics or real???

Stefano,

I just noticed that the "cart item count" that starts at zero and appears next to my view cart button, tends to load after the page loads. I would presume it is dependent upon some sort of script and possibly a .css file too, as well as a cookie. But since it is loading after the other items "lower" on the page, could something like that trigger one of these mind boggling CLS ghosts to chase?

Hello John

I've informed the developers of this detail too to help with the investigation.

As soon as official news becomes available, it will be made known publicly

Thank you

Stefano

Hey Stefano,

Did you know that your forum ranks pretty darn good with Google. I just searched for What is imFooterBg, and first result goes to this blog post. Hope you do find a solution. I just ran a couple of my pages through Page Speed Insights and this is still showing up:

Avoid large layout shifts 3 elements foundThese DOM elements contribute most to the CLS of the page.ElementCLS Contributiondiv<div id="imFooterBg">0.547Allegra and Mandalay The Allegra collection has spiral designs for the knobs a…<div id="imCell_5" class="" data-responsive-sequence-number="5">0.015The Allegra collection has spiral designs for the knobs and pulls. The Mandalay…<div class="imTACenter">0.01

So that ImFooterBg is doing something. Now I do have the height of my footer jump in size amongst the viewports BECAUSE when in the PC or laptop larger viewports, there is a lot of screen width and you can fit things in columns. When the viewports shrink, there are some footer elements that I am "choosing to hide in the lower viewports." And then I do stack some things to keep them still visible in the mobile viewport, so it is actually taller to fit the objects that were in other columns into one longer column.

Does that sound like it might be a clue to this mystery?

I am going to experiment. I am going to layout everything important in basically the first column area, in all viewports. And then as the viewports decrease, I will try to just hide the elements positioned more to the right of the first column, instead of shifting them over. And then I will try the page speed insights over and over. May take me many days to get to it, and plan, but I think that container element seems to refer to the footer. Am I correct about that?

Thanks for your help thus far. We will, through the joining of minds, figure this out.

Stefano,

To keep you up to speed, here is what I just tried.

I got rid of the AddThis share buttons in my footer. Replaced the share and follow buttons with HTML elements. Pulled the icons from files on my own domain. Gave them width and height parameters in the HTML. And then I created the left column of my footer identically in all viewports. Every element is the same width 316 pixels allowed, every element has the same starting position for the upper left corner, in all 5 viewports. Thus nothing is allowed to change any positions.

When I go into Google Page Speed Insights, my CLS got worse. Says a .625 for <div id="imFooterBg">

The only place <div id="imFooterBg"> appears in the HTML is toward the top of the page, but I am assuming it refers to everything in the footer. If CLS is all about things shifting on the screen, and I just put everything in the same place to stay, there should be no shifting. Yet, Google thinks there is now more.

I do have to say by eliminating the AddThis function in the footer, the performance score in Lighthouse increased quite a bit. It was giving me a 79, 85, 85, 99 after the changes. Score just before was 64, 90, 77, 99.

But if the CLS thing keeps showing up in the Core Web Vitals, I just don't get it. What is it about <div id="imFooterBg">? I have the heights of the footer and the footer border all set at 700 pixels in every viewport. I am allowing for no changes. I have a couple of text elements in the 3 wider viewports that I am hiding in the smaller viewports. That is not a shift, it is an admission.

My internet connection will not allow me to see any shifts. It barely allows me to view the lazy loading. My download speed is usually around 83 Mbs, so things don't hesitate to appear on the screen. So I cannot really see if anything is bouncing because every is just there. Even if I clear my cache, it is still way to fast to see. And it is the footer. By the time anyone gets that far down the page, it will be there.

You know, the pages work. The cart works. Everything is really pretty nice about this software. It has a lot of great functions. What the heck is Google getting sick on? Is it like Google is just seeing things that aren't there? But still giving us a bad grade and keeping our sites down in the SERP's. Have any of your other customers had issues with this?

Stefano,

No matter what I try, the CLS on that "imFooterBg" comes up at .625. On all pages I test in the Page Speed Insights. It is consistant. I did notice that the HTML that is written writes the elements in order as they are added to the footer. So I went back and copied, deleted, repasted elements in actual order, and sure enough, the HTML then listed them in order instead of the odd order. That did NOT help. Did not change the .625 score for the footer. Then I started thinking, the error refers to the line in this code inside the opening body tag:

<body>
<div id="imPageExtContainer">
<div id="imPageIntContainer">
<div id="imHeaderBg"></div>
<div id="imFooterBg"></div>
<div id="imPage">

etc.

Do you think that Google might be having a hissy fit because the order of the page is actually: header, page, footer. The imFooterBg is above the imPage. (I will say right now, I do not understand this stuff.) Could that order be part of "jumping the footer above the page, but then back down"?

Yes, I am reaching. Any crazy idea right now is going to come out.

I also looked for old elements possibly in the footer but not within view, did not find any.

My 2nd Seach Field located in the footer I have kept at a constant size in all 5 of my viewports, and constant position. It is the only graphical element now added by a tool in the software. The other 3 graphical items are now added as html elements that I constructed the html for, giving all graphics dimensions listed.

So with all of that analyzed to death, isn't this really strange? What could possibly be causing that one line of html to flag this huge CLS number?

https://www.eclectic-ware.com

Stefano,

Here's some info for you to pass along. It has nothing to do with any elements in the footer. I have a dummy domain I practice on. I erased a few things from the footer, then tried the page speed insights, no change. I removed the search bar, tested again. Then I removed everything from the footer, all blank. Still the same test result from Google. Always referring to just that line of code with no additional explanation. My dummy domain is on a different server from my main website. Both Apache servers.

Hope this extra info helps.

Stefano,

Another discovery that you can pass along. When using a text element in a cell, if you embed a picture with the text, it works fine as long as it is picture first, text below it. If you enter text, then a picture, and then more text, that shows up in Lighthouse as CLS. Figured that one out last night. Those are small shift numbers, nothing like the .625 rating for that imFooterBg thing.

Strange that Lighthouse catches the imFooterBg thing sporadically, and Page Speed Insights seems to catch it on every single page. Google's own tools do not seem to provide the same results. And no matter what I try, Search Consule keeps reporting all pages as Poor. But it has flip-flopped too.

I'm still experimenting. But I think the fix for the imFooterBg will have to come from Incomedia.

Hello John

All of the information has been forwarded to the developers

Thank you for all of your input as we keep looking into this

Stefano

Here's something new. The tech guy at the ad agency I have working for me just gave me this in regard to my question to him about CLS.

I have also reviewed the CLS issue and found that it does pertain to the HTML tag <div id="imFooterBg"></div>. After reviewing your website it doesn't look like it get used for anything except setting a background color which is already controlled by your main content tag "imPageExtContainer". All the imFooterBg does is scales depending on the screen width. I would suggest removing this code as it doesn't get used for anything or just comment it out in your code like this: <!--<div id="imFooterBg"></div>-->.

I wish to thank John W,

For his tenacity in possibly finding the problem of CLS, It appears he is on to something.

I have been suffering the same CLS issues on every page on my website and belive the footer issue may be causing this.

When John W. mentioned the footer issue I immediately went to my footer and noticed the footer background was not the same height / size as the footer, it was higher, so I lowered it to match the footer height on all view ports.

I went to this website that checks for CLS on web pages and it now shows "0" 

When it comes to Google it takes 28 days to monitor the website before they send a new report. Too bad we have to wait so long to hear back from Google to know for sure.

This is the website to check for CLS problems.https://layoutstability.rocks/

I am now showing "0" on the above link, I hope this is the end of this and if so thank you John W. for your hard work in determining what has been the probable cause of Poor CLS issues.

Thanks to all that provide great support. Giulio

Hi Giulio,

Thanks for that. In Google Search Consule, I am getting a good rating for CLS for mobile. Desktop is still showing poor for all pages. But it has not been 28 days yet. And Googles says the validation is still in the works. I am finding tiny episodes of CLS on various web pages. Most related to a text block with an inline image. Then when I break them apart and put the image in a cell by itself, sometimes the CLS remains, and is related to the text block. Deleting and recreating the text block does not seem to fix it. But adding more rows to my grid further down, then re-adding the same data, not copying and pasting, but adding the same data fresh, then going back and deleting the rows above, seems to get rid of those little occurences. Most of these are registering like a .05 CLS score. So as long as you stay under that 1.0 you are still in the Good range. But all of those are minor. The footer problem was registering that .625. Thus my footer background, even when the same pixel height of the footer didn't cure it. But setting the background to 0 pixel high, basically no background, did work.

You know Google is just doing this to us to keep us busy. They can't handle it when they think we are finished with our work and we want to kick back a little.

Hi John,

I agree about Google, they area real pain. I must say you did your research and trial and errors and want you to know it is greatly appreciated.

I hope you can stay in touch with me with any new discoveries you find because although my CLS issue is much better I do still have it showing on some pages.

All the Best to you...  Giulio

I'll be around the forum. About to post something else that just showed up tonight in Lighthouse. A mysterious non-crawable link - where there is no link. Hmmm.