Default Sydney Theme Has a Big CLS (Cumulative Layout Shift ) Problem

I’m trying to fix CLS problems with a Sydney themed site. The theme is doing something odd with div id=“content” class=“page-wrap” which causes layout shift problems.

It seems to be a fundamental problem with this theme though, as I ran the theme demo page through PageSpeed and it scored very badly on CLS (desktop and mobile):-
https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fdemo.athemes.com%2Fthemes%2F%3Ftheme%3DSydney

What can we do to fix this one?

OK, after much messing around with this… the problem is actually the way you’re adding .header-clone. It causes the whole page layout to jump (hence the CLS).

In this case the whole site is set to ‘no header (only menu)’ so I’m not sure what purpose the .header-clone block serves. But hiding it and adding margin to .page-wrap fixes the problem.

Hi,

Apologise for the belated response.

Sydney theme has been needing this due to design purpose on the sticky header part. You can hide this on your site by adding the below CSS code to Appearance > Customize > Additional CSS from dashboard (/wp-admin).

    .header-clone {
       display: none !important;
    }

Hope that helps.

Regards,
Kharis
aThemes Support