openlayers web application runs very slow from mobile (Android Chrome)

Question

I know this might sound like a typical kind of question that should be closed, but I hit a wall and don't know where to look for a solution, so hopefully, I'll provide enough details to make this question acceptable for SO.

I am developing an OpenLayers web application that can be accessed here .

Its source code is in this github repo .

If you try the app from a computer, the user experience should be fine (at least, this is my personal experience).

However, when I try it from my mobile browser (Chrome, my phone is a Google Pixel 2), it is extremely slow.

In particular, every time I try to interact with the app by touching the screen to (eg) navigate the map, there is a considerable lag between the time I touch the screen and the response of the application.

I even tried to use ChromeDevTools console to inspect the network console having my phone plugged in with a USB cable, but could not understand what could be the cause of this slowness.

Some details:

1. I am using OpenLayers version 6.2.1
2. I am using TypeScript to develop this app
3. I am using parcel bundler to bundle it in a dist folder
4. I copy my built files to my server to serve the app

The only thing I am noticing is that the built files have weird names, like src.9f4704d2.css .

I guess this is caused by the bundler (parcel), when I run the command npm run build .

But I sincerely have no idea if this might be an issue.

However, if someone could help me shedding a light on this, I'd be very grateful. Also, I can provide much more detail if requested, but my main problem is that i don't know exactly where to look for solving the problem.

---

EDIT 1

I am using @import rules in my CSS, and I read here that

@import rules can be nested so the browser must load and parse each file in series.

I don't know if this is the problem, but I will try using multiple <link> tags instead and see if performance gets better...

---

EDIT 2

The @import replacement with multiple <link> tags did not solve the problem.

---

EDIT 3 (PROBABLY FOUND THE ISSUE)

Ok, I narrowed down the problem to be on the layers I am creating.

I am actually parsing three WMS urls, extracting each layer out of them, and adding a new ImageLayer with a ImageWMS source for each of them to the map.

The first thing I did that speeded up the application was to use TileImage and TileWMS instead of ImageLayer and ImageWMS .

The relavant code is below:

import TileLayer from 'ol/layer/Tile';
import TileWMS from 'ol/source/TileWMS';

export class OperationalLayer{
    private operationalLayer: TileLayer;
    id: String;
    
    constructor(url: string, name: string, id: string) {
        const source = new TileWMS({
            params: {'LAYERS': name},
            url: url,
        });

        this.id = id;

        this.operationalLayer = new TileLayer({
            source: source,
        })
    }

    getLayer() {
        return this.operationalLayer;
    }
}

Still, the application was very laggish.

Then I tried using only one url thus adding only 3 layers in total to my map.

Now it runs acceptably.

I think that the main point is that I need to focus on the best strategy to add my layers to the map: whether to have one ImageWMS with all WMS layers at once, or one ImageWMS per layer.

The latter (which is what I am doing), would give me the possibility to turn on/off each layer easily; the former will be faster I guess.

Or is there an alternative i didn't consider?

Answer 1

You should use viewport meta on your page.
Something like:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

This will will fix the page size and prevent from resizing the whole page. This will also reduce the page size and the pixels handled in the viewport.

You can also look at meta for mobile webapp to enhance your app, such as web-app-capable tag.

Try to use fixed position for your map and your menu bar (and all page that may cover the map) to enhance rendering.

Use TileWMS: the tiles will be cached and not requested on each move (only the new tiles will be requested). There is also an hdpi options in the layers definition that will make the image more fine but enlarge canvas size (and drawing operations), try to set it to false and look at result to make your choice.