Today, we welcome Alexandre Buffet (Lead Web Developer) & Benjamin Grolleau (Web Developer) from the BSA Web WordPress agency for a guest post focused on WordPress and WooCommerce. They share valuable tips from their experience. We wish you an excellent read 👇
Are you considering creating your online store with WordPress and the WooCommerce extension? What if we told you that's pretty much all you need to design a high-performing e-commerce site? Okay, but then how do you maximize conversion rates and offer the best possible experience to your customers? With Gutenberg, of course!
First of all, what is a high-performing site?
A website's performance is its ability to respond to user requests quickly and smoothly. It is generally measured by indicators such as page loading speed, responsiveness to interactions, and site stability.
For an online store, performance is even more important than for a brochure site because the goal is to convert customers. Indeed, users of a merchant site are more likely to abandon their purchase if the site is slow to load or if the user experience is unpleasant.
Fortunately for WooCommerce site owners, there are many levers to pull to optimize the performance of their online store. And that's good, according to the WebPerf bible, which offers nearly a hundred tips for optimizing your site, Gutenberg is one of them!
Design with Gutenberg, the natively high-performing site editor
For those who don't know it yet, Gutenberg is the native WordPress editor integrated into the core of the CMS since version 5.0 released in 2018. Unlike the previous editor, it is block-based, which allows for creating pages and posts more intuitively and flexibly.
Today, it also allows you to design an entire site with blocks, directly from the administration interface and without needing to know how to code. This is the Full Site Editing experience. With Gutenberg as your site editor, you can therefore customize a site in its entirety, from content to page templates, including the color palette, block compositions, and navigation.
Choosing to use Gutenberg with WooCommerce means betting on the future of WordPress and everything that is best for your e-commerce site. For our performance needs, Gutenberg ticks all the boxes:
- It's the native editor, so there's no need to install an additional page builder.
- You can easily customize blocks without adding extra code.
- The code generated by the blocks is simple and optimized.
- Block styles and scripts are only loaded if they are present on the page.
Obviously, performance comes at a cost. And we admit, the site editor has some limitations. More advanced blocks like carousels or even more complex ones don't exist natively. But do you really need them?
Between us, it's better to accept this weakness of Gutenberg and see it as one of its greatest strengths in the battle for simplicity and performance on the web. Especially compared to older page builders like Elementor, Divi, or Beaver Builder, which still tend to offer you too many possibilities, often superfluous, that can slow down the site.
Take the time to ask yourself the right questions before installing additional plugins, because your choices will inevitably impact your site's performance. Depending on your needs, to go further with Gutenberg blocks, we recommend using block libraries that are as close as possible to the native editing experience, such as Coblocks by GoDaddy or AinoBlocks by ElmaStudio, for example.
Find the best block-based theme for WooCommerce
To make the most of Gutenberg with WooCommerce without affecting your site's performance, you need the best block-based theme compatible with the extension.
As we said just before, with a block-based theme, you'll be able to take advantage of all the benefits of the site editor to create all the views of your online store with blocks. WooCommerce in its latest version provides the essential blocks for your e-commerce site, even the most advanced ones like the Cart and Checkout blocks.
It's then up to you to customize the blocks in the pages and templates offered by your theme or to add new ones via the administration interface. From there, the visual variations are endless! That's why choosing the right theme makes all the difference. To navigate the jungle of available themes, we recommend taking a look at the great selection made on the Woo.com site.
A theme that has invariably caught our attention this year is the Mugistore theme designed by ElmaStudio. Very elegant, it is a great example of an e-commerce theme built entirely with Gutenberg and which has a wide variety of block compositions and predefined templates that you can adapt to your business.
If you want to go a little further than the blocks natively available with WooCommerce, most themes recommend installing WooCommerce Blocks. This extension allows you to access the latest freshly developed blocks and take advantage of the latest innovations from WooCommerce and Gutenberg.
Is your site as fast as your visitors expect?
Update WooCommerce to take advantage of the latest optimizations
Speaking of innovation, in addition to contributing to Gutenberg support, the WooCommerce development teams also ensure continuous improvement of the extension's performance. The latest optimization is the release of the HPOS (High-Performance Order Storage) project last August in version 8.0.
If you have already used WooCommerce or regularly visit the developers' blog, you have certainly heard of it. In fact, behind this developer acronym lies a major, long-awaited update that considerably improves the performance of order storage in WooCommerce.
Because let's face it, WooCommerce inherits the flaws of its big brother WordPress in terms of database organization. Until now, the extension stored order metadata in the postmeta table, alongside other data about posts, or ACF fields for example.
During SQL queries to retrieve this information, it was therefore necessary to sift through a large amount of poorly organized data before getting a response. Imagine searching for a specific sheet in a binder where everything is mixed up – not easy, right? Now imagine how long it would take you to find that sheet in a well-organized binder, sorted, with nice dividers – everything is faster!
Well, HPOS is WooCommerce's binder. The teams have modernized the original storage method by creating their own database table, and it's much more efficient. The numbers prove it.
HPOS allows you to create an order 5 times faster than with the traditional database operation and retrieve an order up to 40 times faster!
Source Woo.com
Moreover, if the topic of WordPress database optimization interests you, we can only recommend that you take a look at Thomas Deneulin's conference at WordCamp Biarritz.
Conclusion
In summary, WordPress and Gutenberg coupled with WooCommerce are powerful tools that alone contribute significantly to improving the performance of an e-commerce site. By using these tools wisely, you can offer very good, high-performing online commerce experiences to your users and increase conversions.
Remember our two main tips:
- Use the full potential of Gutenberg and WooCommerce with a block-based theme. Block-based themes allow you to take full advantage of WordPress's native editor. It offers optimal qualities for your site's performance and great flexibility for creating attractive pages and product presentations.
- Keep your WooCommerce installation up to date. WooCommerce regularly releases security and performance updates. It is important to keep your installation up to date to benefit from the latest improvements, such as the recent modernization of order storage in the database.
In addition to these tips, we will specify that it is also very important to choose a good web host and have a good caching policy. Two other essential elements to guarantee good page loading speed.
