Improve the performance of Mapbox GL JS maps
Model of performance
The performance of your Mapbox GL JS maps can be measured as render time, source update time, or layer update time.
Render time
The render time refers to how quickly Mapbox GL JS draws a map on your screen as you move around or zoom in and out of the map. Render time is a function of the number of sources, the number of layers, and the number of vertices in the features they contain:
render time = constant time
+ [ number of sources
* per source time
] + [ number of layers
* per layer time
] + [ number of vertices
* per vertex time
]
Source update time
The source update time refers to how quickly changes to a GeoJSON source are visible on the map. Source update time is a function of the number of layers that use the updated source and the number of vertices in the features it contains:
source update time = constant time
+ [ number of layers using the source
* per layer time
] + [ number of vertices
* per vertex time
]
Layer update time
The layer update time refers to how quickly changes to a layer, using runtime styling, are visible on the map. Layer update time is a function of the number of vertices in the features the layer contains:
layer update time = constant time
+ [ # of vertices in the layer's source
* per vertex time
]
Strategies for improving performance
When looking for opportunities to improve the performance of your map, look for ways in which you can reduce the number of layers, number of sources, or the complexity of the features in the data that is being rendered.