The Future of Ecommerce Frontend and How it Impacts Your Revenue

With the rise of smartphones and LTE, shopping on mobile devices now accounts for more than 49% of ecommerce sales. During last year’s multi-billion-dollar Black Friday/Cyber Monday weekend, that number jumped even higher—69% of sales were placed on phones or tablets.

Mobile ecommerce is set to grow even more over the coming years.

It’s no surprise that companies are racing to optimize for mobile shopping experiences and replacing outdated technologies for ones adapted for mobile.

In this article, we’re going to focus on what technology companies are using for the frontend of their online stores—frontend being the part of the website shoppers can see and interact with—and what new technologies successful ecommerce companies are adopting to adapt for mobile.

Why You Should Care About Frontend

For three reasons:

• Your choice of frontend technology affects your mobile page speed;
• Mobile page speed affects your conversion rate; and
• Your conversion rate ultimately affects your revenue.

Let’s attach some real-world numbers to this scenario, courtesy of an example from Neil Patel: Say you operate an online store that pulls in six figures a day. We know a one-second delay in page response can result in a 7% reduction in conversions.

So, per Patel, “if an ecommerce site is making $100,000 per day, a one-second page delay could potentially cost you $2.5 million in lost sales every year.”

Repeat: MILLIONS of dollars in lost sales every year.

It starts at the top, which is your frontend technology. If your traffic is highly mobile and you care about revenue, read on.

#cta-visual-fe#<cta-title>A radically different approach to headless commerce<cta-title>See what’s possible for your brand with an all-in-one Frontend Platform like Shogun Frontend.Learn more

How Speed Impacts Mobile Performance

OK, the importance of mobile optimization is well-known by pretty much everyone who works in ecommerce.

But what are the real numbers behind it? How big of a factor is speed in mobile performance, and how much does one second really matter?

Here are some key statistics:

• Fifty-three percent of users will abandon a site if it takes longer than three seconds to load.
• Seventy-nine percent of online shoppers who encounter poor website performance say they won’t return to that site to buy again.
• And, as a reminder from earlier, a one-second delay in page response can result in a 7% reduction in conversions.

It’s all about bounce rate, the percentage of visitors who abandon a website after landing on it.

You want a low bounce rate for your store. After all, it probably took a lot of advertising dollars to get those visitors on your site and keeping them there longer is directly related to a higher conversion rate.

Here’s a look at bounce rate and load-time data:

• Between one second and three seconds, the probability of bounce is up by 32%
• ‍Between one second and five seconds, the probability of bounce is up by 90%.
• Between one second and 10 seconds, the probability of bounce is up by 123%.

If you’re worried that your mobile performance is weak, you have reason to be concerned.

“Our data shows that while more than half of overall web traffic comes from mobile, mobile conversion rates are lower than desktop,” wrote Daniel An, former Global Product Lead, Mobile Web, at Google. “In short, speed equals revenue.”

Speed equals revenue —that’s coming from Google.

Now that we have solid data that shows bounce rate is tied to speed and bounce rate is directly correlated to revenue-related conversions, we can explore technologies that improve mobile site speed.

But before we jump to the future of ecommerce frontend technology, let’s consider its past and present.

How Ecommerce Frontends Have Traditionally Been Built

Most of the DTC ecommerce experiences you have today have frontends that are traditional websites. Websites are made primarily of HTML and CSS, the two most basic coding languages, and can be built with these tools or in these formats:

1. Custom Code
2. Themes
3. Page Builders
4. Experience Managers

Let’s break each one down.

1. Custom Code

HTML, CSS, maybe a bit of JavaScript… these are the makings of a completely custom website.

This approach has gone a bit the way of the dinosaur, as coding from scratch is tedious and has associated pain points of high development costs, both for the build and maintenance.

On top of that, HTML is susceptible to becoming “bloated” code, which can drag down site speed.

Lots of ecommerce stores have had completely custom-coded websites.

However, many companies that used to choose this option now go with themes (if smaller) or experience managers (if bigger).

Websites require a full-page refresh between page clicks—and when there is limited connectivity, or if the page has too much content or if you’re making a bunch of API calls (when a website needs to fetch data from a third party, like a reviews widget), the page speed is adversely impacted.

2. Themes

Themes are a premade template of code for the frontend of a website created by a developer or development agency.

It’s kind of like a coloring book/paint-by-numbers situation: You get the outline of the website and a solid foundation, though you’ll need a developer or someone with decent HTML/CSS knowledge to customize the look.

Themes have been popularized by ecommerce platforms such as Shopify, WordPress, and BigCommerce.

Themes have the same woes as custom-coded websites when it comes to page speed and mobile performance.

Some come with performance enhancements, and clever agencies can “strip down” a theme to the bare essentials—for instance, minimize the use of third-party apps and get a site that has pretty decent mobile performance.

But, the full-page load refresh still leaves even the best websites one generation behind newer frontend technologies.

3. Page Builders

Disclaimer: There’s a degree of bias here since my company, Shogun, has a very successful page builder product.

Page builders allow non-technical people to design and deploy a website. Using a visual “builder,” typically one that includes a library of elements (slider, image, Instagram feed, etc.), users can drag and drop onto a page and then style it using codeless controls (color picker, font size, margins, padding, etc.).

When engineered properly, page builders produce clean, search-engine-readable, raw HTML code. Bad page builders can create messy, bloated HTML that can adversely affect speed and SEO.

Page builders make it easier to build a website. But, they still have the same issues with page load times that plague custom code and themes.

4. Experience Managers

Experience management software is a type of frontend-focused software that serves both a content management function as well as a digital experience function.

Digital experience management often means tools related to personalization and multivariate testing (A/B testing). Names you might recognize: Sitecore, Acquia and Episerver, to name a few.

While these software are super robust, there are many issues, including:

•  Implementation time, cost, and feasibility
• Ongoing SaaS costs, which can be absolutely massive
• They still don’t do anything to improve the speed performance of the site and can sometimes adversely impact the load time
• The user interfaces are often outdated and unintuitive when compared to modern SaaS

The complexity of these software can’t be overstated.

I’ve heard that a major provider is only able to onboard 50% of the clients they close.

#cta-visual-fe#<cta-title>A radically different approach to headless commerce<cta-title>See what’s possible for your brand with an all-in-one Frontend Platform like Shogun Frontend.Learn more

Next-Generation Technologies That Focus on Mobile Shopping

Here are three major ones:

1. Native Mobile Applications
2. Accelerated Mobile Pages
3. Progressive Web Applications

Let’s take a look at each one individually.

1. Native Mobile Applications

We’re all familiar with native mobile apps. Many of us have the Facebook app, the Spotify app, and, ahem, the Amazon app installed on our phones right now.

Mobile apps are device-specific mobile apps installed via a marketplace like the App Store or Google Play.

With native apps, GPS, push notifications, and gestures are more readily available. These apps offer more complete caching than PWAs, so they are better for low or zero connectivity.

They also offer the fastest speeds in terms of navigation.

On the flip side, app store installation is a major barrier to adoption: Who’s going to go download 25 mobile apps for all their favorite DTCs?

Mobile apps are fine for large brands that have highly loyal and returning shoppers, like Adidas. But if you’re an emerging brand, it’s unlikely your audience will withstand the friction of seeking out and downloading your app.

Also, the App Store has content restrictions and fees.

Even after install, the battle isn’t over for native mobile apps. For example, nearly 60% of visitors to Flipkart’s PWA had previously uninstalled the native app primarily to save space.

2. Accelerated Mobile Pages (AMP)

AMP is an open source framework developed by Google and has been around since early 2016.

These web pages load near-instantly with a unique coding language and are hosted on a CDN, which delivers a cached version of the page.

Discoverability is a major benefit of AMP: It appears in the carousel in Google search results. While “AMP can only support lightweight content,” that also means quicker load times, according to Instapage.

With that said, anything interactive requiring JavaScript cannot be created using the AMP framework.

For AMP, dynamic content is off the table.

AMP is viable for a landing page that has very limited function, but not for a true ecommerce experience with a lot more dynamic interactions.

3. Progressive Web Applications (PWA)

PWAs are mobile online store experiences designed to look, feel and work the way native mobile apps do, but right in the browser—no App Store download required.

Google defines a Progressive Web App as having these three core tenets, as organized by BluEnt:

• Reliable: Loads instantly, even in less-than-stellar network conditions.
• Fast: Quick to respond to user interactions with smooth functionality.
• Engaging: Gives off the feeling of a native app on the device. Unlike AMP, JavaScript is very welcome.

PWA is a Google initiative. The full definition is a very long checklist of features a website build must include to meet the requirements of a PWA.

PWAs are much faster than traditional websites, but not quite as fast as native mobile apps or AMP… but they’re closing the gap. Also, uncertain network conditions are fine, but native apps are still better for zero connectivity.

Unlike AMP, PWAs are robust enough for a full ecommerce site build, and they have none of the App Store friction that burdens native mobile apps.

More and more forward-thinking ecommerce companies are taking the PWA approach to their online stores, and it seems to be the technology of choice for headless ecommerce builds.

Side note: Although “headless” may seem like a complex concept, it basically means that a different technology is used for the frontend of an online store (the part shoppers can see) than from the backend, which is generally built on an ecommerce platform such as Shopify, BigCommerce, Salesforce or Magento.

How Progressive Web Applications are Built

Progressive Web Application builds involve these primary components:

1. Developers who know a JavaScript framework, like React or Vue
2. A SSR framework, like Gatsby or Nuxt
3. A CDN with the ability to build PWAs, like Netlify
4. A headless CMS, like Prismic or Contentful
5. A middleware to connect your Shopify data, like Nacelle
6. A way to add all your third-party integrations manually, like Yotpo or Klaviyo

For technical readers—let’s go a little deeper into the purpose of this tech stack:

GitHub describes the process like so:

“A service worker, written in JavaScript, is like a client-side proxy and puts you in control of the cache and how to respond to resource requests. By pre-caching key resources, you can eliminate the dependence on the network, ensuring an instant and reliable experience for your users.”

For non-technical readers—you’re probably feeling a little overwhelmed with the prospect of this technical undertaking.

You’re not alone! Many professional web developers and agencies feel the same.

Which leads me to a shameless plug for Shogun’s newest product, Shogun Frontend a powerful experience manager and CMS that renders your store’s frontend as a sub-second Progressive Web Application.

We’ve taken the aforementioned complex technical architecture and productized it as SaaS (software as a service). More on that in a bit.

Progressive Web Applications: The Results

Companies that have implemented PWAs have seen impressive results along the way.

Here are some findings across industries (H/T Cloud Four and PWA Stats for organizing this data):

• Petlove’s PWA experienced both a 2.8x increase in conversion and increase in time spent on site (video).
• West Elm’s PWA experienced a 9% lift in revenue per visit and a 15% increase in average time spent on site (video).
• Flipkart’s PWA is responsible for 50% of its new customer acquisition. (Sixty percent of visitors had previously removed its native app to save space on their devices).
• Lancôme saw a lot of growth after reworking its mobile site as a PWA, per this Google case study: The beauty retailer saw a 17% increase in conversions, a 51% increase in mobile sessions overall, and other impressive results.

This is just a fraction of the results that ecommerce companies have seen after rebuilding their online store frontend as a progressive web application.

I like to keep tabs on some of the mini case studies on Cloud Four and PWA Stats and on the Google Developers Blog.

Recommendations for Improving Your Mobile Performance

If you’re a new store that’s just getting started, I’d recommend going after low-hanging fruit for site performance before making the investment in next-generation technology. Here are some tips:

• Use Google PageSpeed Insights to diagnose your problems. It’s a free tool provided by Google to check your page speed and review the issues that are likely causing slower load times.
• Remove any and all unnecessary third-party apps from your store. The API calls to those apps can cause major drag, and they can often inject code into your theme that bloats the codebase and slows your site down.
• Change the way you serve your images. “Image formats like JPEG 2000, JPEG XR and WebP often provide better compression than PNG or JPEG, which means faster downloads and less data consumption” (Google warning text).
• Implement lazy loading. “Consider lazy-loading offscreen and hidden images after all critical resources have finished loading to lower time to interactive” (Google warning text). Shogun Page Builder offers lazy loading right out of the box, as do some themes.

However, if you’re an ecommerce company doing serious revenue (more than $3M in annual rev), consider investing in next-generation technology for your frontend.

If you’re making $5M annual revenue and you can increase your conversion rate by 5% by removing all the load time between clicks on your site, you’re making an extra $250K annually.

If you’re making $50M annual revenue and you can increase your conversion rate by 5% by removing all the load time between clicks on your site, you’re making an extra $2.5M annually.

The return on investment is pretty clear.

Approaches for building a PWA from scratch are mentioned above.

However, if you’d prefer to use a piece of software that can create a PWA and serve both your complex experience management and content management needs, Shogun Frontend is worth a look.

Shogun Frontend is an incredibly powerful all-in-one frontend platform made specifically for ecommerce companies, and the output is a sub-second React.JS progressive web application.

It’s a style of headless commerce that works seamlessly with platforms like Shopify, BigCommerce, Salesforce, and Magento, and it makes the fastest ecommerce websites on the internet.

#cta-visual-fe#<cta-title>A radically different approach to headless commerce<cta-title>See what’s possible for your brand with an all-in-one Frontend Platform like Shogun Frontend.Learn more