Google Maps Platform: Map Tips: Speeding up page load times with the Google Maps JavaScript API

Maps Platform

Product updates, customer stories, and tips and tricks on Google Maps Platform

Map Tips: Speeding up page load times with the Google Maps JavaScript API

Monday, September 21, 2015

Posted by Mark McDonald, Google Developer Relations TeamEditor’s note: ‘Map Tips’ are designed to answer frequently asked questions about Google Maps APIs. Since web performance is so hot right now, we want to provide some useful information. For important tips on how to deploy Google’s mapping tools, read more from Mark McDonald, Google Developer Relations. Also, our friends over at Wikipedia have just done something similar!
Loading JavaScript 101developer resources<script>

As a browser loads its stream of HTML content representing the page to render, it builds DOM and CSSOM trees representing the page structure and style, respectively.

JavaScript can change both the DOM and the CSSOM, for example through document.createElement() and myElement.style.backgroundColor.

Ergo, when the browser hits a <script> tag, either in-line or externally hosted, it has to pause any further processing of the script and any further HTML rendering until the script has been fetched and any CSS declared prior has been fetched and processed. Take note—this is critical as it affects the speed at which the first round of content is displayed in the browser.

asynchronously loading JavaScript
Unblocking scriptsasyncdefer<script src="https://maps.googleapis.com/maps/api/js" async defer></script>asyncdeferInternet Explorer 5.5WHATWG specasyncasyncdeferonLoad<script src="https://maps.googleapis.com/maps/api/js"></script>
...
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
google.maps.event.addDomListener(window, 'load', initMap);
</script><script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap"
async defer></script><script>initMapDOMContentLoaded fires
The numbersChrome DevToolswindow.performance.now()initMap

I can use this everywhere, right?google.mapsmix in<script><body>

Subclassing anything in the Google Maps JavaScript API (for example, custom overlays). You must ensure your classes are defined after the callback has been executed.