Performance Issues and Site Freezes when Trails are Rendering

[St0rml]

Hey, I really enjoy Wanderer, thank you for your hard work!

Summary

At the moment, I have bad performance issues on the overview map. The map itself renders responsively, however, when I look at an area with trails in it (I have 22 total at the moment), I sometimes have to wait ~ 10s for the browser to render all the tracks and react to my inputs again. Then after every move on the map, when trails are visible, it freezes for a few seconds and so on.
I don't have a high-end PC, but at the moment Wanderer is the only website, where I really notice performance issue, hence I suspect it might an issue.

Details

Hard- and Software

• i7-4790K CPU @ 4.00GHz
• Radeon rx 6600 xt
• Linux, Zorin OS 17.3 Core (Ubuntu 22.04-based)

Browsers tested on:

• Firefox 136.0.4 (Flatpak), Clean install
• Chromium 134.0.6998.165, Only Bitwarden-Addon

WebGL is enabled and my GPU is detected in Chromium.

Wanderer Version: v0.16.1

About the tracks

I noticed in another software, that my tracks for a 30km bike recording contain approx. 7500 Points. I don't know if that is normal or not though...

[slothful-vassal]

I can confirm, there are several performance issues. I'm running wanderer on a Synology NAS.
But I can't reproduce on my dev workstation.

The main problem seems, that always the whole database will be retrieved...
Sample: I had a long loading time, when press 'New Trail' until the page was loaded. After deleting my trail 'List', the loading time has been increased massively. First code review proves that: the whole list including all containing trails will be loaded when creating a new trail.
When opening the trail overview page, all trails will be loaded completely.

Maybe, there can be made some improvements.

Many thanks.

[Flomp]

Hey there,

@St0rml do you also experience issues on the demo? E.g.:
https://demo.wanderer.to/map?tl_lat=48.70954037300666&tl_lon=13.329605742658941&br_lat=42.968361995519814&br_lon=3.0374158695523192

This is an area with around 50 tracks, and while it's not butter smooth on my (fairly old) laptop it's perfectly usable.

@slothful-vassal
Thanks for your PR. However, I think this issue is unrelated, as it does not explain the browser freezing up when rendering on the client side.

[St0rml]

Thanks for your reply. On the demo-instance I indeed have basically no issues. There are minimal freezes/stuttering, like you said, but these are only as much, as I expect from any application rendering stuff in my browser on my device.

This makes me think it could be my tracks (too many points). Do you or anyone else have any long tracks in order to compare? I have several biking tracks > 100km, which have around ca 20.000 points. Makes ~ 200 points/km. This does not seem unreasonable, however....

[Flomp]

Ok, I found the issue:
In an early design decision, I decided to go with GPX as the main format to save files in wanderer. This came back to bite me a bit because most map libraries expect GeoJSON as their input. So we convert GPX to GeoJSON before rendering it on the map:
https://github.com/Flomp/wanderer/blob/806a9d431d076680739c47fce439f5725d0e3f8a/web/src/lib/components/trail/map_with_elevation_maplibre.svelte#L187C1-L187C65

It turns out this process does not scale at all for larger GPX files. So it can take multiple seconds before something is rendered on screen and the browser unfreezes.

Looking at what other websites are doing, I think the best solution is to store trail data as a 3D encoded polyline alongside the existing GPX data. In my initial tests, this brings down the conversion speed by around 100x.
This will be a bit of an endeavour. I will report back as soon as I have made progress.

[St0rml]

Holy S***! I just tested this in a development environment with all my trails. It works flawlessly! Buttery smooth! Great Job, @Flomp, and thank you for the quick response!

[Flomp]

Haha, glad you like it. Just published it with v016.3 as well.