perf(lcp): bypass Next.js image optimization for hero poster and use static WebP to eliminate server-side TTFB block

.gitea/workflows/deploy.yml

@@ -47,7 +47,14 @@ jobs:
         run: |
           echo "=== System Disk Usage ==="
           df -h || true
+          echo "=== Tool Cache Usage ==="
+          du -sh /opt/hostedtoolcache/* || true
+          du -sh /opt/hostedtoolcache/.[!.]* || true
           echo "Purging old tool caches skipped to prevent runner corruption."
+          echo "=== Host Disk Usage ==="
+          docker run --rm -v /:/host-root alpine df -h || true
+          echo "=== Host Inode Usage ==="
+          docker run --rm -v /:/host-root alpine df -i || true
           echo "=== Running Host Containers ==="
           docker ps --format "table {{.Names}}\t{{.Status}}\t{{.Image}}" || true
           echo "=== Host Docker Info ==="

app/globals.css

@@ -88,30 +88,34 @@
 }
 /* trigger rebuild */
 
-@keyframes hero-fade-in-up {
-  from {
-    opacity: 0;
-    transform: translateY(30px);
+@layer utilities {
+  @keyframes hero-fade-in-up {
+    from {
+      opacity: 0;
+      transform: translateY(30px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
   }
-  to {
-    opacity: 1;
-    transform: translateY(0);
+  
+  .animate-hero-fade-in-up {
+    animation: hero-fade-in-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
   }
 }
 
-@utility animate-hero-fade-in-up {
-  animation: hero-fade-in-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
-}
-
-@keyframes hero-zoom-out {
-  from {
-    transform: scale(1.05);
+@layer utilities {
+  @keyframes hero-zoom-out {
+    from {
+      transform: scale(1.05);
+    }
+    to {
+      transform: scale(1);
+    }
   }
-  to {
-    transform: scale(1);
+  
+  .animate-hero-zoom-out {
+    animation: hero-zoom-out 1.5s ease-out forwards;
   }
 }
-
-@utility animate-hero-zoom-out {
-  animation: hero-zoom-out 1.5s ease-out forwards;
-}

components/blocks/HeroVideo.tsx

@@ -34,7 +34,7 @@ export function HeroVideo(props: HeroVideoProps) {
 
   let defaultPoster = "/assets/photos/DJI_0048.JPG";
   if (videoUrl && videoUrl.endsWith('.mp4')) {
-    defaultPoster = videoUrl.replace('.mp4', '-poster.jpg');
+    defaultPoster = videoUrl.replace('.mp4', '-poster.webp');
   }
 
   const posterSrc = props.backgroundImage?.url || props.posterImage?.url || data?.posterImage?.url || defaultPoster;
@@ -88,7 +88,7 @@ export function HeroVideo(props: HeroVideoProps) {
         fill
         className="object-cover z-[1] pointer-events-none"
         sizes="100vw"
-        quality={25}
+        unoptimized={true}
         priority
         fetchPriority="high"
       />

package.json

@@ -139,7 +139,7 @@
     "prepare": "husky",
     "preinstall": "npx only-allow pnpm"
   },
-  "version": "2.4.23",
+  "version": "2.2.94",
   "pnpm": {
     "onlyBuiltDependencies": [
       "@parcel/watcher",