dicyanin

Thank you for the detailed response and uploaded video. With support from your findings, I think I now know the issue here; and it’s not a WordPress issue, as I first thought it was. I think the Lighthouse speed checker is reading the desktop image size, and it is assuming that it is going to stay at that desktop size for when viewing on a mobile; when in reality, it is actually being rendered to a smaller image size by the WordPress engine. But this auto-resize rendering doesn’t get detected by Lighthouse.

Assuming this is the issue, the Largest Contentful Paint on a 3G network of 4.2 seconds in the Lighthouse speed test is a ‘false reading’.

Thanks!
Chris

Unfortunately while the CSS code does change the mobile sizes, it simultaneously shrinks the default desktop image size too. Its interesting about the link and additional images. This would be perfect, but oddly this does not happen on my WordPress. Its not fixed yet but you have pointed alot of breadcrumbs for me to follow. Brilliant help, thanks for your kind and very experienced help. ??

Also, here’s the Lighthouse Speed Test of it:

https://web.dev/measure/?url=https%3A%2F%2Fwww.officialauraglasses.com

You can see the Largest Contentful Paint of that image is hogging the performance by about 4.3 seconds load on mobile. Over 4 secs is quite a while to wait if browsing on mobile. It’s only fast on my mobile because its already been visited and is now cached on the device.

Wow, you’re very helpful, yes here it is:

https://www.officialauraglasses.com

Just to be specific, the JPEG image dimensions are actually 1024 x 232 (not 1050 x 500 as first thought). It’s the big image that dominates the homepage with the words ‘dicyanin replicated Aura Glasses?…etc”

Cheers!

Hi @thelmachido

Thanks very much for your reply and help ?? Good karma on its way to you.

I currently use the Imagify plugin, unfortunately the images are already optimized in that aspect. The problem lies with the dimensions. Because it’s ‘fixed’ at the desktop dimension size of 1050 x 500, and even though the image gets shrunk appropriately on mobile view in editor and on the phone, it is still read by Google Console as 1050 x 500 in dimension size.

I read that some themes, such as Elementor, allow you to create individual image settings for the 3 viewing modes (Desktop, Tablet, Mobile). That I believe would solve this problem. The Twenty Twenty Two theme uses just the one image setting for all three modes. But I’m sticking with the default theme – regardless of its limitations, as I prefer the reliability of a bare bones default theme. I may have to just accept the beefy Largest Contentful Paint issue and suck it up lol. Other than that, it’s very nicely optimized.

I use the default WordPress twentytwenty theme. Cheers Steve

Wow, excellent. I went to ‘Customize’ and the ‘Add CSS’ option was there, code in and boom, exactly aligned how I wanted it to be. Kudos to you sir! Karma on its way to you.

Now there is one more niggle I’m having. The large JPEG banner on my homepage nicely sizes accordingly with the mobile browsing experience.

The issue though is that even if it physically reduces the mobile JPEG size when browsing with mobile, its byte size is still the same as the original larger desktop byte size. Therefore, Google Console basically reads it as ‘you have a massive Largest Contentful Paint, that takes 4 seconds to load up on a 3G network with that ridiculously gigantic 1024×232 image size!’

Is there a way to customize the image size so that it still looks huge on desktop like it already does, but reduces its byte size when being viewed on mobile? Thanks ??

Hi Steve, I am literally a complete noob to the code editor. I have input what you posted into the code editor but its not done anything. Please give a brief step by step instruction if possible, as I have never done code editing on WordPress before (just used the visual editor). I appreciate the free and open help btw. I’m sure you will be richly rewarded in terms of karma.

Hi Steve! Thanks I’ll have a go with that later ??