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
如果您想仅使用 HTML 来修复此问题,您可以使用
srcdoc
属性设置嵌入内容以在点击视频时加载。
您基本上在属性内编写一个 HTML 链接,并且在单击
srcdoc
内的链接之前,视频不会加载。
这是一个例子:
<!-- 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”选项卡下,并不意味着整个脚本未使用,而是意味着一定量的脚本代码没有在页面上执行任何操作。
查找未使用代码的算法也不完美,我经常看到页面上根本没有使用的脚本,根据谷歌的说法,有一定数量的已用代码。
“删除未使用的 Javascript”确实应该持保留态度,对于插件(例如 YouTube 的 API),应该忽略它,因为您无法编辑外部 API 以提高效率。
就您而言,如果您使用嵌入式 Youtube 视频,则非常需要该文件。 如果您想优化 Youtube 视频的加载方式,请考虑 lazyloading it。
我也有同样的问题。
“减少未使用的 JavaScript 并推迟加载脚本,直到需要它们来减少网络活动消耗的字节数。了解如何减少未使用的 JavaScript.LCP WordPress 考虑减少或切换在页面中加载未使用的 JavaScript 的 WordPress 插件的数量。要识别添加无关 JS 的插件,请尝试在 Chrome DevTools 中运行代码覆盖率。您可以从脚本的 URL 中识别负责的主题/插件。留意列表中包含许多脚本的插件,这些脚本的代码覆盖率有很多红色。插件仅应在页面上实际使用脚本时将其放入队列。 WP火箭 在“WP Rocket”中启用延迟 JavaScript 执行可以解决此问题。它将通过延迟脚本的执行直到用户交互来改善页面的加载。如果您的网站有 iframe,您可以使用 WP Rocket 的 LazyLoad 来处理 iframe 和视频,并用预览图像替换 YouTube iframe。”
PageSpeedInsight 将 Youtube JS 标记为未使用的 JavaScript 文件。我已经在我的网站上的 WRocket 中测试了“用预览图像替换 YouTube iframe”功能。问题并没有解决。我还测试了“https://vumbnail.com/embed-builder”,但它没有帮助。
还有其他选择吗?