From 1655ee139b3e555dc7890817e979db66406fd862 Mon Sep 17 00:00:00 2001
From: "macroscopeapp[bot]"
 <170038800+macroscopeapp[bot]@users.noreply.github.com>
Date: Thu, 24 Sep 2026 10:19:28 +0000
Subject: [PATCH 1/2] Replace eager img with lazy NuxtImg for
 from-prototype-to-production image

---
 nuxt/pages/platform/why-flowfuse.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/nuxt/pages/platform/why-flowfuse.vue b/nuxt/pages/platform/why-flowfuse.vue
index e487ab72ff..2806deeab2 100644
--- a/nuxt/pages/platform/why-flowfuse.vue
+++ b/nuxt/pages/platform/why-flowfuse.vue
@@ -103,7 +103,7 @@ useSchemaOrg([
             <div class="grid grid-cols-1 lg:grid-cols-[1fr_2fr] gap-6">
               <div class="flex-grow relative hidden lg:block">
                 <div class="ff-image-cover left ff-image-rounded w-full h-full">
-                  <img src="/images/why-flowfuse/from-prototype-to-production.png" alt="Shop floor office" width="496" class="w-full h-auto">
+                  <NuxtImg src="/images/why-flowfuse/from-prototype-to-production.png" alt="Shop floor office" :width="496" format="webp" loading="lazy" class="w-full h-auto" />
                 </div>
               </div>
               <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">

From d4647c486f22d56088949f9694970ecade70caea Mon Sep 17 00:00:00 2001
From: "macroscopeapp[bot]"
 <170038800+macroscopeapp[bot]@users.noreply.github.com>
Date: Thu, 24 Sep 2026 10:21:02 +0000
Subject: [PATCH 2/2] fix(LiteYoutube): register lite-youtube-embed stylesheet
 via useHead for SSR

---
 nuxt/components/LiteYoutube.vue | 29 ++++++++++++++---------------
 1 file changed, 14 insertions(+), 15 deletions(-)

diff --git a/nuxt/components/LiteYoutube.vue b/nuxt/components/LiteYoutube.vue
index 894a3566a9..e4e1992779 100644
--- a/nuxt/components/LiteYoutube.vue
+++ b/nuxt/components/LiteYoutube.vue
@@ -4,21 +4,20 @@ const props = defineProps<{
     title: string
 }>()
 
-onMounted(() => {
-    if (!document.querySelector('script[src*="lite-yt-embed"]')) {
-        const script = document.createElement('script')
-        script.async = true
-        script.src = 'https://cdn.jsdelivr.net/npm/lite-youtube-embed@0.2.0/src/lite-yt-embed.min.js'
-        document.head.appendChild(script)
-    }
-    if (!document.querySelector('link[href*="lite-yt-embed"]')) {
-        const link = document.createElement('link')
-        link.rel = 'stylesheet'
-        link.href = 'https://cdn.jsdelivr.net/npm/lite-youtube-embed@0.2.0/src/lite-yt-embed.min.css'
-        link.crossOrigin = 'anonymous'
-        link.referrerPolicy = 'no-referrer'
-        document.head.appendChild(link)
-    }
+// Register stylesheet and script via useHead so they're present in the initial SSR HTML.
+// This ensures the lite-youtube-embed layout/poster CSS is applied before hydration,
+// preventing layout shift on pages like /platform/why-flowfuse.
+useHead({
+    link: [{
+        rel: 'stylesheet',
+        href: 'https://cdn.jsdelivr.net/npm/lite-youtube-embed@0.2.0/src/lite-yt-embed.min.css',
+        crossorigin: 'anonymous',
+        referrerpolicy: 'no-referrer',
+    }],
+    script: [{
+        src: 'https://cdn.jsdelivr.net/npm/lite-youtube-embed@0.2.0/src/lite-yt-embed.min.js',
+        async: true,
+    }],
 })
 </script>