PWA, the untold story impacting your conversion

PWA, the untold story impacting your conversion

Progressive Web Apps have quite some advantages. The biggest one being a web-product with a native-like feeling. But it is also fast and mobile first, or rather should be. This is the untold story about PWA, impacting your conversion.

User experience implications of PWA

When your SSR website or webshop is suffering from slow loading times, you can always change hosting provider or tweak the server so all visitors will benefit equaly. However, when doing CSR:

  • you can't ask all of your visitors to buy the newest phone (because of budget reasons);
  • and at the same time force them to always use wifi (because your visitors may be in public transport, on vacation or living in rural area's).

User connectivity

As you won't have any influence on the internet connectivity of your visitors, choosing a CSR strategy could pose a risk. User connectivity on itself will be dependant on several factors, such as location and thus internet coverage, but also the internet plan or quality of the provider.

So, a time-out may occure or users might experience slow loading times for individual resources. Within CSR, the initial HTML payload will refer to new resources, resulting in visitors having to wait for a while before seeing anything meaningful.

Device limits

Users might use cheap or older devices for several reasons. As providers stop offering 3G to move on to 4G, you might expect things will get better. A side-effect could be that users without the funds to buy 4G compatible phones, are falling back on 2G. Or, users travelling through more rural area's are falling back to 2G due to the lack of 3G coverage.

Where CPU is already the biggest bottleneck towards mobile users, such shifts in used devices could make things worse. Fact is, the UX gap among your visitors anything but closing.

Code compatibility and poyfills

Another aspect to be aware off within older phones, but also desktop users, might be code compatibility. With JavaScript compilers like Babel, you can write next generation code and be compatible at the same time. The use but also usability of JavaScript is going strong, with new browser features being introduced. Obviously, not all browsers are up to date (looking at you, Internet Explorer and Safari!).

Luckily, we can use so-called polyfills to inject compatibility. Side effect will be, that you end up inserting only more JavaScript, while those older non-compatible browsers or devices are already suffering the most from CPU bounds. Inserting polyfills will only make things worse, when not chosen wisely.

The server side code only has to be supported in the server, versus a myriad of different clients, which means it is more robust, you might not need to transpile, faster development process, more structure and separa­tion of concerns, a good start to following progressive enhancement and not breaking web accessibility and standard mechanisms.

Andres Vaquero @ The Benefits of Server Side Rendering Over Client Side Rendering

No user engagement

Obviously, when building CSR, most (JavaScript) code will only be downloaded once, being cached on subsequent sessions. While navigating within their session, often no page reloads will take place.

However, those visitors should be able to engagement with your product in the first place. When it comes to user experience metrics, you want the following stages to happen as soon as possible:

  • is it happening (First Contentful Paint)?
  • is it useful (First Meaningful Paint / Largest Contentful Paint)?
  • is it usable (Time to Interactive)?

Especially within pure CSR solutions, it is hard to optimize the FMP and TTI metrics. Even SSR solutions are using JavaScript, for example to process the cart and orders. However, you should aim for early user engagement, or risk losing visitors all together.

In the worst case scenario, when tracking is happening after first party assets should be loaded, it is possible your Google Analytics pageview event will never fire, resulting in un-tracked pagevisits from Internet Explorer or other users of legacy browsers and devices. Meanwhile, your marketing or conversion department might celebrate that all your visitors are on the newest devices.

How to solve

One can improve user centered metrics such as First Meaningful Paint and Time to Interactive, improving user experience at the same time. This involves tactics such as tree-shaking and code-splitting. Some toolsets may do this for you (maybe not always in the most ideal way, but it is a start). Also cherry-pick your polyfills; consider the benefits and use them for critical functions only.

You could consider different rendering strategies, and benefit from technical SEO and user engagement/user experience advantages. Don't trust your analytics; Always be sure to double test your visitors and used devices and browsers.

Read more about Progressive Web App is mobile first and fast on the next page.