使用media=print加载Google Font仍被Lighthouse判定渲染阻塞怎么解决

解决方案 #

你当前使用的media="print"+onload切换的逻辑本身是异步加载字体的标准方案，之所以仍被Lighthouse判定为渲染阻塞，是因为Lighthouse的检测规则会识别到代码中后续会将media属性切换为all，因此仍会将该CSS资源标记为潜在首屏阻塞资源，可按以下层级调整：

1. 补充rel="preload"预加载标识 #

给link标签补充预加载属性，明确告知浏览器该资源无需阻塞首屏渲染：

<link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;700&display=swap">
<link rel="stylesheet" media="print" onload='this.media="all"; this.onload=null' href="https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;700&display=swap">

as="style"是预加载样式资源的必填属性，缺省会导致预加载失效；保留this.onload=null是为了避免部分浏览器重复触发onload事件

2. 新增noscript兜底兼容 #

避免浏览器禁用JavaScript的场景下字体完全不加载，在上述标签后补充兜底规则：

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

3. 极致优化可选方案：内联字体CSS #

如果想要完全消除外部CSS请求的阻塞可能，可以直接打开Google Font的CSS链接，把返回的所有@font-face规则直接内联到页面头部的style标签中，跳过外部CSS请求的环节，同时天然保留font-display: swap属性避免无样式文本闪烁问题。

调整后即可完全通过Lighthouse的渲染阻塞资源检测，同时字体加载不会阻塞首屏DOM渲染。

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