How to achieve true website improvement at scale

There’s a lot that goes on behind the scenes of building a successful ecommerce business

Like your physical supply chain, much of your engineering team’s work goes unseen. But their responsibilities impact almost every part of your business—from managing traffic spikes and working with marketing leaders to ensuring homepages are beautiful (and performant!) for shoppers all over the world. Both your developers and customers have high expectations for their work. Still, developer tooling often limits teams from creating the best user experience possible. There's a better way to meet your team's and customers' expectations.

5 ways to improve your developer experience + earn more revenue

Using best practices and examples from ecomm teams, let’s explore five technical strategies that will improve your developer experience and your bottom line.

1. Consider NoOps

Being an engineer for an ecomm company also means being a strong multitasker. You have to move quickly, jump on trends, and be ready to update and iterate at a moment’s notice. Good engineering work drives better user experiences, which increases site traffic and conversions. But what happens when you get unprecedented traffic, like on Black Friday or Cyber Monday?

Traffic spikes shouldn't be scary. They should be exciting.

This is where the concept of NoOps (no operations) is useful. The goal of NoOps—completely automating the deployment, monitoring, and management of applications and the infrastructure on which they run—can help ensure that timelines are met. With platforms that enable this automation, your devs can stay focused on delivering great experiences, whether you have 100 visitors to your site or millions.

Take seasonal promotions like Black Friday when you know there’s going to be a traffic spike. Often, without NoOps, it can take weeks for your DevOps team to stand up new services, like installing app dependencies, configuring database access and service roles, and running end-to-end (E2E) tests. This type of work is imperative before a big traffic spike because if your site goes down, that’s revenue lost. But by using platforms like Vercel that support NoOps, your team can automate the work.

NZXT is a marketplace where gamers can shop for PCs and gaming accessories. During lockdown, they experienced a huge boom in traffic from work-from-home demands for electronics. Their existing ecommerce solution struggled to scale. They needed to revamp their platform quickly, without disrupting the business. In less than 30 days, they ported their frontend to Vercel—removing all that technical debt that weighed down their small team—and instantly saw a 20% improvement in performance, even at peak traffic.

With Vercel’s serverless infrastructure, you can be ready for anything—and confident you can maintain a high-quality experience and peak-level vitals, whether it’s a regular Monday or the holiday rush.

Rely on Vercel's serverless infrastructure for:

• Infinite scalability. Every layer of our infrastructure scales up and down dynamically, so you don’t need to worry about traffic spikes.
• Intelligent edge caching. Our Edge Network preserves copies of critical metadata to avoid and tolerate outages. Plus, framework integrations ensure optimal caching and purging.
• Reliability and speed. Since deploying and reverting ensure resources and metadata are acquired and provisioned successfully, users won't experience site errors and your site can always handle high traffic.

2. Look at personalization as a performance challenge

Personalization is expected, not an exception, in ecommerce. You want users to feel like you’re creating content solely for them. But this comes with its own challenges. Oftentimes personalization solutions are overkill and clunky. What’s more: They can drastically impact site speed and performance.

Static sites are often faster than highly dynamic sites that are personalized to your user. Teams try to layer A/B testing and personalization scripts onto these static sites, but doing so can lead to client-side bloat and content flash every time the user refreshes.

Vercel gives developers the ability to do server-side personalization without impacting the speed and agility of your site thanks to Edge Functions. Edge Functions allow you to deliver content to your site’s visitors with speed and personalization, and are deployed globally by default on Vercel's Edge Network. They enable you to move server-side logic to the Edge, close to your visitor's device—this reduces the length of the feedback cycle and gets data to your users faster. If users can move around your site faster, they'll convert faster, too.

To use Edge Functions, you can deploy Middleware, which is code that executes before a request is processed. Depending on the incoming request, you can execute custom logic, rewrite, redirect, add headers, and more, before returning a response. (That means personalization without the loss of performance.)

Start small, measure, and iterate for best results

“Buying signals” are the actions customers take while evaluating a purchase. They can also help predict what customers might do in the future. The best way to get started with personalization? Look at the signals customers have already sent you. Personalize their site experience based off previous orders, followed by recently viewed items, then recently viewed categories. (Anything beyond that requires a whole lot of traffic to deliver an uplift.) So, start small, measure results, and iterate. Don’t buy a large personalization solution just because you can.

3. Optimize everything

In order to sell just about anything online, you need an attractive storefront to get users excited and then a lightning-speed site to get them to convert. (Who is going to wait around for images to load when they want to buy something nowadays).

Often, out-of-the-box ecommerce solutions don't give developers the tools they need to make granular optimization decisions. By conforming to these pre-set specs, your site will never be as performant as it can be. With flexible tools like Vercel that enable customization and frameworks like Next.js, your site will be fast, reliable, and good-looking by default.

While they may seem small, images are hugely important, which is why they take up about half the data on the internet. Your product pages are only as good as that product image, but large images can delay load time. This is why you want to make sure each image is optimized to ship the smallest size possible for each device. With Next.js, images can default to 35% smaller than the JPEG files without impacting the quality index, which drastically reduces load time.

In the same way, special fonts and running unnecessary scripts can also slow load time. But with Next.js, developers are able to default everything to be performance-first.

The stakes are high

Every millisecond delay in website load time decreases conversion rates. Google has found as mobile page load times go from one second to three seconds, the probability of bounce increases 32%. After five seconds, the probability is 90%, and by six seconds—just one second longer—the probability of bounce rises to 106%.

As real-time analytics, personalized recommendations, and dynamic pricing become the ecommerce norm, speed is ever more imperative. While seconds are critical, so is the experience. You can no longer sacrifice interactivity for speed.

Let’s take a look at Parachute, a modern lifestyle brand that experienced massive growth over the past few years. With all this growth, they realized their out-of-the-box shopping solution wasn’t giving them enough customizations and flexibility. So they migrated to Next.js and Vercel, which offered those performance-first optimizations without compromising site speed or SEO. In just one month, page load time improved by 60%.

4. Track Core Web Vitals from the field

Remember what we said about latency having an impact on your bottom line? Well, in addition to optimizing your web assets, the next tactic for protecting performance is to respond to degradations immediately by tracking real-time user data. Most teams test for performance by creating synthetic tests for their site. Unfortunately, this method of testing doesn’t offer real-world insights. Synthetic tests are like testing from a clean lab environment with no variables. But in the real world, there are tons of variables that can impact site performance, like if a user has a slower network connection or if their computer is using a lot of CPU. If you’re not getting a full picture of all your customers, you’re not getting full conversions either.

We should point out that lab testing isn’t bad—it can be especially useful during pre-production when your site doesn’t have any real users yet, offering a glimpse at how future users will interact with your pages.

But if you do have traffic already, Vercel helps you forgo synthetic tests and gathers data from real users in real time by providing Core Web Vitals data automatically.

Don’t know what Core Web Vitals are? Rolled out in 2021 as part of Google’s Real Experience Score, Core Web Vitals are a set of specific metrics Google has deemed important in a webpage’s overall user experience. Fundamentally, these factors measure loading time and performance, responsiveness to user input, and visual stability. You can see these metrics at any time for all of your pages in your Vercel console.

Here's a tip...

Prioritize pages by search traffic to ensure you’re spending the most time optimizing the pages that matter most to your business.

The advantage of measuring with Core Web Vitals is that you have accurate field-tested performance data with every user represented: a true picture of your user experience. You no longer need to worry about whether your site performs faster or slower based on the specific tech set up of a customer. Core Web Vitals also allow you to move to event-driven monitoring where performance degradations can be dealt with in real time.

This means your SEO, engineering, product, and design teams can now all be focused on the same goal: creating a frictionless buying experience to increase conversion.

With these insights, your teams will be able to measure their work and improve, creating more efficient iteration cycles, and eventually shipping better products faster.

5. Marketing and engineering teams need to collaborate (better)

Ever had your team build a feature only to have the marketing team veto most of the design before launch? If so, you understand from first-hand experience why engineering and marketing need to work together early in the process and avoid wasted work. To keep your teams working efficiently, break down silos between them and share work early and often.

In the past, this type of push and pull between teams was difficult because spinning up individual test environments for every feature was too time-consuming. But with modern hosting solutions and advanced CI/CD pipelines—plus the fact that Vercel integrates with digital asset management systems (DAMs) and leading CMSs like Contentful—it’s easier than ever to get your teams to work in parallel, instead of on top of each other.

To make sure teams are collaborating at their best, use preview deployments. Within minutes your team can test, discuss, and iterate using live sites, without the need for complicated staging setup. When collaboration is embedded into your workflow, it can improve performance, help with productivity, and make your organization a better place to work.

See it in action: NZXT improves their ecommerce site in time for Black Friday

NZXT is a global company that builds custom gaming PCs. Their site is an interactive hardware-designing experience for gamers.

Since moving from a monolithic software stack to a headless frontend solution with Vercel, NZXT has enabled their site to effortlessly scale to support their high-volume sales moments.

Their engineering leaders and teams rest easy on Black Friday, knowing that their Next.js frontend is prepared for an influx of global visitors. 

Another key element to their success is enterprise-grade support. “Vercel customer support and monitoring is the best in the industry. That gives us a lot of confidence going into Black Friday,” says Donny West, NZXT Principal Software Engineer.

In conclusion: Make it easy for people to give you their money

Seems pretty reasonable right? If someone wants to buy your product, don’t get in their way. That means focus on speed, agility, and accessibility, build strong guardrails into your workflow, personalize when you can (without compromising speed), test often, and collaborate with other stakeholders to make sure new features truly work.

A strong engineering team will protect your site and your users, whether you’re prepping for Black Friday, a new launch, or anything your business may have planned.