[Resolved] To Get 100/100/100/100 in Lighthouse

[Maarten]

Hello all,

No idea how to put this as a tip, but here it is.

Let me start by saying GeneratePress is the best theme in the world!

But…

If you really want to get 100/100/100/100 scores in Lighthouse even without Autoptimize in a test-phase, you need to check the error in Lighthouse Chrome named – Displays images with inappropriate size.

You will see this notice when you do a mobile Lighthouse run and also have e.g. an empty page or just the blog roll with a sidebar with image widget on top.

Go to Widgets and add an Image Widget to the sidebar on the right.

Use a plugin to make it sticky, good idea if you want to sell some affiliate product.

Remove all other widgets that we do not need, you can have a text widget or HTML widget below it.

If you run Lighthouse in Chrome for the Desktop version you will see no errors but if you run the same for Mobile you might see the error about your size for the image not being correct for mobile.

I spend really many days as I wanted to fix this as it was the only thing that kept me from 100% speed.

It is pretty funny when you found out you just need 1 line of code in CSS, damn.

If you use a child theme, add the following on top of all your CSS:

img {
object-fit: contain;
}

The IMG part should go on top.

Yes, PHP is read from top to bottom, I have no idea about CSS but if this is the first line a browser see’s it is always good to have it on top because of speed even if it is just 0,0001% in effect.

Because the image in the right sidebar is shown first we also want this line of code to be first in CSS.

If you want to win in Google, just make sure you get 100% in Lighthouse as much as possible.

If your first score is not 100 but 97 First Contentful Paint, it is still fast, anything above 90% is fast without any autoptimize plugins or caching.

Now we need to have the base as fast as possible and only then you setup Autoptimize.

Not before it!

You need to have your Theme as fast loading and error-free as possible, you can be sure Tom did a great job and do not need to run W3C Valid HTML 5 test anymore as it is always 100% correct.

The biggest competitor cannot even get HTML validation correct, the perfect reason to stay with GeneratePress till you are 100 years old ; )

If you still do like to check:

Then go to the following for HTML
https://validator.w3.org/

And the following for CSS
https://jigsaw.w3.org/css-validator/

If is says error free it IS error free, the notices you see below are not important and just for other browsers reading your page e.g. Firefox.
Just not important enough to worry about.

These are the official sites for HTML and CSS validation.

Yes, I know Google does/might not really look at it but trust me, if your code is more clean and error free it will help GoogleBot processing and in turn less money and energy to spend on your page in Google render servers, so this might give you a boost as you do help Google spend less crawl money to process your page in Caffeine (I do not want to get to complex here but just make sure your site is faster than your competitors)

Now, test Home – Blog – About – Contact Page – Disclaimer – Privacy – Terms

Then test, a Post and Then test Category Page for that post.

You do not need to test anything else.

Make sure you test in Lighthouse Desktop and also Mobile for above pages.

You might score lower for a blog-post with a lot of images but that can be easily fixed.

So, add the CSS line and you have no more errors with sidebar images using the Image widget in WordPress.

Good luck!

[Tom]

Glad you’re getting good results! Thanks for sharing your tips/process here, I’m sure someone will find it helpful 🙂

[Maarten]

Just a little note to this Tom, if you could add the one CSS line in GP than it would fix this Lighthouse problem for every user using the Theme.

I did some more tests and the error will show if the page next to the sidebar with image widget is empty e.g. the H1 is removed from the homepage or current active page while showing the right sidebar with image / banner widget on top.

Here is the code:

img {
object-fit: contain;
}

Remember this only shows up on Lighthouse Mobile Performance Testing using Chrome.

Regards.

[Maarten]

Please add this in a update CSS if you will Tom.

Regards.

[David]

Hi there,

i cannot replicate that particular issue – i admit i haven’t added an JS sticky code, as generally today CSS does that job well…. do you have a site where i can see whats happening ?

In regards to adding that rule to the themes styles, that would apply to all <img> elements in a site, unless the a more specific CSS is used to override that. By default a browser will use the fill value which is the general expectation for image sizing behaviour. And changing that could cause more issues than it resolves. You should only apply object-fit in very specific use cases.

[Maarten]

Hi David,

At this moment I am moving places but I can let you know what is happening with and without that line of CSS.

If the Homepage or any page is empty just has heading Home and you use the right sidebar en put there an Image widget on top and below a HTML code widget then would run a mobile lighthouse test in Chrome, you would see the following:

Even if you put width and height in the image code, it would still show this message.

You will also see this with the blog-roll page sometimes if I remember correctly.

Here is some more information:
https://eurowebpage.com/blog/displays-images-with-inappropriate-size

Even when you try to set the correct ratio, the below does not fix the problem:
https://web.dev/image-aspect-ratio/

The CSS line:

img {
object-fit: contain;
}

Does fix the problem.

Regards.

[David]

I cannot replicate that issue locally on a clean install with GP. The issue sounds more like a problem with the image HTML being output possibly missing the width/height attributes and then some CSS at play.

If you have a test site where i can see the actual problem then i can take a look whats going on.

[Maarten]

Thanks for the reply David.

When I am back home I will do a test again, maybe something has changed on Google’s calculations, so I will test again.

Will let you know as soon as possible.

Thanks for taking a look at this.

Regards.

[David]

No problems 🙂

[Maarten]

I found the problem and if you have seen this I will remove this post as it does not apply anymore.

Here is what was going wrong:

I put an image in the Image Widget with the following size ->_280X281_profile.jpg

When I change this picture to -> 560X562_profile.jpg

The problem is gone.

Clean install with GP Free Theme and no plugins or setting changes to WP.
Created empty pages Home, blog, about and contact.
Put 1 image widget in right sidebar with no Title.

It seems for chrome lighthouse mobile test that if the imnage is very small, like 280X281 it gives the error about sizes.
If the image is 560X562 it seems to not give this message.

At least in my tests here.

Maybe to small images in sidebars do not scale well, I have no idea why but I just must make sure all my images are not 280 px small and in a sidebar.

If this happens to you as well, we must just use bigger images than 280X281 Px.

Regards.

[David]

Thanks for feeding back Maarten – we’ll be keeping an eye out for this kind of issue 🙂

[Maarten]

Thanks! I will close it and will test some more images with small sized versions when I have more time.
If it happens than we know it is the size of the image.
Will let you know.
Have a great day and thanks for the great support!

[David]

Glad to be of help – have a great day too!

[Maarten]

Dear David, I found what the problem was.
I was using an old Chrome browser. I tested it with the latest one and now the message is gone.

I do still need to use a child theme for the following:

1) Getting links with underline on hover
2) Getting bullet-points centered in Widgets
3) Moving a sticky sidebar that is viewed on mobile below all content

3 Specially when using: q2w3-fixed-widget with sp-display-widgets plugins.

That last one is needed otherwise when making it sticky it will move in front of the footer content.

.inside-article p a:hover,
.inside-article p a:active,
.inside-article p a:visited {
text-decoration: underline;
}
.taxonomy-description p a:hover,
.taxonomy-description p a:active,
.taxonomy-description p a:visited {
text-decoration: underline;
}
#right-sidebar a:hover,
#right-sidebar a:active,
#right-sidebar a:visited {
text-decoration: underline;
}
#right-sidebar ul {
margin: 0 0 1.5em 3em;
}
#right-sidebar ul li {
list-style-type: disc;
}

@media (max-width: 1000px) {
.site-content {
flex-direction: column;
}
.site-content .content-area,
.site-content .sidebar {
width: 100%;
}
}

That is my CSS.

I have some options for the theme in functions but they could be replaced by a plugin, but I like the functions better.
I use the functions file to auto-set the correct Disclaimer, Privacy and Terms page locations in the footer bar.
I also have a function without using classic editor plugin to turn Gutenberg on and off very fast with 1 switch on the fly.

And removing the URL field in comments.

But my CSS is most important as I prefer the bullet-points in sidebars are centered and display the bullet as well using
list-style-type: disc;

And yeah, I get more conversions with my links when in my niche I use blue and underlined, just like in Google search-results listing. They er used to that in my niche.

If that would be in GP Premium I would not use this CSS of course, but for now I need to use it like this.

Anyway, thanks for the support!

[Elvin]

I do still need to use a child theme for the following:

1) Getting links with underline on hover
2) Getting bullet-points centered in Widgets
3) Moving a sticky sidebar that is viewed on mobile below all content

Assuming all of these only need CSS, a child theme isn’t necessary.

On our brief guide to adding CSS here – https://docs.generatepress.com/article/adding-css/ – You can either use a plugin, a child theme’s style.css or simply use the additional CSS area on the customizer.

[Author]

Posts