Improve Google Maps performance in your PWA
Recently I became a mentor for Udacity, I want to thank all the Udacious students giving some advices on one of the most discussed topics in the Mobile Web Specialist course, avoid poor progressive web app performances when using Google Maps.
Google Maps can really slow your PWA, increasing dramatically the time needed for the “First Meaningful Paint”, how much seconds pass before your average user can have something to look
You can find the source code used in this article here
There is a live version here
Use a toggle button
This is a simple solution, not very elegant but still a solution, a simple toggle show/hide button that can show the map only when the user really needs it.
Pros: Simple and fast, this solution avoid the user to wait for the map to load skyrocketing the “First Meaningful Paint” speed
Cons: One more button for the user to learn and use, one more element that can cause confusion if not properly inserted in an intelligent UI/UX design. Less is more!
What we need
We need just a simple javascript function that toggle the display property from none to block and back, check the toggle.html file in the github repo for more details
const toggle_map = () => {
if (document.getElementById('map').style.display === 'none') document.getElementById('map').style.display = 'block'
else
document.getElementById('map').style.display = 'none'
}
Static Google Map
The Maps Static API creates a Google Maps image on your web page without requiring JavaScript or any dynamic page loading. The Maps Static API service creates returns an image based on URL parameters sent through a standard HTTP request. Find more details about the Maps Static API here.
Pros: Fast for small/medium sized images. No coding and actions from the user are required. One of the best solution if you target mobile devices and you have the necessity to put the map as the first element in your app.
Cons: Not interactive and needs some tweaks and workarounds to make it responsive. Not so much efficient for large screens, but if the user has a large screen the device should be capable of handling an interactive map… I’m giving you a tip of an hidden solution :)
What we need
A simple html line, you can find more details in the static.html file in the github repo.
<img id="static_map" src="https://maps.googleapis.com/maps/api/staticmap?center=33.29939,-84.55608&zoom=14&size=500x300&format=jpg&maptype=roadmap &markers=color:red%7Clabel:S%7C33.29939,-84.55608&key=YOUR_API_KEY"></img>
Swap map from static to interactive
This is an hybrid solution, you present to the user a static map first and after the first interaction (click) the map becomes interactive
Pros: Best compromise between speed and interactivity, this solution has both the pros from the static and the interactive map.
Cons: Two different API to manage
What we need
A javascript function that swaps the two maps on click, you can find more details in the switchmap.html file in the github repo.
This is the HTML snippet
<img id="static_map" onclick="swap_map()" src="https://maps.googleapis.com/maps/api/staticmap?center=33.29939,-84.55608&zoom=14&size=500x300&format=jpg&maptype=roadmap &markers=color:red%7Clabel:S%7C33.29939,-84.55608&key=YOUR_API_KEY"></img>
<div id="map" style="display: none"></div>This is the javascript snippet in main.js
const swap_map = () => {
if (document.getElementById('map').style.display === 'none')
{
document.getElementById('map').style.display = 'block' document.getElementById('static_map').style.display = 'none'
}
}
Push the map down
I guess this is the best solution, simple and clever. Instead of showing the map first, you put as the first element something light to load such as text and the map is below that content, so the “First Meaningful Paint” is safe and secure. This works not only for maps but for all the best UI/UX designs, do not put the heaviest elements first in your design, otherwise your user will have to stare at a loading screen, always give your users something to look!
Pros: All the interactive map features simply moving down the map
Cons: You have to rework your design in order to accomodate this solution, can be tedious if you have a complex design to change
What we need
Seriously? Some elements above our map :)
Try the map “footer” solution here
A big thank you to all my students!
Hey! There is an hidden solution in this article, feel free to do a pull request to the github repo :)
If you like this article give me some claps :D
