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

Question

I have an html page with google maps at footer.

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

So, if I make google page speed insight test, I recieve a message:

Configure the display of all text when loading web fonts

But google maps is configured for display only their own font Roboto. What should I do to avoid the warning?

score 0 · Accepted Answer · edited Jun 20 '20 at 09:12

Sadly it is (as far as I am aware) impossible to actually stop this warning without some workarounds, you can't do font-swapping on resources that are injected my the Google Maps script.

However you do have a couple of options to improve performance.

Option 1 - block the Roboto font

The is a great answer on how to do this on this Stack Overflow answer.

This blocks the Google fonts CSS from being injected. You could still have Roboto loaded from your own server or a CDN where you have control over it if you wanted to use it / maintain the Google Maps aesthetics, just not from Google fonts.

This will remove the warning but obviously the down side is that you change the styling of Google Maps (which may be against their terms and conditions, good luck reading those if you want to make sure!)

Option 2 - delay the insertion of the script.

You use async on your script (you also use defer, just use async for Google Maps as an aside note, don't use both options) but it will still load too early and affect your FCP and font display.

What you could do is manually insert the script after a couple of seconds. This can be done with a simple Script insertion function and a setTimeout, which I have set as 3 seconds but you may need to adjust the timings.

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);

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

1 Answers1

Option 1 - block the Roboto font

Option 2 - delay the insertion of the script.