Search code examples
javascriptiframebrowserprefetchweb-performance

Using preconnect resource hint from the main window to improve the performance of a script inside a foreign iframe


I have a website that have a foreign iframe. There are multiple third party scripts that run inside this foreign iframe.

I know that if I will prefetch these scripts from the main window - the iframe will need to reload these sources (as the prefetch was done in a different domain).

What can be the reason that if I add dns-prefetch or preconnect resource hints for the third party scripts in the main window, the performance of loading these scripts in the iframe will be improved? Is this just because I warm-up the scripts?


Solution

  • Some browsers implement a double-keyed HTTP Cache for privacy reasons to prevent tracking. This means if domain1 loads jQuery from a CDN and then domain2 loads the same jQuery resource from the same domain it will be downloaded again rather than reusing the same copy from the HTTP cache.

    Safari has done this for a while and Chrome have recently stated they will do the same.

    This means you can’t prefetch or preload resources and scripts in foreign domain iframes as you state.

    dns-prefetch and preconnect have no such privacy implications (for now - see Andy's answer below for potential upcoming changes for preconnect). so they can be used to improve performance in iframes by front loading some of the work to get these scripts (though it should be noted that browsers may not always use the same connection depending on the browser which may impact use of preconnect).