Headless ecommerce is a way to speed up your online store by using modern technology built for speed. Headless ecommerce essentially decouples what you see on your site from the backend logic and connects the site to data and services via APIs. The main benefits of headless architecture are: site speed, flexibility, and support for future use cases. Check out our full post for more info about what headless commerce is.
There are many reports on how increasing performance impacts conversions
- Amazon found that every 0.1 seconds of load time can cost you 1% in sales
- Improving site load time by a tenth of a second can boosts conversion rates by 8%, according to Google
- 56 percent of customers leave after 3 seconds if a site or image fails to load, and 20% never return, according to a survey by bytes.co
What we do is access your site's performance data by querying Google Page Speed Insights and finding how many long it takes for your page to load as measured by its the "first contentful paint," which we then compare to that of an optimized headless site.
Then, we apply stat that 1 tenth of a second in faster performance can boost conversions by 8% and assume you can get at least half of that (4% per 1/10 a second).
Finally, assuming you can conservatively get your site down to 2 seconds or less with an optimized headless build, we get the formula used to calculate the ROI above: (load time seconds - 2) * (80 / 2)
In cases where the value of the above ROI formula are greater than 50%, there is clearly major room for optimization, so we just consider at that point the conversion improvement can vary significantly, so we consider everything in that range to be "+50%."
There are many paths to you can choose in your migration to a headless site. Generally, we recommend you incrementally migrate over your pages, prove ROI lift and then focus on migrating your high-value pages first (i.e. PLP, PDP). While you migrate, it is crucial you continue to test the headless experience vs the legacy site and create content that can easily live on both experiences. Needless to say, you can do all of this with Builder.
For a free consultation on your options and possible ROI for going headless, contact us.
Visually editing a headless site in Builder.io
Builder.io visually edits code, uses your design system, and sends pull requests.
Builder.io visually edits code, uses your design system, and sends pull requests.
Connect a repo
