Archived topic
CLS is High Due to A Code Showing
12 replies · Started by Bijaya on March 13, 2021
I am using Marketer Generatepress Theme, on My readingjunction.com and I have found a code that is increasing my CLS. That looks like Generate Press Theme Code ...
Please Help me to remove that code from my site.
Please check the screenshot here - https://prnt.sc/10kcbcv
Code 1 -
<div class="content-area grid-parent mobile-grid-100 grid-70 tablet-grid-70">
Code 2 -
<div class="widget-area sidebar is-right-sidebar grid-30 tablet-grid-30 grid-parent">
Hi there,
those two Elements ( lines of code ) are static HTML and part of the Theme. They DO NOT cause the CLS - what google is telling you is that those elements are being shifted.
Your problem is the advert you have loading above the content - that is cause the shift - you can see it in the Pagespeed Insights Report film strip:
https://www.screencast.com/t/ZvL62s0Fe
Best advice is to NOT load adverts above the main content.
How to do that? I dont know, Please help me
Also I have added this code
@media(min-width: 769px) {
.main-navigation ul ul {
left: unset;
}
.main-navigation ul ul ul {
left: 100%;
}
}
un CSS but it not worked,
So, I removed the code
How are you adding the adverts to your site ? Are they Auto Placement ads ? If so in the adsense console you can tell them where NOT to display.
Yes, I am using Google auto ads.
But I have also placed some ad codes by my own.
I know how to off google adsense auto ads (which I don't want to do)
Can you tell me how to tell google where not to place ads.
And are you saying that google adsense ad is causing these code 1 and code 2
This article explains how to remove auto-ads from specific places.
Ok, I will do that, but which ad is causing problem please tell me
The advert that appears between the Site Navigation and the main content - as per the image shared here:
https://generatepress.com/forums/topic/cls-is-high-due-to-a-code-showing/#post-1693416
After removing ads from the top , the CLS is very high,
Please check the reports -
The major issue now is your Litespeed Optimized CSS is incorrectly configured. You will need to speak to litespeed support about fixing that. Or disable the optimized css option.
I am using Cloudflare, is it important to use CSS modification and Java Script modification in Litespeed cache Plugin,
because Cloudflare is already minifying them.
I am using Cloudflare, is it important to use CSS modification and Java Script modification in Litespeed cache Plugin,
because Cloudflare is already minifying them.
It's better if you do the optimizations within the site through plugins like Litespeed cache plugin first. If the optimization plugin's config is good, you'll most likely only need Cloudflare for SSL certificate.
Note: Make sure to always clear/purge cache everytime you do any changes. On both the site and Cloudflare.
