Как я могу "поменять" шрифты Google Maps, чтобы избежать предупреждения о скорости загрузки страницы googole? - PullRequest
0 голосов

У меня есть страница html с картами Google в нижнем колонтитуле.

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

Итак, если я провожу тест скорости загрузки страницы Google, я получаю сообщение:

Настроить отображение всего текста при загрузке веб-шрифтов

Но Google Maps настроен на отображение только собственного шрифта Roboto. Что мне делать, чтобы избежать предупреждения?

1 Ответ

0 голосов
/ 06 мая 2020

К сожалению, (насколько мне известно) невозможно фактически остановить это предупреждение без некоторых обходных решений, вы не можете выполнять замену шрифтов на ресурсах, которые вводятся в скрипт 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&amp;callback=initMap&amp;language=en&amp;region=RU');
    }, 3000);
...