如何在网站上实施 Adobe Fonts，同时仍保持较高的 Core Web Vitals 分数？-解网

问：

我正在开发一个网站（https://georgiaencyclopedia.org），我需要使用 Adobe Fonts（以前称为 Typekit）作为衬线字体。我觉得我已经尝试了一切来改进 Core Web Vitals，但我根本无法绕过网络字体加载带来的 CLS 和 LCP 分数。最大的问题似乎是Adobe Fonts所依赖的阻塞@import CSS语句，但似乎没有任何方法可以避免这种情况。

这是我在网络字体中加载的方式：

  <link rel="preconnect" href="https://use.typekit.net" crossorigin>
  <link rel="preconnect" href="https://p.typekit.net" crossorigin>
  <link rel="preload" as="style" href="https://use.typekit.net/bym4igk.css">
  <link rel="stylesheet" href="https://use.typekit.net/bym4igk.css" media="print" onload="this.media='all'">

我在 Adobe Fonts 端将字体显示设置为“交换”。预加载和样式表切换是我读到的一些项目，它们可能分别通过预热连接和不阻止页面呈现来帮助 CWV 分数（尽管我想知道后者是否可能弊大于利）。

我还能做些什么来改进字体的加载方式吗？究竟什么是理想的方法？

最终，有人可以直接给我吗 - 有没有办法在使用 Adobe Fonts 时获得强大的 Core Web Vitals 分数？

性能 Adobe WebFonts Core-Web-Vitals TypeKit

如何在网站上实施 Adobe Fonts，同时仍保持较高的 Core Web Vitals 分数？

How can I implement Adobe Fonts on a website and still maintain strong Core Web Vitals scores?

评论