#react-google-maps/api - Loading map is blocking the main thread - reactjs

Question

I am currently working on a website, where I use google maps to display some markers with places location.
I am using this npm package: https://www.npmjs.com/package/#react-google-maps/api.
The issue is that when I do site audit with Google Insights (https://developers.google.com/speed/pagespeed/insights/) I am getting very low mobile performnace. It is about 50.
This is considered a issue, because I am using Next.js (version 10.0.6). Audit score on desktop is great.
I think, that the main issue is with loading a map. This proccess is blocking my website for about 500 ms. It is a lot.
Screen shot of an issue
Here is how I am getting the map at the moment:
I am using functional component
I am importing GoogleMap and useLoadScript from #react-google-maps/api
Loading the map
Rendering the map (onLoad is used to set ref)
I have already tried usingEffect (with an empty array), async/await syntax, nothing helped.
I will be very grateful for any help.
Kind regards,
Bartek

Answer 1

Although I am not that familiar on how Google Insight works, loading the script directly instead of relying on other 3rd party libraries (#react-google-maps/api) could prove beneficial and should reduce the latency.
App.js
import React, { Component } from 'react';
import { render } from 'react-dom';
import Map from './components/map';
import "./style.css";
class App extends Component {
render() {
return (
<Map
id="myMap"
options={{
center: { lat: -33.8569, lng: 151.2152 },
zoom: 8
}}
/>
);
}
}
export default App;
map.js
import React, { Component } from "react";
import { render } from "react-dom";
class Map extends Component {
constructor(props) {
super(props);
this.state = {
map: ""
};
}
onScriptLoad() {
this.state.map = new window.google.maps.Map(
document.getElementById(this.props.id),
this.props.options
);
var marker = new window.google.maps.Marker({
position: { lat: -33.8569, lng: 151.2152 },
map: this.state.map,
title: "Hello Sydney!"
});
//adding markers by click
this.state.map.addListener("click", e => {
//Determine the location where the user has clicked.
this.addMarker(e.latLng);
});
}
componentDidMount() {
if (!window.google) {
var s = document.createElement("script");
s.type = "text/javascript";
s.src = `https://maps.google.com/maps/api/js?key=YOUR_API_KEY`;
var x = document.getElementsByTagName("script")[0];
x.parentNode.insertBefore(s, x);
s.addEventListener("load", e => {
this.onScriptLoad();
});
} else {
this.onScriptLoad();
}
}
addMarker(latLng) {
var marker = new google.maps.Marker({
position: latLng,
map: this.state.map
});
}
render() {
return <div className="map" id={this.props.id} />;
}
}
export default Map;