为何Google PageSpeed报Ensure text remains visible警告且潜在节省为0ms

问题原因&修复方案 #

1. 核心触发原因：你的@font-face规则存在两处语法错误 #

• font-family属性仅可填写自定义字体的名称， fallback字体（sans-serif）不能写在这里，需要放到全局字体 fallback 规则中，例如：

  * {
    font-family: "Roboto", sans-serif;
  }
  

• src属性需要填写字体文件的实际资源地址（.woff2/.woff 等格式），你当前填写的是谷歌字体的CSS样式表地址，等于浏览器需要先请求这个CSS文件、解析后才能拿到真实的字体文件地址，多了一层请求链路，这是触发PageSpeed告警的核心原因。
  你配置的font-display: swap是符合最佳实践的，这部分无需修改。

2. 0ms潜在节省仍告警的逻辑 #

Google PageSpeed的告警规则不完全以本次测试的实际节省时间为唯一判定标准：只要检测到你的字体加载逻辑不符合最佳实践规则，哪怕本次测试因为缓存、测试节点网络环境好等原因没有产生可测量的实际延迟，也会抛出告警，本质是提示你该写法在普通用户访问场景下存在性能劣化的风险。
你已经配置的preconnect符合最佳实践，但无法抵消@font-face写法错误带来的规则命中。

3. 修复方案 #

方案1（最简便）：直接在HTML的<head>中引入谷歌字体的CSS链接，无需自行编写@font-face规则

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap">

方案2（自定义@font-face）：打开你当前填在src中的谷歌字体CSS链接，复制其中官方给出的所有@font-face规则直接使用即可，官方规则中的src已经是直连的字体文件地址，不会多一层请求。

修复完成后重新检测即可消除该告警。

内容的提问来源于stack exchange，提问作者Marcell