Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Google Maps API causes Page Speed hit

I have been working to optimize my Page Speed score, and I found that loading a Google Map appears to give a 5 point or so penalty. It complains about a number of things, but the one that causes a yellow dot is the lack of a cache validator in most of the loaded resources.

In order to rule out anything I might have done, I ran Page Speed against the simplest possible map - the Hello World from the Google Maps documentation. Sure enough, it gets the same warning I get on my site. Run Page Speed against this to see the warnings.

https://google-developers.appspot.com/maps/documentation/javascript/examples/map-simple

Can these warnings be fixed? Or, in general, is it possible for any page with a Google Map to get higher than a 95 Page Speed score?

like image 213
LAW Avatar asked May 03 '12 05:05

LAW


People also ask

Does it cost money to use Google Maps API?

All Maps Embed API requests are available at no charge with unlimited usage.


1 Answers

My best scores with this simple map are 81/95 (Mobile/Desktop).

The following example gives 81/94.

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <div id="map-canvas"></div>
    <script>
      var map;
      function initialize() {
        var mapOptions = { zoom: 8, center: new google.maps.LatLng(-34.397, 150.644) };
        map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
      }

      function loadScript() {
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&callback=initialize';
        document.body.appendChild(script);
      }

      window.onload = loadScript;
    </script>
  </body>
</html>

I was able to gain +1 point to desktop score by loading Google Maps lib through a proxy.

like image 140
Alexander Schwarzman Avatar answered Sep 28 '22 13:09

Alexander Schwarzman