Chrome uses interactive screenshots to speed up sites

Google announced a new technology used in Chrome that creates interactive snapshots of web pages that speed up the user experience. Chrome calls it Freeze Dried Tabs and it’s currently in use.

What Google does goes beyond a screenshot placeholder. It’s more of a screenshot hybrid, as it can be scrolled and links can be clicked. After the actual page has finished downloading, Google seamlessly switches to the actual web page.

The idea is to speed up the web experience of site visitors by showing them a screenshot with working links and content that users can browse.

Faster display of websites on mobile devices

The website delivery process is slow due to all the different parts that need to be loaded, such as raw HTML, CSS, JavaScrip, and fonts (which have multiple issues of their own).

Chrome’s solution is to show interactive screenshots.

Freeze-Dried Browser Tabs

Google calls this new hybrid of a screenshot and an interactive webpage, Freeze Dried Tabs.

Freeze-dried browser tabs are a new way to deliver web pages, but they are not displayed for all sites visited by a Chrome user.

Rather, it is a solution to speed up transition moments such as switching from one tab to another or when starting the browser.

According to a Chrome blog post about it:

“Rendering web content can be computationally intensive and can sometimes feel slow compared to a native application.

A lot of work needs to be done to dynamically load resources over the network, run JavaScript, render CSS, fonts, etc.

On mobile devices, this is particularly difficult and Chrome can often only keep a handful of web pages loaded at a time due to device memory constraints.

This leads to the question of whether there is a lighter way to represent web content when the situation calls for it, for example, in transitional UI like the tab switcher or on startup when many jobs heating occurs.

During a normal cold start of the Chrome app, it takes about 3.4 seconds to load a web page.

Tests show improved user experience with up to 20% faster load time, giving an average of 2.8 seconds to view an entire webpage.

It must be emphasized that this renders the entire page in a freeze-dried state, including the content that is below the viewport (the part where a site visitor must scroll to see).

A remarkable quality of this solution is that there is no layout change when the freeze-dried tab is transferred to the live site.

The announcement explained how they do this:

“To freeze dry a web page, we capture the visual state of the page as a set of vector graphics with all the hyperlinks.

We can then “rebuild” (read) these vector graphics in a lighter way by simply rasterizing the vector graphics.

This reduces the rendering cost of displaying a full web page (including content outside the viewport) and still supports hyperlinks.

Freeze Dried Tabs are live in Chrome

This technology which speeds up the creation of an interactive web page is currently used in the Chrome browser.

Although it’s only used in cold boot situations at the moment, the Chrome team said they’re investigating where it can be used.

This is good news for all web publishers, as it can mean pages load faster for site visitors, which could potentially lead to higher visitor satisfaction ratings.


Quote

Read the original Chrome announcement

Speed ​​up Chrome on Android startup with freeze-dried tabs

Featured image by Shutterstock/Catalyst Labs