我如何 "swap" google 映射字体以避免 google page speed insight 警告？

Question

我有一个 html 页，页脚有 google 个地图。

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

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

Configure the display of all text when loading web fonts

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

Answer 1

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

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

选项 1 - 阻止 Roboto 字体

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

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

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

选项 2 - 延迟插入脚本。

您在脚本中使用 async（您还使用 defer，只需对 Google 地图使用 async 作为旁注，不要同时使用这两个选项) 但它仍然会过早加载并影响您的 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&amp;callback=initMap&amp;language=en&amp;region=RU');
    }, 3000);

我如何 "swap" google 映射字体以避免 google page speed insight 警告？

How I can "swap" google maps fonts to avoid googole page speed insight warning?

javascript

google-pagespeed

选项 1 - 阻止 Roboto 字体

选项 2 - 延迟插入脚本。