Archived topic
CLS Caused by GB Icons
6 replies · Started by Ian on April 5, 2021
Has anyone run into CLS issue that is caused by Icons from GB Headline / Buttons? GPSI does not show an issue in Lab Data but Origin Summary does who CLS issues for desktop. GPIS actually show score of 100 for desktop but....
1 .Looking at a Chrome Performance recording, it is flagging GB Icons as CLS issue under "Experience". I have included the URL below. Any ideas on how to fix this?
2. I have also noticed often, GB Containers has being flagged for CLS as well. Maybe Font issue? Any general tips for this one would be greatly appreciated.
Thanks!
Hi there,
i ran a couple of performance tests and have not been able to register any CLS issues apart from those seen here:
https://www.screencast.com/t/nUH961XFs
There are quite a few - all of which are related to the advert placeholders being positioned when they update.
Thx David. Can you share a quick tutorial on how I can see what you saw. I know how to see Experience inside Chrome inspect’s recording. How do I do a screen recording of what you see. I want to share this with Mediavine.
Its not easy .... if you open the Performance tab and hit the record button, then refresh the page, scroll some until you see a few of the adverts load and for the footer banner to rotate through a few ads. Then stop the recording and then wait for it load the profile.
You should see the CLS markers in the Experience view - which you can click to select, then hover over the summary Moved From > Moved to info:
Hey David,
Seriously, that is a smart way to measure CLS. I have been using Experience but not at this granularity. Let me continue to keep testing. In the meantime, can you tell me how to fix:
div#page.site.grid-container.container.hfeed
div.gb-container.gb-container-c4d24426
a.generate-back-to-top (this may not be able to be fixed since Mediavine ads are pushing it up.)
I am going to send MV my findings regarding CLS caused by their ad loads. Thanks so much.
So a big culprit causing 0.2 CLS was one image. It's using a standard Wordpress image so not sure why it's throwing a high CLS. I do see it's lazy loaded. I wonder if lazy loading images will cause CLS issue? It's actually 40% low on the screen and it's a long article.
Do you think I should disable all lazy loading except for the logo and see? So odd!
Hi there,
Lazyloading is known to cause CLS from image if it's within the fold.
The usual culprits are lazyloaded logos, the featured image or any image with contents beneath them that's within the fold(immediately seen on the viewport) when the page loads.
Lazyload works like this: The actual image element isn't immediately rendered if it's not on the viewport. The script checks if the image element is in the viewport, it then renders it to be viewable by visitors.
Now, the CLS happens because the lazyload kicks in first while the page is loading. The script is late to realize that the lazyloaded image element is actually within the viewport and should be rendered immediately. This causes the image to pop out and shift the contents below it when the page fully loads.
Do you think I should disable all lazy loading except for the logo and see? So odd!
It's definitely worth the try. I'd suggest optimizing the image/s files too if needed.
