[Resolved] Use explicit width and height on image elements for svg logo

[maxime]

Hello I’m creating this topic in relation with this post : https://generatepress.com/forums/topic/use-explicit-width-and-height-on-image-elements-issue-in-gtmetrix/#post-1536477

I have this issue though I’m not using a retina logo.

As requested I copied my URL.

Thank you

[Elvin]

Hi,

To remove this warning, you can add width and height attribute to your site logo.

To do that, you can use the generate_logo_attributes filter.

You can add this PHP snippet:

add_filter('generate_logo_attributes', function($output){
	$add_attr = array(
				'width' => '100px',
				'height'   => '50px',
			);
	$new_output = array_merge($output,$add_attr);
	return $new_output;
});

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

You can change the width and height value in the snippet to your preference.

[maxime]

Thank you Elvin it worked like a charm.

The warning still appears but it’s for the mobile version. I’ve read in another post that it couldn’t be changed so for this one I’ll put a .png file.

Have a great day

[Elvin]

Thank you Elvin it worked like a charm.

The warning still appears but it’s for the mobile version. I’ve read in another post that it couldn’t be changed so for this one I’ll put a .png file.

Have a great day

Nice one. No problem. 🙂

[maxime]

Well same problem for the .png file 🙁 I thought it was because it was an svg but turn out it’s the mobile setup.

[Elvin]

It really shouldn’t be a big problem anymore as if you test the site, the CLS score is below 0.025 which is already very good as shown on PageSpeed insight: https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.kinesemarketing.com%2F&tab=mobile

It may be better to focus on other things like reducing initial server response time or style/script optimization as these seems to be the biggest offenders on your site’s page score.

[maxime]

Yes I understand.

For the first point that would be the server and/or CDN if i’m not mistaken.

For the second point

style/script optimization

Are you talking about the autoptimize.css ? If yes it’s okay I was into that as well 🙂 if it’s another please let me know.

[Elvin]

For the first point that would be the server and/or CDN if i’m not mistaken.

Correct.

Are you talking about the autoptimize.css ? If yes it’s okay I was into that as well 🙂

Yes we actually recommend autoptimize. Consider merging CSS or JS files as this can improve performance because the requests for multiple files(stylesheets and scripts) are decreased into a merged file but it requires fine tuning because you may have to exclude some files as they may affect how the site looks.

Especially with stylesheets since selector precedence matters with CSS.

[maxime]

you may have to exclude some files as they may affect how the site looks

The critical CSS if again I’m not mistaken. Yes I’ll have to dig into that.

Anyway, again thank you for your help about the topic’s subject 🙂 and have a great day

[Elvin]

The critical CSS if again I’m not mistaken. Yes I’ll have to dig into that.

Yes that’s the one. It comes with exclusions if in case some stylesheets must be excluded.

Anyway, again thank you for your help about the topic’s subject 🙂 and have a great day

No problem. 🙂

[Author]

Posts