Google Maps 100% page speed guide

Impact of Google Maps on your Core Web Vitals

There are lots of reasons to embed Google Maps on your page. It is great for showing the location of your company for example. But there is a catch. Google Maps is not as fast as you would expect from a Google service. In fact, Google Maps on your page is quite a page speed drain.

It costs 14% of my perfect 100% page speed score. It does this with my Google Lighthouse statistics:

1. First Contentful Paint + 0.8 sec. The first paint runs almost a second later because Google Maps interferes with loading the page.
2. Speed Index + 3.1 sec. Speed Index tripled due to map rendering and main thread blocking.
3. Largest Contentful Paint + 0.8 sec. The largest contentful paint is delayed by 0.8 seconds, just like the first contentful paint.
4. Time to Interactive + 6.5 sec. Because Google Maps relies heavily on JavaScript, it takes more than 6 seconds to interact with the page. Lighthouse has since replaced TTI with Total Blocking Time, but the root cause is the same: Google Maps JavaScript blocks your main thread, harming your Interaction to Next Paint (INP).
5. Total Blocking Time + 320ms. Google Maps blocks the main thread with 320ms. That is exactly what we do not want.
6. Remove unused JavaScript warning. To top it off, you get another warning that you are not using large parts of the Google Maps JavaScript. Try to explain that to a customer.

Your first thought might be to load the maps 'lazy' with the iframe attribute loading="lazy". That actually works in modern browsers with 95% global coverage. But for maximum performance, it is not enough. Chrome starts loading lazy iframes roughly 1,250px below the viewport on fast connections and 2,500px on slow connections. If your map is anywhere near the visible area, it will still load during the initial page render and compete with your critical resources. For true zero impact, you want a facade: load absolutely nothing until the user actually interacts with the map.

Step 1: Static maps

The easiest option is to use a static map. This means that instead of an interactive map, you use only an image of the map. The advantage of this is that an image loads much faster. The disadvantage is that you cannot interact with an image. So you cannot zoom in, scroll or navigate.

We will start with a static map. Later we can convert this static map into an interactive map that does not interfere with the page speed.

There are several ways to place a static map on your page. There are tools that will help you do that like Static Map Maker, but you need an API key. I will show you how to download a static map image by hand.

1. Place the map on your page

Place the map on your page. Go to Google Maps, find a location and click share > embed this map. Copy the code and paste it on your page. Now right click on the page and select 'inspect element'. You will now see the element inspector of the 'dev console' of your browser. Now find the iframe code, right click on it and select 'capture node screenshot'.

2. Convert the static image to WebP format

The map image you just downloaded is in the PNG format. Because we are going for page speed, we will use the much faster WebP format. You can convert your image online at ezgif or you can convert it yourself with the tool cwebp: cwebp -q 60 image.png -o image.webp.

Step 2: Convert the static map image to an interactive map

The static map ensures that no page speed is lost during page load. At page load this means we do not have an interactive Google map yet. At some point after page load we will replace the static map in the background with an interactive map. We will do this after the page has been rendered and painted. This can be done in 2 ways. The first way is to replace the static map as soon as you hover the mouse over it. The second is to replace the static map once the browser is idle.

3. Place the static map image in a placeholder

Since we want our map to look good on both mobile and desktop, we will use this CSS trick where the proportions of the map are always correct regardless of the visitor's screen size. This reserves space for the map and prevents layout shift (CLS) when the interactive map loads. We now add a data-src attribute to the container that we will later use as the source URL for the Google map.

First place the map container on the page:
<div data-src="https://maps.google.com/mapsq=fyn+()&z=9&output=embed" id="mymap"></div>

Add some styling in your stylesheet. As you can see we use the static map image as a background image and apply a 76.25% padding at the top for the correct aspect ratio. The final map will have an absolute position over the entire width and height of the static map.

#mymap{
    background: url(/image.webp);
    background-size: cover;
    position: relative;
    overflow: hidden;
    padding-top: 76.25%;
}
#mymap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

4. Load the interactive map during the first interaction

This is where the magic happens. Without this little piece of JavaScript, the map is just a static image. This JavaScript adds (and removes) an event listener to the placeholder container and waits for the 'mouseover' event (when you hover your mouse over the static map) to inject the interactive map in the container.

const map = document.getElementById('mymap');
const mapListener = function(e) {
    const frame = document.createElement('iframe');
    frame.src = this.getAttribute('data-src');
    map.appendChild(frame);
    map.removeEventListener('mouseover', mapListener);
};
map.addEventListener('mouseover', mapListener);

5. Preload the background image (optional)

If the Google map is immediately visible in the viewport, it is often a smart idea to preload the background map image. Use this code to preload the static map image: <link rel="preload" href="/image.webp" as="image" type="image/webp" crossorigin> and place this as early as possible in the <head> of your page. In this example case, preloading the placeholder image speeds up the LCP by almost a second.

Step 2b: Replace the static map image automatically

When there is a high chance that the visitor will interact with the map it might be a good idea not to wait for the mouseover event. As soon as the browser is idle, start injecting the map into the page. The process is more or less the same as above. You can even combine both.

4b. Load the interactive map automatically

We will use the 'load event' here. The load event is a signal that your browser sends out as soon as the page has finished loading. Then we convert the static map to the interactive map! For more techniques like this, see 16 methods to defer JavaScript.

window.addEventListener('load',
    function(e) {
        const map = document.getElementById('mymap');
        const frame = document.createElement('iframe');
        frame.src = map.getAttribute('data-src');
        map.appendChild(frame);
});      

The result

If you apply one of these techniques you will notice that the page loads with a 100% Lighthouse score and a 100% PageSpeed Insights score while retaining all the functionality of Google Maps!

According to the 2025 Web Almanac, 91% of pages with iframes still lack a loading attribute entirely. That means the vast majority of Google Maps embeds load without any optimization at all. The facade approach puts you far ahead.

To verify your changes actually improve real user experience, set up Real User Monitoring. Lab scores are useful for debugging, but field data from real visitors is what Google uses for ranking.

Good luck making Google Maps faster. Do you need help? Then contact me!