diff --git a/packages/theme/src/cli/utilities/theme-environment/hot-reload/server.test.ts b/packages/theme/src/cli/utilities/theme-environment/hot-reload/server.test.ts
index 4491250fa9e..f8c99d65551 100644
--- a/packages/theme/src/cli/utilities/theme-environment/hot-reload/server.test.ts
+++ b/packages/theme/src/cli/utilities/theme-environment/hot-reload/server.test.ts
@@ -23,7 +23,7 @@ const THEME_ID = 'my-theme-id'
 
 describe('Hot Reload', () => {
   describe('handleHotReloadScriptInjection', () => {
-    const htmlWithHrScript = `<html><head><script id="${hotReloadScriptId}" src="${hotReloadScriptUrl}"></script></head><body></body></html>`
+    const htmlWithHrScript = `<html><head><script id="${hotReloadScriptId}" src="${hotReloadScriptUrl}" defer></script></head><body></body></html>`
     const htmlWithoutHrScript = '<html><head></head><body></body></html>'
 
     test('keeps the SFR injected script when hot reload is enabled', () => {
diff --git a/packages/theme/src/cli/utilities/theme-environment/hot-reload/server.ts b/packages/theme/src/cli/utilities/theme-environment/hot-reload/server.ts
index 556185ceb78..92bffb3cde0 100644
--- a/packages/theme/src/cli/utilities/theme-environment/hot-reload/server.ts
+++ b/packages/theme/src/cli/utilities/theme-environment/hot-reload/server.ts
@@ -382,7 +382,10 @@ export function handleHotReloadScriptInjection(html: string, ctx: DevServerConte
   }
 
   // Inject the HotReload script in the HTML Head
-  return html.replace(/<\/head>/, `<script id="${hotReloadScriptId}" src="${hotReloadScriptUrl}"></script></head>`)
+  return html.replace(
+    /<\/head>/,
+    `<script id="${hotReloadScriptId}" src="${hotReloadScriptUrl}" defer></script></head>`,
+  )
 }
 
 function isAsset(key: string) {
