Stretching Google prefetching
How much is too much? Abusing the limits for fun and profit.
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.
The video1 is also available on YouTube if you prefer.
In the video, I used two phones. The phone on the left guides the user through the entire process, while the phone on the right performs the actual actions.
Completing all the steps resulted in loading a website with a 19 MB video file. This would be perfectly normal, except:
At the time of navigating to the page, the user was offline.
They had never visited this website on this device before (a fresh incognito mode was used, ensuring an empty cache).
Dinosaurs can’t speak!
Is airplane mode a lie? Or does Rick's power transcend the offline barrier?
You may have heard about the NSA tracking a phone even when it’s off. It’s not that. Rick’s power is undisputable, but I used a different technique.
First, I copied the default offline page (the one with the dino) 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: This technique allows Google to prefetch 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 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 this technology on your website, you need to understand it first. Unfortunately, I couldn’t find a complete, implementation-focused guide anywhere. That’s why I created a series of blog posts explaining it in a way that’s accessible to typical developers.
This is a practical guide based on my real-world experience optimizing a high-traffic, dynamic website. It’s packed with insights you won’t find anywhere else because I had to research and resolve most of these issues myself.
If you want to dive deep into performance optimization for Google-referred users, start here.
I’m Sorry!
I apologize for giving you fake instructions, rickrolling you, and making you question whether airplane mode works. But this topic deserves more attention, and I hope you don’t mind that I used a bit of clickbait and a prank to bring it to light. Besides, you were probably smart enough to recognize it as a joke from the beginning!
But if you enjoyed it…
Please help spread the word so others can learn how to optimize their websites and add another performance tool to their arsenal. Share the demo link:
If you’re interested in this particular topic or enjoy exploring technology in general, I invite you to stay updated on my latest thoughts and research. You can subscribe to my newsletter to receive occasional updates and insights whenever I have something new to share.
Lastly, if you’d like to experience prefetching in action on a high-traffic, dynamic production website, check out PlanujemyWesele. It’s a wedding website similar to The Knot or Wedding Wire but tailored to Polish couples.
Polish weddings are awesome! If you’re planning a wedding in Poland, I highly recommend visiting PlanujemyWesele. :)
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