According to Google, that’s all the time you have before the majority of mobile users will just give up and back out of a page. If your site takes longer to load than that, you’re going to miss out on a huge number of potential sales (you can check on the performance of your mobile site yourself with Google’s Speed Scorecard).
Image source: Google
This need for speed has led to the rapid development of new mobile technology in recent years.
At first, online merchants responded to the popularity of mobile devices by making the desktop versions of their sites responsive, which means that they automatically adjust to whatever device the visitor happens to be using (the smaller screens of mobile devices call for design changes such as larger icons and more streamlined navigation).
But the problem with responsive sites is that they don’t perform particularly well. So, the next step in the mobile technology evolution was online stores developing their own native apps, which are faster than responsive sites and offer useful features such as home screen icons and offline functionality.
The issue with native apps, though, is that users need to go through the trouble of searching for and then manually downloading them from a distribution platform like the Apple App Store or Google Play.
The latest development in mobile technology is the progressive web application (PWA).
The Rise of PWAs
This new type of software corrects the flaws that are present in both responsive sites and native apps.
Like a responsive site, users can conveniently access a PWA by just entering a URL into their address bar or clicking on a link. But PWAs are also as fast as native apps and have native app-like features (home screen icons, offline functionality, push notifications, etc.).
Image source: Google
With these benefits, it’s no surprise that businesses have been able to achieve significant improvements in their conversation rates, sales figures and other key ecommerce metrics by simply developing a PWA. For example, Alibaba was able to increase its conversions by 76%, and The Washington Post improved the load time of their mobile experience by 88%.
Three Questions to Ask Your Developer About PWAs
At this point, you may be interested in developing a PWA of your own. Here are a few questions you should ask your developers before you get started.
1. Do they have the experience needed to build a PWA?
As with most new types of software, PWAs are somewhat complicated and require a good deal of expertise to create.
Specifically, your developers will need to use the following technologies to build a PWA:
- Headless Backend: Traditionally, ecommerce systems have been set up so that the frontend (the interface visitors use) and backend (the behind-the-scenes admin dashboard and processes such as payments and orders) are directly connected. For a PWA, you’ll instead need a system that decouples the backend from the frontend. But thankfully, you don’t need to build this from scratch — many platforms, including BigCommerce and Shopify, have released application programming interfaces (APIs) that allow you to connect their backend technology to a separate frontend solution.
- Middleware: In addition to an API, you’ll need software known as middleware to facilitate communication between your backend and frontend.
- CDN: You can’t get the speed benefits of a PWA without a content delivery network (CDN). A CDN is a network of servers that are distributed around the world, ensuring that none of your visitors experience slow load times due to being located too far away from one of your servers.
- Service Worker: This script creates an offline cache and then receives resources from the cache when they are needed, which is how PWAs are able to work without an internet connection.
- Application Shell: The service worker also allows you to create an application shell — this is the code for the basic interface that needs to be loaded each time the user opens the PWA. By storing this offline in a cache, only dynamic content will need to be loaded in real-time, resulting in improved performance for the end user.
- Web App Manifest: This file essentially tells the user’s browser how to act when the user clicks on the PWA homescreen icon. It includes a link to the PWA’s URL, as well as the PWA’s icon image.
- Frontend Storefront: Finally, you’ll need to create the user interface (UI) for your PWA. Doing this from scratch would require you to use a UI framework such as React or Vue.
This leads to the first question you need to ask your developers about building a PWA: Do they have experience with all of the technologies listed above?
If not, you’ll likely need to hire outside help in order to complete this project, and this would increase the cost of building your PWA substantially. Which brings us to the next question...
2. How much will building a PWA cost?
The financial benefits of developing a PWA are great. But you should consider the other side of your balance sheet and estimate how much building a PWA will cost you before you actually start working on it. Comparing the benefits of this project to its expenses is the only way to ensure that it’s truly worth your time.
Some of the costs associated with building a PWA are moderate — for example, using a backend CMS such as Shopify or BigCommerce could cost as little as $29 per month depending on your order volume, and even fairly large stores can use these services for around $299 per month.
But not every PWA expense is that affordable. The costs really start to add up when you reach the stage of building your frontend UI. Hiring a React developer would mean adding a yearly salary of around $91,000 to your payroll, and even a part-time, freelance hire would cost you about $35 per hour for many hours of work.
Image source: Betica
As a whole, estimates for completing a PWA project range from $6,000 to $20,000 (and that doesn’t include the cost of ongoing updates and maintenance). That’s a wide range of course, which makes sense given that each business will have different goals they want to acheive and features they want to include with their PWA.
For your business specifically, there’s no better subject matter experts than your own developers. Consult with them to get the most accurate estimate for your project.
3. What do they need from you?
Finally, your PWA project is more likely to be a success if you encourage your developers to ask any questions of their own that they may have.
For example, after you initially explain the project to them, they may request that you describe the features you want in more detail. Doing so will help you avoid potential cost-ballooning, deadline-delaying instances of rework down the road.
There may also be some particular software tools that your developers would like you to purchase for them in order to complete the project — it’s always better to get these things sorted out sooner rather than later.
By maintaining effective communication channels before your project, during your project and after your project is completed, you’ll be able to create the best product and user experience possible.