Speed Up WMS Layers in OpenLayers 3

While working with multiple WMS layers in web map applications, its normal to have poor peformance. Because the app requests data instantly and map server takes requested data  from DB than renders it and repeat this tiring process for every single tile. Finally client (web app) renders these tiles due to the sequence. General solution to this problem is GeoWebCache. It takes all layer data from DB and renders before web app request. So everything is ready except client-side rendering. But there are bad news for GeoWebCache: you can not wotk with live data. If you have to work with live data you have to use WMS without GeoWebCache. By the way you should think optimization about client-side. In this article I mention about how to speed up OpenLayers 3 WMS layers that come from GeoServer.

Defining Layers

You can define WMS layers in OpenLayers in two ways: Single tile and tiled. If you define it in single tile form, OpenLayers 3 request all data that covers the screen. This process takes time and you see just blank screen (except base layer) until all data return. But if you define it in tiled form OpenLayers 3 divides screen little parts (tiles) and send these requests to server. Server process these requests asynchronously and send result tiles back to OpenLayers 3. So user can see loading tiles while waiting and this makes users not to think it is freezed. Both single tile and tiled layer definition are shown below:

You can define every single WMS layer as different ol.layer.Image objects:

var K1 = [
new ol.layer.Image({source: new ol.source.ImageWMS({url: url, params: {'LAYERS': 'WS:M_MAHALLE', 'format': 'image/png', TRANSPARENT: true, 'tiled': false, serverType: 'geoserver'}})}),
new ol.layer.Image({source: new ol.source.ImageWMS({url: url, params: {'LAYERS': 'WS:M_ADA', 'format': 'image/png', TRANSPARENT: true, 'tiled': false, serverType: 'geoserver'}})})


You can also define multiple WMS layers as one ol.layer.Image object:
var K8 = [
new ol.layer.Tile({source: new ol.source.TileWMS({url: url, params: {'LAYERS': 'WS:M_MAHALLE,WS:M_ADA', 'format': 'image/png', TRANSPARENT: true, 'tiled': false, serverType: 'geoserver'}})})


Reduction of Layer Definings

Rendered tiles are sent back to the client and OpenLayers 3 generates map by combining these tiles by defining sequence. In fact this is also another rendering process. And more layer mean more rendering operation, resource consumption. When you pan the map this process repeats again. But we can avoid this process by requesting multiple WMS layers. GeoServer can serve WMS layer one by one or multiple form. By requesting multiple WMS layers GeoServer combines layers together send back to client. So OpenLayers works with just one layer that includes all. This technique has two benefits: client-side rendering is moved to the server-side. Network traffic is reduced.

When tiles are combining in GeoServer, unneccessary pixel data is cleaned (transparent etc.) This is also very advantageous in terms of size. Less data means less time to load.

Maybe you worry about layer controlling. It is very easy by using WMS parameters. You can use “INCLUDE” for making a layer visible or “EXCLUDE” for invisibility. Note that these descriptions are used in CQL_FILTER parameter.

There is also “Layer Group” option to make multiple WMS layer in GeoServer. By using it you can combine different WMS layers into single WMS layer. But you lose visibility control of layers. You can just make all layers visible or invisible.


This section is mostly about server-side but directly affects to client-side. The data format is very important for WMS layers in case of performance. You can read GeoServer WMS formats from this link (http://docs.geoserver.org/stable/en/user/services/wms/outputformats.html).

PNG format is really good in case of image quality but increases data size. Large data mean long loading time.

JPEG format is very frugal in case of data size but not good as PNG in case of image quality. And there is another backward: transparency. This format has no transparency so you can not use it with multiple WMS layers. But its really good for base layer.

GIF format has similar features like JPEG. It generates smaller data size than PNG.

PNG8 format is both good at image quality and data size. The image quality in this format is almost same as PNG but size is smaller. But loading time is a little more than PNG format.

Performance graphics are shown below for different layer definitions. You can also find source code of these tests from my GitHub repo


After changing your layer definitons with tips shown above, your map will load asynchronously and faster. You will keep users away from the idea that map is running slowly. By using multiple WMS layers definiton, tiles will bundled in server-side. This technic reduces rendering operation, helps low level decives (phones, tablets etc.) to be more smooth usage. Lastly by choosing PNG8 format your data traffic will be reduced significantly. Also your tiles quality stay same. After all these optimization your OpenLayers 3 app will run faster, comsumes data lower. But I must remind you that there are different factors for choosing right technic. Number of layers, basemap or not, web app or mobile web app etc. are affects your decision.


One comment on “Speed Up WMS Layers in OpenLayers 3

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s