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.
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?
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.
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:
Let’s break each one down.
1. Custom Code
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.
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 softwares 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 timeThe user interfaces are often outdated and unintuitive when compared to modern SaaS
The complexity of these softwares can’t be overstated. I’ve heard that a major provider is only able to onboard 50% of the clients they close.
Next-Generation Technologies That Focus on Mobile Shopping
Here are three major ones:
Native Mobile Applications
Accelerated Mobile Pages
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 phone 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 thefastest 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.
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.
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.
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.
Push your storefront further.
Deliver sub-second load times to all of your customers on any device, anywhere.
Nick Raushenbush is the cofounder of Shogun, software for building the next generation of ecommerce websites. Shogun helps over 12,000 ecommerce brands drive conversions, including Leesa mattresses, Gaiam yoga apparel, K-Swiss, MVMT watches and Chubbies shorts. Before Nick started Shogun, he founded a creative agency that has done work for Google, Roku, Soylent and Pokemon Go.