Automattic / Automattic/jetpack

Map Block: Add an option to render map as a static image

Open
#14,827 7 comments 3 reactions 1 assignee Claimed by @andrewserong View on GitHub
[Block] Map [Focus] Performance [Pri] Normal [Size] M [Status] Proposal Enhancement
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.