Как правильно подгрузить google карты?

Question

[innags]

Здравствуйте.
Есть сайт dom06.alldentalrevere.com
Задача загнать его в зеленую зону по сервису https://web.dev/measure
Все шло хорошо, пока не поставила iframe с картами гугла. Убираю - все в зеленой зоне, ставлю обратно - ругается на использование jpg & png вместо webp(хотя это гугл их и подгружает).
Использую для iframe - lazyload, но не помогает. Кто сталкивался, сможете что то посоветовать?

Comments

[Moskus]

Верное решение - забить на это. Все эти измерялки носят только рекомендательный характер.
Если вам попался клиент, который настаивает на подгонке под измерялку, он - идиот. А вы, на будущее, будете знать, что с такими не стоит связываться.

[Алекс Глебов]

Грузить карту, когда до нее доскролят

[MamaLuyba]

Moskus, идиот или нет - но есть заказ. и ты либо его делаешь, раз взялся, либо внятно объясняешь, почему эти измерялки - говно. доказать это несложно - достаточно показать уровень поддержки этого дебильного webp, и прогнать через эти тесты крупные IT порталы.

[Moskus]

MamaLuyba, это всё прекрасно, только совершенно непонятно, нафига вы это всё мне рассказываете. Я это и так знаю. Если клиент требует подобного, всегда есть огромный шанс и другого идиотизма того же рода, вроде pixel perfect.

Answer 1

[Odisseya]

innags, на десктопах карта действительно lazyload-ится, однако, на мобильных размерах вьюпорта (в т.ч. на том где тестирует web.dev/measure) — карта подгружается сразу, чем вызывает замедление скорости загрузки страницы и падение рейтинга. Прикрепляю скрин, для вьюпорта iphoneX: Нужно сделать , чтобы на мобильных карта также подгружалась с lazyload-ом.

Answer 2

[Alfieros]

1)Вырезаете кусок карты и делайте её через картинку.
2)Скрыть из DOM при загрузке. Для этого придумайте финт ушами, чтобы пользователь нажал на кнопку и в выпадашке или модальном окне вывести карту.

Answer 3

[rogiivs]

вот был подобный вопрос, ознакомьтесь
Зачем Google предлагает мне JPEG 2000, JPEG XR и W...