mapbox-web-performance-patterns
Performance optimization patterns for Mapbox GL JS applications, prioritized by user impact.
- Eliminate initialization waterfalls by loading map data in parallel with map initialization, and set precise viewport to avoid redundant tile fetches
- Use symbol layers for 100+ markers (GPU-accelerated) and clustering for 10,000+ features; avoid HTML markers at scale
- Choose GeoJSON for datasets under 5 MB, vector tiles for 20+ MB; implement viewport-based loading to reduce bandwidth
- Always call
map.remove()on cleanup in single-page applications to prevent memory leaks; reuse popup instances and use feature state for hover effects instead of dynamic layers - Debounce/throttle event handlers, optimize
queryRenderedFeatures()with layer filters, and defer non-critical features (terrain, 3D layers) until after initial render
Mapbox Performance Patterns Skill
This skill provides performance optimization guidance for building fast, efficient Mapbox applications. Patterns are prioritized by impact on user experience, starting with the most critical improvements.
Performance philosophy: These aren't micro-optimizations. They show up as waiting time, jank, and repeat costs that hit every user session.
Priority Levels
Performance issues are prioritized by their impact on user experience:
- 🔴 Critical (Fix First): Directly causes slow initial load or visible jank
- 🟡 High Impact: Noticeable delays or increased resource usage
- 🟢 Optimization: Incremental improvements for polish
🔴 Critical: Eliminate Initialization Waterfalls
Problem: Sequential loading creates cascading delays where each resource waits for the previous one.
More from mapbox/mapbox-agent-skills
mapbox-style-patterns
Common style patterns, layer configurations, and recipes for typical mapping scenarios including restaurant finders, real estate, data visualization, navigation, delivery/logistics, and more. Use when implementing specific map use cases or looking for proven style patterns.
995mapbox-web-integration-patterns
Official integration patterns for Mapbox GL JS across popular web frameworks (React, Vue, Svelte, Angular). Covers setup, lifecycle management, token handling, search integration, and common pitfalls. Based on Mapbox's create-web-app scaffolding tool.
952mapbox-cartography
Expert guidance on map design principles, color theory, visual hierarchy, typography, and cartographic best practices for creating effective and beautiful maps with Mapbox. Use when designing map styles, choosing colors, or making cartographic decisions.
837mapbox-geospatial-operations
Expert guidance on choosing the right geospatial tool based on problem type, accuracy requirements, and performance needs
809mapbox-style-quality
Expert guidance on validating, optimizing, and ensuring quality of Mapbox styles through validation, accessibility checks, and optimization. Use when preparing styles for production, debugging issues, or ensuring map quality standards.
781mapbox-data-visualization-patterns
Patterns for visualizing data on maps including choropleth maps, heat maps, 3D visualizations, data-driven styling, and animated data. Covers layer types, color scales, and performance optimization.
750