Archived topic

How to add width and height to logo/sidebar

14 replies · Started by Leif on October 5, 2021

Viewing posts 1–15 of 15

October 5, 2021 at 9:11 pm #1954149

Hi there google page speed is always complaining to me about slow CLS and mainly points at not having image height and width specified.
The only images at the top of my page are my header and side bar image. So I was trying to add some CSS to control the size but having some issues and would appreciate some help.

for the sidebar I tried to add this but wasn't convinced it did anything:

#right-sidebar .widget_media_image:first-child {
    margin-bottom: 0;
    padding-bottom: 0;
 height: 177;
width: 300;
}

And I had no idea how to add the CSS to the header/logo image.

October 5, 2021 at 10:16 pm #1954175

Hi Leif,

Can you link us to the site in question? So we can check its Google PSI result to see what image/s is/are being flagged. :D

You can use the private information text field to provide the details.

Note: CSS won't address that issue. height and width has to be on img tag's attribute. :D

October 6, 2021 at 8:13 pm #1955399

Oh my bad, I meant to link that. It's in the private section below :)

October 6, 2021 at 8:45 pm #1955416

Thank you.

Can you share the GeneratePress and GP Premium your site is using?

Also, can you try temporarily disabling ShortPixel CDN and let us check?

October 7, 2021 at 6:57 pm #1956594

GP premium 2.03
GP 3.0.4

ShortPixel deactivited :)

October 7, 2021 at 9:01 pm #1956634

Strange, this should've been fixed w/ the latest release.

Can you try deleting the logo and reupload it again?

October 9, 2021 at 11:28 am #1958418

deleted and reuploaded. I actually resized the original image while I was at it to make it the width I want to display (doesn't help with the issue google has but seemed smart to do).

October 9, 2021 at 2:57 pm #1958508

Weird. That issue should have been fixed as Elvin suggested.

Are you able to disable all plugins and activate the parent theme (if you are using a child theme) for us to take a look?

Thanks.

October 21, 2021 at 10:27 am #1971011

Sure can do. I put some info in the secret section :O

October 21, 2021 at 11:24 am #1971057

Are you able to disable all plugins?

Please start a staging site if possible.

Thanks!

October 21, 2021 at 12:09 pm #1971107

I don't have any staging site software :(

All the plugins can be disabled (you have the rights). Please re-enable them when you are done though :)

October 21, 2021 at 5:01 pm #1971317

All the plugins can be disabled (you have the rights). Please re-enable them when you are done though 🙂

I have to say this isn't ideal to do on a live site as we risk losing some settings if we do so meaning you may have to potentially redo settings that are lost. That's why we ask for a clone of the site on a staging site. So the live one isn't affected. :D

To confirm, are you sure this is fine?

Note: Your site is swamped with plugins and the issue seems shortpixel's CDN, SG Optimizer + Webcraftic Clearfy settings related.

October 21, 2021 at 7:00 pm #1971387

Swamped with plugins! Oh boy, I thought I was doing pretty well!

I confirm it's fine. Shortpixel and SG optimizer go back to original settings when re-activated anyways. Even if I do it's pretty easy to remember :)
I did try to deactivate both of those and google page speed kept telling me that height and width weren't defined on the header image.

I deactivated Clearfy just now too. It doesn't really do much.

October 22, 2021 at 5:50 pm #1972370

Hii, did you guys change something? I did a page speed test and the Cumulative Layout Shift numbers are AMAZING right now, but google pagespeed still gives the complaint about no height/width definitions.

I guess if you changed something, it worked regardless of what Google's recommendations are :P

October 24, 2021 at 7:52 pm #1974012

I only purged cache > disable > re-enable the optimization plugins. That may possible improved a few things.

But as for the issue on the logo: It's quite strange that it doesn't work even if when uploading a new logo. I've tried building a fresh site with similar settings except its not using Shortpixel, Webcraftic Clearfy, and not hosted on Siteground (hence not using SG optmizer) and it worked fine. It may be related to some combination of settings that are on the cpanel of the site. You may have to ask web hosting service provider help for this.

As for the same issue but with the post image (on your WPSP), make sure you don't use Image height and width fields on WPSP, it's an obsolete feature Tom plans to remove completely as it causes the exact issue you're site is getting on Google PSI. (it removes the width and height attribute to the img element and applies it to the image file directly and Google PSI flags it.) This feature is actually replaced entirely on WP Show Posts' beta version - https://wpshowposts.com/wp-show-posts-1-2-0/

This archived topic is closed to new replies.

Start building better websites today.