删除未使用的 Javascript base.js (Youtube iframe api)

Question

Google PageSpeedInsights 在我的报告中将 Base.js 标记为未使用 Javascript。它的大小为 487kb，相当可观。似乎来自包括 Youtube 播放器 iframe api。是否需要此文件？如果需要，有人知道为什么它在报告中被标记为未使用的 JS 吗？

iframe API: https://developers.google.com/youtube/iframe_api_reference

在 PageSpeedInsights 上被标记为未使用的 JS 的大文件： https://www.youtube.com/s/player/c88a8657/player_ias.vflset/en_US/base.js

Answer 1

如果某个脚本列在“删除未使用的 Javascript”选项卡下，这并不意味着整个脚本未被使用，而是表示该脚本的某些代码没有对页。

查找未使用代码的算法也不完美，根据 google.[=11=，我经常看到页面上根本没有使用的脚本具有一定数量的已用代码]

“删除未使用的 Javascript”确实应该有所保留，对于插件，例如 youtube 的 API，应该忽略它，因为您无法编辑外部 API 效率更高。

在您的情况下，如果您使用嵌入式 Youtube 视频，则非常需要该文件。如果您想优化加载 Youtube 视频的方式，请考虑 lazyloading it。

Answer 2

我找了 2 天来找到下载 YouTube 视频的方法，我发现这个文件真的很重要，因为它加载了所有 video/audio 个文件：

Answer 3

如果您只想使用 HTML 修复它，您可以使用 srcdoc 属性将嵌入设置为在点击视频时加载。

您基本上是在属性中写了一个 HTML link，只有单击 srcdoc 中的 link 才会加载视频。

这是一个例子：

<!-- Reference: https://vumbnail.com/examples/srcdoc-iframe-for-lighthouse -->
<iframe
    srcdoc="
        <style>
            body, .full {
                width: 100%;
                height: 100%;
                margin: 0;
                position: absolute;
                display: flex;
                justify-content: center;
                object-fit: cover;
            }
        </style>
        <a
            href='https://www.youtube.com/embed/Q-X_ED4LHrQ?autoplay=1'
            class='full'
        >
            <img
                src='https://vumbnail.com/Q-X_ED4LHrQ.jpg'
                class='full'
            />
            <svg
                version='1.1'
                viewBox='0 0 68 48'
                width='68px'
                style='position: relative;'
            >
                <path d='M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z' fill='#f00'></path>
                <path d='M 45,24 27,14 27,34' fill='#fff'></path>
            </svg>
        </a>
    "
    style="max-width: 640px; width: 100%; aspect-ratio: 16/9;"
    frameborder="0"
></iframe>

在属性中写 HTML 可能有点笨拙，但它完成了工作。

如果您不想进入并替换所有 YouTube ID，我在此处编写了一个简单的构建器：https://vumbnail.com/embed-builder

删除未使用的 Javascript base.js (Youtube iframe api)

Remove unused Javascript base.js (Youtube iframe api)

javascript

youtube

youtube-iframe-api

pagespeed-insights