Map Embeds That Slow the Contact Page

The page people open in a hurry

The contact page is often opened on a phone, in a car or on a sidewalk, by someone who needs one thing: the address, the phone number or how to get in.

On many sites the page opens with a large embedded map. Before it appears, the phone downloads the map provider's scripts, styles and a grid of map images, and on a weak signal that takes a while.

Meanwhile the address sits below the map, or loads after it, or jumps down the screen as the map's frame expands. A thumb trying to scroll lands on the map and moves the map instead.

Three lines of text are being held up by the heaviest thing on the page.

What an embedded map brings with it

An embedded map is not a picture. It is a piece of software supplied by the map provider, running inside a frame on your page.

• A frame holding a separate page from the map provider.
• Scripts that build the map inside the visitor's browser.
• Map tiles, the many small images that make up the view.
• Fonts, icons and styles for labels, buttons and the pin.
• Connections to servers your site does not control.

The second is the heavy part. On a contact page that is otherwise a few paragraphs, the map's scripts can outweigh everything else, and a phone has to download and run them before the map does anything.

Why phones feel it most

On office broadband the map arrives in a second and nobody notices. On mobile data with one or two bars, each extra connection and file adds a noticeable wait.

Phones also run scripts more slowly than desktop computers, so building the map takes time even after the files arrive.

And the people on phones are exactly the ones who need the page to work: on their way, running late, or standing at the wrong door.

Text first

Put everything a visitor needs in plain text at the top of the page, before any map: the address, the phone number set to dial when tapped, the hours, and a line on finding the entrance.

Text arrives in the first moments of loading and is usable straight away. It can be copied, read aloud and enlarged, and it stays readable after the signal drops.

This alone fixes most of the problem, even if the map stays where it is.

A static map image instead

A map image, a single picture of the area with your location marked, gives most of what the live map gave, at the weight of one photograph.

It can come from the map provider's own static image service, used within its terms, or be drawn for the purpose. A drawn map can show what a street map cannot: the side entrance, the parking, the gate.

Link the image to the full map, so a tap opens it for anyone who wants to zoom in.

A worked example

A snowshoe tour company meets its groups in a trailhead parking lot on a mountain road, an hour from the city. Customers drive themselves and meet the guides there.

Its getting here page opened with two large embedded maps, one of the highway and one of the parking lot, and the written instructions sat beneath them.

Most customers opened the page on the way up. The signal fades well before the trailhead, and on one bar the maps never finished loading, so the instructions below them never appeared either.

Groups arrived late or at the wrong lot, and tours started late while the guides waited for them.

The page now opens with the instructions in text: the highway exit, the kilometre sign, the name of the lot, and the van with the logo on it.

Below that is one map image, linked to the exact coordinates in the map apps.

The same text goes into the booking confirmation email, so it is on the customer's phone before they leave home.

Load the live map on request

If a live map matters, it does not have to load with the page. A placeholder image with a button saying show map can load the real thing only when someone taps.

Visitors who just wanted the phone number never pay for the map. Visitors who want it get it, a second later.

The same applies to maps in footers. A map embedded in the footer loads on every page of the site, for every visitor, almost none of whom look at it.

Links that open the map app

On a phone, the most useful map is usually the one the visitor already has. A plain link that opens your address in the phone's own map app hands over directions and traffic at no cost to your page.

Offer two: one for Google Maps and one for Apple Maps, since iPhones open addresses in Apple's app by default.

For places without a proper street address, such as a trailhead, a dock or a field, link to the exact coordinates rather than the nearest address, which may be kilometres away.

Measuring the difference

Run the contact page through a free test such as WebPageTest or PageSpeed Insights, once as it is and once with the map removed on a test copy.

Compare the number of requests, the total weight and how long the text takes to appear. The gap is usually large enough to end any debate about whether the map is worth it.

Chrome's developer tools can also slow the connection to a typical mobile speed, which shows what a customer in a car actually sees.

The counter-case

Some businesses genuinely need a live map: a large property with several buildings, a campground, a business with many locations, or a service area that is easier to show than describe.

Visitors on a desktop computer, planning a trip in advance, also lose little to a live map.

Even then, put the text first and load the map after it, or on request. The address should never wait for the map.

The fix

1. Open your contact page on a phone with weak signal.
2. Move the address and phone number to the top.
3. Make the phone number dial when tapped.
4. Replace the live map with a linked image.
5. Load any live map only on request.
6. Add links for Google Maps and Apple Maps.
7. Remove maps from the footer.

Step two is the one that matters most. Everything else makes the page lighter, but moving the text above the map is what lets a visitor act before the map has finished loading.

Share buttons put the same kind of outside scripts on every page, as covered in social share buttons that slow every page.

Frequently asked questions

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.