It’s Okay to Lose Your Head: Why Your Online Store Needs to be Headless

Have you ever pulled up to a website and instinctively judged the brand as subpar? We all have. Something about the experience sucks. It’s slow, the UI (user interface) is off-putting, the design reminds you of your grandma’s red carpet… Instinctively though, you don’t care because there are so many other sites that are offering the same thing. This is great for users. For store owners however, it means you had better up your game quickly or risk being passed over. In today’s marketplace you have less than 7 seconds to engage a customer.

You paid top-notch for brand development,  so your site probably stands above the crowd, right? Not quite. Though it is true that amazing brand and store design are essential to success, the technology used to develop your store is equally as critical. The right technology provides the foundation for a fast, brand-focused, cohesive user experience –  the polish that some sites have, yet you can’t put a finger on exactly why.

Consider the common technology “stack” used in most ecommerce stores today: at the core is a monolithic platform like Shopify, BigCommerce, or WordPress. These platforms are where products, a theme, as well as apps and plugins are managed. They also control rendering the user interface of your store. You might be wondering what’s wrong with this? Well, nothing if you dig your great uncle Vernon’s living room drapes. Vanity aside, there are true pros and cons to consider.

Lower cost and “flexibility” are decent perks if you can’t afford custom development. Most of these platforms have free off-the-shelf themes as well as a decent list of low-cost and free plugins. This is great for the DIY folks out there. But let’s be real, it comes with costs to your business and brand.

Since each theme, app, and plugin are developed in isolation, they all have different source files that end up being included in your theme during implementation. Sometimes these source files include the same libraries of code as one another resulting in your site loading the same assets multiple times. Another downside to having multiple sources is that they can’t benefit from modern solutions like code-splitting and dead code elimination where your store only loads the code that it needs. This results in most of your assets being loaded when the user first visits your site. Essentially the main benefit you get from this type of architecture is cheap flexibility – a bolted-on solution that leads to a slow, inconsistent, and cheap user experience that makes your brand suffer.

Enter Headless commerce and data-driven development. Also known as the JAM stack (JavaScript, API, Markup), headless commerce is essentially a solution where the front-end of a site is decoupled from the ecommerce platform and other systems. With this architecture you still have your platform (Shopify, BigCommerce, WordPress, etc.). There’s a good chance that you could still use plugins and apps as well. The difference is that your platform, plugins, and apps do not control your store’s UI. Instead they provide a method for your theme to get their data, and then your theme has 100% control over how your users experience your store. This allows you to implement a design that fits your brand without compromise.

Because the UI has a single source, modern techniques like dead code elimination and code-splitting can be utilized. This means that little to no unused code will be sent to your users, and the code that is sent will only be sent when the user needs it. These will both significantly impact one critical aspect of your online store—speed. Headless commerce also enables you to utilize modern technologies such as React, ReasonML, server side rendering, and static site generation, which provide some of the best technological foundations for modern user experiences. The React core team and community don’t just keep up with the latest trends and standards, they continually create and set the trends and standards.

These technologies that focus on user experience also have another massive impact on, you guessed it—speed. Research shows us that website speeds are directly correlated with bounce rate. Simply put, faster sites results in more revenue. Headless commerce coupled with server-side rendering or static site generation is going to provide your store with the best performance gains available today. These technologies also provide benefits to SEO and security, making it simpler to add features and scaling, and pull data from multiple platforms. The bottom line is that if you want to increase your online revenue, you need to lose your head.