I could already find a solution for the LCP (Largest Contentful Paint) problem in the mobile and desktop version of the newspaper theme, but the CLS (cumulative layout shift) is a great issue in the mobile theme. It gets worser every two / three days. My developer has no idea what the problem could be with the mobile theme. Please provide us some help.
Greetings Kathrin
Hello !
Unfortunately at the moment there is no fix available for this. Our developers are working in fixing all the “small issues” that google page speed recently sees in order to improve speed.
Thank you for your understanding !
Ok, that’s great! Do you already know when it will be fixed?
Greetings Kathrin
So, after asking, aksing, asking and trying: the problem is the mobile header it collapses when scrolling down and the cumulative layout shift increases. Is there a way to move the mobile menu to the bottom until you have fixed the problem?
Greetings Kathrin
May I ask how you solved the issue of largest contentful paint for the desktop/mobile versions of your site? I’d appreciate your help! Thank you so much!
Hi,
I think that for mobile theme this can be solved if the sticky header will be remove, this can be done from wp-content/plugins/td-composer/mobile/js/tagdiv_theme.min.js and search for tdAffix.init(“td-header-wrap”) this need to be comment like this -> https://i.imgur.com/EK2EIXq.png the the sticky from mobile theme will be remove, but I do not think that the problem is from there.
Hope this will help you!
Thank you!
@gmcarlson I have removed the all images in the first viewpoint.
Thanks for the information. I have tried it and will tell you if it works and the CLS gets better in the next days.
Greetings Kathrin
At the moment I can’t say if the cumulative layout shift is getting better. Indeed it become slightely better in the mobile version but since two days there is no change anymore. It stays in the orange area. Can there be something else?
In desktop version there is also a cumulative layout shift when scrolling up and down? Is it the same problem (sticky header) as in the mobile version? How can I solve it?
Greetings Kathrin
Hi Topfgartenwelt,
As a suggestion, you can try to disable the sticky header from desktop and check to see if there are some improvements.
-> https://i.imgur.com/xzUHdQa.png
Thank you!
The sticky menu is disabled for both (mobile and desktop)… There must be something else in the header to produce the high cumulative layout shift…
What else can cause collabsing of the header?
Greetings Kathrin
Hi,
I do not know if there is somethings else, maybe only the fonts.
But as I can see you have 98 on desktop -> https://i.imgur.com/7ckfgfG.png and on mobile 75 -> https://i.imgur.com/j4RaPs7.png
Thank you!
Dear Calin,
the overall score is not the problem, the problem for the mobile as the desktop theme is the cumulative layout shift which is part of the web core vitals. As you can see the CLS is for
Desktop: https://i.imgur.com/7ckfgfG.png 61% (green) 11% (orange) 28% (red) the time is 0,28s but Google only allows a maximum of 0,25s. Otherwise the page is categorized as poor. In my case all 175 sites are categorized as poor because of a to high layout shift. I don’t use any Google Fonts and I have deactivated the Font Awesome for the menu, but there is a problem that persists. When I prove the desktop-site with the Google Plugin for Chrome to count the Webcore Vitals I get a bad score as soon as I scroll up and down. As you can see it here: https://www.topfgartenwelt.com/cumulative-layout-shift
And if the CLS is not fixed the site never matches the Speed Test. But that will be a big problem in future because that will be a ranking factor.
Is there nothing in the desktop-version like this (as you mentioned for the mobile version) that could cause the problem with the layout shift: wp-content/plugins/td-composer/mobile/js/tagdiv_theme.min.js and search for tdAffix.init(“td-header-wrap”)??
Greetings Kathrin
Hi,
I understand that this will be the new method for ranking and we need to adapt to it. Our developers are informed by this problem and is on there list to find something that it will help our theme to be better ranking, but for the moment we do not have a clue for how to do this. Most probably there will be an update or a tutorial like the one for page speed.
As for the elements mentioned, they were just a clue, not sure if it will solve the problem.
Thank you for your understanding!
I know you are working hard on that problem. But it seems that the code you gave me and modified the min.js in the mobile theme worked. The layout shift is getting better and the test tool (plugin for chrome doesn’t show any layout shift anymore). So my question is: is there also a min.js file for the desktop version that I can modify in the same way?
In wordpress/wp-content/plugins/td-composer/legacy/Newspaper/js I found the following file: tagdiv_theme_min.js (the same file that you mentioned for the mobile theme) and it includes this part: tdAffix.init({menu_selector:”.td-header-menu-wrap”,menu_wrap_selector:”.td-header-menu-wrap-full” After commenting out tdAffix.init(“.td-header-menu-wrap”) in the mobile js file as you recommended the cumulative layout shift was gone, but what should I do here? There is also contained menu_wrap_selector:”.td-header-menu-wrap-full…Thanks for your help!
Greetings Kathrin
Hi,
Yes, that code is use for sticky and snap menu on desktop, you can comment it without problems because you have removed this from your website, after that check the results for CLS.
Hope you’ll get good results as you had for mobile.
Thank you!
Ok, thank you for the information – so I have to comment out that complete part:
tdAffix.init({menu_selector:”.td-header-menu-wrap”,menu_wrap_selector:”.td-header-menu-wrap-full”,tds_snap_menu:tdUtil.getBackendVar(“tds_snap_menu”),tds_snap_menu_logo:tdUtil.getBackendVar(“tds_logo_on_sticky”),menu_affix_height:48,menu_affix_height_on_mobile:54})?
Greetings Kathrin
Hi,
Yes, that is right, you need to comment the complete part that is referring to tdAffix.init -> https://i.imgur.com/MAdzeea.png
Thank you!
Thank you very much – it works!
Greetings Kathrin
