Hello,
I’m having issues with passing the Core Web Vitals test from Google because of a CLS issue (mobile view only!).
Example site where it happens: https://berliner-abendblatt.de/2022/07/13/friedhofspark-pappelallee-endlich-wieder-zugaenglich/
CLS culprit: <div class=”td-main-content-wrap td-container-wrap”> with a score of 0,213
Any idea how can I fix that? Thanks!
Cheers
-Ben
Hello Ben!
I found these articles about to improve cls
-> https://www.stanventures.com/blog/cumulative-layout-shift/
-> https://web.dev/cls/ -> https://web.dev/optimize-cls/
-> https://www.datadab.com/blog/fix-cumulative-layout-shift/
-> https://wp-rocket.me/google-core-web-vitals-wordpress/improve-cumulative-layout-shift/
-> https://forum.tagdiv.com/topic/to-high-cumulative-layout-shift-in-mobile-theme/
Hope these articles help you to reduce the CLS.
Please note that page speed is not covered by the support team: https://forum.tagdiv.com/newspaper-theme-support/
Thank you for understanding!
Hi Bettina,
I already knew those articles as they are posted under every CLS topic in the forum and speed is not an issue.
I‘m having issues with a high CLS value caused by „ <div class=”td-main-content-wrap td-container-wrap”>“.
This is a Newspaper Theme specific container and I don’t know why it’s causing CLS to fail.
Hello Ben!
Please provide more information about the test you did, screenshots or a video.
Thank you!
Hi Bettina,
you need to visit https://pagespeed.web.dev which is Googles own Core Web Vitals test.
Then I pasted this URL: https://berliner-abendblatt.de/2022/07/13/friedhofspark-pappelallee-endlich-wieder-zugaenglich/
The result: Core Web Vitals Assessment: Failed
Screenshot: https://ibb.co/HKFZGsj
This is because CLS.
Here you can see what is causing CLS.
Screenshot: https://ibb.co/02YYQ6p
The test suggests that “<div class=”td-main-content-wrap td-container-wrap”>” is causing the layout shift.
Hello!
There is all about the DOM. Which means you need to have less elements into that container or row, as such on that page. I can suggest you only to take care of how many elements you use on that page. You can try to use a cache plugin or a plugin which can minify the page or combine some elements in order to reduce its size.
Thank you for understanding!
Hello again,
I disabled the sidebar for a category to reduce the overall elements.
The url is as follows: https://berliner-abendblatt.de/2020/09/13/besuch-beim-groessten-baum-berlins/
On this page you basically only find the posting itself.
Unfortunately I get the same CLS / Core Web Vitals failed result.
I’m also using WP Rocket as a cache plugin.
Do you have any other ideas?
Hi,
I just checked the website and the core web vitals are passed now -> https://i.imgur.com/GdI7jWu.png
Also, if you are using the WP Rocket plugin you can set those settings –
> https://www.infophilic.com/get-almost-100-pagespeed-newspaper-theme/
Also, for the mobile version you can try the mobile theme plugin.
I hope this will help you!
Hi Calin,
thank you for your response.
I just did a Lighthouse test with Google Chrome browser of this url: https://berliner-abendblatt.de/2020/09/13/besuch-beim-groessten-baum-berlins/
and I’m still having issues with CLS on the mobile view. Your screenshot shows the results for the desktop view which never was an issue. Google does always benchmark mobile first as most of the users are browsing with a mobile device.
Unfortunately the mobile theme is not an option as it’s less customisable compared to the standard desktop version.
But the main theme is responsive so it should normally work?!
That is why I’m trying to find a solution for CLS to fail within “td-main-content-wrap td-container-wrap”.
Hi,
I see, the problem was only for the mobile and the mobile theme is not something that you want to use.
What I can recommend is to use a mobile page template, create a mobile page template for the single post template and adjust the images size and the content that you want to display on mobile -> https://prnt.sc/hTlYMR_i5wrw
I hope this will help you!
Thank you!
Hi Calin,
thank you for the hint.
Before I started creating a custom page I just discovered that another of our website does not have the issue. The template and settings are somewhat identical.
For reference. This website does have the issue:
https://berliner-abendblatt.de/2022/07/18/musikschule-city-west-bietet-vielzahl-von-kursen-fuer-babys-und-kinder/
And those not:
https://www.rheinmainverlag.de/2022/07/18/obertshausen-stadt-und-verein-stadtmarketing-arbeiten-gemeinsam-mit-buergern-an-konzept/
https://supertipp-online.de/2022/07/18/richtiges-verhalten-bei-hitze-hitzeknigge-fuer-ratingen/
Any idea why only the first one has CLS issues? That is very odd.
Hi,
If the settings on those website are “somewhat identical” then the only thing that is coming in my mind is the server, the ads and the pagespeed.
If the server is the same one, the check the ads and the pagespeed from websites. For example the last one is the faster one and the one that passed the core web vitals on both mobile and desktop.
Thank you!
I’ve found the issue and like to share it for whoever might also have an issue with CLS…
I had the top header ad within a div tag. That caused the whole problem. Now the ad shortcode (Advanced ADs Plugin) is directly in the header ad placement and CLS is fixed.
Hi,
We are glad that you find a way to resolve the problem!
Also, thank you for sharing with us!
Thank you!
Hi,
I’m failing Desktop web vitals for articles like https://yourgames.tv/wizard-with-a-gun-all-details-about-gameplay-and-release-date-trailer/ because of CLS too.
This doesn’t show when testing via Pagespeed Insights, GTmetrix, or webpagetest.org, but in the user field data. I gave the ads above the fold, and most of the elements below the fold a height already, but I’m still getting data with more than 0,1 CLS on Desktop.
What am I missing here?
Thanks,
eC
Hi eCronik, as I can see the results are ok for desktop – https://i.imgur.com/GmxWSgb.png and it is possible to need some more time to get new data for Core Web Vitals – https://i.imgur.com/4pPq4sq.png
Indeed for a good CLS this should be under 0.1 and now is 0.19, what I can recommend is to do a test without those social icons – https://i.imgur.com/lhZP8hG.png but according to the google speed results should not be a problem – https://i.imgur.com/I2MDeYR.png
Thank you!
