search

MichaelDeBoey / gatsby-remark-embedder

Gatsby Remark plugin to embed well known services by their URL.
MIT License
295 stars 58 forks source link

Support high performance YouTube and Twitter embeds #191

Open Swizec opened 3 years ago

Swizec commented 3 years ago

Hi,

YouTube and Twitter embeds hurt Lighthouse scores. Both load a bunch of unused JavaScript and create heavy iframe embeds.

I've built a custom transformer for YouTube that uses the lite-youtube facade embed (as recommended by Lighthouse). It uses a web component to render a preview image that turns into a full embed with user interaction.

I've also got a custom transformer that creates static Twitter embeds without client-side JavaScript. Uses the Twitter API to recreate tweets using static HTML and CSS.

You can see both in action here: https://serverlesshandbook.dev

The offer

Would contributing these to the core gatsby-remark-embedder plugin be desirable?

I think lite-youtube should be the default way this plugin embeds youtube.

Static Twitter I'm less sure of, but would love to find a way we can make it work.

If you think this is a good idea, I can make PRs :)

Cheers, ~Swizec

bartveneman commented 1 year ago

We could take it a step further and use https://swyxkit.netlify.app/faster-youtube-embeds instead, to avoid any JS cost.

bartveneman commented 1 year ago

Why do we need this?

I'm using a custom transformer for Youtube videos to render the above <iframe srcdoc="" />. This works excellent during a regular build, but apparently Gatsby's Deferred Static Generation can not cope with with Gatsby Plugins that do not have serializable config (like the shouldTransform and getHTML functions) and it throws a 500 error when visiting that page. (See this reduced test case).

Do you want to include any of the above mentioned alternatives in this library? Which one would you prefer? And would you accept a PR for that?