Stretching Google's prefetching
Making Chrome play a 19 MB video while "offline"
The demo
You probably came here from the demonstration I prepared, but if you haven't seen it yet, I encourage you to do so before proceeding.
The demo requires the original Google Chrome browser and doesn’t work on iOS. If you are reading this post on an iPhone or iPad, don’t have or want Google Chrome on your device, or can’t/don’t want to run the demonstration for other reasons, I have prepared a short video that allows you to experience it passively. Note that since I recorded the demo, I have updated it based on feedback from Reddit and Hacker News.
The video1 is also available on YouTube if you prefer.
In the video, I used two phones. The screen on the left shows the instructions guiding me through the entire process, while on the right screen, you can see me performing the actual actions.
Completing all the steps resulted in loading a website with a 19 MB video file. This would be perfectly normal, except:
I was offline when navigating to the page.
I had never visited this website on this device before (a fresh incognito mode was used, ensuring an empty cache).
Dinosaurs can’t speak!
It’s a trick
The browser obviously can’t transmit data without network access.
I designed the demo to be playful, surprising you into questioning how offline mode and browser prefetching really behave.
My goal wasn’t to trick anyone for its own sake, but to create a memorable experience that highlights a very underappreciated part of web performance.
How I did it
First, I copied the default offline page (the one with the dinosaur) from Chrome and modified it to include a speech bubble with a link. Then, I added a hidden video that activates when clicking this link.
Then, I asked Google to prefetch (that is, download in advance) this page along with the 19 MB video file when the user performed a Google search. I even prepared a fake progress bar on the instructions page to ensure the prefetching had enough time to complete.
If you are wondering why the CODE needs to be typed manually, it prevents mindless clicking. This approach ensures users actively engage with the instructions and provides extra time for prefetching.
I've released the demo as an open-source project on GitHub. There, you'll find a much more detailed explanation of how it works.
Asking Google to prefetch the website
But how do you convince Google to prefetch the website? It’s easy—you don’t need to do anything. Google automatically prefetches the top two search results and, on desktop, also prefetches results you hover over. It uses so-called Speculation Rules for this.
However, there is a caveat: Google prefetches only the HTML. It cannot prefetch subresources referenced within the main document, such as images or… videos.
Prefetching a complete website
A little-known technology called Signed Exchanges allows one to prefetch an entire website, including subresources. I (ab)used this on the demo page to prefetch the 19 MB video.
I found that the maximum amount of data possible to prefetch is approximately 21 MB.
The point of the demo
Rickrolling people is fun, but a more serious application is optimizing website load speed for users coming from Google search results.
If all the data required to render a page is prefetched, then the user visiting it will have the best possible experience—the page will load instantaneously. The Largest Contentful Paint (LCP) will be reduced to almost zero, as you can see on the video below:
Most websites are far smaller than 21 MB, so in most cases, the browser will have enough time to prefetch all necessary resources while the user still decides which link to click.
My goal was to show you a powerful technology you can use to:
Optimize user experience by giving new visitors a great first impression.
Improve LCP for SEO benefits.
Increase conversion rates, as faster websites drive higher engagement and sales.
Sounds great. What’s the catch?
To implement Signed Exchanges on your website, you first need to understand how they work in practice.
Because I couldn’t find a complete, implementation-focused guide anywhere, I decided to create one — a series of free blog posts written for typical developers.
This guide is based on real-world experience optimizing a high-traffic, dynamic website. It’s packed with insights you won’t easily find elsewhere, because many of the challenges I faced had no ready-made solutions.
If you want to dive deep into performance optimization for Google-referred users, start here.
Thank you
I hope you found Signed Exchanges worth exploring.
If you think others might find it interesting too, sharing the demo link could be a great way to spark their curiosity.
Lastly, if you want to experience Signed Exchanges in a real-world, production environment, you can visit PlanujemyWesele — a Polish wedding planning website where I implemented full SXG support.
(Note: the site is in Polish, and its audience is Polish couples — but it provides a good technical example.)
I used a few seconds from Never Gonna Give You Up by Rick Astley and a track downloaded from Royalty Free Music: Bensound.com, Artist: Benjamin Tissot, License code: GRZCWM8R2D9UCFEA