Fixed Logo Size for Desktop / Mobile / Sticky

malikdakdaki

Hello,

I'm optimizing my website via Lighthouse and trying to fix all the issues. So far I was able to implement the recommendations, but there is one thing i could not manage to improve.

I have a high cumulative layout shifting value because the logo images do not have a fixed height/width attribute. For all the other images i added height/width and the CLS Value was affected positively.

How can i set the width/heigth for all the logo variants in Betheme?

I already tried to set the heigth/width with custom css like this:

img.logo-main.scale-with-grid {

1. height: 43px !important;
2. width: auto !important;

}

But still, Lighthouse shows that the logos still lead to high cumulative shifts.

Any suggestions?

Pablo

Hello,

Any WordPress theme can not be fully prepared according to Google PageSpeed Insights/Lighthouse because their guidelines are ridiculous.

Mainly plain html pages are suitable for these guidelines.

If you want to speed-up or make it the most SEO friendly, you should stick to these rules:

https://support.muffingroup.com/how-to/how-to-speed-up-my-site/

https://support.muffingroup.com/faq/builder-seo/

About the logo, you can set the height of logo in the Theme Options>Global>Logo

https://prnt.sc/vu9poe

The width of the logo depends on the image that you use, but it's a good practice to make it equal or smaller than 315px

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next