Archived topic

High Cumulative Layout Shift

3 replies · Started by Joakim on November 25, 2020

Viewing posts 1–4 of 4

November 25, 2020 at 2:01 am #1545725

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

November 25, 2020 at 2:17 am #1545764

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.

November 25, 2020 at 2:26 am #1545789

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

November 25, 2020 at 2:47 am #1545809

Glad to hear that!

This archived topic is closed to new replies.

Start building better websites today.