A web storefront for headless commerce layers on top of your backend and uses APIs to call on services and render the web experience – it’s the head of headless. There are some key reasons why retail needs this kind of decoupled storefront, which you can read here – hint, it’s what truly unlocks the agility of headless and gives you confidence in one of your biggest revenue drivers. In this blog post, we’ll cover what you get with a storefront for headless commerce.
The website design and code aren’t the most difficult parts of the web storefront, it’s the operational pieces that are the most challenging, resource-intensive, and time-consuming. But a storefront for headless commerce has all those operational pieces baked in – it includes website scalability, performance, security, and monitoring.
Scalability: Effectively manage traffic surges & ensure uptime
A surge in online traffic usually means a new campaign or promotional strategy is paying off, bringing in more shoppers and driving higher conversions. But sudden traffic surges can also crash a website, or lead to sub-par performance, if it can’t scale to handle the additional load.
The extra load from holiday shopping is a major cause of website crashes. Costco’s 16-hour post-Thanksgiving Day outage is estimated to have cost the company $11 million or about 40% of its estimated sales for the time period.
And then there’s the influencer effect. When Meghan Markle wore a designer coat during her engagement announcement, it created an instant global demand for the brand that the website couldn’t handle. Now coined the “Meghan Effect”, this type of traffic surge can lead to poor performance or website downtime.
When a web storefront goes down, it not only results in millions of dollars in lost transactions, but also creates negative ramifications for the brand’s reputation and customer loyalty. This is why enterprise-level retailers allocate upwards of $1 million to maintain and keep their web storefronts from slowing down and ultimately crashing.
As shoppers browse a website, the site sends server requests. If these requests exceed the site’s processing capacity resources (i.e. the site’s infrastructure capacity), the traffic levels will exceed the site’s infrastructure, which will degrade performance or crash the website completely. Separating the web storefront allows the web experience to scale independently of your backend systems, removing it as a possible scalability bottleneck.
Mobify’s web storefront for headless commerce was built on serverless principles to ensure front-end scalability is never an issue. A serverless approach means the system detects when it’s reaching capacity limits and automatically adds more capacity on demand, without any manual intervention. Some of our largest customers exceed 30 million page views per day. To ensure all our customers’ storefronts are available and responsive through peak traffic periods, we’ve performed load testing on our systems and have successfully scaled over 35,000 requests per second. Run on Amazon Web Services (AWS), Mobify’s infrastructure is engineered to be resilient for scalability during peak demands, and allows you to deploy across regions to manage redundancy and failover.
Of course, the scalability (or lack thereof) of your backend systems can also impact the web storefront. To stay on top of this and mitigate any issues immediately, Mobify also provides monitoring so that you’re alerted if there are any backend problems that need to be addressed.
Our platform also guarantees 99.95% uptime, delivering business-critical reliability and governance at scale to all of our customers. That peace-of-mind can translate to improved efficiency that improves your bottom-line and, in the event of unforeseen incidents, minimizes any negative impacts to it.
Performance: Maximize page speed with an effective caching strategy
Performance is a fundamental aspect of a positive shopper experience. There’s plenty of research out there that shows how quickly shoppers abandon low performing online experiences. But ecommerce sites are complex and include a lot of code. This adds higher levels of stress on browsers to quickly download the data. As you separate your web storefront from your commerce backend, i.e. going headless, you’ll need to ensure that the head can deliver fast and lightweight experiences.
This is not a trivial task since the ownership and prevention of outages and degraded experiences become retailer’s responsibility if owned in-house. And if you’re focused on high growth, turning your customers into loyalists, using AI-powered recommendation engines, you can’t risk degraded experiences.
For brands that serve multi-locales and have an international ecommerce presence, performance can be particularly challenging. Your web storefront needs to render content and make it available anywhere in the world, without slowing down the experience. To do this successfully, it’s critical to establish a solid caching strategy.
A good caching strategy in a headless environment will guarantee two things:
- Site speed: Caching can help reduce page load time by retrieving content without having to travel to the ecommerce backend. By retrieving the content more efficiently, caching reduces the overall latency in the roundtrip delivery time. Site speed is very important because it not only impacts your shoppers’ experience, but impacts your SEO performance.
- Fresh content: When caching is not set up properly, the browser is unable to validate fresh content and it will load outdated content instead. Imagine the type of negative user interaction this could create if the browser isn’t validating the latest pricing your team has deployed.
In a headless environment, your caching strategy needs to consider how to distribute cache responses based on your shopper’s geographic location. Let’s imagine a user from Germany visits a US store and the commerce backend server is located in Arizona. The original request would be processed and stored by the regional content delivery network (CDN) in Germany. This is regional caching. The benefit of using regional caching is it allows another user from Germany to get the fastest content retrieval time for the same page.
If that content is also cached at the application level, this would be global caching. If a UK user were to request the same content, it’d be served in a shorter time frame (vs. uncached content) because the page would have already been cached at the application level which acts globally.
Regional CDN caching for a global site is less impactful as each regional cache holds a separate cache of pages, leading to potentially lower cache hit ratios. To mitigate that, you need an application level that acts as your global cache across regions to catch CDN (i.e. regional) failover before it hits the backend system.
Mobify’s decoupled storefront prioritizes intelligent caching at the CDN and application levels, as these areas have much higher impact on the performance than database-level caching. The CDN is set up at the app layer (which is different from a monolith) because it helps support surges in traffic and optimize web performance. This method greatly reduces the number of API calls that travel from the web storefront, the head, to the commerce backend – thus significantly reducing the load on the server, allowing even non-cached content to load faster.
Monitoring: Identify issues immediately to prevent lost revenue
Automated monitoring should be a key piece of any decoupled storefront. A headless ecosystem has many moving parts, and anything that impacts the web storefront needs to be identified immediately so that it can be resolved before it impacts the bottom line.
To better understand caching performance outlined in the section above, monitoring combined with diagnostics are essential to proactively identify and address issues at the CDN/caching levels. Mobify provides storefront metrics that track cache misses so you can optimize cache hit ratios for a faster loading shopper experience.
Performance monitoring is also critical. If performance degrades or your site goes down, your ability to quickly correct it is based on what data you have on hand and how quickly you can dig further. Mobify provides monitoring across the web storefront and all backend systems for traceability because if you can’t easily tell within minutes which component is degrading the performance, you’re leaving revenue on the table.
Mobify also has safeguards in place to detect and mitigate potential Distributed Denial of Service (DDoS) attacks by setting a threshold time limit per project. A DDoS attack occurs when hackers try to maliciously bring down your web storefront server by overwhelming it with traffic from numerous sources. In fact, they are often used as smokescreens to mask more dangerous objectives – including network intrusions, malware infections, and credit card theft.
Mobify’s always-on monitoring of potential attacks identifies and mitigates inconsistencies in traffic and anomalies. This level of support offers an additional layer of threat protection ensuring your website is always available.
Security: Stay secure with PCI compliance
PCI DSS compliance is important to any online retailer that transmits or stores cardholder data (i.e. credit card or debit card information) in their own physical on-site servers or remote data farms.
Adhering to the PCI compliance standards requires an organization to meet strict requirements to maintain a professional data storage solution. It includes information on securing an internal hosting network, adequately protecting cardholder data, implementing strong user access control measures, managing data security policies, executing a vulnerability management program, and performing an external security audit.
Mobify has done the heavy lifting of becoming PCI DSS compliant for all our customers. Achieving PCI DSS compliance means we’ve done our due diligence to ensure that the usage of our systems and processes are 100% compliant with the established standards. Not only does this give you peace of mind that we’re adhering to the strictest security standards, but it simplifies the PCI audit process for retailers so that they can easily prove their third-party vendors are compliant.
Confidence in your web storefront
Your web storefront is one of your biggest revenue drivers. It’s essential you have a dedicated strategy around how you’ll deliver and manage innovative experiences through your web storefront. There are many benefits to working with an organization like Mobify where we’ve focused on engineering an enterprise-grade solution to fully run and manage your storefront, giving you the confidence and security to deliver the best customer experiences. Get in touch with one of our headless commerce experts to learn more.