@react-google-maps/api - 加载 map 阻塞了主线程

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;