If there’s one thing all marketers, developers, designers, SEO’s and even users can attest to, it’s that the process of delivering websites is slow. Although a few seconds may seem fast, in reality it’s actually really slow. The reason for this is because of all the different parts that need to load, such as raw HTML, CSS, JavaScript, and more.
Google has engineered somewhat of a solution to the problem for Chrome users, and it comes in the form of ‘interactive’ screenshots.
Freeze Dried Browser Tabs
Google has recently announced a new technology that is being used in Chrome called ‘Freeze Dried Browser Tabs’. In essence, these are interactive screenshots of webpages that help speed up load times, and as a result improve the user experience.
These new tabs are more than screenshots though as they can be interacted with via scrolling and link clicking. Once the actual webpage has finished downloading, Google will transition to the actual webpage (where interestingly enough, no CLS occurs).
When are Freeze Dried Browser Tabs shown?
It’s important to note that these new tabs are not shown for every site that a Chrome user visits, but mainly on cold startup and transitional moments such as switching between browser tabs.
As said by a Chrome blog post:
“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 challenging and Chrome can often only keep a handful of web pages loaded at a time due to the memory constraints of the device.
This leads to the question of whether there is a lighter-weight way to represent web content when the situation calls for it—for example, in transitional UI like the tab switcher or during startup when a lot of warm-up work is occurring.”
How do Freeze Dried Tabs work?
The way Google accomplish this is pretty interesting. What they do is capture the visual state of a page as a set of vector graphics along with hyperlinks.
This is then ‘played back’ in a lighter-weight fashion by rastering the vector graphics.
The whole process reduces the rendering cost of showing a full web page while still supporting hyperlinks.
Freeze Dried Tabs are currently live in Chrome, but is only being used in cold startup situations at the moment. The Chrome team are studying where else it can be used.
