Set an explicit width and height on Logo to reduce layout shifts

  • Hi everyone,
    Its my first-ever post on this forum.

    I have been working on WordPress website. Upon using the PageSpeed Insights it says, ‘Set an explicit width and height on image elements to reduce layout shifts and improve CLS’. It’s referring to my website logo.

    I have seen few posts on this forum and gone through some external links, however, I’m not getting how to solve the issue as I’m not a technical guy. Can anyone guide how to do it step-by-step.

    Yesterday, I changed the website logo from png to WepP and compressed it to 3Kb, and it’s still showing the FCP to 3.8. I read that changing the logo extension and compression will reduce the FCP but no success for me.

    • This topic was modified 2 years, 10 months ago by formanite22.

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)

  • Personally I would be more concerened about the performance indicators than the logo dimensions.

    You need to add the dimension to the header, or navigation file – it all depends on what theme you are using. What theme are you using?

    Typcially you need to look for a line that looks like this:
    <a>" itemprop="url"><?php FLTheme::logo(); ?></a>

    In your case, I would add this in your custom CSS:

    .site-logo img { 
	height: 52px;
	width: 250px;
}

    You can also try a plugin:
    https://www.ads-software.com/plugins/specify-missing-image-dimensions/
    and wp-rocket has htis option as well:
    https://docs.wp-rocket.me/article/1366-add-missing-image-dimensions

    Thread Starter formanite22

    (@formanite22)

    Thanks!

    I’m using Delivery Lite theme.
    Can I run more than 1 CSS in the Customized CSS. Does it contribute to the site slowness?

    And how to resolve that FCP LCP issue? Though I did customize my logo.

    • This reply was modified 2 years, 10 months ago by formanite22.
    • This reply was modified 2 years, 10 months ago by formanite22.
    • This reply was modified 2 years, 10 months ago by formanite22.
    • This reply was modified 2 years, 10 months ago by formanite22.

    You can use the css I sent, or you can create a child theme and navigate to this file:
    /wp-content/delivery-lite/inc/template-tags.php
    and change line 68 from this:
    echo '<img src="' . esc_url( $logo ) . '" alt="' . esc_attr( get_bloginfo( 'name' ) ) . '" />' . "\n";

    to this:
    echo '<img width="250" height="50" src="' . esc_url( $logo ) . '" alt="' . esc_attr( get_bloginfo( 'name' ) ) . '" />' . "\n";

    See screenshot:
    https://postimg.cc/DSWwNT15
    Move all this crap to the footer.
    Your home page is 554 lines – and the <body> tag isn’t loaded until line 308!

    Thread Starter formanite22

    (@formanite22)

    Thanks!

    For now, I used your css in the Custom CSS, until I study how to create a child theme as I have never done it before.

    Sorry, but regarding the screenshot, which php file are you referring to? As I said earlier I’m a not a technical guy and don’t understand this coding stuff.

    Also do you think this FCP LCP issue has to do which my site theme?

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Set an explicit width and height on Logo to reduce layout shifts’ is closed to new replies.