Website speed issues

The images appear blurry because you set a 200px width for the images, while the shop container has a width of 224px. To improve clarity, we recommend increasing the image width to 250-300px.

Additionally, it seems you’ve changed the password, preventing us from accessing your current configuration and effectively troubleshooting the issue.

Hello,

Could you please help me figure out what specific steps I need to take to improve my website’s score? I have already switched to the Gutenberg editor, set up a caching plugin, and implemented a CDN, but the product pages still can’t reach a score of 90.

You can test a few product pages of my website on https://pagespeed.web.dev/ to help me identify the areas for improvement.

Hi,

Reaching 90+ on mobile depends on several factors together. Here is a focused checklist you can apply on your product and catalog pages. Please go through each step and clear your plugin/CDN cache after every change.

1) Product and catalog image sizes
– Appearance -> Customize -> WooCommerce -> Product images
– Main image width: set close to the actual render size on your single product pages (for many stores 600–750 works well). Height is automatic by aspect ratio.
– Thumbnail width: set to match the real width of a product card in your grid. Example: if the catalog grid item is ~224px on mobile, set 250–300px to avoid blur and oversized downloads.
– Choose appropriate cropping (1:1 or Custom) for consistent tiles.
– If your shop/product archive uses a custom WoodMart Layout (as in the Kids demo), open WoodMart -> Layouts and check the Product archive element. Make sure it doesn’t force a larger image size than needed on mobile. Adjust that image size there as well.

2) Responsive images (srcset/sizes)
– WordPress selects image variants via srcset/sizes. If PageSpeed flags “Properly size images” on your archive, it usually means the element’s requested size is larger than the container on mobile. After you align the Thumbnail width and the element’s image size (point 1), re-test.
– If needed for diagnostics, we can temporarily apply the code from our previous replies to disable srcset only around the shop loop to compare results. Tell us if you want us to run this test for you.

3) Optimize images and formats
– Use WoodMart Image Optimizer: Dashboard -> Media (List view) to optimize and generate WebP, and Theme Settings -> Performance -> Image Optimizer to set quality. Prioritize the largest images: main product image, gallery images, banners, and footer/logo images.

4) Lazy loading
– Enable one lazy-loading system only. Either use WoodMart -> Performance -> Lazy loading or your caching plugin’s lazy load, but not both.

5) Caching and CDN
– Ask your hosting to set long-term Cache-Control headers (e.g., 1 year) for static assets. This is a server setting and helps PageSpeed’s “efficient cache policy.”
– After changes, purge your site cache and CDN, then re-check in an incognito window.

6) Reduce above-the-fold weight and DOM
– Avoid heavy sliders or large blocks above the fold on product pages.
– Limit the number of related/upsell products shown.
– On shop pages, do not load 200 products per page; use a standard amount (e.g., 12–24) to keep DOM and requests manageable.

7) LCP on product pages
– Ensure the main product image is not larger than needed and served as WebP.
– Disable non-essential effects on the main image (e.g., zoom) while testing to see the impact on LCP.

Also, please review and follow this guide step by step:
https://xtemos.com/wordpress-performance-optimization-the-ultimate-guide-in-2021/

Kind regards

Hello,

I previously tried using the code you provided, but it didn’t seem to work, so I deleted it afterward.

I once attempted to adjust the main image size to 600×800, but this caused the images to become blurry. Therefore, I didn’t modify the image size further. Since all images are provided by Chinese suppliers, I can only use the image sizes they offer.

Additionally, I couldn’t find where to configure the following settings:

– If your shop/product archive uses a custom WoodMart Layout (as in the Kids demo), open WoodMart -> Layouts and check the Product archive element. Make sure it doesn’t force a larger image size than needed on mobile. Adjust that image size there as well.

I have provided the new account credentials. You can log in to check and suggest some practical areas that can be configured and optimized further.

Hello,

We’ve adjusted the size of product thumbnails to 350 pixels in Appearance -> Customize -> WooCommerce -> Product images. We’ve also added the code we sent you earlier, which you can find here: https://gyazo.com/ae5ce88e1f5a08cd401ff7ef75b35714

Please note that Google PageSpeed still warns about a slight difference because it tests on specific devices. However, we don’t recommend reducing the size any further, as your images will become blurry on larger screens.

Kind regards,

[Author]

Posts