我如何“交换”谷歌地图字体以避免谷歌页面速度洞察警告？

Question

我有一个页脚带有谷歌地图的 html 页面。

<script async="" defer="" src="https://maps.googleapis.com/maps/api/js?key=xxxxx&callback=initMap&language=en&region=RU"></script>

所以，如果我进行谷歌页面速度洞察测试，我会收到一条消息：

配置加载网页字体时所有文本的显示

但谷歌地图被配置为只显示他们自己的字体 Roboto。 我应该怎么做才能避免警告？

Answer 1

遗憾的是（据我所知）如果没有一些变通方法就无法真正停止此警告，您无法对注入我的 Google 地图脚本的资源进行字体交换。

但是，您确实有几个选项可以提高性能。

选项 1 - 阻止 Roboto 字体

这是关于如何在this Stack Overflow answer 上执行此操作的一个很好的答案。

这会阻止注入 Google 字体 CSS。如果您想使用它/保持 Google 地图的美感，您仍然可以从您自己的服务器或您可以控制的 CDN 加载 Roboto，而不是从 Google 字体。

这将删除警告，但显然不利的一面是您更改了 Google 地图的样式（这可能违反了他们的条款和条件，如果您想确定，祝您好运！）

选项 2 - 延迟插入脚本。

您在脚本上使用async（您也使用defer，只是将async 用于Google 地图作为旁注，不要同时使用这两个选项）但它仍然会过早加载并影响您的FCP和字体显示。

您可以在几秒钟后手动插入脚本。这可以通过一个简单的脚本插入函数和一个setTimeout 来完成，我已将其设置为 3 秒，但您可能需要调整时间。

function appendScript(url){
       let script = document.createElement("script");
       script.src = url;
       script.async = false //IMPORTANT
       document.head.appendChild(script);
       console.log("Google Maps added");
    }

    setTimeout(function(){
         appendScript('https://maps.googleapis.com/maps/api/js?key=xxxxx&callback=initMap&language=en&region=RU');
    }, 3000);