About Grid View and Visual Optimization

Hi Team,

According to the Google Page Speed results, I received an LCP warning indicating that the images on my website are loading very slowly. How can I optimize and reduce the size of images on the product page and other pages?

A company you referenced that uses the Woodmart theme seems to have successfully implemented what I want to do. In grid view, they use 300×300 image dimensions, while larger image sizes are used on the product page. On my own website, when I select “open image in a new tab” in grid view, the larger images from the product page are displayed.

How can I apply the same approach as in the example? I am sharing a video explanation in a private area to better illustrate my point. Currently, I am using Elementor on my website.

Hello,

In general, our theme cannot influence images. I suggest you read our article about image sizing – https://xtemos.com/docs-topic/image-size-and-content-alignment-in-a-product-grid/

How to optimize images – https://xtemos.com/wordpress-performance-optimization-the-ultimate-guide-in-2021/#Step_3

Kind Regards

Here’s the translation of your text into English:

Thank you for the information. I have already reviewed these guidelines and made the necessary adjustments. In the guidelines, you mentioned using Imagify. Should I use Imagify to set thumbnail images in grid view, or should I proceed with the methods below?

Do I need to implement the feature I want as shown below? I don’t think there’s an option to manage this feature in the theme settings, is there?

WooCommerce > Status > Tools > Regenerate Shop Thumbnails

In the grid view, small images should appear, while the original large images should be displayed on the product page. In the first message, I had provided an example of a reference site using the WoodMart theme.

Hello,

In general, those settings are related to WooCommerce. Send me access to the admin panel so I can investigate it on your side.

Kind Regards

Hello,

I think I managed to resolve the issue myself. I’m sharing the steps I followed below—please let me know if you notice any errors or have suggestions.

First, I navigated to WooCommerce > Status > Tools and used the “Regenerate shop thumbnails” option to ensure missing image sizes were created.

On the homepage and shop pages, I edited the layout using Elementor, selected Products in the container, and set the following:
Style > Product Designs > Image Size > WooCommerce Thumbnail 430×430.

With these steps, high-resolution images do not appear in the grid view as thumbnails. What image size do you recommend for thumbnails, and are there any missing steps in what I’ve done?

Attachments:

You must be logged in to view attached files.

Hello,

Glat that you have sorted it out. If that works for you now, then everything you did right.

There is no required or recommended image size for product or other purposes. Image should be big enough to have a nice view.

Feel free to reach out if you have any questions!

Kind Regards

Hi,
I make sure to keep the theme updated by downloading the latest version and applying all patches. Additionally, we have upgraded our hosting package to a higher-tier plan. Despite these efforts, our Pagespeed mobile score has significantly dropped, and the initial load time of the site is noticeably slow. When I review the Pagespeed warnings, it highlights a delayed loading issue for thumbnail images. We had already addressed this problem and were using optimized thumbnail images. Could it be that the thumbnail images were deleted during a WordPress or theme update? I had previously mentioned in this conversation how we use thumbnail images in the grid view.

Hello,

Could you please send me access to that website so I can check the site settings?

Thank you in advance.

Kind Regards

Hello, I am sending the relevant information in the private area.

Hello,

Serve static assets with an efficient cache policy – https://prnt.sc/xdEMzN-ky58M

You should cache immutable static assets for a long time, such as a year or longer, so you need to configure your server to return the Cache-Control HTTP response header:

For now, it’s adjusted for 7 days on your server. It should be 1year+ as in the example: https://developer.chrome.com/docs/lighthouse/performance/uses-long-cache-ttl/?utm_source=lighthouse&utm_medium=lr#how_to_cache_static_resources_using_http_caching

2. Properly size images – https://prnt.sc/p98EXZWJjiym , edit the Home page via page builder and set the “Medium” size here – https://prnt.sc/p3RO7gLFCm0I clear the cache and recheck the issue in Insights.

Kind Regards

Hello, I have a few questions regarding these steps:

1) WP Rocket Status: WP Rocket had been deactivated and wasn’t reactivated. I have now reactivated the plugin.

2) Cache Duration Adjustment: You mentioned that the server is currently set for 7 days, but it should be configured for 1 year or more, as per the example. Could you please provide detailed information about which setting was changed?

3) Image Optimization Issues: For instance, on the homepage, all product images are optimized in WebP format and have a small file size. The “Medium – 400 x 300” option was selected in Elementor, and caches were cleared. However, the errors in PageSpeed Insights persist. There seems to be a problem with image sizing in the grid layout. Additionally, some images appear with poor resolution when using the “Medium – 400 x 300” option. Selecting the “WooCommerce Thumbnail – 430 x 430” option would be better, but for some reason, the thumbnails aren’t active on the site. The mobile resolution issue in the WoodMart grid layout needs to be resolved.

Continuing errors:
Largest Contentful Paint (LCP): 5,130 ms.
Potential Savings from Properly Sized Images: 38 KiB.

[Luke Nielsen]

Hello,

I apologize for the delay.

1. I didn’t touch the plugins.

2. Those settings are related to the server so I suggest you contact the hosting support and ask them to increase that value.

3. You need to regenerate your images through the “Regenerate Thumbnails” plugin (more details in the article below).

https://wordpress.org/plugins/regenerate-thumbnails/

https://www.wpbeginner.com/plugins/regenerate-thumbnails-new-image-sizes-wordpress/

I look forward to hearing back from you!

Kind Regards

• This reply was modified 2 weeks, 5 days ago by Luke Nielsen.

Hello,
When I used the “Regenerate Thumbnails” option in WooCommerce, many PageSpeed issues were resolved. However, the “Largest Contentful Paint” (LCP) problem persists. Could this be related to a theme configuration issue? How can we resolve these remaining issues?

I kindly request your support in optimizing the Woodmart theme for better performance.

Current PageSpeed Issues:

Largest Contentful Paint: 4,650 ms
Properly sized images: 158 KiB potential savings
Thank you in advance for your assistance.

Hello,

Let’s first solve the issue with the Properly sized and then we will check whether the LCP persists. May I regenerate thumbnails on your website for testing?

Looking forward to collaborating with you!

Kind Regards

Hello,

You can do it, no problem, but there’s no need. I already completed this process the day before yesterday. The steps I followed were:

WooCommerce > Status > Regenerate Store Thumbnails

Please address the issue; the responses are taking too long

Hello,

I apologize, currently, I am working on it.

Thank you for your time and patience.

Kind Regards

Okay, we are waiting for your return.

Hello,

1. In general, our theme doesn’t affect the image sized, all settings related to it come from WooCommerce. If we set the medium sizes, it fixes the issue, here is a video – https://dropmefiles.com.ua/en/z2V83 . So I suggest you use the Medium sizes to fix that issue.

2. LCP message doesn’t mean that this particular element is loaded slowly. It just indicates which element is the Larger Contentful Paint. Read more here https://developer.chrome.com/docs/lighthouse/performance/lighthouse-largest-contentful-paint/?utm_source=lighthouse&utm_medium=lr

In general, your site loads fast – https://take.ms/eqrcW

Kind Regards

When we set Medium to 400×300, the image resolution becomes extremely poor on the desktop version, making it unusable. If you want, you can try setting it to 400×300 in Elementor on the homepage to see for yourself—the images look terrible.

Why can’t we select the WooCommerce Thumbnail 430×430 option? Why do we get the “properly size images” error when using the WooCommerce Thumbnail 430×430 option?

Switch between “Medium” and “WooThumbnail” for the related products in Elementor, and you’ll see the difference in resolution. I’ll share the video in a private space.

Has the relevant situation been checked?

Hello,

Sorry for the delay.

We don’t know exactly why Google page speed gives this message. But it does not depend on the theme. Image sizes are selected correctly and images are displayed according to your settings.

Kind Regards

In general, you failed to resolve the issue and caused additional problems. You installed the plugin named “Regenerate Thumbnails.” While closing the ticket, you didn’t even provide information about the plugins you installed and removed. Whatever action you took has caused issues I reported in the private section. Some images are not visible in the image gallery, and the cover images of some products are missing!!!

Hello,

I apologize for that, I only installed the Regenerate Thumbnails plugin and this plugin should not affect the image in a bad way, it can’t remove them.

Could you please send me a staging site so I can investigate that issue?

Kind Regards

I am sending login information in the private area

Hello,

In Theme Settings -> Single product -> Gallery -> Thumbnails image width define e.g. as 150 – https://prnt.sc/5jjsaJPSkyMA

Then regenerate thumbnails via Dashboard -> Tools and after that it will be fixed – https://prnt.sc/tzCjuUCXMSFO

Kind Regards

The issue is not just with the thumbnails. Could you check the image I sent in the private field? Some photos in my WordPress media gallery appear like this.

The issue is with the main photo itself. The action you took has also affected the source photos in my media gallery!

Hello,

Did you try to regenerate first as described above? On the test site it works well now – https://prnt.sc/vaZSGIA_PbtH

Kind Regards

[Author]

Posts