- This topic has 17 replies, 3 voices, and was last updated 3 years, 2 months ago by Leo.
-
AuthorPosts
-
October 28, 2020 at 12:07 pm #1508402Anders Nielsen
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?
October 28, 2020 at 12:10 pm #1508408LeoStaffCustomer SupportHi 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.
October 28, 2020 at 12:13 pm #1508413Anders NielsenHi 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 π
October 28, 2020 at 12:20 pm #1508419LeoStaffCustomer SupportHmm I’m not sure unfortunately.
I can see that your CSS is indeed working:
https://www.screencast.com/t/2KGnLyvAtNot really sure why Lighthouse is not reading it.
October 28, 2020 at 11:35 pm #1508824Anders NielsenLighthouse 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?
October 29, 2020 at 2:56 am #1508957DavidStaffCustomer SupportHi 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 ?October 29, 2020 at 9:25 am #1509850Anders NielsenHmm, can’t see it.
But nevermind – I will use a png for know.
October 29, 2020 at 10:31 am #1509927DavidStaffCustomer SupportIf 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 π
November 1, 2020 at 1:01 am #1513112Anders NielsenHi 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?
November 1, 2020 at 7:43 am #1513383DavidStaffCustomer SupportHi 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.
February 2, 2021 at 12:32 am #1642498Anders NielsenFebruary 2, 2021 at 6:35 am #1642879DavidStaffCustomer SupportHi 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.
February 2, 2021 at 8:27 am #1643160Anders NielsenHi 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
February 2, 2021 at 11:30 am #1643349LeoStaffCustomer SupportFebruary 2, 2021 at 11:39 am #1643353Anders NielsenHi Leo
Thanks – but for some reason it does not work.
-
AuthorPosts
- You must be logged in to reply to this topic.