Knowledge base / Performance

Migrate Google Maps to loading=async

The synchronous loader still works but is deprecated and costs roughly 400ms of first paint. The new bootstrap is a small, safe change.

How to tell this is your problem

  • A console warning about the legacy loader.
  • Map initialisation blocking other scripts.
  • Lighthouse flags render-blocking requests from maps.googleapis.com.

Why it happens

The modern bootstrap loads the library asynchronously and hands you a promise, so nothing waits on the network before your page paints.

The fix, step by step

  1. 01Add loading=async to the loader URL and keep your callback parameter.
  2. 02Move map setup into the callback, or await the maps library import.
  3. 03Guard any code that assumes google.maps exists at parse time.
  4. 04Re-test marker, info window and geocoding behaviour after the switch.

Confirm it is fixed

The deprecation warning disappears and the map initialises after first paint rather than before it.

Check whether this is your error

A scan tells you in about twelve seconds, from a clean session.

Related articles