search

ampproject / amp-toolbox

A collection of AMP tools making it easier to publish and host AMP pages.
Apache License 2.0
450 stars 242 forks source link

Add transformer for adding poster image placeholders to video embeds (e.g. YouTube) #1187

Open westonruter opened 3 years ago

westonruter commented 3 years ago

Something that we do in the WordPress plugin when converting a YouTube iframe into amp-youtube is automatically supply the poster image placeholder, which can greatly reduce LCP since YouTube videos are heavy and amp-youtube doesn't implement a facade.

So instead of:

<amp-youtube data-videoid="gYJ03GyrSrM" layout="responsive" width="16" height="9" title="Introducing How to AMP"></amp-youtube>

We generate:

<amp-youtube data-videoid="gYJ03GyrSrM" layout="responsive" width="16" height="9" title="Introducing How to AMP">
    <a placeholder href="https://www.youtube.com/watch?v=gYJ03GyrSrM">
        <amp-img src="https://i.ytimg.com/vi/gYJ03GyrSrM/hqdefault.jpg" layout="fill" object-fit="cover" alt="Introducing How to AMP" class="amp-wp-enforced-sizes">
            <noscript><img src="https://i.ytimg.com/vi/gYJ03GyrSrM/hqdefault.jpg" alt="Introducing How to AMP"></noscript>
        </amp-img>
    </a>
</amp-youtube>

With Optimized AMP and hero image prerendering, this is further optimized as the poster becomes a hero image:

<amp-youtube data-videoid="gYJ03GyrSrM" layout="responsive" width="16" height="9" title="Introducing How to AMP" class="i-amphtml-layout-responsive i-amphtml-layout-size-defined" i-amphtml-layout="responsive">
    <i-amphtml-sizer style="display:block;padding-top:56.25%"></i-amphtml-sizer>
    <a placeholder href="https://www.youtube.com/watch?v=gYJ03GyrSrM">
        <amp-img src="https://i.ytimg.com/vi/gYJ03GyrSrM/hqdefault.jpg" layout="fill" object-fit="cover" alt="Introducing How to AMP" class="amp-wp-enforced-sizes" i-amphtml-ssr data-hero>
            <img class="i-amphtml-fill-content i-amphtml-replaced-content" decoding="async" alt="Introducing How to AMP" src="https://i.ytimg.com/vi/gYJ03GyrSrM/hqdefault.jpg" style="object-fit:cover">
        </amp-img>
    </a>
</amp-youtube>

(Caveat: It seems currently only the PHP implementation of PreloadHeroImage is identifying such placeholders as hero image.)

It seems generally useful to have an optimizer transformer that does this for all amp-youtube components that lack a placeholder, and to do the same for other popular components which have an easily-determined poster image.

sebastianbenz commented 3 years ago

Thanks for filing. This looks very useful! Is the placeholder image URL scheme an official API?

westonruter commented 3 years ago

De facto official, I believe. See https://stackoverflow.com/a/2068371/93579.

westonruter commented 3 years ago

If the amp-youtube amp-img[data-hero] is identified as a hero image, then the PreloadHeroImage transformer should also add a link[rel=preconnect] for https://i.ytimg.com. This will also improve the performance of loading the YouTube iframe.

This further relates to https://github.com/ampproject/amp-toolbox-php/issues/10: if we identify that amp-youtube is in hero position, shouldn't we also add a link[rel=preconnect] for https://www.youtube.com?

westonruter commented 3 years ago

The poster image URLs are also utilized in the lite-youtube-embed facade.

sebastianbenz commented 3 years ago

Did you test whether this causes a double download of the poster image because of origin keyed caching?

westonruter commented 3 years ago

That's a great point. No, I didn't test that.

sebastianbenz commented 3 years ago

I looked into this. It doesn't matter in this case as the AMP runtime also injects the poster image (which causes a double download anyway).

westonruter commented 3 years ago

Great! (?)