[Resolved] lighthouse warning logo

Home Forums Support lighthouse warning logo

  • This topic has 17 replies, 3 voices, and was last updated 1 month ago by Leo.
Viewing 15 posts - 1 through 15 (of 18 total)
  • Author
    Posts
  • #1508402
    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?

    #1508408
    Leo
    Staff
    Customer Support

    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.

    #1508413
    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 πŸ™‚

    #1508419
    Leo
    Staff
    Customer Support

    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.

    #1508824
    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?

    #1508957
    David
    Staff
    Customer Support

    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 ?

    #1509850
    Anders

    Hmm, can’t see it.

    But nevermind – I will use a png for know.

    #1509927
    David
    Staff
    Customer Support

    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 πŸ™‚

    #1513112
    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?

    #1513383
    David
    Staff
    Customer Support

    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.

    #1642498
    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?

    #1642879
    David
    Staff
    Customer Support

    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.

    #1643160
    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

    #1643349
    Leo
    Staff
    Customer Support
    #1643353
    Anders

    Hi Leo

    Thanks – but for some reason it does not work.

Viewing 15 posts - 1 through 15 (of 18 total)
  • You must be logged in to reply to this topic.