MapKit JS poor webperf (performance issues)

Hello,


We're using MapKit JS for the web in a very simple way. The problem is that PageSpeed Insights or Lighthouse raises question reguarding poor performance caused by MapKit JS.


For example, on this pagespeed insights (but you get more detailed results if you run the test straight from your browser using chrome devtools audit section):

  • Script evaluation takes about 2,5 to 3 seconds on a simulated slow 4G, 4x CPU slowdown (see this screenshot).
  • Assets are not served using HTTP2, and since a lot of assets transfer through (on my example, I count 120 HTTP requests to cdn*.apple-mapkit.com). I think multiplexing could do a lot of good there if it were using HTTP2 protocol;


I ran locally the chrome audit on my MacbookPro 15" 2019, with 2,3Ghz Intel Core I9, 32Go ram. We're using the latest version of MapKit JS (5.x.x).

No fancy stuff was done, it's a "default" map (~650x220px) , zoom 13, and place a single marker on it to show a particular address)


Other "minors":

- it complains about the image format that are not using next-gen formats.


Is there a thing I'm missing ? Is it something you're working on or/and aware ?

Thank you;

I'll wait for others to comment on the perfomance of the page but I figured it may be worth asking if you've considered using a MapKit JS snapshot rather than loading all the code required for intactivity? Not sure if it's appropriate but certainly lighter weight.


Take a look at : https://developer.apple.com/documentation/snapshots


-Mark

In my reply to the person who raised this question in our service, I've mentionned that using snapshots would be an alternative but some of our clients wants "interactive maps" (move the map) so using screenshot is not suitable for these cases;


if there is performance issues with MapKit JS, it would be best to fix/address them to improve your product/service instead of using a different product that has very reduced features;

Hello @malonicus,


Do you have any news on the performance subject ? It's been 3 month I've raised performance issues but no news since then.

Is there someone you can ping internally to take a look at this ?


Thank you 😉

Hey @dev-yprox, a good way to get some action on this issue is to file a report via Feedback Assistant https://feedbackassistant.apple.com. Reports filed here are reviewed by the MKJS enginering team.

Not sure if this is helpful, but I've also been a little concerned with the performance of MapKit JS also. I just filed a report via Feedback Assistant as Frameworks Engineer suggests above. I'm also posting this in the forums, just in case the additional feedback is helpful, and to possibly encourage anyone else who has issues with the performance to file reports via Feedback Assistant. (As an aside, I really like MapKit JS in a lot of ways, so I don't want to sound too negative!)

If it is suitable to your context (worked for me), the basic way to prevent MapkitJS to block JS execution is to include the script with the "defer" keyword and adapt your JS code calling Mapkit to be executed only after Mapkit is loaded:

in header:

<script defer src="https://cdn.apple-mapkit.com/mk/5.x.x/mapkit.js"></script>

in your page:

<script type="text/javascript">
// ready function taken from http://youmightnotneedjquery.com/#ready
function ready(fn) {
  if (document.readyState != 'loading'){
    fn();
  } else {
    document.addEventListener('DOMContentLoaded', fn);
  }
}

// mapkit init only after mapkit is loaded, here is my init code as a sample
ready(function() {
    mapkit.init({
    authorizationCallback: function(done) {
    done('[mapkitToken]');
        }
    });
    
    var mapregion = new mapkit.CoordinateRegion(
    new mapkit.Coordinate([latitude], [longitude]),
    new mapkit.CoordinateSpan(0.15, 0.15)
    );
    
    var map = new mapkit.Map("map-container");
    map.isRotationEnabled = false;
    map.showsScale = mapkit.FeatureVisibility.Visible;
    map.region = mapregion;
});
</script>
MapKit JS poor webperf (performance issues)
 
 
Q