Google announced a new technology used in Chrome that creates interactive snapshots of webpages that speed up the user experience. Chrome calls it Freeze Dried Tabs and it’s in use right now.
What Google is doing goes beyond a screenshot placeholder. It’s more of a hybrid of a screenshot because it can be scrolled and links can be clicked. When the actual page finishes downloading Google seamlessly transitions to the actual webpage.
The idea is to speed up the web experience of site visitors by showing them a screenshot with functional links and content that users can scroll through.
Showing Websites on Mobile Devices Faster
The process of delivering websites is slow because of all the different parts that need loading, such as the raw HTML, CSS, JavaScrip and Fonts (which present multiple problems of their own).
Chrome’s solution is to show interactive screenshots.
Freeze Dried Browser Tabs
Google calls this new hybrid of a screenshot and interactive webpage, Freeze Dried Tabs.
Freeze dried browser tabs are new way to deliver webpages but it’s not shown for every site that a Chrome user visits.
Rather, this is a solution to speeding up transitional moments like switching between tabs or during browser startup.
According to a Chrome blog post about it:
“Rendering web content can be computationally intensive and can feel slow at times 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 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.”
Under normal Chrome App cold startup, a webpage takes about 3.4 seconds to load.
Tests show that the user experience is improved with up to a 20% faster loading time, resulting in an average of 2.8 seconds to show all of a webpage.
It has to be emphasized that this is rendering the entire page in the freeze dried state, including content that is below the viewport (the part where a site visitor has to scroll to see).
A remarkable quality of this solution is that there is no layout shift when the freeze dried tab is transitioned 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 along with any hyperlinks.
We can then “reconstitute” (play back) these vector graphics in a lighter-weight fashion by simply rastering the vector graphics.
This reduces the rendering cost of showing a full web page (including the content outside the viewport) and still supports hyperlinks.”
Freeze Dried Tabs Are Live in Chrome
This technology that speeds up the creation of an interactive webpage is currently in use right now in the Chrome browser.
While it’s only used in cold startup situations right now, the Chrome team indicated that they are studying where else it can be used.
This is good news for all web publishers because this may mean that pages load faster for site visitors, which could potentially result in higher rates of visitor satisfaction.
Citation
Read the Original Chrome Announcement
Speeding up Chrome on Android Startup with Freeze Dried Tabs
Featured image by Shutterstock/Catalyst Labs
window.addEventListener( ‘load’, function() {
setTimeout(function(){ striggerEvent( ‘load2’ ); }, 2000);
});
window.addEventListener( ‘load2’, function() {
if( sopp != ‘yes’ && addtl_consent != ‘1~’ && !ss_u ){
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version=’2.0′;
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window,document,’script’,
‘https://connect.facebook.net/en_US/fbevents.js’);
if( typeof sopp !== “undefined” && sopp === ‘yes’ ){
fbq(‘dataProcessingOptions’, [‘LDU’], 1, 1000);
}else{
fbq(‘dataProcessingOptions’, []);
}
fbq(‘init’, ‘1321385257908563’);
fbq(‘track’, ‘PageView’);
fbq(‘trackSingle’, ‘1321385257908563’, ‘ViewContent’, {
content_name: ‘freeze-dried-tabs’,
content_category: ‘news seo’
});
}
});
