How to increase performance of azure maps in angular

Question

Hi,

I am using Azure maps control package in my angular component, which is working fine.

Now I have to optimize the performance of the application, but the component where I used the Azure maps is getting slowed down due to the below provided screenshot of Page speed test using Lighthouse.

Please recommend a way so that I can increase the performance of the azure maps page. Like if I can cache the javascript or any other way which I can use to increase the performance.

Answer 1

I suspect that 4 seconds is the total time for the scripts to be downloaded, the map instance created, and the map view loaded and possibly animated to the first location and/or until the maps "ready" event is fired. This is most likely not blocking anything in the loading of your webpage and likely not really an issue. When I try loading a page with just the map with an empty browser cache, the map loads in less than 2 seconds, and then around 1 second after that. The time between when I create the map object instance and when the ready event fires is usually less than 500ms. That said, here are some tips for faster initial loading and general performance with the Azure Maps Web SDK:

In the initial map options when creating the map set the following:

• set your initial center, zoom and any other camera options for your initial view in the map options rather than calling setCamera after the map loads. This will prevent the map loading at world level, loading data for there, then zooming into your initial view and loading more data.
• fadeDuration to 0. This will remove the transition animation that occurs when change map styles and loading layers.
• disableTelemetry to true. This disables any telemetry data being sent back to Azure Maps. I suspect this is being counted in the numbers you are seeing which is likely what is causing that screenshot you provided to be misleading. I found that this lowered my average time from map object creation to ready event triggering by about 30ms.
• progressiveLoading to true. This progressively loads the base layer in the map. I found that this lowered my average time from map object creation to ready event triggering by about 100ms.

Some other tips:

• Either of the satellite styles will be slower as the imagery is much larger to download.
• The size of the map canvas directly impacts performance. The larger the map, the more data needed to load it.
• If the map is not in the viewable area of your web page on initial load, you can delay the loading of the map and load it on demand when the user goes to the part of the page that has the map. This will lighten the initial page.