Progressive Rendering: A killer (and under appreciated?) feature of the Web

I am flying home from a fantastic trip to London and India, where I had the pleasure of meeting with some fantastic engineers who are pushing hard to deliver great experiences to their users and their business.

There is nothing like getting a fresh perspective than when you spend time with different cultures, and this trip definitely got me thinking about the challenges that we face in different parts of the world, as well as the opportunities that are very much shared.

Being on 2 and 3G connections, and being on the other end of massive latencies (even when going through some LiFi) reenforces the importance of performance.

What really hit home was an inherent feature of the Web that I don’t feel like we appreciate quite fully: the progressive nature in which browsers can render content as it comes in (unless we mess it up).

Jake Archibald does a fantastic job at explaining this, and his side by side examples remind you of the difference.

With Ajax on the one hand we laughed at how painful it was to think about a world in which we destroy and create the world of our application on each page request. What was also amazing though was how good browsers got at not making it seem that bad. As you navigate around a website with the same general shell, you notice that the browser often does the right thing and it feels like the header is kinda hanging around.

The proponents of solutions such as turbolinks take that to the next level by replacing the content area (and thus keeping the shell around, with the JS and CSS all loaded and prepared). Sometimes these solutions actually feel faster than a traditional SPA. Why is that?

Often the reason is that turbolinks solution plays right into the capability of the browser to progressively render the content area. On the other hand, the SPA may be connecting to a JSON API and only updates the UI when the result set is fully loaded and passed on to render a view. Whoops, you may not have even realized it, but you bypassed the ability to render 🙁

The perception of a progressive render

When a user starts an action and slowly sees content drawing onto the screen they see momentum. Here it comes. Wait around. Progress.

Compare this to the times that you have seen a loading indicator spinning around. You know it lies. You don’t know if there is anything gumming up the works. This lack of progress can give you the nudge to switch over to something else, and there is a real chance that you won’t switch back.

A progressive render will keep the fish on the hook and is vital for engagement. It also gives the user value. The best case scenario for a progress indicator is when you trust that it is showing you reality, and it is steadily moving. For example, if you are downloading a movie and the circle is filling up steadily. This allows you to predict the end time, and as long as that time isn’t too far in the future you may hang around for it. For content on the web, rather than seeing an abstraction of what has loaded, you get to just actually see and consume it! If I go to Wikipedia, I can start reading as soon as possible, and as long as the content is streaming in faster than I can read, it is indistinguishable from having all the content ready to go.

Waiting for all of the content before it is displayed is like going back to the dark ages when you had to download the full video before you could watch it, compared to buffering and streaming so you can watch it as soon as a chunk has come in. It is night and day.

First bytes to action

Flipkart, who have created a fantastic progressive web app, have a great metric that they track: bytes to conversion. I am sure that you can come up with equivalent metrics for your business, and you should. We used to have a wave of services that would do all they could to push you to install their application. They made the leap that by doing this they would make you a loyal customer who would be worth more. The problem with this is that the causation may be wrong. Users who are loyal will have the desire to put you on their home screen and reengage. But, tricking or forcing someone to get an app there won’t necessarily make them loyal. In fact, we have shown how hard it is to get repeat visits from applications. If I had a dollar for the number of apps that I downloaded and basically never used…..

Instead of trying to force a user down the loyal line, before they may even have had a chance to check you out, you can instead take a different path. On this path you focus on delivering a great experience, and you build that loyal user. From the second that a link is shared, and I tap on it, what do you do for me. If you make be go to an app store first, you may have already lost. If I go through with the install, I am now sitting there waiting for a lot of data to come down before I can even start the experience.

If you are a publisher, monetizing content, why would you do that vs. work to deliver that content, in a way that I can start consuming it as soon as possible. Get me into the funnel asap. Don’t give me a chance to move on.

Crossing the streams

If you believe in the power of progressive rendering you need to make sure you are doing everything you can to make sure your experience is not messing up and stopping the natural flow from working. You need to be flushing data to the browser correctly. You should consider server side rendering to get HTML down as fast as possible (v.s. inlining JSON, or even worse having to make another connection to get the JSON back).

Jake has been banging the drum on how fantastic it is that we are getting the natural flow into the world of JavaScript, thanks to streams, a new API that works on top of fetch(). To handle backwards compatibility, on the browsers that don’t support it, you can also work with XHR and make sure to be able to take content out of the response as it comes in (e.g. delimiter the response in chunks of JSON that you can parse).

With streams themselves you can do all of this much more efficiently, bypassing the building of a large response in memory. This also means that you can really simplify how smart you need to be when it comes to the size of your content.

When you are dealing with slow data connections you may think about doing something like this:

renderItems(onBad2GConnection ? 5 : 50);

Seems reasonable. Send back less data on that slow connection. Then you start thinking about how you are doing to implement the onBad2GConnection piece. Do you look at connection.type? Well, that doesn’t tell you the reality of the network conditions. There is a really good chance that you get this wrong, so wouldn’t it be nicer to not have to consider that?

With streaming, there is no real harm, as the data just keeps coming back and you keep rendering it.

Something that Apps Don’t Have

Each platform has trade offs. Apps have advantages, but we don’t always talk about the good things about the Web. We often talk about the awesomeness of URLs, and how these can be shared anywhere. These links connect together the Web and allow experiences to flow, and we allow users to traverse that flow by going back and forth.

I believe that progressive rendering deserves to be up there side by side with these pockets of goodness, and we owe it to our users to come up with solutions that keep the stream moving. Apps need to download, and then get data that is used to populate a view. The Web can stream both the data and the views. On the fly.

With streams we can take this to our richer applications and allow us to efficiently deliver a great experience. Streams are yet another progressive enhancement though, and we can get streaming to work just fine on old browsers, as long as we are vigilant and don’t put up a damn.

Progress.