Performance – Markers (500+) showing up delayed / slowly

New home Forums Gold Add-on General queries Performance – Markers (500+) showing up delayed / slowly

  • This topic has 6 replies, 3 voices, and was last updated 7 months ago by Perry.
Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #58462
    janoschasen
    Participant

    Hello there,

    we are experiencing quite a delay from the inital page- / mapload to the markers showing up.

    We have around 500 Markers right now, but as we are listing local shops maintaining serivce through corona there will be much more in the next weeks.

    With the marker-count going up the time between the initialisation of the map and the markers appearing went up significantly. On mobile devices its about 10s now. When i look at the network-traffic I notice that the marker-listing is quequed way later than the other ressources.

    We are using a mashup map and i suspected this to cause the delay but it didn’t change the delay.
    I also switched to database as marker-source as this at least loads the map quickly / doesn’t block the display of the map (not showing until the markers appear when using xml as source)
    We have all wpgooglemaps plugins installed (base, pro, gold, ugm).

    Here is the link to the page: supportsmallbusiness.de/laden-finden/

    It would be amazing if there is a way to improve this.

    Best,
    Janosch

    #58477
    Perry
    Moderator

    Hi there

    Thank you for getting in touch, sorry to hear you are experiencing issues.

    500 markers is a perfectly reasonable amount, we regularly load test with up to 50,000 markers, the plugin can and will support a very large amount of markers.

    We notice you are using the OpenLayers API, which is somewhat slower than Google’s API, we do have an experimental feature which uses a vector layer to render markers, this would significantly speed things up, however please be aware that this is purely experimental right now.

    If you’d be open to trying that out, rather than switching to the Google API, please let me know and we’ll get a snippet of JavaScript over to you to enable that.

    Does that help?

    Kind regards
    – Perry

    #58498
    janoschasen
    Participant

    Hi Perry,
    thanks for getting back on this.
    With Google Maps enabled the speed until the markers are shown is only insignificantly faster (maybe 8.5 inst. of 9 seconds on Desktop).

    I’d gladly try out the experimental feature. Is it just for the Openlayers engine, or will it improve GoogleMaps as well if we might switch over?

    And,… another Questions… tell me if i should make more topics 😀
    Googles API doesnt zoom the website instead of the map – something the Open Layers Map does quite often if you are unlucky.
    Is there any way to prevent the zooming with Open-Layers? Browsers don’t seem to like the fixed zoom-levels anymore. But maybe it is a problem with loosing focus on the map or responsiveness of the mouse-wheel / zoom-Events?

    kind regards,
    janosch

    #58504
    Perry
    Moderator

    Hi Janosch

    Are you referring to the load time, as opposed to the actual frame rate when moving around?

    If so, you can try the XML cache in Maps -> Settings -> Advanced, you could also try using the DB method there, and installing a REST cache plugin such as Acato’s REST cache, this will significantly improve load times when using the DB method (we recommend the latter approach).

    Switching between Google and OpenLayers makes no difference at all to load times, I do beg your pardon, I thought you were referring to the frame rate after loading.

    Feel free to ask any further questions here, or start a new topic, either or!

    You can control which interactions (eg zoom) are enabled or disabled by going to Maps -> Settings and using the toggle switches in the first panel.

    Does that help?

    Kind regards
    – Perry

    #58509
    janoschasen
    Participant

    Hi Perry,

    yes, i meant the load time from page-load / refresh in the browser until the display of the markers on the map.

    At the moment there is quite a significant delay from the page itself being loaded (after a sec) until the markers are displayed after 7-9 seconds. The page is also being locked for all interaction until the markers show.
    I did add a picture showing the network traffic – the page is loaded after 500ms, the markers do not appear until the second xhr(?) file is loaded.

    What makes me wonder is the fact that when i edit the same map in the wp-backend the map and all markers are displayed in merely a second in the edit-screen.

    The loading time is the most pressing issue, but the frame-rate moving the map is very low with open layers indeed, so i’d love to test the experimental feature as well if you provide me the js-code.

    Best,
    Janosch

    Attachments:
    You must be logged in to view attached files.
    #58518
    Perry
    Moderator

    Hi Janosch

    Please try the following JavaScript to improve OpenLayers performance:

    jQuery(function($) {

    WPGMZA.OLMarker.renderMode = WPGMZA.OLMarker.RENDER_MODE_VECTOR_LAYER;

    });

    You can paste that in under Maps -> Settings -> Advanced -> Custom JS.

    Please note that this feature is currently experimental and some features, such as animation, are not yet supported when using this render mode.

    The network response times actually look pretty reasonable, please can you try the code above, that should significantly speed up adding the markers to the map.

    Does that help at all?

    Kind regards
    – Perry

    #58535
    janoschasen
    Participant

    Wow, Perry!
    The map is reacting so snappy now. Its an even faster UX than GoogleMaps. I’m not experiencing any difficulties so far with the experimental code.

    The long loading time until the markers are shown remains, unfortunately.
    It seems as if the marker-listing is loaded but then the map is waiting/processing something until – after 7 more seconds – it’s loading the custom marker-images and at last the marker-listing (xhr) again before showing the markers.
    Any ideas what is causing the delay and how i can shorten that?

    #58547
    Perry
    Moderator

    Hi Janosch

    I’m glad to hear that’s helped!

    The total time taken up fetching markers and the marker listing is apporximately 1.2 seconds,

    The rest of the time taken up on load, at least at my end, is on loading OpenStreetMap tiles, and loading your marker icons.

    This is with browser caching disabled so this might not necessarily reflect what an ordinary user would see, however broadly speaking those are the bottlenecks here. I’d suggest using an alternative tile server (I can recommend WikiMedia maps) and optimizing your marker icons using something like PNGGauntlet. You could also ask your host about the possibility of HTTP/2, which would massively speed up loading marker icons.

    Does that help?

    Kind regards
    – Perry

    #58809
    Alex Casero
    Participant

    Hi Perry,

    This code:
    jQuery (function ($) {

    WPGMZA.OLMarker.renderMode = WPGMZA.OLMarker.RENDER_MODE_VECTOR_LAYER;

    });

    Would it also work to increase Google Maps performance or only for OpenLayer?

    #58810
    Perry
    Moderator

    Hi Alex

    That code specifically applies to OpenLayers, so unfortunately that wouldn’t help with Google.

    If you’re experiencing bottlenecks, please can you link us to your map page, we’ll run a performance profile and tell you exactly why you’re getting poor performance.

    Are you able to share your map page URL?

    Kind regards
    – Perry

    #58811
    Alex Casero
    Participant
    This reply has been marked as private.
    #58818
    Perry
    Moderator

    Hi Alex

    I believe we’ve identified the issue here, please can I ask you to open a ticket at http://wpgmaps.com/contact-us and indicate that you would like the Gold 5.0.5 pre-release (which includes optimization for the marker separator, which seems to be where your site is choking), or please enclose login details so that we can install that for you.

    I do apologise for any inconvenience caused, would that be possible?

    Kind regards
    – Perry

    #59601
    motorsportsdirectory
    Participant

    Hi Perry,

    We seem to be having near the exact same issue as Alex, however we’re using the Google Map JavaScript API. I’ve tried the REST cache plugin, it has done nothing.

    How do I improve the page load time?

    This is our URL https://map.motorsports.directory/

    Many thanks in advance.
    Katie

    #59605
    Perry
    Moderator

    Hi there

    Thank you for getting in touch,

    The vast majority of the page load time (around 171 seconds) at https://map.motorsports.directory/ is taken up by Ninja Tables rearranging HTML on the page. If you’re able to disable that on this page, it should significantly speed things up.

    Is there anything else we can help you with?

    Kind regards
    – Perry

    #59766
    Perry
    Moderator

    Hi Katie

    Please see here

    https://pasteboard.co/JdvqWGB.png

    The first resource loads in just over 1 second,

    The second resource loads in roughly 600 milliseconds.

    These are the timings for loading the resources outside the context of your page. I would imagine they may appear to take longer at your end because your browser is trying to simultaneously handle that whilst also handling Ninja Tables HTML changes.

    In the context of your site, my network panel shows the markers loading in just over 1 second:

    https://pasteboard.co/JdvsmiW.png

    Running a full performance profile on the page shows the following:

    https://pasteboard.co/JdvuvAJ.png

    If you look at the call tree you’ll see that around 60% of that is happening in Ninja Tables script:

    https://pasteboard.co/JdvuO7Y.png

    If we add request blocking to Ninja Tables scripts, the profiling completes in 20 seconds as opposed to almost 2 minutes:

    https://pasteboard.co/Jdvw759.png

    Please note profiling times don’t reflect load times, are there are overheads for running profiles, however you should see proportionate improvements in load time if you either disable or optimise the way you use Ninja Tables.

    We’re not fully sure what exactly their plugin is doing which causes it to stall for this long, you’d have to reach out to the plugin author to find answers and suggestions on that.

    You can confirm this at your end by disabling your cache in the network panel, then disabling Ninja Forms and reloading the page.

    Is there anything else we can help you with?

    Kind regards
    – Perry

Viewing 15 posts - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.