Add preconnect resource hints for more components

[westonruter]

When running a Lighthouse audit on an AMP page that contains an amp-youtube component in the first viewport, I saw a “Preconnect to required origins” warning:

While AMP components already do preconnect in themselves, they do so after the component script has loaded and ran. If we add rel=preconnect resource hint links to pages that have amp-youtube elements automatically, then we could shave some additional milliseconds and improve the Lighthouse score.

[westonruter]

This would only make sense if we could verify that a component is used in the first viewport. Otherwise, it should be left up to the theme/plugin author to do manually.

[westonruter]

@sebastianbenz How about extending the use of data-hero to non-amp-img components like amp-youtube? Then we could add an optimizer transformer that adds preconnect links for those components so that we can render them faster.

So given an HTML page that contains (note the data-hero):

<amp-youtube
  data-videoid="mGENRKrdoGY"
  layout="responsive"
  width="480"
  height="270"
  data-hero
></amp-youtube>

The new optimizer transformer could add these preconnect links to the page:

<link rel="preconnect" href="https://s.ytimg.com">
<link rel="preconnect" href="https://i.ytimg.com">

These are the two URLs that are being preconnected in the component: https://github.com/ampproject/amphtml/blob/01ba647457f8e12f9f7e0a5a23fb72d28c6e63f4/extensions/amp-youtube/0.1/amp-youtube.js#L116-L128

This would require looking over each AMP component to build up an index mapping component name to preconnect URLs.

Should adding such preconnect links should be restricted to components that have data-hero? Or should we try to automatically add preconnect links to the first AMP component in the page that has the need to preconnect?

[sebastianbenz]

Good idea! I think we should add YouTube to the automatic hero detection as well. This would also make the heuristic more reliable, as an amp-img after an amp-youtube element is very unlikely to be a hero image. Currently, the amp-youtube element would be ignored.

[westonruter]

This would only make sense if we could verify that a component is used in the first viewport. Otherwise, it should be left up to the theme/plugin author to do manually.

The same logic being used for data-hero could be used for this. See also ampproject/amp-toolbox#1187 (comment).