页面完全加载后加载外部视频URL优化CLS及网络负载问题

延迟加载外部嵌入视频的优化方案完全可行，可以同时覆盖你遇到的两个性能问题：

• 首屏加载阶段不会请求体积庞大的视频文件，直接降低初始网络负载，匹配GTMetrix给出的优化方向
• 你已经给视频标签设置了固定宽高属性，配合封面图占位本身就可以避免布局偏移，延迟加载不会引入额外CLS问题，反而能规避视频加载过程中占位高度异常的风险。

方案1：原生属性实现（成本最低，优先推荐） #

不需要额外编写JavaScript逻辑，直接利用浏览器原生支持的视频属性即可实现按需加载：给video标签添加preload="none"属性，该属性会明确告知浏览器，首屏加载阶段不要预加载任何视频数据，仅加载poster指向的封面图，只有用户主动点击播放按钮时才会发起视频资源请求。
修改后的代码如下：

<video controls preload="none" poster="https://picsum.photos/id/237/560/320" width="560" height="320" controlsList="nodownload" class="connect-bg">
  <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4" type="video/mp4">
</video>

该方案下首屏网络负载仅计算封面图的体积，不会把动辄数MB到数十MB的视频文件计入首屏请求，对首屏加载速度的提升效果非常明显。

方案2：页面全加载完成后预加载视频（匹配你提出的加载时机要求） #

如果你希望页面所有资源都加载完毕后，提前把视频资源缓存好，让用户点击播放时不需要等待缓冲，可以通过自定义属性+JS监听页面加载事件实现：
第一步先修改HTML结构，把视频真实地址存到data-src自定义属性上，初始状态不设置真实src，避免浏览器在首屏阶段自动发起请求：

<video controls poster="https://picsum.photos/id/237/560/320" width="560" height="320" controlsList="nodownload" class="connect-bg">
  <source data-src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4" type="video/mp4">
</video>

第二步添加JS逻辑，监听页面load事件，等页面所有资源加载完成后，再把真实地址赋值给source标签，触发视频加载：

window.addEventListener('load', () => {
  const videoEl = document.querySelector('.connect-bg');
  const sourceEl = videoEl.querySelector('source');
  if (sourceEl.dataset.src) {
    sourceEl.src = sourceEl.dataset.src;
    videoEl.load();
  }
});

你现有代码里给video标签设置了固定width和height属性，是避免视频模块产生布局偏移的核心操作：浏览器会在解析标签时就按照宽高比预留出对应尺寸的占位空间，不会出现视频加载后挤压、推移其他页面元素的问题，配合上述延迟加载方案即可同时解决初始负载过高和CLS超标的问题。

内容的提问来源于stack exchange，提问作者bpy