SVG causing CLS movement

Hi there,

Can you test if the issue is resolved when WP Rocket is disabled?

I think it's a lazy loading issue.

I've disabled WP Rocket and EWWWW image optimizer and the issue still persists.

Can you disable WP Rocket so I can run the site through PageSpeed Insight and try to determine the issue?

Sure thing, deactivated

I'm still seeing WP Rocket activated.

Can you confirm?

Sure, it is deactivated

Hi there,

first try excluding the Logo image from being lazy loaded by adding this PHP Snippet to your site:

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

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

Hi there,

I had deactivated WP Rocket and the issue still persists - added the above but has nad no impact.

Some other plugin or the litespeed cache is lazyloading the image.
Can you disable whatever else may be adding lazyload to test if thats the issue.

I've disabled all plugins that could cause this and the issue persists

First try removing the Retina version of the image, this is not required for SVG and can be one cause.

If still an issue try changing the Customizer > General --> Structure to Flexbox.

This unfortunately does not seem to make much difference - removed the retina logo and changed structures

Hi,

Consider adding fixed width and height attribute to your logo <img>.

You can change the markup of your logo to add attributes by using this filter: https://docs.generatepress.com/article/generate_logo_output/

For example:

add_filter( 'generate_logo_output', 'tu_logo_attributes', 10, 3 );
function tu_logo_attributes( $output, $logo_url, $html_attr ) {
	printf(
		'<div class="site-logo">
			<a href="%1$s" title="%2$s" rel="home">
				<img %3$s width="235" height="100" />
			</a>
		</div>',
		esc_url( apply_filters( 'generate_logo_href' , home_url( '/' ) ) ),
		esc_attr( apply_filters( 'generate_logo_title', get_bloginfo( 'name', 'display' ) ) ),
		$html_attr
	);
}

Here's how to add PHP - https://docs.generatepress.com/article/adding-php/

Thank you - that seems to stop the logo going large to small - however, the CLS issue of the logo still exists - this time, when on load, the logo not being there causes the header to be a certain height, and then to increase in height when the image loads.

I think this could be fixed with CSS to make header on desktop a certain height, can you provide please?