diff --git a/js/data/array_group.js b/js/data/array_group.js
index f8faeb86293..a98a3930aca 100644
--- a/js/data/array_group.js
+++ b/js/data/array_group.js
@@ -48,11 +48,10 @@ class ArrayGroup {
         for (const layer of layers) {
             const programConfiguration = ProgramConfiguration.createDynamic(
                 programInterface.paintAttributes || [], layer, zoom);
-            const PaintVertexArrayType = programConfiguration.paintVertexArrayType();
             this.layerData[layer.id] = {
                 layer: layer,
                 programConfiguration: programConfiguration,
-                paintVertexArray: new PaintVertexArrayType()
+                paintVertexArray: new programConfiguration.PaintVertexArray()
             };
         }
 
diff --git a/js/data/program_configuration.js b/js/data/program_configuration.js
index 36f8ad25e53..3e02e506ddc 100644
--- a/js/data/program_configuration.js
+++ b/js/data/program_configuration.js
@@ -27,6 +27,7 @@ class ProgramConfiguration {
         this.interpolationUniforms = [];
         this.vertexPragmas = {};
         this.fragmentPragmas = {};
+        this.cacheKey = '';
     }
 
     static createDynamic(attributes, layer, zoom) {
@@ -44,8 +45,7 @@ class ProgramConfiguration {
                 self.addDataAndZoomDrivenAttribute(name, attribute, layer, zoom);
             }
         }
-
-        self.cacheKey = JSON.stringify([self.vertexPragmas, self.fragmentPragmas]);
+        self.PaintVertexArray = createVertexArrayType(self.attributes);
 
         return self;
     }
@@ -56,8 +56,6 @@ class ProgramConfiguration {
         for (const name of uniformNames) {
             self.addUniform(name, `u_${name}`);
         }
-        self.cacheKey = JSON.stringify(self.fragmentPragmas);
-
         return self;
     }
 
@@ -70,6 +68,8 @@ class ProgramConfiguration {
 
         frag.initialize.push(`{precision} {type} ${name} = ${inputName};`);
         vert.initialize.push(`{precision} {type} ${name} = ${inputName};`);
+
+        this.cacheKey += `/u_${name}`;
     }
 
     addZoomDrivenAttribute(name, attribute) {
@@ -88,6 +88,8 @@ class ProgramConfiguration {
 
         vert.define.push(`attribute {precision} {type} ${attribute.name};`);
         vert.initialize.push(`${name} = ${attribute.name} / ${attribute.multiplier}.0;`);
+
+        this.cacheKey += `/a_${name}`;
     }
 
     addDataAndZoomDrivenAttribute(name, attribute, layer, zoom) {
@@ -143,6 +145,8 @@ class ProgramConfiguration {
         }
         vert.initialize.push(`${name} = evaluate_zoom_function_${attribute.components}(\
             ${componentNames.join(', ')}, ${tName}) / ${attribute.multiplier}.0;`);
+
+        this.cacheKey += `/z_${name}`;
     }
 
     getFragmentPragmas(name) {
@@ -182,10 +186,6 @@ class ProgramConfiguration {
         }
     }
 
-    paintVertexArrayType() {
-        return createVertexArrayType(this.attributes);
-    }
-
     setUniforms(gl, program, layer, globalProperties) {
         for (const uniform of this.uniforms) {
             const value = layer.getPaintValue(uniform.property, globalProperties);
diff --git a/js/render/painter.js b/js/render/painter.js
index 67a55f0d6ef..81ba25943f3 100644
--- a/js/render/painter.js
+++ b/js/render/painter.js
@@ -414,7 +414,7 @@ class Painter {
 
     _createProgramCached(name, programConfiguration) {
         this.cache = this.cache || {};
-        const key = `${name}${programConfiguration.cacheKey}${!!this._showOverdrawInspector}`;
+        const key = `${name}${programConfiguration.cacheKey || ''}/${!!this._showOverdrawInspector}`;
         if (!this.cache[key]) {
             this.cache[key] = this.createProgram(name, this._showOverdrawInspector, this.gl, programConfiguration);
         }