Google字体获取速度太慢

Question

我正在使用React和Material UI构建一个Web应用程序。我使用roboto font-family，并通过这种方式在index.html文件中获取它：

<link
        rel="preload"
        href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap"
        as="style"
/>

我已经在线阅读了这是获取字体以提高性能的首选方法。但是，当我从Google Pagespeed Insight获取SPA时，对于移动设备却得到了不好的结果，并建议您预取一些资源。在这些资源中，我发现：

…media/roboto-latin-500.020c97dc.woff2
…media/roboto-latin-400.479970ff.woff2
…media/roboto-latin-300.ef7c6637.woff2

但我认为这些资产已包含在我上次通话中。

你知道我在做什么吗？

Answer 1

您可以检查CSS文件以及它如何引用字体吗？看起来HTML中的URL可能不同于CSS文件中引用的URL。这可能是导致问题的原因，也可能是PageSpeed工具的建议。