[Resolved] CSS Class for Image Lazy-Loading Exclusion

[Puneet]

I had removed it when I didn’t see any improvements. Have put the code back again.

[David]

Sometimes you have to wait a while for caches across the networks to update, or you may just be seeing google test a cached version. This is the results i am seeing:

[Puneet]

Strangely, still not reflecting at my end. I will let it hang in for a few days. What is the code doing, actually?

[David]

WordPress uses src-set, which contain the list of various media attachment size URLs, and a sizes attribute that ‘guides’ the browser as to what image to load under different conditions.

The default sizes attribute that WP generates is a catch-all that relies on the image filling 100% of the viewport width. When it does fill the width then the browser generally selects the optimal image size… when it don’t fill the space then browsers have a habit of grabbing a larger image then required.

The code i provided rewrites the sizes attribute to:

(max-width: 360px) 300px, (min-width: 361px) 768px, (min-width: 769px) 1024px, 100vw

Which gives the browser a new rule set for selecting images.
Simply put – on smaller screens we’re asking the browser to use a smaller image.

[Puneet]

Thanks David,
I ended up changing my hosting again and that seemed to have improved the scores for me now. This all seems settled for now at least. Couldn’t help noticing that the properly size images error has disappeared from the mobile section after putting in the code. But it still appears in the desktop tab. Can that be sorted out as well?

I also wanted to express my gratitude for all the help and that too promptly. I have had good support from other themes as well but Generatepress Team has started to feel like family. Great stuff guys and thanks once again.

Regards,
Puneet

[David]

I ran a few tests on the site, and i didn’t see any opportunities for ‘Properly size images’ – if theres a specific URL then let me know.

And thanks for the kind feedback!!

[Puneet]

Not under the mobile section but it shows properly size images under the desktop section.

Example URL: https://geekyfi.com/movies/sandra-bullock-interview-the-unforgivable-netflix/

Though I wouldn’t bother much about it as the overall score is good anyways, LCP and FCP are green and that is what matters.

Closing the ticket. Thanks a ton for your help,

Regards,
Puneet

[David]

I think its just Google and its server caches – ran a couple of tests on that URL and it looks good.
And the scores are great – so i am glad to have been of help !!

[Author]

Posts