Как избежать потерю производительности при использовании Google Map?

Question

[Анар Лятифов]

Всем доброго времени суток.
Пишу сайт на React JS и появилась необходимость использования google карт.
Нашёл такое решение: google-maps-react
И всё бы хорошо, НО хотелось бы ещё и добиться хороших результатов на "Google PageSpeed Insights".
При использовании карты показатель на мобильных устройствах падает до 34-35, а при отключении поднимается до 65-67, да понимаю что 65-67 тоже не лучший результат, но всё же он лучше чем 34-35.
Пробовал использовать: react-lazyload однако это не помогло.

Так же рассматривал вариант с React.Lazy и Suspense, но и это не помогло. Код компоненты с картой и той что её оборачивает в Suspense и LazyLoad предоставляю ниже

Контейнерная компонента, с LazyLoad и Suspense:

import React, {Suspense} from 'react';

/* Comnponents */
// import MyMap from './MyMap'

/* Libs */
import LazyLoad from 'react-lazyload';

const MyMap = React.lazy(() => import('./MyMap'));

const GoogleMap = (props) => {

    return(
            <Suspense fallback={<div>Fancy loading container!</div>}>
                <LazyLoad once>
                        <MyMap {...props} />
                </LazyLoad>
            </Suspense>
    )
}

export default GoogleMap

Компонента с картой:

import React,{ useEffect, useState} from 'react'

/* Libs */
import { Map, GoogleApiWrapper, Marker } from 'google-maps-react';

const MyMap = ({
        width="300px", 
        height="300px", 
        lat = 48.00, 
        lng = -122.00,
        zoom = 8,
        className,
        ...props
    }) => {
        let [cords, setCords] = useState({lat: lat, lng: lng})
        const mapStyles = {
            width: width, height: height
        }


        useEffect(()=>{
            if (lat !== cords.lat && lng !== cords.lng) {
                setCords({lat: lat, lng: lng})
            }
        }, [lat, lng, cords, setCords])

    return(
        <div className={className ? className : ""} style={{position: "relative", ...mapStyles, marginTop: "20px"}}>
                <Map google={props.google}
                    containerStyle={{width: "100%"}}
                    zoom={zoom}
                    style={mapStyles}
                    initialCenter={{ lat: cords.lat, lng: cords.lng}}
                    center={{ lat: cords.lat, lng: cords.lng}}
                    >

                            <Marker position={{ lat: cords.lat, lng: cords.lng}} />
                </Map>
        </div>
    );
}

export default GoogleApiWrapper({
    apiKey: '*тут мой API*'
  })(MyMap);