• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

Dion Almaer

Software, Development, Products

  • @dalmaer
  • LinkedIn
  • Medium
  • RSS
  • Show Search
Hide Search

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

March 24, 2016 Leave a Comment


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.

Share this:

  • Twitter
  • Facebook

Tagged With: Web Development

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

Twitter

My Tweets

Recent Posts

  • Generative AI: It’s Time to Get Into First Gear
  • Developer Docs + GenAI = ❤️
  • We keep confusing efficacy for effectiveness
  • The holy grail of a Web SDK
  • The rise of the extensible app platforms

Follow

  • LinkedIn
  • Medium
  • RSS
  • Twitter

Tags

3d Touch 2016 Active Recall Adaptive Design Agile Amazon Echo Android Android Development Apple Application Apps Artificial Intelligence Autocorrect blog Bots Brain Calendar Career Advice Cloud Computing Coding Cognitive Bias Commerce Communication Companies Conference Consciousness Cooking Cricket Cross Platform Deadline Delivery Design Desktop Developer Advocacy Developer Experience Developer Platform Developer Productivity Developer Relations Developers Developer Tools Development Distributed Teams Documentation DX Ecosystem Education Energy Engineering Engineering Mangement Entrepreneurship Exercise Family Fitness Founders Future GenAI Gender Equality Google Google Developer Google IO Habits Health HR JavaScript Jobs Jquery Kids Stories Kotlin Language Leadership Learning Lottery Machine Learning Management Messaging Metrics Micro Learning Microservices Microsoft Mobile Mobile App Development Mobile Apps Mobile Web Moving On NPM Open Source Organization Organization Design Pair Programming Paren Parenting Path Performance Platform Platform Thinking Politics Product Design Product Development Productivity Product Management Product Metrics Programming Progress Progressive Enhancement Progressive Web App Project Management Psychology Push Notifications pwa QA Rails React Reactive Remix Remote Working Resilience Ruby on Rails Screentime Self Improvement Service Worker Sharing Economy Shipping Shopify Short Story Silicon Valley Slack Software Software Development Spaced Repetition Speaking Startup Steve Jobs Study Teaching Team Building Tech Tech Ecosystems Technical Writing Technology Tools Transportation TV Series Twitter Typescript Uber UI Unknown User Experience User Testing UX vitals Voice Walmart Web Web Components Web Development Web Extensions Web Frameworks Web Performance Web Platform WWDC Yarn

Subscribe via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Archives

  • January 2023
  • September 2022
  • June 2022
  • May 2022
  • April 2022
  • March 2022
  • February 2022
  • November 2021
  • August 2021
  • July 2021
  • February 2021
  • January 2021
  • May 2020
  • April 2020
  • October 2019
  • August 2019
  • July 2019
  • June 2019
  • April 2019
  • March 2019
  • January 2019
  • October 2018
  • August 2018
  • July 2018
  • May 2018
  • February 2018
  • December 2017
  • November 2017
  • September 2017
  • August 2017
  • July 2017
  • May 2017
  • April 2017
  • March 2017
  • February 2017
  • January 2017
  • December 2016
  • November 2016
  • October 2016
  • September 2016
  • August 2016
  • July 2016
  • June 2016
  • May 2016
  • April 2016
  • March 2016
  • February 2016
  • January 2016
  • December 2015
  • November 2015
  • October 2015
  • September 2015
  • August 2015
  • July 2015
  • June 2015
  • May 2015
  • April 2015
  • March 2015
  • February 2015
  • January 2015
  • December 2014
  • November 2014
  • October 2014
  • September 2014
  • August 2014
  • July 2014
  • June 2014
  • May 2014
  • April 2014
  • March 2014
  • February 2014
  • December 2013
  • November 2013
  • October 2013
  • September 2013
  • August 2013
  • July 2013
  • June 2013
  • May 2013
  • April 2013
  • March 2013
  • February 2013
  • December 2012
  • November 2012
  • October 2012
  • September 2012
  • August 2012

Search

Subscribe

RSS feed RSS - Posts

The right thing to do, is the right thing to do.

The right thing to do, is the right thing to do.

Dion Almaer

Copyright © 2023 · Log in