WooCommerce Seeks to Improve Cart and Checkout Blocks Performance

WooCommerce Blocks maintainers are asking the developer community to share feedback on any performance issues they are experiencing with the Cart and Checkout blocks.

“We’re aware there is work to be done in this area and we want to improve,” WooCommerce developer Alex Florisca said.

“We’re specifically interested in any performance related issues that may be stopping merchants or developers from adopting the Cart and Checkout blocks over the shortcode version.”

The plugin’s repository has nine open issues categorized as related to performance. Most of them are not straight forward and require more research and testing. For example, an issue with running multiple blocks of product grids was reported as having increased response times of 4+ seconds. Contributors have proposed a few different ideas to address performance issues, such as experimenting with useSuspenseSelect to improve the perceived loading experience for various blocks and finding a way to track the performance of the Cart and Checkout blocks. Neither of these tickets have seen much movement yet.

Store owners will not be eager to switch over to a checkout experience that is slower, so the WooCommerce team is seeking feedback that will help them make the cart and checkout blocks faster. So far, one user reported that due to a bug in a third-party plugin, he got a glimpse of what the block-based checkout adds to the JS asset payload.

“I think this adds at least ~300 kB (compressed) JS payload (initial numbers, my measurement process is still ongoing),” Leho Kraav said.

“We don’t plan to convert our classic theme to a block theme any time soon, but still, I feel uneasy about this direction.”

Florisca followed up on this feedback with a few cursory benchmarks comparing the legacy shortcode checkout with blocks checkout and Shopify:

| Blocks Checkout | Shortcode Checkout | Shopify
Total Payload | 2.9MB | 935kb | 6.1MB
Total Transferred | 2.1MB | 1.3MB* | 3MB
Number of requests | 144 | 77 | 146

“The number of requests has almost doubled for Blocks, which isn’t great so this is something that we can look into,” Florisca said. “I suspect the reason is because we rely on a few layers of abstraction on top – WooCommerce and WordPress, each with their packages and set ways of doing certain things. We can investigate if we can simply this.”

The discussion on how to improve cart and checkout block performance is still open for more developers to give feedback, and investigations are ongoing. The good news is that WooCommerce maintainers are aware of how much weight the block-based checkout adds and are actively looking for ways to improve it for users.