lighthouse warning logo

[Anders]

Hi

Lighthouse is giving a warning about height and width are not set for the logo.

I have tried setting a css for the logo:

.site-header .header-image {
    height: 42px!important;
	width:200px!important;
}

img.header-image.is-logo-image  {
    height: 42px!important;
	width:200px!important;
}

But the warning is still there.. Any chance you can help – making the settings correct?

[Leo]

Hi there,

GP sets the width by default using the width slider in the customizer and set the height to auto.

I really don’t think you need to worry about that warning.

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

[Anders]

Hi Leo

I understand… but I would still like to fix it, as it gives a small penalty to Cumulative Layout Shift.

I know it’s a small thing, but creating a full 100 all lighthouse – is some kinda cool 🙂

[Leo]

Hmm I’m not sure unfortunately.

I can see that your CSS is indeed working:
https://www.screencast.com/t/2KGnLyvAt

Not really sure why Lighthouse is not reading it.

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

[Anders]

Lighthouse is not reading the css , as the widht and height are added to the HTML, and the values are emthy.

<img class="header-image is-logo-image" alt="alt" src="/wp-content/uploads/logo.svg" title="title" width="" height="">

I changed my logo to a png file – and the error was gone.

Could this be a small bug in the costumizer, when using SVG as a logo file?

[David]

Hi there,

GP uses the wp_get_attachment_metadata to output the Width and Height attributes of the logo.
If you go to your Media Library and select the SVG logo – does the images Attachment details display the Width and Height attributes ?

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

[Anders]

Hmm, can’t see it.

But nevermind – I will use a png for know.

[David]

If the width and height is missing from those details then it means the SVG is saved without those sizes in its viewbox.

But if PNG is working for you then thats good 🙂

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

[Anders]

Hi David

Now I get a lighthouse warning about the .png logo to set widht and height?

“Set an explicit width and height on image elements to reduce layout shifts and improve CLS. Learn more”

I use autoptimize – and have disabled the logo from lazyload.

Do you have any idea what I can do to remove this warning?

[David]

Hi there,

that will be the Mobile Header logo, which we don’t set a width and height attribute, as its size is defined by the Menu Item Height. As its space is defined by the Menu it won’t cause and CLS issues, whereas setting a height may do. The warning can be ignored.

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

[Anders]

Hi @david and @tom

This is the last warning I have on my site… I would like to fix it.

Is there a way – or a future upgrade of generatepress that will solve this?

[David]

Hi there,

i provide a PHP Snippet here that allows you to set width/height attributes:

https://generatepress.com/forums/topic/how-to-set-height-and-width-for-the-logo-image/#post-1563234

The Site Header / Nav system is up for review, so we’ll take this into account when we look at updating the nav.

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

[Anders]

Hi David

Thanks it solves the issue for the mobile header… Do you have a snippet for the desktop header logo too?

img.header-image.is-logo-image

[Leo]

Try this:
https://generatepress.com/forums/topic/svg-causing-cls-movement/#post-1545284

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

[Anders]

Hi Leo

Thanks – but for some reason it does not work.

[Author]

Posts