We love creating fast and engaging web apps at nearForm. Its part of our DNA to take whatever we do to the next level. Even though we are known for caring about the performance of what we build, we are also known for caring about the end-user experience.

New web standards are coming out often, its a constantly changing world with new technologies and frameworks. We like to lead the way on what we do best: rock-solid, blazing-fast and all-around awesome software that incorporates the bleeding edge without compromising compatibility, keeping existing audiences in mind. Progressive Web Apps (PWA) gives us the perfect opportunity to do just that.

In this article we detail how to build a progressive web app covering the following topics:

  • What is a PWA.
  • What makes a PWA progressive.
  • The core principles of a PWA: Fast, Reliable and Engaging.
  • What is an App Shell and how can it help us deliver a great user experience.

What is a Progressive Web App?

A progressive web app is an enhanced version of a Single Page App (SPA) with a native app feel. Progressive web apps are developed using web standards, but they have some native features because they are fast, smooth and responsive. They are installable on the device, they work regardless of the network state and they engage with a user just like a native-app does.

Progressive Enhancement

The P in PWA stands for progressive as in progressive enhancement1. This is when a web app provides the best experience possible within the available capabilities of the browser being used; ultimately taking advantage of cutting-edge features while still providing an experience to the user without relying on JavaScript.

Server-side rendering

To achieve the ultimate level of progressive enhancement we need a web app that can fully render content on the server, not just a header and footer for example. You can argue that no one is using a browser without JavaScript, thought this can be true, in fact, we can see the browser as JavaScript-less while initially loading a page. Without this JavaScript-less experience, the user won’t see any content until a page is fully loaded, neither can search engine bots because most of them don’t run JavaScript.

Besides enabling progressive enhancement, server-side rendering also brings performance and SEO benefits. By making sure the first step is done right and our content is rendered on the server, we have a solid baseline for creating the best experience possible.

Fast – Performance matters

Performance matters the most the first time your user visits. Local caches are empty and resources have to be downloaded from the server through the network. Depending on the network and device being used, there is a period of time where the user has to wait until something is displayed on screen. On high-latency mobile networks like 3G, that period can go up to dozens of seconds if no optimizations are in place.

The amount of time the user has to wait is critical. The user’s attention span decreases as the waiting time increases, ultimately forcing the user to leave after a certain threshold2. This has a huge impact on a business. Studies show that the conversion rates are much higher on web apps that load faster when compared to their slower counterparts, concluding that 1 extra second of page loading can be worth millions in lost revenue!3

In order to avoid this scenario, the load time must be optimized. Looking at a simplified way of how the browser handles the initial page load, some prioritization can be put in place to optimize the critical render path. This helps deliver meaningful content as fast as possible creating the perception that the page is loaded, even if the loading is still ongoing.

A simplified way of how the browser handles the initial page load

It becomes obvious that we need to remove JavaScript and CSS files from the critical render path by making them non-render-blocking. These resources are still downloaded concurrently but only loaded after the first render finishes. It’s important to remember that our goal is to deliver content as fast as possible so we don’t rely on JavaScript to fetch and display the content. Server-side rendering must be used to ensure content is displayed at the first render.

Some optimizations that can be used to improve the perceived load time are:

Improve HTML download time

  • Reduce HTML size (probably not much to reduce)
  • Reduce TTFB4 as much as possible: Use CDN / caching for static pages and improve server page rendering performance

Improve other resources download times. For example JS, CSS and so on..

  • Reduce JS and CSS size by splitting code into separate bundles eg: homepage.js and homepage.css, about_us.js and about_us.css
  • Serve these resources fast, ideally using a CDN / caching
  • Use HTTP2 push to send those files reducing overall RTT5

Improve time for render-blocking resources to load

  • Load CSS files after first render (using JavaScript)
  • Inline styles above the fold (otherwise page will be unstyled)
  • Use defer or async on script tags

Don’t miss a beat

Get all the latest NearForm news,
from technology to design.
Sign Up