Why Prefetch Is Broken

by astdbon 6/2/21, 6:35 AMwith 89 comments
by blixton 6/2/21, 7:35 AM

The cache segregation is a bit of a nuisance when building sites that uses iframes on different domains to sandbox user content. For example, Framer (where I work) sandboxes each user project on a unique subdomain of framercanvas.com, which is on the public suffix list so that different projects can’t share cookies, localStorage etc. But all resources loaded on these subdomains are always loaded fresh for new projects because of cache segregation, even if it’s the same old files being loaded over and over. I wish there was a way to establish a shared cache between two domains, because we could manually implement a content tunnel between framer.com and the sandbox that sends down cached content with postMessage, so optionally sharing cache doesn’t seem like an additional tracking issue if opted in explicitly.

by matsemannon 6/2/21, 7:00 AM

I don't really understand the issue? If I want to prefetch an image, I'm on the same origin the whole time and this cache segregation doesn't matter.

by slveron 6/2/21, 11:04 AM

If the cache is per domain, does that mean CDN-served dependencies like JQuery and React are in fact... useless in terms of cache reuse.

by ZiiSon 6/2/21, 7:25 AM

Isn't the actual problem with Chrome's behavior and as=document that they still leak? If a.test preloads b.test/i_have_visited_a.html and it is added to b.test's cache.

by labsteron 6/2/21, 1:23 PM

Prefetching is a cool idea but a lot of us can’t actually use it. I tried implementing prefetch in a personal project only to find out uBlock Origin is disabling it. Apparently prefetched resources aren’t filtered by extensions, which kind of defeats tracking protection. So I can’t even use it for my own project, as I’d rather avoid the trackers. I assume many people are using the same default setting here.

by TazeTSchnitzelon 6/2/21, 7:36 AM

Are “a.test” and “b.test” meant to represent different domains? The actual syntax used would just be different file paths.

by torgardon 6/2/21, 8:05 AM

This is quite interesting. I didn't know this was a thing.

A primary issue, as I see it, is caching of third-party assets (as dmkil posted elsewhere, think jQuery, Google Fonts, Facebook Pixel, etc).

Could this not be solved using the Cache-Control header, or maybe some HTML attribute variation of this? Maybe something like:

  <!-- Use a site-specific cache for its stylesheet, default behavior --> 
  <link rel=spreadsheet href=index.css cache-key="private">

  <!-- Use a global cache for jQuery -->
  <script
    src="https://code.jquery.com/jquery-3.6.0.slim.min.js"
    integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI="
    crossorigin="anonymous"
    cache-key="public" 
  ></script>

by danjordanon 6/2/21, 12:48 PM

It was a surprise to me that browsers partition their cache now. I think Safari has done it since 2013!

When I found out I wrote a blog post about the HTTP Cache partitioning and hosting jQuery, or any library, from a CDN.

https://www.danjordan.dev/posts/should-i-host-jquery-from-a-...

by andrejguranon 6/2/21, 10:29 AM

I don't understand the problem here! Prefetch loads additional data while you're not doing anything. The whole argument is that prefetch doesn't respect caching??? Those are two different concepts. While I am looking at slide N I don't care if slide N+1 image is loaded fresh or from a cache. Am I missing something here?

by failwhalesharkon 6/2/21, 7:18 PM

Isn't it a best practice to white screen / "loading" until everything important is loaded?

How does one detect when everything is loaded? I've seen some websites break when UI interaction occurs before all js are loaded.

by shuringaion 6/2/21, 2:38 PM

i would rather wait even seconds for a page to load than having my cache bruteforced