diff --git a/packages/kbn-optimizer/limits.yml b/packages/kbn-optimizer/limits.yml
index 2a7a02b8e7f2f..a3db984735fea 100644
--- a/packages/kbn-optimizer/limits.yml
+++ b/packages/kbn-optimizer/limits.yml
@@ -96,7 +96,7 @@ pageLoadAssetSize:
   visTypeVega: 153573
   visTypeVislib: 242838
   visTypeXy: 113478
-  visualizations: 295025
+  visualizations: 90000
   visualize: 57431
   watcher: 43598
   runtimeFields: 41752
diff --git a/src/plugins/visualizations/public/components/_index.scss b/src/plugins/visualizations/public/components/_index.scss
deleted file mode 100644
index 532e8106b023f..0000000000000
--- a/src/plugins/visualizations/public/components/_index.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import 'visualization';
diff --git a/src/plugins/visualizations/public/components/index.ts b/src/plugins/visualizations/public/components/index.ts
index fda56acf166af..283132094378d 100644
--- a/src/plugins/visualizations/public/components/index.ts
+++ b/src/plugins/visualizations/public/components/index.ts
@@ -6,6 +6,4 @@
  * Side Public License, v 1.
  */
 
-import { lazy } from 'react';
-
-export const VisualizationContainer = lazy(() => import('./visualization_container'));
+export { VisualizationContainer } from './visualization_container';
diff --git a/src/plugins/visualizations/public/components/visualization_container.tsx b/src/plugins/visualizations/public/components/visualization_container.tsx
index 845906f7fbbae..a978718c9aa2b 100644
--- a/src/plugins/visualizations/public/components/visualization_container.tsx
+++ b/src/plugins/visualizations/public/components/visualization_container.tsx
@@ -6,11 +6,10 @@
  * Side Public License, v 1.
  */
 
-import React, { ReactNode, Suspense } from 'react';
+import React, { ReactNode, Suspense, lazy } from 'react';
 import { EuiLoadingChart } from '@elastic/eui';
 import classNames from 'classnames';
-import { VisualizationNoResults } from './visualization_noresults';
-import { VisualizationError } from './visualization_error';
+
 import { IInterpreterRenderHandlers } from '../../../expressions/common';
 
 export interface VisualizationContainerProps {
@@ -22,6 +21,9 @@ export interface VisualizationContainerProps {
   error?: string;
 }
 
+const VisualizationNoResults = lazy(() => import('./visualization_noresults'));
+const VisualizationError = lazy(() => import('./visualization_error'));
+
 export const VisualizationContainer = ({
   'data-test-subj': dataTestSubj = '',
   className,
@@ -52,6 +54,3 @@ export const VisualizationContainer = ({
     </div>
   );
 };
-
-// eslint-disable-next-line import/no-default-export
-export default VisualizationContainer;
diff --git a/src/plugins/visualizations/public/components/visualization_error.tsx b/src/plugins/visualizations/public/components/visualization_error.tsx
index c72933df43491..c715774b8b13a 100644
--- a/src/plugins/visualizations/public/components/visualization_error.tsx
+++ b/src/plugins/visualizations/public/components/visualization_error.tsx
@@ -44,3 +44,6 @@ export class VisualizationError extends React.Component<VisualizationNoResultsPr
     }
   }
 }
+
+// eslint-disable-next-line import/no-default-export
+export default VisualizationError;
diff --git a/src/plugins/visualizations/public/components/visualization_noresults.tsx b/src/plugins/visualizations/public/components/visualization_noresults.tsx
index 71bf1e8a7e4b0..5b03da62fbf42 100644
--- a/src/plugins/visualizations/public/components/visualization_noresults.tsx
+++ b/src/plugins/visualizations/public/components/visualization_noresults.tsx
@@ -48,3 +48,6 @@ export class VisualizationNoResults extends React.Component<VisualizationNoResul
     }
   }
 }
+
+// eslint-disable-next-line import/no-default-export
+export default VisualizationNoResults;
diff --git a/src/plugins/visualizations/public/embeddable/_index.scss b/src/plugins/visualizations/public/embeddable/_index.scss
deleted file mode 100644
index 9703e90159f48..0000000000000
--- a/src/plugins/visualizations/public/embeddable/_index.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import 'embeddables';
diff --git a/src/plugins/visualizations/public/embeddable/create_vis_embeddable_from_object.ts b/src/plugins/visualizations/public/embeddable/create_vis_embeddable_from_object.ts
index e2e2a4c089270..b2c729b5cbeae 100644
--- a/src/plugins/visualizations/public/embeddable/create_vis_embeddable_from_object.ts
+++ b/src/plugins/visualizations/public/embeddable/create_vis_embeddable_from_object.ts
@@ -7,7 +7,7 @@
  */
 
 import { Vis } from '../types';
-import {
+import type {
   VisualizeInput,
   VisualizeEmbeddable,
   VisualizeByValueInput,
@@ -31,6 +31,7 @@ import { VisualizeEmbeddableFactoryDeps } from './visualize_embeddable_factory';
 import { VISUALIZE_ENABLE_LABS_SETTING } from '../../common/constants';
 import { SavedVisualizationsLoader } from '../saved_visualizations';
 import { IndexPattern } from '../../../data/public';
+import { createVisualizeEmbeddableAsync } from './visualize_embeddable_async';
 
 export const createVisEmbeddableFromObject = (deps: VisualizeEmbeddableFactoryDeps) => async (
   vis: Vis,
@@ -72,7 +73,7 @@ export const createVisEmbeddableFromObject = (deps: VisualizeEmbeddableFactoryDe
       dashboardSave: Boolean(getCapabilities().dashboard?.showWriteControls),
     };
 
-    return new VisualizeEmbeddable(
+    return createVisualizeEmbeddableAsync(
       getTimeFilter(),
       {
         vis,
diff --git a/src/plugins/visualizations/public/embeddable/_embeddables.scss b/src/plugins/visualizations/public/embeddable/embeddables.scss
similarity index 100%
rename from src/plugins/visualizations/public/embeddable/_embeddables.scss
rename to src/plugins/visualizations/public/embeddable/embeddables.scss
diff --git a/src/plugins/visualizations/public/embeddable/index.ts b/src/plugins/visualizations/public/embeddable/index.ts
index 8f3ce60fad671..dc9029f2927b8 100644
--- a/src/plugins/visualizations/public/embeddable/index.ts
+++ b/src/plugins/visualizations/public/embeddable/index.ts
@@ -7,8 +7,9 @@
  */
 
 export { DisabledLabEmbeddable } from './disabled_lab_embeddable';
-export { VisualizeEmbeddable, VisualizeInput } from './visualize_embeddable';
 export { VisualizeEmbeddableFactory } from './visualize_embeddable_factory';
 export { VISUALIZE_EMBEDDABLE_TYPE } from './constants';
 export { VIS_EVENT_TO_TRIGGER } from './events';
 export { createVisEmbeddableFromObject } from './create_vis_embeddable_from_object';
+
+export type { VisualizeEmbeddable, VisualizeInput } from './visualize_embeddable';
diff --git a/src/plugins/visualizations/public/embeddable/visualize_embeddable_async.ts b/src/plugins/visualizations/public/embeddable/visualize_embeddable_async.ts
new file mode 100644
index 0000000000000..c7480844adbea
--- /dev/null
+++ b/src/plugins/visualizations/public/embeddable/visualize_embeddable_async.ts
@@ -0,0 +1,21 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import type { VisualizeEmbeddable as VisualizeEmbeddableType } from './visualize_embeddable';
+
+export const createVisualizeEmbeddableAsync = async (
+  ...args: ConstructorParameters<typeof VisualizeEmbeddableType>
+) => {
+  // Build optimization. Move app styles from main bundle
+  // @ts-expect-error TS error, cannot find type declaration for scss
+  await import('./embeddables.scss');
+
+  const { VisualizeEmbeddable } = await import('./visualize_embeddable');
+
+  return new VisualizeEmbeddable(...args);
+};
diff --git a/src/plugins/visualizations/public/embeddable/visualize_embeddable_factory.tsx b/src/plugins/visualizations/public/embeddable/visualize_embeddable_factory.tsx
index 8d59a76e39fc3..3ccdfb7e47d70 100644
--- a/src/plugins/visualizations/public/embeddable/visualize_embeddable_factory.tsx
+++ b/src/plugins/visualizations/public/embeddable/visualize_embeddable_factory.tsx
@@ -22,7 +22,7 @@ import {
   AttributeService,
 } from '../../../embeddable/public';
 import type { DisabledLabEmbeddable } from './disabled_lab_embeddable';
-import {
+import type {
   VisualizeByReferenceInput,
   VisualizeByValueInput,
   VisualizeEmbeddable,
@@ -32,7 +32,7 @@ import {
 } from './visualize_embeddable';
 import { VISUALIZE_EMBEDDABLE_TYPE } from './constants';
 import type { SerializedVis, Vis } from '../vis';
-import { createVisAsync } from '../vis_lazy';
+import { createVisAsync } from '../vis_async';
 import {
   getCapabilities,
   getTypes,
diff --git a/src/plugins/visualizations/public/index.scss b/src/plugins/visualizations/public/index.scss
deleted file mode 100644
index 0202419cea232..0000000000000
--- a/src/plugins/visualizations/public/index.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import 'embeddable/index';
-@import 'components/index';
diff --git a/src/plugins/visualizations/public/index.ts b/src/plugins/visualizations/public/index.ts
index 2b4c4a57497ca..081023d0039e7 100644
--- a/src/plugins/visualizations/public/index.ts
+++ b/src/plugins/visualizations/public/index.ts
@@ -9,7 +9,7 @@
 import { PublicContract } from '@kbn/utility-types';
 import { PluginInitializerContext } from 'src/core/public';
 import { VisualizationsPlugin, VisualizationsSetup, VisualizationsStart } from './plugin';
-import { VisualizeEmbeddableFactory, VisualizeEmbeddable } from './embeddable';
+import type { VisualizeEmbeddableFactory, VisualizeEmbeddable } from './embeddable';
 
 export function plugin(initializerContext: PluginInitializerContext) {
   return new VisualizationsPlugin(initializerContext);
diff --git a/src/plugins/visualizations/public/plugin.ts b/src/plugins/visualizations/public/plugin.ts
index e5ed49ac49bc3..c248ae180e8e6 100644
--- a/src/plugins/visualizations/public/plugin.ts
+++ b/src/plugins/visualizations/public/plugin.ts
@@ -5,9 +5,6 @@
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-
-import './index.scss';
-
 import {
   setUISettings,
   setTypes,
@@ -68,7 +65,7 @@ import type {
 import type { DataPublicPluginSetup, DataPublicPluginStart } from '../../../plugins/data/public';
 import type { ExpressionsSetup, ExpressionsStart } from '../../expressions/public';
 import type { EmbeddableSetup, EmbeddableStart } from '../../embeddable/public';
-import { createVisAsync } from './vis_lazy';
+import { createVisAsync } from './vis_async';
 
 /**
  * Interface for this plugin's returned setup/start contracts.
diff --git a/src/plugins/visualizations/public/saved_visualizations/_saved_vis.ts b/src/plugins/visualizations/public/saved_visualizations/_saved_vis.ts
index 73f676588c385..626fee0db495c 100644
--- a/src/plugins/visualizations/public/saved_visualizations/_saved_vis.ts
+++ b/src/plugins/visualizations/public/saved_visualizations/_saved_vis.ts
@@ -13,14 +13,14 @@
  *
  * NOTE: It's a type of SavedObject, but specific to visualizations.
  */
-import { SavedObjectsStart, SavedObject } from '../../../../plugins/saved_objects/public';
+import type { SavedObjectsStart, SavedObject } from '../../../../plugins/saved_objects/public';
 // @ts-ignore
 import { updateOldState } from '../legacy/vis_update_state';
 import { extractReferences, injectReferences } from './saved_visualization_references';
-import { IIndexPattern, IndexPatternsContract } from '../../../../plugins/data/public';
-import { ISavedVis, SerializedVis } from '../types';
 import { createSavedSearchesLoader } from '../../../discover/public';
-import { SavedObjectsClientContract } from '../../../../core/public';
+import type { SavedObjectsClientContract } from '../../../../core/public';
+import type { IIndexPattern, IndexPatternsContract } from '../../../../plugins/data/public';
+import type { ISavedVis, SerializedVis } from '../types';
 
 export interface SavedVisServices {
   savedObjectsClient: SavedObjectsClientContract;
diff --git a/src/plugins/visualizations/public/saved_visualizations/saved_visualizations.ts b/src/plugins/visualizations/public/saved_visualizations/saved_visualizations.ts
index 89a69c9107876..d07d28b393dcc 100644
--- a/src/plugins/visualizations/public/saved_visualizations/saved_visualizations.ts
+++ b/src/plugins/visualizations/public/saved_visualizations/saved_visualizations.ts
@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import { SavedObjectReference, SavedObjectsFindOptionsReference } from 'kibana/public';
+import type { SavedObjectReference, SavedObjectsFindOptionsReference } from 'kibana/public';
 import { SavedObjectLoader } from '../../../../plugins/saved_objects/public';
 import { findListItems } from './find_list_items';
 import { createSavedVisClass, SavedVisServices } from './_saved_vis';
diff --git a/src/plugins/visualizations/public/components/_visualization.scss b/src/plugins/visualizations/public/vis.scss
similarity index 100%
rename from src/plugins/visualizations/public/components/_visualization.scss
rename to src/plugins/visualizations/public/vis.scss
diff --git a/src/plugins/visualizations/public/vis_lazy.ts b/src/plugins/visualizations/public/vis_async.ts
similarity index 81%
rename from src/plugins/visualizations/public/vis_lazy.ts
rename to src/plugins/visualizations/public/vis_async.ts
index e2e3538d13f1c..0996e5da48c36 100644
--- a/src/plugins/visualizations/public/vis_lazy.ts
+++ b/src/plugins/visualizations/public/vis_async.ts
@@ -13,8 +13,13 @@ export const createVisAsync = async <TVisParams = VisParams>(
   visType: string,
   visState: SerializedVis<TVisParams> = {} as any
 ) => {
+  // Build optimization. Move app styles from main bundle
+  // @ts-expect-error TS error, cannot find type declaration for scss
+  await import('./vis.scss');
+
   const { Vis } = await import('./vis');
   const vis = new Vis(visType, visState);
+
   await vis.setState(visState);
   return vis;
 };