К сожалению, (насколько мне известно) невозможно фактически остановить это предупреждение без некоторых обходных решений, вы не можете выполнять замену шрифтов на ресурсах, которые вводятся в скрипт Google Maps.
Однако у вас есть несколько вариантов повышения производительности.
Вариант 1 - заблокировать шрифт Roboto
Это отличный ответ о том, как это сделать в этом ответе на переполнение стека .
Это блокирует внедрение шрифтов Google CSS. Вы все равно можете загрузить Roboto с вашего собственного сервера или CDN, где вы контролируете его, если хотите использовать его / поддерживать эстетику Google Maps, только не из шрифтов Google.
Это уберет предупреждение, но очевидно, что обратная сторона заключается в том, что вы меняете стиль Google Maps (что может противоречить их условиям, удачи, читая их, если вы хотите убедиться!)
Вариант 2 - отложить вставку скрипта .
Вы используете async
в своем скрипте (вы также используете defer
, просто используйте async
для Google Maps в качестве примечания, не используйте оба варианта), но он все равно загрузится слишком рано и повлиять на отображение 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);