As consumers move more frequently from desktop to mobile for their shopping needs, more retailers are implementing Progressive Web Apps (PWAs) as part of their mobile (and overall online) retail strategies. But many retailers remain in the dark about how to optimize PWAs: retailers still report a 47% bounce rate among shoppers that visit mobile sites with PWAs, along with pre-bounce rates (the rates of shoppers who leave a site before the first page even loads) at 17%, according to Mobify.
“Mobile has changed people's behavior, it's made our attention spans shorter,” said Karly Cyr, Director of Mobify in an interview with Retail TouchPoints. “People expect things immediately now, and PWAs provide both real performance enhancements, in that they actually load faster, but they can also make the perception of speed faster. With PWAs, you have features like smooth scrolling and super silky animations, as well as content placeholders so that your content isn't jumping around the page as the page load happens. All that helps to increase the shoppers’ perception that it's actually responding faster to their click or touch, depending on what device they're on.”
PWA Page Load Speed Jumps Dramatically From 4.5 To 1.3 Seconds Upon Second Viewing
“The page loads benchmarks stood out to me, specifically the subsequent page loads. For all of them to be around a second, that is super quick when you think about navigating through a site,” Cyr said. “That's really where the opportunity is, because people have shorter attention spans.”
On an individual basis, the median first page load for a retailer’s home page is 2.6 seconds, but the home page upon its next load is only 0.6 seconds long. While the media PDP takes 5.5 seconds to load, that number drops to a mere 1.7 seconds on the next viewing.
“Progressive web apps are single page applications,” Cyr said. “In its simplest explanation, everything loads on that first page load. That's what makes this subsequent page flow really fast, because you've got the majority of your content loaded, already. There's a whole technical architecture behind it in terms of the caching architecture, and how you break things out.” Cyr recommended that retailers leverage an app provider that uses server-side rendering, which means the app actually renders on the server instead of on the browser to help make the initial page load faster.
Micro-Conversion Rates Are Key To Judging PWA Success
A great way to spot pain points or areas for improvement across the PWA is to inspect micro-conversion or continuation rates (the rates at which shoppers move down the funnel of a retail site). These include visiting a Product Description Page (PDP), then going from a PDP to Cart, from Cart to Checkout and lastly, from Checkout to Purchase.
The micro-conversion rates are at their highest at the start of the PWA experience right into the PDP at 56%, according to the report. But these rates have room for improvement in the other areas, including:
- Cart to checkout (45%);
- Checkout to purchase (31%); and
- PDP to cart (17%).
“For PDP to cart, definitely do a lot of A/B testing around the ‘Add to Cart’ button placement to see what your particular users prefer,” said Cyr. “Use subtle animation effects and alert all models to clearly indicate that an item has been added to the cart. Make the whole experience as obvious as possible to what they're doing and what action they’ve taken. For checkout to purchase, remove any friction points. Always allowing guest checkout is key, and options like Apple Pay can also reduce that checkout friction. Communicate where the shopper is in the checkout process, so you're labeling each step and they know they’re 75% of the way through, almost done so that they're not dropping off.”