Although it may seem like a common question that should be closed, I have reached a roadblock and cannot find a solution. I hope to provide enough details to make this question suitable for SO.
I am currently working on an OpenLayers web application that can be viewed here.
The source code can be found in this github repository.
When accessing the app from a computer, the user experience is smooth. However, when trying to access it from my mobile browser (Chrome on Google Pixel 2), it is extremely slow.
Specifically, there is a noticeable lag between touch interactions on the screen and the response of the application.
I attempted to use ChromeDevTools console to inspect the network console with my phone connected via USB, but could not determine the cause of this slowness.
Some key details:
- Using OpenLayers version 6.2.1
- Developed using TypeScript
- Bundled using parcel bundler for a dist folder
- Deploying built files on the server to serve the app
One thing I noticed is that the built files have unconventional names like src.9f4704d2.css.
This naming convention seems to be a result of using the parcel bundler when running npm run build.
I am unsure if this could be a contributing factor to the performance issue.
If anyone can provide insights or guidance on resolving this issue, I would greatly appreciate it. I can provide further details upon request, as I am uncertain where to look for a solution.
EDIT 1
Within my CSS, I am using @import rules. I came across a reference stating that
@import rules can be nested, causing the browser to load and parse each file in series.
While uncertain if this is the root cause, I will experiment by using multiple <link> tags to see if it improves performance...
EDIT 2
Replacing @import with multiple <link> tags did not resolve the issue.
EDIT 3 (POTENTIAL IDENTIFICATION OF THE ISSUE)
I have narrowed down the performance issue to the layers I am creating within the application.
My approach involves parsing three WMS URLs, extracting individual layers, and adding new ImageLayer with ImageWMS sources for each to the map.
To address the lag, I switched to using TileImage and TileWMS instead of ImageLayer and ImageWMS.
Despite this adjustment, the issue persisted.
I then experimented with using a single URL, adding only three layers in total to the map, resulting in improved performance.
It seems the key focus should be on the best strategy for adding layers to the map: utilizing one ImageWMS with all WMS layers at once or one ImageWMS per layer.
While the current approach allows for easy layer toggling, a unified ImageWMS setup may offer faster performance.
Are there any alternative strategies that I may have overlooked?