我的问题来自尝试优化灯塔测试的预加载关键资产。
我已将 Chrome 浏览器中灯塔报告标记的字体放入我的头文件中的链接中。
[header.php]
<link rel=”preload” href=”/wp-content/themes/mytheme/assets/font/Roboto/Roboto-Regular.ttf” as=”font” crossorigin=”anonymous”>
我还需要将它包含在我的 style.css 文件中并声明字体吗？
[样式.css]
@font-face {
font-family: "Roboto";
src: url("/wp-content/themes/mytheme/assets/font/Roboto/Roboto-Regular.ttf") format("truetype"); }
我问是因为尽管在我的标题中添加了预加载链接，Lighthouse 报告仍然显示我的文件没有预加载。
谢谢大家的帮助
两个声明没有相同的目标。
元素的 rel 属性的预加载值允许您在 HTML 中声明获取请求，指定您的页面很快需要的资源，您希望在页面生命周期的早期开始加载，在浏览器的主要渲染机制启动之前。
如果您自己添加预加载，您的字体将不会被考虑在内。您也必须指定操作。
<link rel="preload" href="style.css" as="style"> <!--preload-->
<link rel="stylesheet" href="style.css"> <!--action-->
在这里我们预加载我们的 CSS 和 JavaScript 文件，以便在稍后呈现页面时需要它们时立即可用。
就像 Graham 在评论中所说的那样，只有在任何与字体相关的操作之前指定预加载才能有效，例如
<link>此外，您的要求取决于
style.css<style><link>随着最近使用 CDN 对字体服务的改进，从本地保存的版本加载字体变得效率低下。本地版本应该用作后备。我会推荐你看看谷歌字体.
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">
旁注
.ttf.woff.woff2（在您的浏览器设置为隐身模式的情况下运行灯塔，以获得实际可靠的信息）。
TL;DR：是
preload使它可用，但浏览器似乎没有使用它。
我在我的网站上试过：直到我包含指向同一个文件的
@font-faceMerriweather.woff2* { font-family: Merriweather }