Speed up site by properly added Google Maps – wipe 70 req & 2MB

Website speed is everything. If you ignored it so far, it’s truly time to stop. As with any optimization effort going for the low hanging fruit first, will yield the best results with least invested resources. If your site uses Google Maps, this trick will reduce the page size by about 70 requests and nearly 2MB of data without any negative effects on the user experience.

The (costly) iframe method & how to speed it up

There are more than a few ways you can implement a map on your site, but the majority of people use the one that’s easiest to implement – the iframe method. Although it certainly gets the job done, when it comes to speed it’s certainly not the best one.

 

Test our method on Fiddle and see how fast & easy it is.

The iframe method of implementing maps loads the map as soon as the page loads. It doesn’t take into account if the visitor is looking at the map or if he’s interacting with it or not. To load the map it takes about 70 requests which add up to 2 MB of data or up to 2 precious seconds of loading time. On slower connections and especially mobile ones it’s even more.

Instead of loading all that data, this method loads the map in one request, as one single image. That’s about 50kb of data which takes just a fraction of the original time to load. When and if the user clicks the map the interactive version loads and it’s ready for use.

Making your site faster

If you don’t have a WordPress site or just want to dig into some code, the step-by-step tutorial below will help you implement this map loading method on any site. If you have a WordPress site and want to get this done in a few clicks we recommend having a look at Google Maps Widget plugin we reviewed a while ago. It’s a great WordPress plugin that generates the most optimized maps without messing with any code.

PRO tip #1

If you want to speed up your site with just a few clicks, install Google Maps Widget. The plugin flawlessly implements all methods we show in the article, and you don’t have to mess with any code. More than 100,000 sites use it to make their maps better & faster.

If you’re comfortable using HTML, CSS, and jQuery, and already have some experience generating static and dynamic Google Maps have a look at the Fiddle we’ve prepared and implement the code on your site. If not, don’t worry; we’ll walk you through everything, step by step.

Generating the static image map

Static Google maps
First order of business is to create the static, image-based Google Map. Some kind people created a handy form so that we don’t have to mess with URL parameters. Head over to Static Map Maker and use the form on the left to modify the map. Leave the API field empty; retina option should be unchecked as well. Adjust the width and height to fit your site’s needs. Please note that Google imposes a limit on the map size. Maximum static map size is 640 x 640 pixels. You probably want the default roadmap map type, and PNG is a good format choice, so leave those as they are and make sure auto adjust is disabled. Then adjust the two most important, self-explanatory options – address and zoom. Play with them to get the map you need. Preview on the right automatically refreshes as you make changes. Once you’re done copy the preview image’s URL (right click, copy image address) and add this HTML to your site:

<img src="IMAGE-URL-YOU-COPIED">

Save your HTML file, WordPress page or whatever you’re using, and you should see the static map. It loads instantly. Now let’s add a bit of markup that will allow us to load the dynamic map.

<div id="my-fast-map" data-iframe-width="600" data-iframe-height="300" data-iframe-src="IFRAME-URL">
  <a href="#" title="Click to activate map"><img src="IMAGE-URL-YOU-COPIED” alt="Click to activate map"></a>
</div>

We didn’t add much. The wrapping div with ID “my-fast-map” will allow us to target its content, and it stores a few custom data parameters we’ll explain in a bit. The map image is wrapped in an anchor element so that we can click it. If you copy/paste this code to your page nothing will change except you’ll be able to click on the static map (and nothing will happen).

Implementing the dynamic map

Interactive Google Map implementation
Head over to Google Maps and find the location you want to display, adjust zoom and any other details you prefer. On the left, click the Share button and choose the Embed map tab. No need to adjust anything, simply copy the code starting with <iframe. Paste that code in Notepad or some other text editor where you can extract a piece of it. You only need the “src” parameter. The whole code will look like:

<iframe src="https://www.google.com/maps/@?dg=dbrw&newdg=1@?dg=dbrw&newdg=1@?dg=dbrw&newdg=1embed?pb=!1m18!1m12!1m3!1d193572.19598932454!2d-74.11842856927231!3d40.70556467357129!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c24fa5d33f083b%3A0xc80b8f06e177fe62!2sNew+York%2C+NY!5e0!3m2!1sen!2sus!4v1463600529684" width="800" height="600" frameborder="0" style="border:0" allowfullscreen></iframe>

You only need this part:

https://www.google.com/maps/@?dg=dbrw&newdg=1@?dg=dbrw&newdg=1@?dg=dbrw&newdg=1embed?pb=!1m18!1m12!1m3!1d193572.19598932454!2d-74.11842856927231!3d40.70556467357129!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c24fa5d33f083b%3A0xc80b8f06e177fe62!2sNew+York%2C+NY!5e0!3m2!1sen!2sus!4v1463600529684

Take that URL and replace the IFRAME-URL text we had in the previous code snippet with it. While you’re at it you can also adjust the data-iframe-width and data-iframe-height parameters. You probably want to match them to the size of the static image or make them bigger. Open our example at Fiddle and have a look at the HTML in the top left corner. That’s the code you want to end up with (of course with your actual map locations).

Putting everything together with JS

We’re done with HTML, now for the JavaScript part. Your site probably already has a JS file that it includes on the page you’re working on. Open that file and copy/paste the following JS code at the end of it:

jQuery(function($) {
  $('#my-fast-map a').on('click', function(e) {
    e.preventDefault();
		map = $(this).parent();
    
    iframe_src = map.data('iframe-src');
    iframe_width = map.data('iframe-width');
    iframe_height = map.data('iframe-height');

    map.html('<iframe src="' + iframe_src + '" width="' + iframe_width + '" height="' + iframe_height + '" allowfullscreen></iframe>');

    return false;
  });
});

Let’s analyze the code. It runs when you click the link (static map) in the map DIV. Since we don’t want the default actions to execute when you click a link we’re using the e.preventDefault() method. As we have to extract map parameters saved as data attributes in our DIV we save that DIV in the map variable and continue to extract those three pieces of data; iframe source, iframe width and iframe height. Now that we have everything we can construct the iframe element and replace the static image with the dynamic one. That’s it for JS.

If you want to activate the map on hover (when user’s mouse goes over it for the first time) just replace “click” with “mouseenter”. Important warning – mobile devices don’t have a cursor so they can’t trigger any “hover” events. This hover mod will only work on desktop devices.

Sample code on Fiddle contains a bit of CSS (upper right corner). Depending on the CSS you already have on your site this may or may not be necessary but we wanted you to have it on hand. First part targets the static map, and we gave it a bit of padding. The second one ensures the dynamic map (iframe) doesn’t have the ugly default border. If needed copy those few lines into any CSS file your site includes on the map page.

Simple but highly effective

We hope you’ll manage to implement this on your site as it will definitely improve loading times and user experience. If you run into any problems, let us know in the comments below. As we’ve already mentioned if you have a WordPress site and don’t like messing with code grab Google Maps Widget – it takes care of everything we discussed here with a friendly GUI and you don’t have dig into any HTML or JavaScript.

This was just one of the things that you can do to improve your site. If you’re working with WordPress, learn more about the platform and blogging in general.

START YOUR OWN BLOG

This guide is an introduction to mastering the art of blogging. It provides easy to follow steps to start, maintain, and grow your blog.

Read the guide

One thought on “Speed up site by properly added Google Maps – wipe 70 req & 2MB

  1. […] and it could really take a while to load depending on several factors. Maps using iFrames can really slow things down and if you want to know how to speed things up, read on, or check this article out. […]

Leave a Reply

Your email address will not be published. Required fields are marked *