Good morning. I’m running into a CLS issue and I was hoping you could help. My website is https:/www.garrettandwalker.com.
My CLS is .305 on Google Pagespeed.
Everything appears to be connected to X Theme. Can you help me fix this? Thank you as always.
Hi @JK2013,
There are a few reasons behind the lower Cumulative Layout Shift or CLS scores, I would like to suggest you troubleshoot the following to recognize the problem.
Using any plugin that causes the lazyloading can be one of the reasons behind the issue
Unspecified image sizes. Rather than specifying the dimensions, developers cut the width and height and used CSS to resize images to take up the max-width of the device the page was loaded on.
Dynamic advertisements, when ad content is rendered, slots can also be resized if insufficient space is available for the creative. Certain creative types are even designed to expand after they appear on the page. All of these dynamic shifts will push and pull your content over the page.
Heavy embeds, iframe embeds can fall into the same trap as images. Because the browser doesn’t know exactly what the embed is going to contain, images, videos, multiple rows of text, it doesn’t know how much space to reserve for it.
Web fonts, do not come installed on the user’s system, unlike web-safe fonts. This means that they have to be downloaded by the browser while rendering the web page, then applied to the text.
If that does not help, please provide login credentials for your site in a secure note to examine it further, including:
– WordPress Site URL & Login URL
– WordPress Admin username/password
To create a secure note, click the key icon underneath any of your posts.
Thanks
Hi @JK2013,
The page speed and CLS are mostly related to the content,image, scripts used in your site and not related to the theme. Still, I will suggest you take any empty page to check the result and add content to the same page one by one and check the result again to understand what exactly causes your issue.
Hope it helps.
Thanks
I undestand. I sent the data above it’s the post carousel and the menu according to the info that I sent. Please see what can be done on your end. Thank you for your help.
Hi @JK2013,
Thanks for understanding.
Although it is not an issue related to the theme, still we will check as we are curious to know the reason behind it, but we can’t guarantee a fix.
Thanks
Thank you for looking into it. I would sincerely appreciate any and all help you can provide with the CLS issue. Thanks again.
Good morning! I was just following-up to check to see what your findings were? Thanks again for your help!
There is something else disturbing the CLS, ignore what it says on pagespeed insights. It’s usually one of the JS scripts or images without clear height and width.
Compare what is loading on desktop but not in mobile devices. Something there is causing the high CLS. If it is something in the content, try lowering it down the page (below the fold) and see if it helps. If you can, just dont use it.
Another thing you might want to reduce is the server response rate, its a bit high. I am not one of the devs but I know a thing or two about the CLS.
To be more clear, page speed is showing what is affected by higher CLS, it is not showing the cause of the high CLS. Do some digging, you will figure it out eventfully.
Sorry for all these replies but here is what might be causing the high CLS:
Set an explicit width and height on image elements to reduce layout shifts and improve CLS
[image] data:image/gif;base64,R0lGODlhA…///yH5BAEAAAAALAAAAAABAAEAAAIBR… Reviewed from Google
[image] data:image/gif;base64,R0lGODlhA…///yH5BAEAAAAALAAAAAABAAEAAAIBR… Jeff Salem
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.
