1. YouTube embeds are heavy and it’s fixable (frontendmasters.com)
YouTube 嵌入性能优化方案总结
核心问题
YouTube 默认的 <iframe> 嵌入方式性能极差:
- 体积巨大:单次嵌入约 1.3MB,产生 32 个请求。
- 资源不共享:多个嵌入的资源是线性增长的(2个嵌入约2.4MB,3个约3.6MB),造成巨大浪费。
- 影响环境:如此大的数据传输量带来了不必要的能源消耗和碳排放。
功能与体验
尽管占用资源巨大,标准嵌入提供的核心功能却很简单:
- 显示视频封面图。
- 显示视频标题。
- 显示一个播放按钮,点击后播放视频。
作者质疑为何需要如此庞大的资源来实现如此简单的功能,并对 YouTube 内部关于“更轻量嵌入会降低用户参与度”的测试结果表示怀疑,呼吁其公开方法和数据。
解决方案
推荐使用开源 Web Component lite-youtube-embed 来替代标准嵌入。
- 显著减负:体积约为 100KB,并且支持多个组件间共享资源。
- 功能无损:提供与默认嵌入完全相同的外观和交互(封面、标题、播放按钮)。
- 性能提升:官方称其渲染速度比标准嵌入快约 224 倍。
使用方法
- 引入资源:通过 CDN 异步加载 JavaScript 和 CSS。
- 使用组件:在 HTML 中使用
<lite-youtube>标签,并设置videoid属性。可以在标签内设置background-image属性以确保在 JS 加载完成前显示正确的封面。
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/lite-youtube-embed/0.3.2/lite-yt-embed.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lite-youtube-embed/0.3.2/lite-yt-embed.css">
<lite-youtube videoid="ogfYd705cRs" style="background-image: url('https://i.ytimg.com/vi/ogfYd705cRs/hqdefault.jpg');">
<a href="https://youtube.com/watch?v=ogfYd705cRs" class="lty-playbtn" title="Play Video">
<span class="lyt-visually-hidden">Play Video</span>
</a>
</lite-youtube>
其他替代方案
文章还列举了其他同类 Web Component 项目,如:
- 带有 Shadow DOM 的版本。
- Raymond Camden、Adrian Roselli 个人编写的组件。
- Mux 提供的
<youtube-video>组件(DOM API 与<video>一致)。 - 适用于 React 和 Next.js 的移植版本。