We all love the convenience of a map on a contact page, but no one loves waiting for it to load. Google Maps is handy, yet heavy. Here’s how to keep the map, cut the drag, and give your visitors a smooth, bloat-free ride.
But before we get into the fixes, it helps to know where these snippets belong. WordPress makes it straightforward to drop in a little code without needing to be a developer.
Where to paste the snippets
Copy the code examples into your WordPress site:
- For simple
<iframe>or<img>code, paste it into a block editor Custom HTML block on your page. - For
<script>code (lazy-load or click-to-load), add it via your theme’s footer scripts option or a plugin like Code Snippets.
Which method is best for me?
Not every site needs the same fix. Here’s a quick guide:
- Just want a simple map with one address? Use the Embed API with lazy-loading, fastest to set up.
- Want the lightest pages possible? Swap in a static preview or click-to-load facade.
- Need multiple pins, routes, or directions? Go with the JavaScript API, but defer loading until interaction.
- Not comfortable editing code? Skip straight to the plugin options, they handle lazy-loading for you.
Swap the embed for a static preview
Think of this as showing a postcard instead of flying in the whole landscape. You display a lightweight image first; the interactive map only appears when someone wants it.
⚠️ In the snippets below: Replace YOUR_API_KEY or YOUR_EMBED_CODE with your own Google Maps API key or embed code.
Generate a static image with Maps Static API
Google’s Maps Static API can generate a clean snapshot:
<img
src="https://maps.googleapis.com/maps/api/staticmap?center=London,UK&zoom=14&size=600x400&key=YOUR_API_KEY"
alt="Map preview of London, UK"
width="600"
height="400" />Swap in your own location and zoom. Keep the preview under 50 KB by compressing it. For extra savings, see our guide on lazy loading images in WordPress.
Optimise the preview image format
Export it as WebP or a lean JPEG. This keeps your “postcard” feather-light and quick to paint.
Use the Embed API with lazy-loading
If you only need one pin on a map, Google’s Embed API is the easy win. Add an iframe, then let the browser hold off until the user scrolls to it.
Add loading=”lazy” to your iframe
<iframe
src="https://www.google.com/maps/embed?pb=YOUR_EMBED_CODE"
width="600"
height="450"
style="border:0;"
allowfullscreen
loading="lazy"
referrerpolicy="no-referrer-when-downgrade"></iframe>That single attribute saves your page from loading a map no one has looked at yet.
Confirm Embed API is free and unlimited
Best bit? Google’s Embed API is free with no usage caps, a no-brainer for small sites.
Add a click-to-load facade
For maximum speed, hide the heavy map until someone actually asks for it.
Show a placeholder card or image
Your static preview doubles as the cover image:
<div id="map-facade">
<img src="/uploads/map-preview.webp" alt="Map preview" />
<button id="load-map">View map</button>
</div>Replace the placeholder with the live map on click
<script>
document.getElementById('load-map').addEventListener('click', () => {
document.getElementById('map-facade').innerHTML =
'<iframe src="https://www.google.com/maps/embed?pb=YOUR_EMBED_CODE" width="600" height="450" style="border:0;" allowfullscreen loading="lazy"></iframe>';
});
</script>Until a visitor clicks, your page stays blissfully map-free and lightning-fast.
Defer the Maps JavaScript API until interaction
Need multiple pins, directions, or routes? That’s when the full JavaScript API comes in, but you should load it only at the moment of need.
Load the API only when the map enters viewport
<div id="map"></div>
<script>
const io = new IntersectionObserver(entries => {
if (entries[0].isIntersecting) {
const s = document.createElement('script');
s.src = "https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap";
document.body.appendChild(s);
io.disconnect();
}
});
io.observe(document.querySelector('#map'));
</script>Use IntersectionObserver or importLibrary
IntersectionObserver lets you “wake up” the API only when scrolled into view.
For an even leaner approach, Google’s new importLibrary method loads just the part of Maps you need.
let map;
async function initMap() {
// Only import the Maps library
const { Map } = await google.maps.importLibrary("maps");
map = new Map(document.getElementById("map"), {
center: { lat: 51.5072, lng: -0.1276 }, // London
zoom: 12,
});
}
// Load the API script dynamically
const s = document.createElement('script');
s.src = "https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap";
document.body.appendChild(s);Optimise markers and interactivity
Hundreds of pins? That’s when maps really get sluggish.
Cluster markers for faster rendering
Google’s marker clustering bundles nearby pins so the map doesn’t choke on drawing them all at once.
Use raster markers over heavy SVGs
Raster marker images are lighter to render than fancy SVGs. Unless you truly need custom icons, keep it simple and smooth.
Apply WordPress plugins for lazy-loading maps
Not a fan of code tweaks? Let a plugin take the strain.
Configure a3 Lazy Load or Perfmatters
Both plugins can lazy-load iframes, including Google Maps. In Perfmatters, flip on “Delay JavaScript”; in a3 Lazy Load, tick the iframe option. Done.
Alternative plugins:
W3 Total Cache Pro
Lazy Load for GMaps
These handle maps specifically. Lazy Load for GMaps even adds a click-to-load option for you. Want more script-control tricks? See our guide on removing jQuery from WordPress.
Troubleshooting: when Maps still won’t show
If your map stays blank or throws a warning, the issue usually isn’t speed, it’s setup. Common culprits are missing billing, wrong referrer rules, or disabled APIs. We’ve put together a step-by-step guide to sort these out. See How to Fix Google Maps JavaScript API Errors for the quick fixes.
Verify speed gains with Lighthouse
Don’t just take my word for it, test it.
Run PageSpeed Insights before and after
Head to PageSpeed Insights and run a quick scan.
Check LCP and third-party code impact
A faster Largest Contentful Paint and a slimmer “third-party code” section are the pay-offs.
Wrap-up: keep maps lean, keep pages fast
By swapping postcards for facades and lazy-loading the heavy bits, you keep Google Maps useful without dragging down performance. Try one of these tweaks today, rerun Lighthouse, and enjoy brag-worthy speed scores.
