Vishal Lohar

You’re Right! By mistake I excluded the page from caching. Thank you! Now its working perfectly.

No, that’s not true. Only Image 1,2,3,4,5,6.png are in viewport. All these 6 images are used in the main slider. And some images are placed just above footer but they are still loaded early.

In the GTMetric report, you can see that all the images are loaded on the first load. The total size of all images is 6.34MB. So, I just want to know why it’s happening.

You can check Waterfall -> Images section of GTMetrix report for more details.

I tried deleting the files manually before creating this ticket. But we have a lot of invoices, more than one lakh and the file manager always gets crashed because of it. So, can you share some other ways by which I can delete old Invoices? Your plugin should have something to delete old invoices. Atleast add this in your roadmap so it gets added in the future version.

Okay,

Sorry! The file is in Templates folder.

Anyway, Thanks for correcting me.

Also, how can i change the responsive point permanently like plugin update should not change it again to default.

I have disabled Syncing user info when login/register button before creating this ticket. The user profile images are still saved to the media library.

Check these images –
https://ibb.co/Fh1kvMQ
https://ibb.co/ccQDtSq – This is the latest screenshot.

Hi,
Sorry for the late replies.

The problem is with all elements. We are using different elements on different pages and wherever your plugin is used it returns a 500 error.

I have the right PHP settings for my website. I don’t think it’s happening because of PHP config settings. If I remove your plugin everything works perfectly.

—-PHP CONFIG—-
memory_limit: 4024M
max_execution_time: 600
upload_max_filesize: 25M
post_max_size: 48M
max_input_time: 400
—-PHP CONFIG—-

I have identified the Issue.
My store has over 1lakh+ orders and that is the problem. On deleting all of them the demo import worked without any error!

I want to know Why the woocommerce orders are causing issues in the demo import.

I did all the server checks and there is no issue on the server side.
So, I reset my WordPress Installation using WP Reset Plugin and it worked.
Before resetting, I disabled every plugin except the 4 required plugins but it still failed.
I can’t understand what the problem is.

I have attached the debug logs in my reply. At the end I have attached my PHP Config Settings.

[28-Oct-2022 13:01:13 UTC] PHP Fatal error:  Allowed memory size of 367001600 bytes exhausted (tried to allocate 20480 bytes) in /home/example.com/test.example.com/wp-includes/wp-db.php on line 2135
[28-Oct-2022 13:01:13 UTC] PHP Fatal error:  Allowed memory size of 367001600 bytes exhausted (tried to allocate 32768 bytes) in /home/example.com/test.example.com/wp-content/plugins/woocommerce/includes/class-wc-log-levels.php on line 1
[28-Oct-2022 13:01:21 UTC] PHP Fatal error:  Allowed memory size of 367001600 bytes exhausted (tried to allocate 33554440 bytes) in /home/example.com/test.example.com/wp-includes/wp-db.php on line 2136
[28-Oct-2022 13:01:28 UTC] PHP Fatal error:  Allowed memory size of 367001600 bytes exhausted (tried to allocate 20480 bytes) in /home/example.com/test.example.com/wp-includes/wp-db.php on line 2135
[28-Oct-2022 13:01:28 UTC] PHP Fatal error:  Allowed memory size of 367001600 bytes exhausted (tried to allocate 32768 bytes) in /home/example.com/test.example.com/wp-content/plugins/woocommerce/includes/class-wc-log-levels.php on line 1
[28-Oct-2022 13:01:39 UTC] PHP Fatal error:  Allowed memory size of 367001600 bytes exhausted (tried to allocate 4096 bytes) in /home/example.com/test.example.com/wp-includes/wp-db.php on line 2135
[28-Oct-2022 13:01:50 UTC] PHP Fatal error:  Allowed memory size of 367001600 bytes exhausted (tried to allocate 20480 bytes) in /home/example.com/test.example.com/wp-includes/wp-db.php on line 2135
[28-Oct-2022 13:01:50 UTC] PHP Fatal error:  Allowed memory size of 367001600 bytes exhausted (tried to allocate 20480 bytes) in /home/example.com/test.example.com/wp-includes/class-wp-user.php on line 522

— PHP CONFIG —
memory_limit: 1024M
max_execution_time: 600
upload_max_filesize: 25M
post_max_size: 48M
max_input_time: 400

The above solution may seem too much work for some people. WordPress is loved bcoz of its Simplicity and the Drag and Drop Interface.

Therefore, A simple solution is to use a Gallery Plugin.
Try this plugin –
Additional Variation Images Gallery for WooCommerce

This Gallery plugin will solve your CLS issue, irrespective of device and Image sizes.

I would still advise Woocommerce to solve this issue in the Woocommerce plugin Itself. If another plugin can do it then why can’t Woocommerce?

Hi @kaushiksomaiya,
Always test using the Developer Console Lighthouse tab. It will give a more detailed report and correct result. In page speed insights, the Image never loads, so CLS is always Zero.

Anyway, I have applied a fix, and It’s not the best, but it worked for me.
To fix this issue, I just used the max-height CSS property and added a custom CSS.

Please remember this works for me and may not work for your theme.
My solution works for websites with Square Images. Inspect the DOM to customize it for your theme.

/*CSS for CLS Start*/
/*For Desktop*/
@media screen and (min-width: 922px) {
	.woocommerce-product-gallery {
	  min-height: 630px;
          max-height: 630px;
 }
}
/*For Mobile*/
@media screen and (max-width: 921px) {
 .woocommerce-product-gallery > .flex-control-nav li {
	height: calc(25vw - 1.5em) !important;
 }
}
@media screen and (max-width: 500px) {
	.woocommerce-product-gallery {
	max-height: calc((25vw - 1.5em) + (100vw - 56px) + 1em);
 }
}
@media screen and (min-width: 545px) and (max-width: 921px) {
	.woocommerce-product-gallery {
	max-height: calc((25vw - 1.5em) + (100vw - 117px) + 1em);
 }
}
/*CSS for CLS End*/

Code Explanation
For Desktop:
I just added a min-height and max height to fix it. Inspect the DOM to find a perfect min and max height for the image gallery.

For Mobile:
I used only the max-height property.

1. First set the gallery thumbnails size by using height: calc(25vw – 1.5em) !important;
2. (25vw – 1.5ew) returns the height of slider thumbnails on different mobile screen sizes.
3. (100vw – 117px) or (100vw – 56px) return the main image height minus the padding around it.
4. 1em is the bottom margin of the main Image.
5. Inspect the DOM to calculate the total padding around the main Image.
6. Two media queries for mobile because the padding around is different below 500px and between 500px and 921px.

Check this Image for visual representation: https://ibb.co/N2zVF4B
I hope I was able to explain my solution. You can modify this code to make it more simple.

Okay, I actually contacted Astra before creating this thread. The Astra support advised me to contact Woocommerce as the gallery is added by Woocommerce.

The gallery is not properly added during the initial load which results in CLS. I don’t know how I am going to fix it.

Thank you for the help!

Hi, I have tested the storefront URL and my URL again. The content layout shift is happening on both the website and I have proof of that. I created a custom network speed of 100kbps in the developer console to test both the URLs.

Check these two images:
Storefront: https://ibb.co/YQ8SCZm
Astra: https://ibb.co/kDVjDKx

During the Initial load, the second image is placed right after the first image on both themes. The only difference is that In Astra the second image width is small. Because of this, the CLS issue is happening only on the product pages with more than one image. I have verified this in Google Search Console.

Earlier I had a confusion that the second image is actually the gallery slider thumbnails but that’s not the case. The slider is not even loaded in the DOM during these tests.

With the storefront theme, the change is happening fast, because of fewer plugins used and the default theme. All the tests were done with all optimization disabled.

I am attaching a few product URLs, so you can test and provide a solution.
https://expiry.link/0c5vm
https://expiry.link/pcltu
https://expiry.link/9c6dy
https://expiry.link/lxezq