I, for one, don't tend to use an embedded Google Map on a website when I'm looking for directions to their physical location. Rather, I tend to look for the 'larger map' link so I can plot directions and see the map on a bigger screen.
Inspired by the great feedback and results from the optimised video embed plugin, I used this as an excuse to create a couple of new things for Beaver Builder, in an attempt to optimise page load speed a bit more:
Google Places autocomplete field
and with that, a
Static Google Map
(This is the actual module in use, so you can see the output)
Here's the settings form for the map:
and for the markers (you can specify multiple):
I'm just going to show you the figures, and then provide my thoughts after.
With a regular embed, using the Beaver Builder map module (which simply uses an iframe), we see the following results:
With the static map module, we see:
So, I know what you're thinking - increasing the speed from 1.4 seconds to 887 milliseconds is approximately 36% improvement, which isn't bad, but it certainly isn't breaking news.
I even knew that the performance gains wouldn't be huge when I started writing the module, but here's the thing: thanks to the awesome setup at Kinsta I'm using HTTP/2 for my/my client's websites.
In the past, the biggest killer of performance was lots and lots of HTTP requests (you'll notice that in the iframe example, there's 101 requests, and only 39 for the static map) - HTTP/2 squashes that problem.
If you're not using HTTP/2 (which requires SSL and a compatible host - which is common nowadays), then you'll likely benefit from this a lot more.
So perhaps you'll find it useful, perhaps you won't - but if you do use it, please provide feedback in the comments below!
Bear in mind that this won't show custom markers if you're using it on a local development environment, as the URL to the marker image will be relative to local server, which Google can't get to (we hope...).
This module is included in the WPD BB Additions plugin, which is located, currently, on GitHub, here, so you're getting more than just this module.
To download it, follow these instructions (note the text you see in the image below might be different to the link you click on):