Playing with HTML Streaming - Accelerating Dynamic HTML

Briana Lassig

HTML Streaming - Water Splash

Using HTML Streaming to Improve User Experience

While web applications are moving toward delivering a more personalized, dynamic experience, end users are becoming increasingly frustrated with the amount of time it takes to interact with the web page. Traditionally, web browsers make the request to your backend web server, which then generates the unique HTML. This, combined with the time required to deliver the HTML across the Internet, means the browser sits idle for a time after making the initial request.

To alleviate this frustration, and improve user experience, Instart Logic created HTML Streaming. With HTML Streaming enabled, the Instart Logic service takes reduces the idle time by sending non-unique portions of the HTML down to the browser first, followed closely by the personalized portions of the HTML. It uses machine learning to intelligently determine which parts of the HTML is non-unique across users, separating the head and the body elements of the HTML for a web page and caching those non-unique elements of the head in our service, improving page load time, and overall time to interaction.

Let’s take a look at the Playground to demonstrate exactly how this technology works.

The Impact of HTML Streaming on Page Download Time

First, let’s examine what happens behind the scenes as a web page is loaded to a user device without using HTML Streaming. In the column on the left of the page, you’ll see both the static elements (metadata and CSS) as well as examples of the dynamic elements (Session ID, Dynamic Javascript, and A/B Testing tags) of the HEAD.

HTML Streaming - Download Time Example

The video below demonstrates how a traditional HTML delivery is generated and loaded onto the user’s browser. You can see that it takes approximately 4.1 seconds for the user to start interacting with the content on the page because they have to wait for both the static and dynamic elements of the head to generate and be delivered across the Internet to the end device. Only after the head is loaded, and the body has followed, can the user start to view the content on the web page, and therefore interact with it.

Traditional HTML Delivery Example

When you’re in the Playground, select and deselect various dynamic head elements and take close notice to the impact on performance. The fewer dynamic elements in the head, the faster the time to first content view. But some sites have a large number of dynamic vs static elements because the end goal is a more personalized experience. Which elements will you choose to compromise on so that you can optimize site performance while still serving a personalized user experience?

With HTML Streaming, you don’t have to compromise. HTML Streaming uses machine learning to store information about the head section from previous loads of the same URL by other users and determine which parts have changed, and which parts of the head are unique. It can then send portions of the head section of dynamic HTML from Instart Logic servers in advance of receiving the full dynamic HTML from the backend origin server.

While the head is being sent down first, the body is rendering in the background so the time to interact is nearly 4x faster. See video below: 

Optimized HTML Delivery Example

Try it Out for Yourself!

HTML Streaming ensures that a user’s web browser doesn’t sit idle while waiting for the backend HTML to be generated. This decreases the overall page load times and exponentially improves the user experience.

Take a few minutes to play with the HTML Streaming tool on our Playground and understand the impact it has on page load performance!

Leave a Reply

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