[Resolved] High Cumulative Layout Shift

[Joakim]

Hello,

I’m struggling with high CLS for both mobile and desktop, tried to solve it using the forum – but nothing has worked out.

It seems like it has something to do with the menu and logo. Took away the menu name to give more space for the logo, but no success.

It is shifting one row under the header (when looking into dev tools).

Thanks, Joakim

[David]

Hi there,

couple of things:

1. You logo is being lazy loaded, if that is a WP Rocket option then you can add this PHP Snippet to stop that:

function rocket_lazyload_exclude_class( $attributes ) {
	$attributes[] = 'class="is-logo-image"';

	return $attributes;
}
add_filter( 'rocket_lazyload_excluded_attributes', 'rocket_lazyload_exclude_class' );

Adding PHP: https://docs.generatepress.com/article/adding-php/

2. Looks like you have Critical CSS enabled in WP Rocket. Unless you manually configure this you will have issues. Disable this option.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Joakim]

Thanks David!

Already added the function, but disabled “Optimize CSS delivery” in WP Rocket and it worked like a charm.

Thanks for great support!

Br, Joakim

[David]

Glad to hear that!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts