0

Cumulative Layout shift of 0.437 on desktop site

I don't understand how this causes or how to fix this..

I tried a lot of things like Disabling all plugins, disabling cloudflare cache, etc... I did make sure that everything has width and height set in css and removed all possible transitions also..

When I disable cloudflare, CLS becomes greater than this.

But, Whenever I purge cache, I don't see any CLS in pagespeed but after sometime its back.. and CLS become 1 sec if i disable cloudflare altogether.

Website: https://irfanhabeeb.com Pagespeed: https://pagespeed.web.dev/report?url=https%3A%2F%2Firfanhabeeb.com%2Fios-custom-rom%2F&form_factor=desktop

CMS: Wordpress

CSS which causing CLS is <div id="content" class="site-content">

Help me fix it, I tried too many things till now, but nothing fixes this CLS Issue...

I tried disabling cloudflare cache, It makes the CLS even bigger

Irfan Habeeb
  • 1
  • 2
  • Have you tried any [of this](https://web.dev/cls/#how-to-improve-cls)? You can also [measure your own CLS](https://web.dev/cls/#how-to-improve-cls). – FiddlingAway Jan 01 '23 at 15:44
  • Yes. The problem only occurs sometimes when i test, thats too only on desktop version... – Irfan Habeeb Jan 01 '23 at 18:12
  • Do you have any dynamically added content or scripts which fire on scrolling (or external adds)? – FiddlingAway Jan 01 '23 at 18:15
  • Yes. I delay Google adsense until first interaction.. but even after I disable google adsense, problem's still there... – Irfan Habeeb Jan 02 '23 at 19:13
  • Can you try something like this? First, add that CLS measuring script I linked in one of the previous comments. Then, load the page normally, and scroll through it, all the way to the bottom. Check the console for your CLS measuring script's output. If your script doesn't report anything strange, copy the entire rendered HTML and put it in a text file. Then, keep repeating this, until the CLS issue occurs. Once it does, again, copy the entire rendered HTML into a text file. Then, as the last step, compare the contents of the two files, and see what's different. – FiddlingAway Jan 03 '23 at 09:37
  • CLS Measuring Script? Where? – Irfan Habeeb Jan 03 '23 at 18:33
  • Here: https://web.dev/cls/#measure-cls-in-javascript – FiddlingAway Jan 03 '23 at 18:36
  • I just added the code to my header as script, where will be the log file? – Irfan Habeeb Jan 03 '23 at 19:19
  • The log should be in your browser's console. It should look like this: `'CLS:' ` – FiddlingAway Jan 03 '23 at 19:21
  • The CLS cannot be found when Cloudflare Cache everything is disabled. But only after enabling cloudflare cache... That too only on pagespeed insights and search console. But when browsing, I tried with Many extensions such as CLS Measurer, But nothing found neither on desktop nor on mobile... – Irfan Habeeb Jan 04 '23 at 03:55
  • What about the raw, generated HTML contents of your page? Are there any differences before and after you disable Cloudflare caching? – FiddlingAway Jan 04 '23 at 12:57
  • No differences... But After disabling SVG Icons and Reverting back to Astra Native icons, Problem seem solved. Don't know if it comes back, so far no CLS.. – Irfan Habeeb Jan 04 '23 at 20:43
  • No success so far. Pagespeed still shows CLS of 0.437.. Only when cloudflare cache everything is enabled. I have seen a layout shift with my bare eyes... That sometimes mobile menu shows in the desktop first few ms.. and then it goes back to normal desktop menu. This causes a layout shift of main content
    But I don't know how to fix this and i don't want to change the theme..pls...
     – Irfan Habeeb Jan 05 '23 at 05:48

0 Answers0