[Resolved] Lighthouse Sidebar Image Inappropriate Size

[Maarten]

Dear support,

After I added a picture from my media library in WordPress to the sidebar widget, it shows this warning in my lighthouse chrome mobile tests. I have also copied the path to the image in a HTML widget, but the same warning returns for selected below pages.

The real dimension is 280 X 281 and it is the only real format available in WordPress as no other size of this profile image have been auto created.

No special image plugins are used or anything that can effect the image, besides the ones below.

The HTML code for this image inside the Image widget is this:

img width=”280″ height=”281″ src=”hxxp://127.0.0.1/site.local/wp-content/uploads/2020/10/profile.jpg” class=”image wp-image-11 attachment-full size-full” alt=”profile” loading=”lazy” style=”max-width: 100%; height: auto;”

This does not show when running a Desktop test as this will really give you 100/100/100 for all options, but running the same test for Mobile it gives me that my Image size it not correct and I have no idea how to fix it.

Widget extra’s:

I have also removed the checkbox added by q2w3-fixed-widget plugin to make them sticky but that has no effect with or without them sticky or not.

widget-options plugin is also installed, but for this test no options were selected so it shows these sidebar widgets on all pages.

Sidebar widgets in use:

1 X Image Sidebar, and below that
1 X HTML Sidebar

Here are my findings:

Homepage
Empty only H1 Headline = Error below in Mobile test

Blogpage
Empty only 1 blog Listing = Error below in Mobile test

Aboutpage
Has some content on the page = Warning is gone in Mobile test ! <——————-

Contactpage
Empty only H1 Headline = Error below in Mobile test

Here is the lighthouse screenshot after the Mobile test:

Any idea how I could fix this?

Thanks for the help.

[David]

Hi there,

can you link me to a page where i can see the issue ?

[Maarten]

Hi David,

I have the page not live only working and developing on localhost at this moment.

I did look in Google for the part about responsive images and there are a lot of questions about this showing up in a lighthouse test but not a real solution have been found.

The weird thing is, when the page is just empty have only H1 the sidebar widget that has the image will give this error in lighthouse test for mobile.

If the page like my test (about page) has some content and you show the sidebar image and run the lighthouse mobile test -> the error is gone.

Strange isn’t it?

[David]

That is very strange. Let us know if the issue persists when you move to a live site and we’ll take a look.

[Maarten]

Thanks David.

I did some extensive deep testing in incognito and yeah if there is no content on a page but there is a sidebar widget that has an image (with link or without a hyperlink in it) it will report this error in a lighthouse test for mobile.

The HTML contains all valid data like width, height, alt and lazy-load (Maybe it is lazy-load no idea)

I find it hard to debug this as I have no idea where to look for in HTML if the page is empty. There is also no notices by WP anywhere.

I will try some more things when I have time free and will report when I find what is happening as this is strange. I will do this test without any customization for GP and without GP Premium as well.

Maybe it ‘sees’ the separate content boxes or flex boxes as one and not separate. I have no idea.

Will let you know.

Thanks for the support.

[David]

Sounds like a localised issue – might be worth doing a Tools > Site Health check to see if any issues related to image processors are listed.

But let us know what you do find!

[Maarten]

Thanks David. As you may know the module Imagick is not really used on localhost (maybe I should add it to my work dev versions)

But I will test it again. Also added some info about the need for double import the settings file in GP Premium to have all features be active in my other topic.

If you like me to make a new topic for it of course i will but I just wanted to let your team know that my debug log got some information when I import the json file.

For the image and sizes, I do not think is a real problem as you see that even Google’s own servers report that the jQuery used in WP is not secure but it is as some patches have been applied according to the WP team.

One thing I also know 99% sure is that GoogleBot will process W3C validation for HTML and CSS. Not a lot know this but they will (they call it the web is ‘broken’ we need to fix it using our own HTML Lexer)

This tells me that the more time they spend processing bad code the more money it costs for Google and it may then have effect on rankings.

That is why GP is so great. Specially in combination using WP Super Cache and Autoptimize (Yes, WP Rocket is great but does not give any more benefit when it comes to speed than the free option atleast untill now in my tests)

When you have time free and a interest for it, have a listen to the following podcast by Google engineers. They explain in detail how Caffeine works. The protocol buffers and HTML lexer are very interesting and that tell’s me that good and fast code does make a difference.

But they just have to add these things to Lighthouse. Maybe I can send them an email telling them about this image issue but yeah I still do not think it is important.

The protocol buffers seems not to check for any of that but the HTML Lexer might do.

Here is the link:
https://www.seroundtable.com/google-what-caffeine-does-30231.html

(Starts at 9 second mark)

If I find some new info about the image dimension I will add it to this topic.

Regards.

[David]

Your welcome
And thanks for sharing the info and podcast!

[Maarten]

You are welcome.
They did a new one again, nice look on how Google technical works. Pretty impressive!

When they talked about structured data (last Podcast), I think it is already inside GP as https schema support. But you see they do prefer extra schema were possible. I did not yet find a way to add schema to all added images in WordPress (It might be something for the future development for GP, just an Idea of course)

When I have found a solution for the mobile image dimension notice or some more info after this weekend I will add it to this post.
Thanks for the help.

[David]

Awesome – thanks for the headsup 🙂

[Maarten]

It is so funny, every site I check now, I look at source and I make it almost a game for me how fast I can detect the theme used and 9 out of 10 times I look at it 2 seconds and say it is GP!! And by looking at ‘generate-style-inline-css’ I found it : )

.. And than think, hmm the design is very nice and not so common. I do like the build in theme designs by Premium but it would be great to have it expand a bit more if possible, specially for homepage designs.

The only thing I struggle still with sometimes is not the blogs so much but what to put on the homepage, that is the only thing I did like about the old genesis and even thesis using simple widgets.

I might ask in a new topic how I could build that. Just simple 4 widgets on the homepage and 1 for sign up and that’s all if I still not like using Gutenberg but use classic Editor.

Anyway, thanks for helping with this and I will open this topic again if I find out why on a empty page using a sidebar image the lighthouse mobile test version shows that the image have a wrong size.

If someone on Google is looking for it and finds this post, now they know why : )

Maybe remove the image sidebar with a plugin like sidebar-options and only show it if the page has more content than just a H1.

For now that is my final conclusion.

For the part about my double need for import of settings file for premium, I send the email to Tom. Will wait for his reply.

Hope you like the Podcast by Google, I think this one is 100% the best on technical insides how the platform is working behind the scenes at least as much as they are willing to share.

Have a great Sunday!

Regards.

[David]

Thanks again for sharing!

[Author]

Posts