diff --git a/dotcom-rendering/index.d.ts b/dotcom-rendering/index.d.ts
index 9f33fd83e70..313ae4a31ca 100644
--- a/dotcom-rendering/index.d.ts
+++ b/dotcom-rendering/index.d.ts
@@ -880,11 +880,6 @@ interface VineBlockLoadable extends ComponentNameChunkMap {
 	addWhen: VineBlockElement['_type'];
 }
 
-interface InstagramBlockLoadable extends ComponentNameChunkMap {
-	chunkName: 'InstagramBlockComponent';
-	addWhen: InstagramBlockElement['_type'];
-}
-
 // There are docs on loadable in ./docs/loadable-components.md
 type LoadableComponents = [
 	YoutubeBlockLoadable,
@@ -897,7 +892,6 @@ type LoadableComponents = [
 	SpotifyBlockLoadable,
 	FacebookVideoBlockLoadable,
 	VineBlockLoadable,
-	InstagramBlockLoadable,
 ];
 
 interface CarouselImagesMap {
diff --git a/dotcom-rendering/src/web/components/App.tsx b/dotcom-rendering/src/web/components/App.tsx
index 687d1fe7cb3..75ada0af933 100644
--- a/dotcom-rendering/src/web/components/App.tsx
+++ b/dotcom-rendering/src/web/components/App.tsx
@@ -458,26 +458,6 @@ export const App = ({ CAPI, ophanRecord }: Props) => {
 		},
 	);
 
-	const InstagramBlockComponent = loadable(
-		() => {
-			if (
-				CAPI.elementsToHydrate.filter(
-					(element) =>
-						element._type ===
-						'model.dotcomrendering.pageElements.InstagramBlockElement',
-				).length > 0
-			) {
-				return import(
-					'@frontend/web/components/InstagramBlockComponent'
-				);
-			}
-			return Promise.reject();
-		},
-		{
-			resolveComponent: (module) => module.InstagramBlockComponent,
-		},
-	);
-
 	// We use this function to filter the elementsToHydrate array by a particular
 	// type so that we can hydrate them. We use T to force the type and keep TS
 	// content because *we* know that if _type equals a thing then the type is
@@ -531,10 +511,6 @@ export const App = ({ CAPI, ophanRecord }: Props) => {
 		CAPI.elementsToHydrate,
 		'model.dotcomrendering.pageElements.EmbedBlockElement',
 	);
-	const instas = elementsByType<InstagramBlockElement>(
-		CAPI.elementsToHydrate,
-		'model.dotcomrendering.pageElements.InstagramBlockElement',
-	);
 	const maps = elementsByType<MapBlockElement>(
 		CAPI.elementsToHydrate,
 		'model.dotcomrendering.pageElements.MapBlockElement',
@@ -908,26 +884,6 @@ export const App = ({ CAPI, ophanRecord }: Props) => {
 					)}
 				</HydrateOnce>
 			))}
-			{instas.map((insta, index) => (
-				<HydrateOnce rootId={insta.elementId}>
-					<ClickToView
-						role={insta.role}
-						isTracking={insta.isThirdPartyTracking}
-						source={insta.source}
-						sourceDomain={insta.sourceDomain}
-						onAccept={() =>
-							updateIframeHeight(
-								`iframe[name="instagram-embed-${index}"]`,
-							)
-						}
-					>
-						<InstagramBlockComponent
-							element={insta}
-							index={index}
-						/>
-					</ClickToView>
-				</HydrateOnce>
-			))}
 			{maps.map((map) => (
 				<HydrateOnce rootId={map.elementId}>
 					<ClickToView
diff --git a/dotcom-rendering/src/web/components/ClickToView.stories.tsx b/dotcom-rendering/src/web/components/ClickToView.stories.tsx
index f1eb85ee899..b3b2deb3f24 100644
--- a/dotcom-rendering/src/web/components/ClickToView.stories.tsx
+++ b/dotcom-rendering/src/web/components/ClickToView.stories.tsx
@@ -16,7 +16,7 @@ import { VimeoBlockComponent } from './VimeoBlockComponent';
 import { DocumentBlockComponent } from './DocumentBlockComponent';
 import { SoundcloudBlockComponent } from './SoundcloudBlockComponent';
 import { TweetBlockComponent } from './TweetBlockComponent';
-import { InstagramBlockComponent } from './InstagramBlockComponent';
+import { InstagramBlockComponent } from './InstagramBlockComponent.importable';
 
 import { ClickToView } from './ClickToView';
 
@@ -1039,23 +1039,12 @@ export const InstagramBlockComponentStory = () => {
 					</a>
 				</p>
 				<Figure isMainMedia={false} role="inline">
-					<ClickToView
-						isTracking={true}
-						source={instagramInstramEmbed.source}
-						sourceDomain={instagramInstramEmbed.sourceDomain}
-						role="inline"
-						onAccept={() =>
-							updateIframeHeight(
-								'iframe[name="instagram-embed-1"]',
-							)
-						}
-					>
-						<InstagramBlockComponent
-							key={1}
-							element={instagramInstramEmbed}
-							index={1}
-						/>
-					</ClickToView>
+					<InstagramBlockComponent
+						key={1}
+						element={instagramInstramEmbed}
+						index={1}
+						isMainMedia={false}
+					/>
 				</Figure>
 				<p css={paragraphStyle}>The end.</p>,
 			</div>
diff --git a/dotcom-rendering/src/web/components/InstagramBlockComponent.importable.tsx b/dotcom-rendering/src/web/components/InstagramBlockComponent.importable.tsx
new file mode 100644
index 00000000000..1ddcdd1e988
--- /dev/null
+++ b/dotcom-rendering/src/web/components/InstagramBlockComponent.importable.tsx
@@ -0,0 +1,42 @@
+import { css } from '@emotion/react';
+import { updateIframeHeight } from '../browser/updateIframeHeight';
+import { ClickToView } from './ClickToView';
+
+const fullWidthStyles = css`
+	width: 100%;
+`;
+
+/**
+ * Note the iframe created in this component is dependent on the embedIFrame function being
+ * called to be size correctly.
+ * src/web/browser/embedIframe/embedIframe.ts
+ */
+export const InstagramBlockComponent: React.FC<{
+	element: InstagramBlockElement;
+	index: number;
+	isMainMedia: boolean;
+}> = ({ element, index, isMainMedia }) => {
+	return (
+		<ClickToView
+			role={element.role}
+			isTracking={element.isThirdPartyTracking}
+			isMainMedia={isMainMedia}
+			source={element.source}
+			sourceDomain={element.sourceDomain}
+			onAccept={() =>
+				updateIframeHeight(`iframe[name="instagram-embed-${index}"]`)
+			}
+		>
+			<iframe
+				css={fullWidthStyles}
+				className="js-embed__iframe"
+				name={`instagram-embed-${index}`}
+				data-cy="instagram-embed"
+				title={`Instagram Post ${index}`}
+				srcDoc={`${element.html}
+			<script src="https://interactive.guim.co.uk/libs/iframe-messenger/iframeMessenger.js"></script>
+			<gu-script>iframeMessenger.enableAutoResize();</gu-script>`}
+			/>
+		</ClickToView>
+	);
+};
diff --git a/dotcom-rendering/src/web/components/InstagramBlockComponent.tsx b/dotcom-rendering/src/web/components/InstagramBlockComponent.tsx
deleted file mode 100644
index f3da7316377..00000000000
--- a/dotcom-rendering/src/web/components/InstagramBlockComponent.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { css } from '@emotion/react';
-
-const fullWidthStyles = css`
-	width: 100%;
-`;
-
-/**
- * Note the iframe created in this component is dependent on the embedIFrame function being
- * called to be size correctly.
- * src/web/browser/embedIframe/embedIframe.ts
- */
-export const InstagramBlockComponent: React.FC<{
-	element: InstagramBlockElement;
-	index: number;
-}> = ({ element, index }) => {
-	return (
-		<iframe
-			css={fullWidthStyles}
-			className="js-embed__iframe"
-			name={`instagram-embed-${index}`}
-			data-cy="instagram-embed"
-			title={`Instagram Post ${index}`}
-			srcDoc={`${element.html}
-			<script src="https://interactive.guim.co.uk/libs/iframe-messenger/iframeMessenger.js"></script>
-			<gu-script>iframeMessenger.enableAutoResize();</gu-script>`}
-		/>
-	);
-};
diff --git a/dotcom-rendering/src/web/lib/renderElement.tsx b/dotcom-rendering/src/web/lib/renderElement.tsx
index 904a311e903..40953ecbb58 100644
--- a/dotcom-rendering/src/web/lib/renderElement.tsx
+++ b/dotcom-rendering/src/web/lib/renderElement.tsx
@@ -12,7 +12,7 @@ import { UnsafeEmbedBlockComponent } from '@root/src/web/components/UnsafeEmbedB
 import { GuVideoBlockComponent } from '@root/src/web/components/GuVideoBlockComponent';
 import { HighlightBlockComponent } from '@root/src/web/components/HighlightBlockComponent';
 import { ImageBlockComponent } from '@root/src/web/components/ImageBlockComponent';
-import { InstagramBlockComponent } from '@root/src/web/components/InstagramBlockComponent';
+import { InstagramBlockComponent } from '@root/src/web/components/InstagramBlockComponent.importable';
 import { InteractiveBlockComponent } from '@root/src/web/components/InteractiveBlockComponent';
 import { ItemLinkBlockElement } from '@root/src/web/components/ItemLinkBlockElement';
 import { InteractiveContentsBlockComponent } from '@root/src/web/components/InteractiveContentsBlockComponent';
@@ -60,6 +60,7 @@ import {
 	isInteractive,
 	interactiveLegacyFigureClasses,
 } from '../layouts/lib/interactiveLegacyStyling';
+import { Island } from '../components/Island';
 
 type Props = {
 	format: ArticleFormat;
@@ -327,19 +328,14 @@ export const renderElement = ({
 		case 'model.dotcomrendering.pageElements.InstagramBlockElement':
 			return [
 				true,
-				<ClickToView
-					role={element.role}
-					isTracking={element.isThirdPartyTracking}
-					isMainMedia={isMainMedia}
-					source={element.source}
-					sourceDomain={element.sourceDomain}
-				>
+				<Island deferUntil="visible">
 					<InstagramBlockComponent
 						key={index}
 						element={element}
 						index={index}
+						isMainMedia={isMainMedia}
 					/>
-				</ClickToView>,
+				</Island>,
 			];
 		case 'model.dotcomrendering.pageElements.InteractiveAtomBlockElement':
 			if (format.design === ArticleDesign.Interactive) {
diff --git a/dotcom-rendering/src/web/server/document.tsx b/dotcom-rendering/src/web/server/document.tsx
index 96f71698b9f..17c30952ff7 100644
--- a/dotcom-rendering/src/web/server/document.tsx
+++ b/dotcom-rendering/src/web/server/document.tsx
@@ -135,10 +135,6 @@ export const document = ({ data }: Props): string => {
 			chunkName: 'VineBlockComponent',
 			addWhen: 'model.dotcomrendering.pageElements.VineBlockElement',
 		},
-		{
-			chunkName: 'InstagramBlockComponent',
-			addWhen: 'model.dotcomrendering.pageElements.InstagramBlockElement',
-		},
 	];
 	// We want to only insert script tags for the elements or main media elements on this page view
 	// so we need to check what elements we have and use the mapping to the the chunk name