Recently I compared performance tests of our Contact-Us page for embedding an interactive Google map versus using a simple JPEG screenshot with a hyperlink to the full Google map. What I found was that the interactive Google map on average made our Contact-Us page:
- 3x Slower Page Load Time
- 7x Larger (cumulative file sizes)
- 5x more HTTP requests
To start I went to webpagetest.org and ran 11 tests from Dulles, VA on the Chrome browser for a 5 Mbps connection targeting our Contact-Us page with the embedded Google map, and I got some rather slow results considering how many optimizations we had recently done on our site. On average our Contact-Us page load time was 3.6 seconds, 1.3 MB in size, with 124 HTTP requests. What surprised me the most was that it took roughly 95 HTTP requests to generate just the Google map.
My next thought was to make a JPEG of the map and hyperlink it to the full map. I used Yahoo’s Smush.it to compress the image and save it as a progressive JPEG. Once it was in place, I went to webpagetest.org again and ran 11 more tests and began comparing the results. This brought our Contact-Us page load time down to an average of 1.3 seconds, 185 KB in size, and 26 HTTP requests.
When looking over my findings our Vice President, Scott Price, pointed out that the difference in load times aligned closely with his findings from an article he had written last year about embedding third-party content. Ultimately being a business that is about performance and scalability we went with the faster of the two options, but of course others may have a more realistic need for embedding a Google map on their site. I ran 11 tests in case of extreme outliers and fortunately didn’t encounter any. Below are graphs comparing the results for all 11 tests.
