[Support request] SVG causing CLS movement

[William]

Hi there,

I uploaded an SVG logo for my site here. Since loading, I notice there is a CLS movement of the logo going from big to small – why is this the case with such a SVG logo on Generate Press and can it be fixed please?

Kind regards,

Will

[Leo]

Hi there,

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

I think it’s a lazy loading issue.

[William]

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

[Leo]

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

[William]

Sure thing, deactivated

[Leo]

I’m still seeing WP Rocket activated.

Can you confirm?

[William]

Sure, it is deactivated

[David]

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' );

[William]

Hi there,

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

[David]

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.

[William]

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

[David]

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.

[William]

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

[Elvin]

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/

[William]

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?

[Author]

Posts