CLS issues on divs and sections

Dinophox · April 12, 2023, 7:02am

Hey guys, I have just build this website and when I’m looking in pagespeed.dev there is quite a big CLS on desktop, and it’s also visible when you are navigating the website.

Why I’m asking here is because it’s been build in bricks of course but the CLS is on div, not images or anything else, see image:

Here is the link in case you’d like to test it yourself: https://www.taxreliefhelpers.com/

I don’t fully understand it, why I div would have such big CLS.

Is there anything I can do about it?

Thanks

Patric · April 12, 2023, 7:12am

Hi

Web page speed scores are one thing.

But page responsiveness in the real world is another thing, in my opinion.

Your page loads instantly on my device here, I wouldn’t know where / why it should load any faster.

Cheers

Patric

Dinophox · April 12, 2023, 7:54am

Hi Patric,

Thanks for your reply.

I know the speed is good, and I’m not much concerned about that, but the CLS is bugging me a little. Not sure whether that bricks fault or mine when building and setting up the website or any other fault.

Would like to understand it to avoid it next time.

wplit · April 12, 2023, 9:15am

It’s because most of the page CSS is being added at the very bottom of the page instead of inside of the head where it should be. This means the HTML is visible for a split second, with a lot of styling missing (known as FOUC). I can see it when I visit the page with browser cache disabled.

Attaching a screenshot to show what I see when the page first loads, and where the CSS is for a lot of the default Bricks styles…

Dinophox · April 12, 2023, 9:19am

Ok, thanks!

And is there anything I can do to load it before?

Probably identify the CSS file and preload it with perfmatters?

Could this be a solution?

Thanks

wplit · April 12, 2023, 9:21am

it’s in the head by default, so it must be the performance plugin setting minifying it and deciding to put it in the footer. (probably to trick the page scores in thinking less CSS is being loaded, but causes this type of issue)

Dinophox · April 12, 2023, 9:41am

I’ve taken the screenshots before activating the caching plugin and perfmatters.

Always trying to do any tests before activating any performance plugins, that’s why the CLS is bugging me because it’s there by default.

wplit · April 12, 2023, 11:33am

the URL for the css at the bottom is…

../wp-content/cache/www.taxreliefhelpers.com/wpfc-minified/79xqr353/4kuyg.css

Whatever ‘wpfc’ stands for, is the cause of the minifying and putting it in the footer.

edit - could be the wp fastest cache plugin?

Dinophox · April 12, 2023, 12:13pm

That may have been during your testing. I have disabled wp Fastes cache and perfmatters.

Now it’s only bricks, but the CLS is still there.

I keep it disabled in case you want to have a look again.

ST90 · April 12, 2023, 12:50pm

It’s really like wplit says a problem with a performance plugin.

I have the same problems with the CLS value in desktop view with WPRocket.
Mobile I get always 100%
When I deactivate WP-Rocket, I get 100% in the desktop view. But then the mobile value drops.

I haven’t had time to test the individual settings yet, but maybe it really is the setting for “minifying CSS”.

Dinophox · April 12, 2023, 3:52pm

I didn’t have performance plugin installed when taken the image, and currently they are all disabled.

It’s definitely not any performance plugin. Maybe a setting or my development fault, not sure. But would be great if I could figure it out.

wplit · April 13, 2023, 4:12am

looking at it again, if you look at the screenshot i gave, the main thing that is missing when the page first loads is the form.

And the section height, and all the sections below it that are coming up on your pagespeed report would be affected by that form going from 0 height to whatever height it eventually is when it loads. It all moves as the form changes height.

Try adding a min-height on the form, or a div around it so that the height is the same before the form loads as it is after it has loaded.

Dinophox · April 13, 2023, 7:23am

wplit Thanks!

This has sorted the problem! I’m in green numbers again.

I understand what CLS stands for, but haven’t thought this could happen.
Now I have learnt something new and will apply it for the next projects too.

Really appreciate taking your time to explain it, guys!