Google My Maps Speed Issue

Hello :)
I included a Google My maps in my Webflow project by adding its code into a code-embed element. Everything works, but my website speed is incredibly low due to this…When investigating the website speed protocol, I can see that it is loading huge google files. Is there a way I can basically define a lazy load on this custom embed element? Because right now it is loading this initially and blocking the whole website… hope that makes sense…

I can’t see your project, but you could try making the scripts async if they’re not already.

Lazy loading CSS is a bit trickier but can be done with some hacks, you’ll find more searching for that directly on Google.

In addition to those approaches, you could try lazy-rendering the map elements themselves. SA5 has a built-in mechanism for that which you can wrap any elements with in the body- it works best with embeds like Calendly, YouTube, etc were all of the code and IFRAME is in one chunk.

Hi,

I understand how frustrating it can be when external embeds like Google My Maps slow down your site, especially if they load huge files upfront. The good news is that you can definitely implement lazy loading for your custom embed to improve page speed!

Lazy Loading the Google My Maps Embed
The key here is to make sure that the Google My Maps iframe only loads when it’s needed—like when the user scrolls to it—rather than on initial page load. You can achieve this with a lazy loading approach.

Here’s how you can do it:
Use JavaScript to Lazy Load the Embed
You can modify your code embed to delay the loading of the iframe until the user scrolls to that section of the page.

Add CSS to Hide the Map Until It’s Loaded
You may also want to ensure the map is visually hidden until it loads to prevent it from taking up space on the page unnecessarily.
.map-container iframe {
opacity: 0;
transition: opacity 0.3s ease-in-out;
}

.map-container iframe[src] {
opacity: 1; /* Fade in once the iframe source is set */
}

After applying these changes, be sure to check your site’s performance test again on Google PageSpeed Insights to see the impact on your scores.

Alternatively, if you don’t want to spend too much time on optimization, you can try our Website Speedy tool, which offers a 14-day free trial. It automatically handles the optimization for you, saving you time and effort.

(Disclaimer: We are the developers of this tool and are happy to answer any questions you may have.)