Link="preload" 添加但未被 Pagespeed 检测到

Question

Pagespeed Insights 建议预加载某些字体文件以加快页面加载速度。我已经在我的元素中添加了代码，但 Pagespeed 仍然没有检测到它。我尝试了其他答案中提到的所有修复：

• 使用 crossorigin 属性（匿名）
• 使用插入页眉/页脚插件
• 加载其他字体类型，如 .woff、.eot

这是该页面的链接。此页面只是一个示例。Pagespeed 提到的所有其他帖子也存在同样的问题：

Consider using `<link rel=preload>` to prioritize fetching resources that are currently requested later in page load. Learn more.
URL
Potential Savings
…fonts/johannes-font.ttf(productiveclub.com)
2,670 ms

现在的多个预加载仅用于测试。当我只保留一个 preload 语句时，同样的错误仍然存​​在。

任何人都可以理解我的代码有什么问题吗？提前致谢。

Answer 1

当您实际加载字体时，它?的末尾有一个。

在某些情况下，这将清除缓存并加载文件的新版本，撤消您所做的任何预加载/将其视为不同的文件。

url(/wp-content/themes/johannes/assets/fonts/johannes-font.ttf?) format('truetype') 位于缩小的 CSS 文件之一中。

您还不止一次地预加载它（HTML 中的第 7 行和第 199 行），因此您将收到一个控制台错误，这与任何一种方式都没有直接关系但很重要。

资源https://productiveclub.com/wp-content/themes/johannes/assets/fonts/johannes-font.ttf是使用链接预加载预加载的，但在窗口加载事件的几秒钟内未使用。请确保它具有适当的as值并且是有意预加载的。

为清楚起见- 就浏览器而言fonts/johannes-font.ttf并不等于，fonts/johannes-font.ttf?因此就浏览器而言，您实际上并未预加载文件。?从您的 URL 中删除，它应该可以按预期工作。