当第一个屏幕上有 vimeo 时提高页面速度分数

Question

我有一个使用 NextJS 13 的网站，速度相当快 我在第一个屏幕上有一个使用 vimeo 嵌入的视频

我正在尝试采取其他几种方法来避免 vimeo iframe 影响页面速度。 我已经做了类似检查 effectiveType 是否为 4G （或更高）的操作。仅在 requestIdleCallback

上加载视频

if (
  // skip video if internet connection is slower than 4G
  ['slow-2g', '2g', '3g'].includes(
    navigator?.connection?.effectiveType ?? '4g'
  ) ||
  // check effective bandwidth in Mbps. Pagespeed for mobile now is using Slow 4G at 1,638.4 kb/s
  (navigator?.connection?.downlink ?? 10) < 10
) {
  // do not embed the video
}

问题是，通过这些改进，我在灯塔上得到了 95 ~ 98 分，但由于总阻塞时间很差，页面速度洞察力只有 ~60 分。

您有什么建议可以帮助我吗？ 我正在考虑通过检查 downlink 来禁用互联网连接速度较慢的视频，但到目前为止还没有奏效。

注意：我可以使用最新的技术，并且还可以在某些特定情况下禁用 vimeo 以提高性能。

Answer 1

有一些开源 Vimeofacade 库将推迟所有昂贵的 3P 资源/执行，直到用户与视频交互。它看起来仍然像加载时的嵌入视频，但在需要之前，任何实际功能都不会起作用。