Automattic / Automattic/jetpack
Map Block: Add an option to render map as a static image
- Dominant language
- PHP
- Stars
- 1.8k
- Forks
- 898
- Avg merge
- 1d 18h
- Merged PRs (30d)
- 774
Description
#### Is your feature request related to a problem? Please describe.
Even a single Map block element loads relatively large amounts of assets on the front-end, uses a lot of CPU and spawns several worker threads. There is no "static" map block / option available.
Average desktop numbers for the stock `twentytwenty` theme installation and a single post page **with** and **without** the Jetpack Map Block on the page:
* Lighthouse score (without): ~60.
* Lighthouse score (with): ~11.
* Scripting time (without): ~330 ms
* Scripting time (with): ~1100 ms
* Worker threads (without): 0
* Worker threads (with): 8
* Network transfer (without): 0.8 MB
* Network transfer (with): 1.9 MB
#### Describe the solution you'd like
Assuming that not all users of the Map block _need_ an interactive map on their site, an option to render a map as an image using the [Mapbox Static Image API](https://docs.mapbox.com/api/maps/#static-images) could noticeably improve performance.
The static image could also serve as a placeholder while the interactive experience is being loaded (maybe the initialization can happen lazily based on viewport position; maybe the user can trigger the interactive experience by clicking / tapping the static image).
The API [supports markers](https://docs.mapbox.com/api/maps/#marker) in static images. I'd suggest adding an option to the Block settings that would allow authors to not load the whole Mapbox runtime and only display a pre-generated map image instead. Something like **Interactive:** Yes; On click / tap; No.
#### Additional context / considerations / ideas
**Pricing:** Opportunity to provide more value. Mapbox's free tier [allows for 50,000 map loads](https://www.mapbox.com/pricing/#maploads) per month and also up to [50,000 Static Image API hits](https://www.mapbox.com/pricing/#glstatic). By fetching and storing a static representation of the map, we would only consume the quota (Static API quota) when a static image is generated / regenerated or when the user opts for the interactive experience (map load quota).
**Save-Data**: Feels like not-initializing a full map experience when the [`Save-Data`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Save-Data) header is `on` could be a good idea.
**Responsiveness**: Currently the block changes its width on the front end to fit on the page. This may not be ideal for static images.
Contributor guide
Assessment
This issue has not been assessed yet.