Developer.com content and product recommendations are editorially independent. We may make money when you click on links to our partners. Learn More.
By Mark Pedersen.
It is possible to reduce load times on your Web applications by 30%. This can be accomplished by using Progressive Web Applications, a fancy term for the latest breed of Web sites that incorporates the user experience and features we know and love from our mobile phones and applications into the world of Web sites.
This article will cover the benefits and disadvantages of adopting the progressive Web app technology, with a focus on what progressive Web apps have to offer business and Web site owners.
This article is not going delve into minute details covering how to develop and code the service workers, or even how to implement them. For a general introduction to what Progressive Web Apps are all about, please read this post by Iryna Pototska.
It’s been possible for years to have an offline experience on traditional Web sites, but the way to go about it was never easy or well documented. This has changed with Progressive Web Applications and in particular, Service Workers.
These are scripts that run on a normal Web server, and provide added functionality in terms of push notifications, caching for offline browsing, hardware access, and more. They even include the option for certain browsers such as Google Chrome and Opera to ask visitors whether they want to install the Web site as an app on their phone.
Yes, you read it right. You now can install a normal Web site as an app on your mobile devices by implementing the progressive Web app technology. Furthermore, it is 100% free, excluding development costs, and there are no submissions to app stores or any other drawn out process.
There are six major selling points for progressive Web apps. Although they each have strong arguments, when put together, they provide an almost compelling reason to start implementing a progressive Web application for virtually any type of site.
The six items are:
- Page Size Decreases
- Lower Bounce Rates
- Better Conversions
- Indexable
- Push Notifications
- Download to Home Screen
Page Size Decreases
Probably the main contributor to most of the positive metric changes is the fact that the service worker will decrease most page sizes to miniscule amounts compared to their original size. This results in an improvement across the field of both bounce rates, conversion rates, user experience, and so on.
The reason for this is simple. A smaller Web page results in faster load times, which in turn keeps more users actively engaged on the site, especially users browsing from 2G or 3G networks, and other similar unstable Internet access types that results in users leaving the site because of long and slow loading times.
By decreasing the page size, another benefit arises: search engine rankings. It’s no secret that Google prefers ranking pages that load fast above pages that don’t.
And, although most serious Web site owners already have been focusing on this aspect, progressive Web apps and service workers are simply much faster than normal methods of caching and outperform even external CDNs.
Figure 1: Page load times
Image sourced from Google under CC3 license
Taking a look at the preceding table can give a rough indication of the performance impact of service workers and progressive Web apps in action.
The study was performed by Google and measures the impact on performance where service workers were installed.
Controlled – Returning visitor: This shows the service worker actively serving pages for visitors. Note that the service workers only show cached content for users having already visited the site, and thus enable the caching.
Supported – Returning visitor: This is the page speeds that users with a supporting browser gets when browsing a site that is not actively served by service workers, but by traditional methods, but because they are returning visitors, they use the browser’s cache and see greater results than the last example.
Supported – New visitor: For first-time users who have not visited the page before, we see the final columns for both Desktop and Mobiles. As expected, because they have to load everything for the first time, these page load times are the highest among the mix.
The verdict:
It’s clear that there are significant gains to be made by implementing a service worker/progressive Web app on any existing Web site. On average, we see an almost 30% decrease in load time for returning visitors with service workers in action compared to returning visitors without the service worker caching pages.
Some companies have reported up to a 90% decrease in their page load times. However, that more than likely means their original Web site was not properly optimized beforehand.
Lower Bounce Rates
Closely tied to page size decreases, most of the cases featured on Google show significant bounce rate improvements. Even though bounce rate itself is not necessarily an indicator of how well a site functions, particularly because the rise of one-page layouts, it stands to reason that most Web site owners are still concerned with decreasing the bounce rate as much as possible.
There are many ways to go about this, but lowering the page size, and thus decreasing load times in turn, is a highly effective way of doing this. Even Web sites with heavy use of imagery and videos, external scripts, and tracking code can benefit tremendously from service workers and the caching they provide.
Another reason why progressive Web apps help with conversion rates has to do with the home screen functionality, as well as push notifications. This trifecta of positive improvements to an existing Web site is almost guaranteed to provide desirable results.
Better Conversion Rates
For any Web site concerned about getting users to convert, whether that be in form of purchasing a product, signing up for a newsletter, or contacting the Web site owner’s, there is great news to be had.
Since late 2015, there have been a number of successful real life implementations, by some rather large Web sites and organisations around the world. Some of them have shared their experiences on developer.google.com and we’ll go through some of them below.
The main takeaway concerning conversion rates are that virtually all businesses featured on Google’s showcase have been having great success with increasing conversion rates.
For instance, FlipKart is a leading Indian online retailer, and catering to Indian users primarily, one of their key concerns has to do with page speed because that will in turn affect conversion rates and user experience.
What they perhaps did not expect was that they saw a 70% increase in their conversion rates based on people opening the installed progressive app from their phones. A truly impressive number, one that any Web site owner would and should be really happy about achieving.
Indexable
Contrary to how mobile applications work, progressive Web applications are indexable and crawlable by search engine spiders such as Googlebot and similar crawlers. This is because a progressive Web app does not just use tabs like mobile apps, but full URLs with the option of showing the individual pages in tabs like we know them from the smartphones.
This is a huge benefit compared to mobile applications, because it allows users to find your content by searching online just like any normal Web site. In fact, as far as the Google bots are concerned, a progressive Web app is just a normal Web site.
Even though a mobile application will live its life in the app store, sometimes getting clicks and exposure by simply being in a particular category, a progressive Web app will potentially reach many more eyes due to the fact that search engines can pick up all the content and index it.
Push Notifications
Another great addition to the impressive list of features already mentioned is push notifications. We already know these from our Facebook and Twitter apps, for instance, wherein we receive a notification whenever someone has liked our content or request to be our friend.
Where previously this was restricted to full mobile applications, these days Web sites can tap into the power of these notification areas as well. Especially ecommerce and news sites are reporting great increases in conversion rates and click-through rates due to this feature in particular.
Even though there’s potential for users to become accustomed to the usual marketing language and promotional content of push notifications, coming up with creative uses for this area can yield benefits unrivaled even by e-mail newsletters, traditionally seen as a great engagement tool. There is even some research into which email newsletter size gains the greatest CTR.
Figure 2: Permission percentages
Courtesy of a Google study made in July 2016.
More than 58% of users downloading progressive Web apps end up accepting the prompt asking if they are also okay with seeing push notifications on their devices.
Download to Home Screen
Finally, there’s the possibility of having users being prompted automatically by their browser to install the progressive app. One great example of this is used by The Washington Post.
Figure 3: Installing a progressive app
Once users have visited their site more than once, they will be prompted automatically if they want to add the Web site’s progressive app to their home screen. The installation itself is seamless, meaning that they won’t get a slow moving progress bar while they download the app; they won’t even have to be redirected to app stores.
In fact, as soon as visitors enter a Web site with a service worker installed, they can be downloading the content of the site automatically, even without interference. Not just the content itself, but all JavaScripts, tracking codes, images, and stylesheets too, allowing for offline access on top of faster loading times.
Figure 4: Those having accepted the progressive app
Courtesy of a Google study made in July 2016.
More than 11% of Web site visitors download the progressive app once being prompted by the browsers.
Downsides of Progressive Web Apps
While there are relatively few downsides to implementing a progressive Web app alongside your existing Web site, you should at least be aware of the following few things:
- Not all browsers support service workers yet
- Not all hardware features are supported
- Knowledge required
- No app discovery through app stores
Let’s expand on these so called downsides one by one:
Not All Browsers Support Service Workers Yet
Although Google Chrome and Opera are a couple of popular browsers that do in fact support this technology, other popular choices, such as Safari and Internet Explorer, still have not added their implementation of progressive Web apps.
Even though Safari and IE users won’t reap the full benefits of the progressive Web app, they will in turn not get error messages or an incomplete experience as we know from browsers not support Flash, for instance.
Instead, they will simply see the web site as it normally functions, and thus no features will be unavailable on the traditional web site for these users.
Apple haS been adding support for service workers into their FIVE-year road map, and Microsoft has made vague statements about making use of progressive Web apps, but nothing is concrete yet.
This might very well change soon, seeing as more and more companies are opening their eyes to the opportunities the technology provides.
Not All Hardware Features Are Supported
Because the underlying programming language driving progressive Web apps are HTML5 and JavaScript, service workers still work within these limitations. This means that although common hardware features such as the camera and microphone are accessible, other features aren’t.
This includes fingerprint recognition, interacting with native processes, reading or writing to system files on the devices, and other advanced features.
This list might very well be outdated in just a few months from the publishing of this article, because the HTML5 support is continuously increasing in scope, and in the end is up to each individual browser.
Knowledge Required
Due to the rather complex nature of service workers, having a progressive Web app developed can be more costly because the talent is more scarce in this area, compared to general Web developers.
However, with the advance of progressive Web apps this will change with time, and the slight increase in hourly wages for a skilled developer can easily pay for itself if your business is among the first to adopt a service worker in your niche.
No App Discovery Through App Stores
Because progressive Web apps are not eligible for app store submissions, there are a number of people out there opting to have a native app developed so that people will find and download their app via the app store categories and search functions.
On the other hand, a progressive Web app has the potential to be indexed and crawled by search engines, meaning that every single page can be listed on its own in search results, increasing exposure by an order of magnitudes compared to the single page a normal mobile application gets on the app stores.
Conclusion
Because of these features many businesses that have adopted the emerging technology have seen impressive results so far, and once developers and webmasters learn to master progressive web apps, one can expect to see even greater results.
About the Author
Mark Pedersen has been developing for the Web since 2001, always with a penchant for open-source technologies such as PHP. Since 2010, he has been working full time with app development, these days being employed at Nodes, a leading European app agency. He also regularly contributes to WordPress and other open-source projects.
