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?
All Maps Embed API requests are available at no charge with unlimited usage.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With