5 Headless Commerce Pitfalls to Avoid
July 16th, 2021
July 16th, 2021
Congratulations, you have decided to go headless! You may have already read our Headless Commerce 101 Guide and are ready to get to work, but let's be sure you are fully prepared before you dive in.
Here at Nacelle, we’ve seen firsthand how impactful going headless can be—for example, our merchants see a 20% to 30% improvement in conversion rates on average. With that said, there are a number of things that, when overlooked, can become major pitfalls for your store.
We’ve compiled a list of the top five things we’ve seen cause issues for brands making the move to headless. Read on, and avoid these five mistakes as you embark on your headless journey.
Web development is a very wide-ranging field. Not everyone who carries the title of “developer” has the same skillset or background. It’s important that you properly vet your development team for your build.
Doing headless commerce well requires some specific skills and experiences, enough time in the industry to have learned from one’s own trial-and-error, and gained knowledge from a breadth of projects that have been battle-tested in production. Here are some considerations that should help you find the right people for the job.
What is their level of frontend development experience?? A good candidate should be an expert in your frontend framework of choice. You want to go in with your eyes wide open—it’s a lot of work to build an eCommerce store and you want to make sure your team has the right experience to achieve your vision and business goals for the build and beyond.
Do they have proven examples of past work? Ask for project examples (of live sites) and understand the candidate’s involvement in the finished product.
How do they work cross-functionally? A good developer will provide your team with a standardized approach to product and content editing that eliminates the need for them to be involved in every change. Your content editors should be able to make changes to your site without developer intervention.
Imagine your store is a backpack and every third-party script you load is a ten pound brick. “Not too heavy,” says the brick manufacturer. One or two is doable. But ten? That’s 100 pounds. You can see how “not too heavy” becomes just too much for you (and your browser) to bear.
When your development team adds new features to your store, they may use publicly available packages from a platform such as Node Package Manager (NPM) to speed up development and avoid reinventing the wheel for certain aspects of the feature.
During the build process, your frontend framework will take all of the packages referenced in the store and will create a number of files, called “bundles.” The bundles will be referenced in your store’s code so it has access to them when customers visit. Just like with third-party scripts, package vendors vary in size, and the more you add, the more your customers’ devices will have to work to download all the files and run the code.
With that said, it is a good practice to establish a bundle size budget and integrate tooling into your deployment process to enforce the budget. This article from web.dev explains this concept in more detail. Establishing a budget will help your team to be more mindful about the dependencies they add to the store, and may encourage them to find alternatives that are smaller but achieve the same outcome.
When it comes to the dimensions of images used, it is wasteful to serve a 2000 pixel image where a 300 pixel image would appear as the same “rendered size” due to CSS rules or device size. These image optimization components allow you to specify the exact dimensions, file format, and pixel density needed to serve the best image for a given device.
Both “nuxt/image” and “next/image” provide an additional benefit of initially loading your images from one source and hosting them on another (such as Netlify or Vercel’s CDNs).
Using one of these components will drastically improve the overall perception of performance for your eCommerce site, and we highly recommend using “nuxt/image,” “next/image” or “gatsby-plugin-image” depending on your framework of choice.
Google Lighthouse and Page Speed Insights are helpful tools for understanding your store’s performance on desktop and mobile. However, running them incorrectly can produce wildly different results.
According to Google, internet speed, the processing power of your device, Chrome extensions, and antivirus software can all adversely affect the accuracy of your testing. Read more in this great article on web.dev.
To get the most accurate results, use a service like SpeedCurve, or the Lighthouse plugins on Netlify and Vercel.
At Nacelle, we’ve helped brands like Barefoot Dreams, Flex, and Lola go headless the right way. Our APIs, SDKs, and starter kits are built to create a headless foundation for your store that enables your team to grow and delight your customers for years to come.