Improving (perceived) performance using Progressive Web Apps

"AliExpress increases conversion rate for new users by 104% with new Progressive Web App"

- PWAStats

Site performance has a big impact on conversion, with a one-second delay leading up to 20% change in the conversion rate.

Progressive Web Apps allow you to offer a fast, reliable and engaging experience to users browsing your website. In general, any site can be turned into a PWA because they are just web best practices. Implementing does not require huge amounts of effort from the start, you can start with the bare minimums for a PWA and continue to improve from there.

PWA 101: What, How and Why

Serve your site using HTTPS
SSL is mandatory for your site and will help encrypt your web traffic. It will make sure the data between your server and your customer is not read by any unwanted third party.

Implement a manifest file
The manifest file can be used to configure how your site should behave as an application, once installed on the customers’ device

Write a service worker
Add a service worker to enable loading (parts of) your site offline. It acts as a client-side proxy and gives you control over requests (and responses) from your website.

Implementing a service worker will take some time and effort to get right, in the prototype for project “Transforming the in-store shopping experience” we decided to use Workbox which makes it pretty straightforward to write a simple service worker.

The common misconception is that a progressive web app should be a single page application. This is definitely not the case, you can turn your multi page application into a progressive web app without any problems (in fact, this site is multi page PWA as well).

Creating a single page web application will allow you to get the most out of your PWA, especially if you want to improve the perceived performance of your web app.

Focus on performance

One of the main concepts behind PWAs is that you now get to focus on performance from the clients’ perspective. As mentioned, your site does not have to be a single page application, but concepts like having an app shell might help you reach the instantaneous, native app like performance. Having an app shell will improve the perceived performance, that is how fast the site will appear to your customers, therefore this will help even if you are not able to improve performance on other parts of the system.

Available or not available

Let’s say a customer is browsing your site and they suddenly do not have internet access anymore, should the whole site fail or are you still able to provide them with some content, for example the pages they have already visited? It might make sense that they can not complete the checkout process but what about that product page they already visited before? By using service workers it is now easier than ever to decide which content should be available offline and which shouldn’t. And in case you do need internet access, you might not need it at this exact moment. You could use background sync to complete tasks later, even when the customer is not browsing your website anymore. When you combine it with a notification once the background task has completed, you could tell your customer that they don’t need to be online all the time. Do it in a user friendly way and it might draw the customers attention back to your site!