diff --git a/src/ol/PluggableMap.js b/src/ol/PluggableMap.js
index e6035259cc..fe088e7cd9 100644
--- a/src/ol/PluggableMap.js
+++ b/src/ol/PluggableMap.js
@@ -301,6 +301,11 @@ class PluggableMap extends BaseObject {
      */
     this.interactions = optionsInternal.interactions || new Collection();
 
+    /**
+     * @type {import("./events/Target.js").default}
+     */
+    this.labelCache_ = null;
+
     /**
      * @type {import("./events.js").EventsKey}
      */
@@ -323,7 +328,7 @@ class PluggableMap extends BaseObject {
      * @type {import("./renderer/Map.js").default}
      * @private
      */
-    this.renderer_ = this.createRenderer();
+    this.renderer_ = null;
 
     /**
      * @type {function(Event): void|undefined}
@@ -511,24 +516,6 @@ class PluggableMap extends BaseObject {
     overlay.setMap(this);
   }
 
-  /**
-   * Attach a label cache for listening to font changes.
-   * @param {import("./events/Target.js").default} labelCache Label cache.
-   */
-  attachLabelCache(labelCache) {
-    this.detachLabelCache();
-    this.labelCacheListenerKey_ = listen(labelCache, EventType.CLEAR, this.redrawText.bind(this));
-  }
-
-  /**
-   * Detach the label cache, i.e. no longer listen to font changes.
-   */
-  detachLabelCache() {
-    if (this.labelCacheListenerKey_) {
-      unlistenByKey(this.labelCacheListenerKey_);
-    }
-  }
-
   /**
    *
    * @inheritDoc
@@ -542,11 +529,6 @@ class PluggableMap extends BaseObject {
       removeEventListener(EventType.RESIZE, this.handleResize_, false);
       this.handleResize_ = undefined;
     }
-    if (this.animationDelayKey_) {
-      cancelAnimationFrame(this.animationDelayKey_);
-      this.animationDelayKey_ = undefined;
-    }
-    this.detachLabelCache();
     this.setTarget(null);
     super.disposeInternal();
   }
@@ -1041,6 +1023,14 @@ class PluggableMap extends BaseObject {
     }
 
     if (!targetElement) {
+      if (this.renderer_) {
+        this.renderer_.dispose();
+        this.renderer_ = null;
+      }
+      if (this.animationDelayKey_) {
+        cancelAnimationFrame(this.animationDelayKey_);
+        this.animationDelayKey_ = undefined;
+      }
       removeNode(this.viewport_);
       if (this.handleResize_ !== undefined) {
         removeEventListener(EventType.RESIZE, this.handleResize_, false);
@@ -1048,6 +1038,9 @@ class PluggableMap extends BaseObject {
       }
     } else {
       targetElement.appendChild(this.viewport_);
+      if (!this.renderer_) {
+        this.renderer_ = this.createRenderer();
+      }
 
       const keyboardEventTarget = !this.keyboardEventTarget_ ?
         targetElement : this.keyboardEventTarget_;
@@ -1166,7 +1159,7 @@ class PluggableMap extends BaseObject {
    * @api
    */
   render() {
-    if (this.animationDelayKey_ === undefined) {
+    if (this.renderer_ && this.animationDelayKey_ === undefined) {
       this.animationDelayKey_ = requestAnimationFrame(this.animationDelay_);
     }
   }
diff --git a/src/ol/renderer/Composite.js b/src/ol/renderer/Composite.js
index 49727a68c5..4725d38905 100644
--- a/src/ol/renderer/Composite.js
+++ b/src/ol/renderer/Composite.js
@@ -9,6 +9,8 @@ import MapRenderer from './Map.js';
 import SourceState from '../source/State.js';
 import {replaceChildren} from '../dom.js';
 import {labelCache} from '../render/canvas.js';
+import EventType from '../events/EventType.js';
+import {listen, unlistenByKey} from '../events.js';
 
 
 /**
@@ -23,7 +25,11 @@ class CompositeMapRenderer extends MapRenderer {
    */
   constructor(map) {
     super(map);
-    map.attachLabelCache(labelCache);
+
+    /**
+     * @type {import("./events.js").EventsKey}
+     */
+    this.labelCacheKey_ = listen(labelCache, EventType.CLEAR, map.redrawText.bind(map));
 
     /**
      * @private
@@ -66,6 +72,11 @@ class CompositeMapRenderer extends MapRenderer {
     }
   }
 
+  disposeInternal() {
+    unlistenByKey(this.labelCacheKey_);
+    super.disposeInternal();
+  }
+
   /**
    * @inheritDoc
    */