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 webpage.
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.
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 the transitional UI like the tab switcher or on startup when a lot of work preheating 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.
Read the original Chrome announcement
Speed up Chrome on Android startup with freeze-dried tabs
Featured image by Shutterstock/Catalyst Labs