Solved CLS With Mobile Menu in DIVI

Hi guys,

I love your work...but when using Divi Blocks to make a header and mobile menu for Divi I end up with horrific CLS issues (mainly on Mobile views) ALl of the speed tests eg. GT and Insights, Litespeed all report around an average of CLS jumping from approx .007 with a standard Divi Global Header (most Divi premade ones) to .4 or .5 when implementing one of your ones? This is mostly on Mobile and Desktop stays in reasonable scores (.06 or so). Is there an answer/solution for this?, considering Google now places CLS pretty highly when ranking your website performance? What's the solution? Oh and yes...I have standard stuff above the fold...no animations, no backgrounds, and no complex layouts ( I leave this till further down the page) What are your thoughts on this? Thanks

 

Yea I don't know what's happening..might be something I am doing? It's a pain as your header design is exactly perfect for this website! works in well. I did what you recommended (although this was already set) created a test page with just text https://webglueux.com/cls/ I tested again and still the same. Thanks for having a look

 

Yea it made the CLS improve a lot...But in the browser Firefox and Chrome the website jumps around when changing pages. Explorer, seems stable? I have 4 computers in the house so tried on them all and the same thing?

 

yea it's a pain! Did you test it also before adding the code? I am going to start a new 'staging site' and just add a new header/mobile menu from Divi Blocks and see what happens.

 

Hi, ya here are the results of a clean Divi site with a default header and a couple of Divi templates to create pages and then after adding Divi.Block Header Menu.

How is "The code basically just hide your page until your initial HTML document has been completely loaded." this a solution? if it doesn't actually address the root cause?

No caching or any plugins on the site, as none of them would block the header loading anyway I guess? Might help defer a little?. This is the same CLS scores I am getting on the other site? Any thoughts? New clean site https://uiuxwebsitedesign.com.au/

 

Hi ya,
Thank you for your time on this it is much appreciated. I will give these suggestions a go later tonight (have to work today! haha). Moving forward is there a way of only calling the mobile menu when required? instead of hiding the blocks in the header.

Curious Question? (just trying to figure out how to correctly use your blocks)

I get that your block system relies on <div> and <span> elements for stying as we change or put together our blocks?, but what if you then manually want to change a lot of the settings once you have imported them into your website? For instance: I want to change the text block for instance that has settings for spacing etc between the H1 and text...remove the H1/H2 text and also all the divi block text? (I like the headings separate so as I can maybe add transitions etc that only apply to the headings) does this break all the extra <div><span> tags?

I wonder this as I have done this throughout my site and then noticed I ended up with or accidentally removed these <div> or span elements or ended up with these tags throughout my text etc that didn't seem relevant anymore and decided to manually remove them all from each imported module thus the 'class' for that module was also not needed?

My question is: Are the blocks meant to be left as they are structured? Are they not to be used as say.....standard templates you then style yourself? cheers

 

Ok cool, thanks for taking the time to explain, was just trying to get my head around the structure for reference. Yeah, I'll have to come up with another solution for the mobile menu I guess as I cannot ignore the CLS considering Google has placed it highly for a website ranking factor. Love your designs though very clean and modern but the headers although excellent are a deal-breaker for me .4 is way too high. cheers anyway.

 

Oh it is most likely something to do with how I have structured the site...so Ill start again and see how I go, thank you so much for taking so much time to give me excellent support, Love your work! Thanks again your support has been amazing! cheers mate (as they say down under)

 

I think I solved it! Bloody forgot WordPress lazy loads natively now which was causing most of the CLS, used wp rockets lazy load which turns off WordPress native lazyloading and excluded all the images above the fold on each page! worked a charm and stopped the jumping! Sorry if I wasted your time. It only occurred to me once I remembered about the new updates WordPress introduced recently.