diff --git a/app/assets/javascripts/security_configuration/components/app.vue b/app/assets/javascripts/security_configuration/components/app.vue
index 10c677a3721f980a26b11810a8dda638f0f28712..4a6ea11d7c3ea35622137c423191f83348d7bed5 100644
--- a/app/assets/javascripts/security_configuration/components/app.vue
+++ b/app/assets/javascripts/security_configuration/components/app.vue
@@ -160,7 +160,7 @@ export default {
       </template>
     </user-callout-dismisser>
 
-    <gl-tabs content-class="gl-pt-0" sync-active-tab-with-query-params>
+    <gl-tabs content-class="gl-pt-0" sync-active-tab-with-query-params lazy>
       <gl-tab
         data-testid="security-testing-tab"
         :title="$options.i18n.securityTesting"
diff --git a/spec/frontend/security_configuration/components/app_spec.js b/spec/frontend/security_configuration/components/app_spec.js
index f123352d7815d01572c6aef148a5c9869fbc5773..e4b83aa68da27928ac28c8b8b8d9f5550da62309 100644
--- a/spec/frontend/security_configuration/components/app_spec.js
+++ b/spec/frontend/security_configuration/components/app_spec.js
@@ -159,6 +159,10 @@ describe('App component', () => {
         expect(findGlTabs().props('syncActiveTabWithQueryParams')).toBe(true);
       });
 
+      it('lazy loads each tab', () => {
+        expect(findGlTabs().attributes('lazy')).not.toBe(undefined);
+      });
+
       it('renders correct amount of tabs', () => {
         expect(findTabs()).toHaveLength(expectedTabs.length);
       });