Born from wrestling and built for wrestling, RUDIS is a high-volume ecommerce brand that is experiencing rapid growth and expansion into new markets. With no plans to slow growth, RUDIS needs a platform that supports its ambitious goals.
After a frustrating site crash during a high-profile product launch, RUDIS found themselves questioning the decision to build upon WordPress and WooCommerce. When back-end slowdowns began to negatively affect content management and customer support, concern shifted to how quickly the company would outgrow everything it had built.
With user experience and performance as primary concerns, RUDIS needed to ensure their ecommerce site was engineered for speed from the ground up. Unfortunately, their questions were often met with answers like “WordPress wasn’t built for that” and “WooCommerce doesn’t work like that” or recommendations to secure more resources, change hosting environments, and use larger servers — which all lead to higher operating costs.
Thankfully, RUDIS Connected With Zeek
With deep expertise and experience working with high-traffic, high-volume sites, headless WordPress, and WooCommerce at scale, our team was well-positioned to support RUDIS in reimagining the next evolution of their ecommerce platform.
Today, the RUDIS site offers a lightning-fast user experience for shoppers and helps customer service reps get their jobs done faster, which means better support, shorter wait times, and happier customers.
While typical site speed scores are in the 50-60s for WordPress sites and the 20-30s for WooCommerce sites, RUDIS is enjoying site speed scores in the 90s.
Zeek provides expert advice and insights to help us make smart decisions — like investing in a headless solution to extend the life of our WooCommerce platform. This meant we could avoid migrating platforms, rebuilding third-party integrations, and retraining our staff on a new content management system.
We had always intended on hiring our own internal development team but I don’t think I could hire anyone to replace the work Zeek is doing. Their team brings a lot of knowledge and diverse skills. We work together so well that it would be very difficult to bring development in-house. It’s been a great partnership for our business, as they’ve really helped us level up.
Alaina Nogar
COO | Rudis
The Challenge With WooCommerce At Scale
RUDIS has a lot of products, processes a lot of transactions, and manages a lot of customer data. As we’ve seen with other ecommerce clients, their main challenge was one of scale.
For WooCommerce stores with 100 products and a few orders a day, performance dips may not be noticeable, but for stores like RUDIS, with 1,000+ products and several orders placed every hour, site speeds can drop dramatically.
The issue stems from WooCommerce’s reliance on the postmeta table in the WordPress database.
The postmeta table is where WooCommerce stores a large portion of a site’s order, product, and customer data. In this case, millions of rows of data were being added to the table — and because it isn’t indexed, every time a database query was made, it negatively affected site speed.
Without the right engineering approach, every successful WooCommerce site will experience the same thing. This is why our first goal with RUDIS was to move data away from the postmeta table, stabilize the website, and get them back to business as usual. Once stability was achieved, focus turned to mitigating the limitations of WooCommerce and crafting a solution that would exponentially increase its longevity.
Going Headless With The JAMStack
What makes all content management systems — WordPress, Drupal, or Joomla — slow is that every time a user visits a page, the CMS makes a database call, gets the content, compiles it through PHP, and renders the HTML.
When it comes to WooCommerce stores, the back- end dashboard and front-end user interface also compete for resources.
Solving that problem means going headless — decoupling the front-end presentation layer of the website and the back-end WordPress dashboard.
While headless WordPress wasn’t anything new for Zeek, headless WooCommerce had never been done before — by anyone.
Never shy of a challenge, Zeek pitched RUDIS the idea of using a headless approach to increase site speed and extend the life of WordPress and WooCommerce. The solution leverages Gatsby, one of the most popular JAMStack static site generators, for the frontend visual design templating and maintains WordPress and WooCommerce as the content and product management system.
A major benefit of using Gatsby is speed. Gatsby loads only what is needed to render a page, and once rendered, it pre-loads resources for all linked pages in the background. This combined with automated image optimization and lazy-loading means pages on the RUDIS site load almost immediately as shoppers browse the site.
Headless WooCommerce
Headless WordPress? Piece of cake. Headless WooCommerce? Not so much. The challenge with WooCommerce and static site generation is that WooCommerce pages contain far more dynamic content than a typical WordPress page or post.
- Product pages display information like price, variables, quantities, and even buttons, and when a shopper changes quantities, the price changes and the cart updates to remain accurate.
- The WooCommerce shopping cart page is composed almost entirely of dynamic content, allowing shoppers to delete products, change quantities, enter coupon codes, and more.
The solution is a hybrid approach that blends static and dynamic content. Gatsby uses a middle layer — GraphQL — to communicate with WordPress. Through our experience with other headless WordPress projects, Zeek knew GraphQL could talk to anything within WordPress, which meant it could talk to WooCommerce as well.
The RUDIS headless WooCommerce implementation began with the store product pages and product category pages.
- Gatsby renders the page and product content and visual presentation as static HTML.
- GraphQL pulls in only the necessary, small bits of dynamic data like price, sales alerts, and quantity available in one request.
- Preloading ensures that as shoppers browse category pages, linked product pages are prebuilt in the background so they load immediately upon click.
Next, Zeek set out to build a React-based shopping cart and tackle checkout pages with the same approach. First, everything possible is rendered as static, then GraphQL interfaces directly with WooCommerce to display the individual dynamic elements. This way calls to WooCommerce happen in real-time without slow database calls and without refreshing the React user interface.
This has resulted in lightning-fast site speeds, an improved user experience, a more flexible codebase, and more sales.It has also increased the reliability and longevity of WordPress and WooCommerce — which means RUDIS doesn’t have to worry about migrating platforms, rebuilding its many third-party integrations, or retraining its team on a whole new platform.
Moving the RUDIS ecommerce store from a monolithic WordPress architecture to a headless architecture is a huge win, not only for RUDIS, but for all of our WooCommerce clients. With headless WooCommerce, there are no limitations on the speed or scalability of WooCommerce.