diff --git a/src/ol/renderer/layerrenderer.js b/src/ol/renderer/layerrenderer.js
index 89fb913b6a..b7f2db1d94 100644
--- a/src/ol/renderer/layerrenderer.js
+++ b/src/ol/renderer/layerrenderer.js
@@ -1,5 +1,6 @@
 goog.provide('ol.renderer.Layer');
 
+goog.require('goog.Disposable');
 goog.require('goog.events');
 goog.require('goog.events.EventType');
 goog.require('ol.Attribution');
@@ -21,7 +22,7 @@ goog.require('ol.source.TileSource');
 
 /**
  * @constructor
- * @extends {ol.Object}
+ * @extends {goog.Disposable}
  * @param {ol.renderer.Map} mapRenderer Map renderer.
  * @param {ol.layer.Layer} layer Layer.
  */
@@ -69,15 +70,7 @@ ol.renderer.Layer = function(mapRenderer, layer) {
       this.handleLayerVisibleChange, false, this);
 
 };
-goog.inherits(ol.renderer.Layer, ol.Object);
-
-
-/**
- * @protected
- */
-ol.renderer.Layer.prototype.dispatchChangeEvent = function() {
-  this.dispatchEvent(goog.events.EventType.CHANGE);
-};
+goog.inherits(ol.renderer.Layer, goog.Disposable);
 
 
 /**
@@ -133,7 +126,7 @@ ol.renderer.Layer.prototype.handleLayerHueChange = goog.nullFunction;
 ol.renderer.Layer.prototype.handleImageChange = function(event) {
   var image = /** @type {ol.Image} */ (event.target);
   if (image.getState() === ol.ImageState.LOADED) {
-    this.getMap().render();
+    this.renderIfReadyAndVisible();
   }
 };
 
@@ -142,7 +135,7 @@ ol.renderer.Layer.prototype.handleImageChange = function(event) {
  * @protected
  */
 ol.renderer.Layer.prototype.handleLayerLoad = function() {
-  this.dispatchChangeEvent();
+  this.renderIfReadyAndVisible();
 };
 
 
@@ -150,7 +143,7 @@ ol.renderer.Layer.prototype.handleLayerLoad = function() {
  * @protected
  */
 ol.renderer.Layer.prototype.handleLayerOpacityChange = function() {
-  this.dispatchChangeEvent();
+  this.renderIfReadyAndVisible();
 };
 
 
@@ -164,7 +157,10 @@ ol.renderer.Layer.prototype.handleLayerSaturationChange = goog.nullFunction;
  * @protected
  */
 ol.renderer.Layer.prototype.handleLayerVisibleChange = function() {
-  this.dispatchChangeEvent();
+  var layer = this.getLayer();
+  if (layer.isReady()) {
+    this.getMap().render();
+  }
 };
 
 
@@ -176,7 +172,10 @@ ol.renderer.Layer.prototype.handleLayerVisibleChange = function() {
 ol.renderer.Layer.prototype.handleTileChange_ = function(event) {
   var tile = /** @type {ol.Tile} */ (event.target);
   if (tile.getState() === ol.TileState.LOADED) {
-    this.getMap().requestRenderFrame();
+    var layer = this.getLayer();
+    if (layer.getVisible() && layer.isReady()) {
+      this.getMap().requestRenderFrame();
+    }
   }
 };
 
@@ -188,6 +187,17 @@ ol.renderer.Layer.prototype.handleTileChange_ = function(event) {
 ol.renderer.Layer.prototype.renderFrame = goog.abstractMethod;
 
 
+/**
+ * @protected
+ */
+ol.renderer.Layer.prototype.renderIfReadyAndVisible = function() {
+  var layer = this.getLayer();
+  if (layer.getVisible() && layer.isReady()) {
+    this.getMap().render();
+  }
+};
+
+
 /**
  * @param {ol.FrameState} frameState Frame state.
  * @param {ol.source.TileSource} tileSource Tile source.
diff --git a/src/ol/renderer/maprenderer.js b/src/ol/renderer/maprenderer.js
index adc4de270f..a399d4e5b8 100644
--- a/src/ol/renderer/maprenderer.js
+++ b/src/ol/renderer/maprenderer.js
@@ -3,8 +3,6 @@ goog.provide('ol.renderer.Map');
 goog.require('goog.Disposable');
 goog.require('goog.asserts');
 goog.require('goog.dispose');
-goog.require('goog.events');
-goog.require('goog.events.EventType');
 goog.require('goog.functions');
 goog.require('goog.object');
 goog.require('goog.vec.Mat4');
@@ -42,12 +40,6 @@ ol.renderer.Map = function(container, map) {
    */
   this.layerRenderers_ = {};
 
-  /**
-   * @private
-   * @type {Object.<string, ?number>}
-   */
-  this.layerRendererChangeListenKeys_ = {};
-
 };
 goog.inherits(ol.renderer.Map, goog.Disposable);
 
@@ -101,8 +93,6 @@ ol.renderer.Map.prototype.disposeInternal = function() {
   goog.object.forEach(this.layerRenderers_, function(layerRenderer) {
     goog.dispose(layerRenderer);
   });
-  goog.object.forEach(
-      this.layerRendererChangeListenKeys_, goog.events.unlistenByKey);
   goog.base(this, 'disposeInternal');
 };
 
@@ -125,9 +115,6 @@ ol.renderer.Map.prototype.getLayerRenderer = function(layer) {
   } else {
     var layerRenderer = this.createLayerRenderer(layer);
     this.layerRenderers_[layerKey] = layerRenderer;
-    this.layerRendererChangeListenKeys_[layerKey] = goog.events.listen(
-        layerRenderer, goog.events.EventType.CHANGE,
-        this.handleLayerRendererChange_, false, this);
     return layerRenderer;
   }
 };
@@ -150,15 +137,6 @@ ol.renderer.Map.prototype.getMap = function() {
 };
 
 
-/**
- * @param {goog.events.Event} event Event.
- * @private
- */
-ol.renderer.Map.prototype.handleLayerRendererChange_ = function(event) {
-  this.getMap().render();
-};
-
-
 /**
  * @param {string} layerKey Layer key.
  * @return {ol.renderer.Layer} Layer renderer.
@@ -168,9 +146,6 @@ ol.renderer.Map.prototype.removeLayerRendererByKey_ = function(layerKey) {
   goog.asserts.assert(layerKey in this.layerRenderers_);
   var layerRenderer = this.layerRenderers_[layerKey];
   delete this.layerRenderers_[layerKey];
-  goog.asserts.assert(layerKey in this.layerRendererChangeListenKeys_);
-  goog.events.unlistenByKey(this.layerRendererChangeListenKeys_[layerKey]);
-  delete this.layerRendererChangeListenKeys_[layerKey];
   return layerRenderer;
 };
 
diff --git a/src/ol/renderer/webgl/webgllayerrenderer.js b/src/ol/renderer/webgl/webgllayerrenderer.js
index c0ed01dabe..ef66c43762 100644
--- a/src/ol/renderer/webgl/webgllayerrenderer.js
+++ b/src/ol/renderer/webgl/webgllayerrenderer.js
@@ -51,30 +51,6 @@ ol.renderer.webgl.Layer = function(mapRenderer, layer) {
    */
   this.projectionMatrix = goog.vec.Mat4.createNumberIdentity();
 
-  /**
-   * @private
-   * @type {!goog.vec.Mat4.Float32}
-   */
-  this.brightnessMatrix_ = goog.vec.Mat4.createFloat32();
-
-  /**
-   * @private
-   * @type {!goog.vec.Mat4.Float32}
-   */
-  this.contrastMatrix_ = goog.vec.Mat4.createFloat32();
-
-  /**
-   * @private
-   * @type {!goog.vec.Mat4.Float32}
-   */
-  this.hueMatrix_ = goog.vec.Mat4.createFloat32();
-
-  /**
-   * @private
-   * @type {!goog.vec.Mat4.Float32}
-   */
-  this.saturationMatrix_ = goog.vec.Mat4.createFloat32();
-
   /**
    * @private
    * @type {!goog.vec.Mat4.Float32}
@@ -87,10 +63,33 @@ ol.renderer.webgl.Layer = function(mapRenderer, layer) {
    */
   this.colorMatrixDirty_ = true;
 
-  this.handleLayerBrightnessChange();
-  this.handleLayerContrastChange();
-  this.handleLayerHueChange();
-  this.handleLayerSaturationChange();
+  /**
+   * @private
+   * @type {!goog.vec.Mat4.Float32}
+   */
+  this.brightnessMatrix_ = goog.vec.Mat4.createFloat32();
+  this.updateBrightnessMatrix_();
+
+  /**
+   * @private
+   * @type {!goog.vec.Mat4.Float32}
+   */
+  this.contrastMatrix_ = goog.vec.Mat4.createFloat32();
+  this.updateContrastMatrix_();
+
+  /**
+   * @private
+   * @type {!goog.vec.Mat4.Float32}
+   */
+  this.hueMatrix_ = goog.vec.Mat4.createFloat32();
+  this.updateHueMatrix_();
+
+  /**
+   * @private
+   * @type {!goog.vec.Mat4.Float32}
+   */
+  this.saturationMatrix_ = goog.vec.Mat4.createFloat32();
+  this.updateSaturationMatrix_();
 
 };
 goog.inherits(ol.renderer.webgl.Layer, ol.renderer.Layer);
@@ -193,10 +192,8 @@ ol.renderer.webgl.Layer.prototype.getProjectionMatrix = function() {
  * @inheritDoc
  */
 ol.renderer.webgl.Layer.prototype.handleLayerBrightnessChange = function() {
-  var value = this.getLayer().getBrightness();
-  ol.vec.Mat4.makeBrightness(this.brightnessMatrix_, value);
-  this.colorMatrixDirty_ = true;
-  this.dispatchChangeEvent();
+  this.updateBrightnessMatrix_();
+  this.renderIfReadyAndVisible();
 };
 
 
@@ -204,10 +201,8 @@ ol.renderer.webgl.Layer.prototype.handleLayerBrightnessChange = function() {
  * @inheritDoc
  */
 ol.renderer.webgl.Layer.prototype.handleLayerContrastChange = function() {
-  var value = this.getLayer().getContrast();
-  ol.vec.Mat4.makeContrast(this.contrastMatrix_, value);
-  this.colorMatrixDirty_ = true;
-  this.dispatchChangeEvent();
+  this.updateContrastMatrix_();
+  this.renderIfReadyAndVisible();
 };
 
 
@@ -215,10 +210,8 @@ ol.renderer.webgl.Layer.prototype.handleLayerContrastChange = function() {
  * @inheritDoc
  */
 ol.renderer.webgl.Layer.prototype.handleLayerHueChange = function() {
-  var value = this.getLayer().getHue();
-  ol.vec.Mat4.makeHue(this.hueMatrix_, value);
-  this.colorMatrixDirty_ = true;
-  this.dispatchChangeEvent();
+  this.updateHueMatrix_();
+  this.renderIfReadyAndVisible();
 };
 
 
@@ -226,10 +219,8 @@ ol.renderer.webgl.Layer.prototype.handleLayerHueChange = function() {
  * @inheritDoc
  */
 ol.renderer.webgl.Layer.prototype.handleLayerSaturationChange = function() {
-  var saturation = this.getLayer().getSaturation();
-  ol.vec.Mat4.makeSaturation(this.saturationMatrix_, saturation);
-  this.colorMatrixDirty_ = true;
-  this.dispatchChangeEvent();
+  this.updateSaturationMatrix_();
+  this.renderIfReadyAndVisible();
 };
 
 
@@ -243,6 +234,16 @@ ol.renderer.webgl.Layer.prototype.handleWebGLContextLost = function() {
 };
 
 
+/**
+ * @private
+ */
+ol.renderer.webgl.Layer.prototype.updateBrightnessMatrix_ = function() {
+  var brightness = this.getLayer().getBrightness();
+  ol.vec.Mat4.makeBrightness(this.brightnessMatrix_, brightness);
+  this.colorMatrixDirty_ = true;
+};
+
+
 /**
  * @private
  */
@@ -255,3 +256,33 @@ ol.renderer.webgl.Layer.prototype.updateColorMatrix_ = function() {
   goog.vec.Mat4.multMat(colorMatrix, this.hueMatrix_, colorMatrix);
   this.colorMatrixDirty_ = false;
 };
+
+
+/**
+ * @private
+ */
+ol.renderer.webgl.Layer.prototype.updateContrastMatrix_ = function() {
+  var contrast = this.getLayer().getContrast();
+  ol.vec.Mat4.makeContrast(this.contrastMatrix_, contrast);
+  this.colorMatrixDirty_ = true;
+};
+
+
+/**
+ * @private
+ */
+ol.renderer.webgl.Layer.prototype.updateHueMatrix_ = function() {
+  var hue = this.getLayer().getHue();
+  ol.vec.Mat4.makeHue(this.hueMatrix_, hue);
+  this.colorMatrixDirty_ = true;
+};
+
+
+/**
+ * @private
+ */
+ol.renderer.webgl.Layer.prototype.updateSaturationMatrix_ = function() {
+  var saturation = this.getLayer().getSaturation();
+  ol.vec.Mat4.makeSaturation(this.saturationMatrix_, saturation);
+  this.colorMatrixDirty_ = true;
+};