Stopping Google Maps slowing your website is fairly straight forward, especially if you’re using WordPress. I’ll show you how to do this today.
First off though, it’s good to remember that adding anything extra to your web page will slow it down.
And of course something’s slow your page load more than others.
One thing that will slow your page load a lot is adding Google Maps.
If you want your webpages to load in less than one second then you need to be extra careful and focused about what you add to a page.
Today I will focus on Google Maps and how, if you do end up using this on your website, you can massively minimise its page speed impact.
Is Google Maps killing your page speed?
Google Maps is a superb tool – easy to use and so versatile.
But it comes with a very heavy page speed ‘cost’.
Adding a Google Map to your site can add 2 to 3 seconds extra load time to every single page of your website, unless you are very careful about HOW you add Google Maps to your site.
How to fix Google Maps slowing your WordPress website
Ok are you ready for another crazy statement?
The best way to fix Google Maps slowing your WordPress website down is NOT to add it in the first place!
Before you add anything to your website – WordPress or otherwise – seriously consider the speed cost.
Do you really need to add Google Maps to your website or will a simple map image do the job?
And if you want a more dynamic solution, why not link the image to a Google Map page opening in another browser tab. This is my recommended way to use Google Maps on your site without slowing it down.
In addition – if you use an image instead of an actual dynamic map, you can filter or edit out your competitors location pins.
If your business was Surf School Bali as shown in the image above, if you use a dynamic map on your website, your visitors will be dynamically connected to your competitors.
With a single mouse click they can jump off your site and go and check out the other options shown nearby on the map.
Using an image like the one above, can reduce your site bounce rate.
And if you get smart, you can make your business stand out more by creating a custom Google Map, or you can simply photoshop the image.
Google Maps code really slows your page speed
Google Maps is what I would call a ‘heavy weight’ when it comes to page speed.
It can add over 1/2 megabyte of extra files (requests) to your page download, and often has 40 different requests needing to be downloaded.
Why does Google Maps slow my website?
So as you can see in the image above, Google Maps requires 36 of the 50 total requests for the page.
Those 36 requests take up 462kb – nearly 1/2 megabyte to download.
You can see the speed stats at the bottom left on the GTmetrix report snapshot above.
If Google Maps was not added to the page, it would only take 14 requests to load the page.
In addition, notice the requests are loaded from three different domains – thus requiring DNS lookups for each domain slowing the page speed further.
Google Maps is a complex web application so it requires a lot of files to make it work on your website.
How to fix Google Maps slowing my WordPress website
A common mistake when adding Google Maps code to your WordPress site is is adding it to every page on your site.
Some inefficient WordPress Google Map plugins can add the code to every page on your site.
Some themes also have Google Map options that make it easy to add a map, but at the same time add the code to every page of your site!
If you are going to use dynamic Google Maps on your site take note of these key points:
- Avoid adding a Google Map to your home page or other important pages such as Adwords landing pages
- Make sure the Google Map code is only added to the page where it’s being used (you can use GTmetrix to test this)
- Never add a Google Map above the fold – more on that soon
Adding a Google Map with Elementor
It’s an historical misconception that Elementor slows down your page speed.
This site is built with Elementor Pro – I highly recommend the Elementor page builder if you are looking for a great WordPress solution.
Elementor has a Google Map widget allowing your to add and configure a Google map with a button click.
And of course, the Google Map code will only be loaded on the page where it’s used, when you add a map in this way.
Never add a Google Map above the fold
If you add ‘heavy’ content such as large images, sliders, carousels or Google Maps above the fold, it severely affects a key Google speed metric called LCP or largest contentful paint.
Here’s a great Kinsta article that explains what about the fold means.
I highly recommend Kinsta as a WordPress managed web host – they’re an amazing team and I’ve worked on their servers a lot for many of my page speed optimization clients.
Let me help you with your WordPress page speed
I offer an easy full page speed optimization service for WordPress websites.
If you want your WordPress site to speed rocket to the top hire me today.
- Simple hourly service
- No contracts
- $397 USD covers 5 hours – simple top up in 2hr increments if more time is needed for complex sites
- I personally do all the work – nothing is subcontracted
- Click the chat button on the right to chat with me or learn more here: page speed optimization service for WordPress websites
How to remove globally loaded Google Maps
If your theme, or the Google Maps plugin that you use, loads the Google code globally across all pages, there’s a number of ways you can fix this:
- Check your theme/plugin settings – there could be some settings you can apply
- Dequeue the scripts being loaded using functions.php – this is an option for the more technically minded
- Use Perfmatters (highly recommended)
- Use Asset Clean up plugin (great plugin but harder to use than Perfmatters)
Use Perfmatters to remove Google Maps and other excess code
Watch on Youtube: youtube.com/watch?v=ctC9rkhs_Yg 5:50
Perfmatters is a perfect speed companion for all WordPress sites.
This amazing plugin gives you granular control over excess code being loaded on any part of you site.
In the general options it’s a simple button click to remove all the Google Maps code from your site, allowing you to indicate exactly which pages/posts Google Maps will load on.
If you don’t know how to find the post/page ID read this great Kinsta article.
Using WP Rocket to remove Google Maps code from the initial page load
Even if the Google Maps code is loaded just on the page where you need it, the code still needs to be downloaded, critically affecting your page speed.
It is possible using WP Rocket (highly recommended) to remove the code from the initial page load completely.
WP Rocket’s delay JavaScript execution function will wait till the page visitor interacts with the page (scrolls) before loading code that is used below the fold.
I use WP Rocket on all the sites I speed optimize – it’s simply the best and easiest page speed plugin you can use – paid or free.
There is no other plugin that gets the same results with the same effort and minimal issues. If you don’t use it I suggest you switch today!
I offer a WP Rocket configuration service – check out my shop page.
Add Google Maps below the fold
WP Rocket’s delay JavaScript execution function will only work on code that is used BELOW the fold.
If you place your Google Map at the top of the page – above the fold – there is nothing that can be done to delay the load, so all the map code will be loaded on the initial page load affecting your page loading metrics.
This is why earlier I recommend to ONLY add Google Maps below the fold.
To be 100% sure an object is below the fold add it to the page and test the page with Google PageSpeed Insights and GTmetrix.
If it shows up on either report drop it further down the page.
