Improving image load times

Hello @bastecutfold

Thank you for reaching out and I am happy to help!
Just to mention that the performance and use experience is much better then before (When I checked the website in the other forum topic)
There are a lot of aspects when it comes to optimizing images. Given that google page speed is also changing the metrics from time to time and adding new things that you need to focus on means that this is an everlasting proccess.

Again I’ve checked and tested the website and there are several things the google is complaining about when it comes to images. The weight (size inm kb or MB) is important, however, you also need to make sure to address the following:

Largest Contentful Paint image was lazily loaded – I can see that the Lazyloading is not enabled in the W3 Total cache, so this means that the Lazyload is enabled somewhere, and this may be some other plugin or a theme. I would advise you to check this and preferably add skip-lazy?class?to this specific image.

Largest Contentful Paint element – This image (the same one for lazyloading) is the LCP element and therefore should not be lazuloaded (important for scrolling so that images do not load until interacted), and instead should be preloaded.
In W3 Total Cache Pro, there is a preload option that you can use to preload the image and reduce the LCP.

Serve images in next-gen formats?– This means converting the images to webp format. This is also available in the W3 Total Cache and you can enable this option in the General settings and covert the images so they can be served as webp. This is also a big impact on performance.

Properly size images – . Avoid using?Full Size?images unless the dimensions are adequate for their usage and make sure that the images are properly sized

I hope this helps and let me know if you have any other questions.

Thanks!

Thank you! All of this is a little bit over my head, so if you don’t mind a few follow up questions…

Largest Contentful Paint image was lazily loaded – I can see that the Lazyloading is not enabled in the W3 Total cache, so this means that the Lazyload is enabled somewhere, and this may be some other plugin or a theme.

How would I check which plugin uses lazy load? In trying to improve speed I’ve deleted all but the essential plugins so I only have a few. I’ve already deleted Jetpack and Smush, which were the two I thought were causing the conflict, but it must be something else?

Largest Contentful Paint element – This image (the same one for lazyloading) is the LCP element and therefore should not be lazuloaded

Is this one specific image on my entire website? Or one per post? How would I determine which image is the largest contentful paint element?


Serve images in next-gen formats – This means converting the images to webp format. This is also available in the W3 Total Cache and you can enable this option in the General settings

I already have this box checked in settings, do I need to do something else to enable it?

Hello @bastecutfold

Thank you for your feedback.
Lazyloading can be added by other plugins or a theme. When you add the image, the theme may be adding the lazyload. Unfortunately, since the W3TC is not utilizing lazyloading in this case, I cannot be specific where it comes from. There is a chance that this needs to be done within a template.

The LCP element image is shown in the test results in google page speed:
https://bastecutfold.com/wp-content/uploads/2024/01/DSC_0087-4-768×768.jpg

As for webp, the option may be enabled, however you should also convert images in the advanced settings.
I would advise doing this manually in the media library with the W3TC option and convert the images reported by the google page speed one by one starting with the one that has the most impact in the test.

Thanks!

Ah, so the image you’ve linked is the “featured image” for my theme. Every time I post a new post, this image automatically changes to display an image from my most recent post.

Sounds like that means the lazy loading issue is within the theme? I’ll try reaching out to the developer to see if they can help.

Hello @bastecutfold

Thank you for your feedback.
In this case, this should be done programmatically by adding rel=”preload” to the part of the page responsible for serving those images. This depends on how the image is loaded.

Thanks!