Allow using preloading over prefetching.

builtins/amp-ad.js

@@ -122,10 +122,10 @@ export function installAd(win) {
       const prefetch = adPrefetch[type];
       const preconnect = adPreconnect[type];
       if (typeof prefetch == 'string') {
-        this.preconnect.prefetch(prefetch);
+        this.preconnect.prefetch(prefetch, 'script');
       } else if (prefetch) {
         prefetch.forEach(p => {
-          this.preconnect.prefetch(p);
+          this.preconnect.prefetch(p, 'script');
         });
       }
       if (typeof preconnect == 'string') {

extensions/amp-facebook/0.1/amp-facebook.js

@@ -26,7 +26,8 @@ class AmpFacebook extends AMP.BaseElement {
   preconnectCallback(onLayout) {
     this.preconnect.url('https://facebook.com', onLayout);
     // Hosts the facebook SDK.
-    this.preconnect.prefetch('https://connect.facebook.net/en_US/sdk.js');
+    this.preconnect.prefetch(
+        'https://connect.facebook.net/en_US/sdk.js', 'script');
     prefetchBootstrap(this.getWin());
   }
 

extensions/amp-twitter/0.1/amp-twitter.js

@@ -29,7 +29,8 @@ class AmpTwitter extends AMP.BaseElement {
     // All images
     this.preconnect.url('https://pbs.twimg.com', onLayout);
     // Hosts the script that renders tweets.
-    this.preconnect.prefetch('https://platform.twitter.com/widgets.js');
+    this.preconnect.prefetch(
+        'https://platform.twitter.com/widgets.js', 'script');
     prefetchBootstrap(this.getWin());
   }
 

src/3p-frame.js

@@ -156,11 +156,11 @@ export function addDataAndJsonAttributes_(element, attributes) {
 export function prefetchBootstrap(window) {
   const url = getBootstrapBaseUrl(window);
   const preconnect = preconnectFor(window);
-  preconnect.prefetch(url);
+  preconnect.prefetch(url, 'document');
   // While the URL may point to a custom domain, this URL will always be
   // fetched by it.
   preconnect.prefetch(
-      'https://3p.ampproject.net/$internalRuntimeVersion$/f.js');
+      'https://3p.ampproject.net/$internalRuntimeVersion$/f.js', 'script');
 }
 
 /**

src/preconnect.js

@@ -28,7 +28,7 @@ import {platformFor} from './platform';
 const ACTIVE_CONNECTION_TIMEOUT_MS = 180 * 1000;
 const PRECONNECT_TIMEOUT_MS = 10 * 1000;
 
-class Preconnect {
+export class Preconnect {
 
   /**
    * @param {!Window} win
@@ -51,6 +51,9 @@ class Preconnect {
     this.platform_ = platformFor(win);
     // Mark current origin as preconnected.
     this.origins_[parseUrl(win.location.href).origin] = true;
+
+    /** @private {boolean} */
+    this.preloadSupported_ = this.isPreloadSupported_();
   }
 
   /**
@@ -109,20 +112,26 @@ class Preconnect {
   /**
    * Asks the browser to prefetch a URL. Always also does a preconnect
    * because browser support for that is better.
+   *
    * @param {string} url
+   * @param {string=} opt_preloadAs
    */
-  prefetch(url) {
+  prefetch(url, opt_preloadAs) {
     if (!this.isInterestingUrl_(url)) {
       return;
     }
     if (this.urls_[url]) {
       return;
     }
+    const command = this.preloadSupported_ ? 'preload' : 'prefetch';
     this.urls_[url] = true;
     this.url(url, /* opt_alsoConnecting */ true);
     const prefetch = document.createElement('link');
-    prefetch.setAttribute('rel', 'prefetch');
+    prefetch.setAttribute('rel', command);
     prefetch.setAttribute('href', url);
+    if (opt_preloadAs) {
+      prefetch.setAttribute('as', opt_preloadAs);
+    }
     this.head_.appendChild(prefetch);
     // As opposed to preconnect we do not clean this tag up, because there is
     // no expectation as to it having an immediate effect.
@@ -135,6 +144,17 @@ class Preconnect {
     return false;
   }
 
+  /** @private */
+  isPreloadSupported_() {
+    const tokenList = document.createElement('link').relList;
+    if (!tokenList || !tokenList.supports) {
+      this.preloadSupported_ = false;
+      return this.preloadSupported_;
+    }
+    this.preloadSupported_ = tokenList.supports('preload');
+    return this.preloadSupported_;
+  }
+
   /**
    * Safari does not support preconnecting, but due to its significant
    * performance benefits we implement this crude polyfill.

test/functional/test-3p-frame.js

@@ -183,8 +183,10 @@ describe('3p-frame', () => {
     expect(fetches).to.have.length(2);
     expect(fetches[0].href).to.equal(
         'http://ads.localhost:9876/dist.3p/current/frame.max.html');
+    expect(fetches[0].getAttribute('as')).to.equal('document');
     expect(fetches[1].href).to.equal(
         'https://3p.ampproject.net/$internalRuntimeVersion$/f.js');
+    expect(fetches[1].getAttribute('as')).to.equal('script');
   });
 
   it('should make sub domains (unique)', () => {