Google Maps iframe VS API (which is faster, if any)

Question

Many sites embed Google maps at the bottom of the page as you may be aware, while I don't normally do it myself I've been tasked with the job. I've proceeded with the lazy route of embedding the iframe at the bottom of the page.

However I've noticed that the page speed has increased while from 0.85secs load time to 1.95secs thanks to an additional 59 requests sent though the iframe, totaling around 370kb/sec. While 1.95sec for many will be more than acceptable but for me I like things super fast and if there's a way I can shed the time off, then awesome.

So my question is simple, is the API any faster? I have no idea, I've never used it but if anything using can they report if its A) faster and B) cut downs server side requests.

It's worth mentioning that Google maps is at the bottom of the page so the rest of the page does render without any problems. The other thing I can think of speeding this up is just to serve a static file as a map and then have them click it - but client is insisting that Google maps on all pages with schema mark up of address improves SEO. Not going to agru with the chap, far to hot for that bananas :P.

Answer 1

IFrame's are by nature slower due to the overhead they add while rendering a new page within the browser window. And some browsers are slower at rendering iFrame's than others (i.e., IE).

As the chart here demonstrates, iFrames can cost up to 100x more time to create elements than scripts and styles.

IFrame's will also block a window's onload event until all of the iFrame's resources have fully loaded, causing the browser's loading status to continue, giving the perception that the rest of the page is slower too. One way to circumvent this is to use JavaScript to dynamically set the iFrame's src. Other techniques are discussed here.

Also, the number of connections to a web server is shared between the containing page and iFrame, limiting the connections available to the containing page and causing it to load slower. You can use JavaScript to circumvent this also however by loading the iFrame's src after the containing page's content has finished loading.

Lastly, browser instances for windows with iFrames are typically larger in memory, reducing system resources for the client (if that's of concern too).

So yes, the API will render faster than the iFrame, and depending on how you integrate the iFrame, might result in the appearance of the overall page loading faster too.

However, the benefit of using an iFrame is that all of its resources will be coming from the src host, conserving resources for your server. Due to this, and for simplicity of integration, most opt for using iFrames, which also reduces the need to monitor changes in the API.

Answer 2

I don't have any specific experience with the Google Maps API, so I can't answer to whether it is actually faster than the iframe. I suspect it wouldn't be faster since it has to download all the same data sans the iframe itself.

I can say that you shouldn't worry about the difference between one and two seconds load time when the extra load time will not be apparent to users. Google doesn't start penalizing sites specifically for slow loading until the site gets into the 7 to 10 second range. Most users don't seem to start turning away from a site that they perceive to be slow loading until about 3 seconds. After 3 seconds, you start losing more and more users. At two seconds, you are very usable. And in your case with the map at the bottom of the page in an iframe users shouldn't even notice. The one exception would be that if you have javascript that executes onload, in which case the iframe would delay that processing.