chore: perf improvements

ken-matsui · ken-matsui · commit 76980d8cd4a7 · 2025-08-06T18:02:24.000-04:00
diff --git a/app/_components/footer.tsx b/app/_components/footer.tsx
@@ -83,7 +83,10 @@ export function Footer() {
             </div>
 
             {/* Background decoration */}
-            <div className="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-[400px] h-[200px] bg-gradient-to-t from-primary/5 to-transparent rounded-full blur-3xl -z-10" />
+            <div
+                className="absolute bottom-0 left-1/2 w-[400px] h-[200px] bg-gradient-to-t from-primary/5 to-transparent rounded-full blur-3xl -z-10"
+                style={{ transform: "translate3d(-50%, 0, 0)" }}
+            />
         </footer>
     );
 }
diff --git a/app/constants.ts b/app/constants.ts
@@ -0,0 +1 @@
+export const DEMO_GIF_URL = "https://vhs.charm.sh/vhs-12NaAvXqgDiV647TA2C356.gif";
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -4,6 +4,7 @@ import { SpeedInsights } from "@vercel/speed-insights/next";
 import { Footer } from "./_components/footer";
 import { Header } from "./_components/header";
 import { Providers } from "./providers";
+import { DEMO_GIF_URL } from "./constants";
 
 import "./globals.css";
 
@@ -14,6 +15,14 @@ export default function Layout({
 }): React.ReactElement {
     return (
         <html lang="en" className="dark">
+            <head>
+                <link
+                    rel="preload"
+                    href={DEMO_GIF_URL}
+                    as="image"
+                    fetchPriority="high"
+                />
+            </head>
             <body
                 className={"min-h-screen bg-background font-sans antialiased"}
             >
diff --git a/app/page.tsx b/app/page.tsx
@@ -13,6 +13,7 @@ import { Button, Link } from "@heroui/react";
 import type { Metadata } from "next";
 import Image from "next/image";
 import { FeatureCard } from "./_components/feature-card";
+import { DEMO_GIF_URL } from "./constants";
 
 export const revalidate = 86400; // 1 day
 
@@ -87,12 +88,15 @@ export default function Home() {
                         <div className="relative">
                             <div className="relative bg-gradient-to-br from-default-100 to-default-200 rounded-2xl p-3 md:p-6 shadow-2xl">
                                 <Image
-                                    src="https://vhs.charm.sh/vhs-12NaAvXqgDiV647TA2C356.gif"
+                                    src={DEMO_GIF_URL}
                                     width={800}
                                     height={450}
                                     alt="Demo of Cabin package manager"
                                     priority
                                     unoptimized
+                                    fetchPriority="high"
+                                    placeholder="blur"
+                                    blurDataURL="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAABAAEDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAv/xAAUEAEAAAAAAAAAAAAAAAAAAAAA/8QAFQEBAQAAAAAAAAAAAAAAAAAAAAX/xAAUEQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIRAxEAPwCdABmX/9k="
                                     className="rounded-xl shadow-lg w-full h-auto"
                                 />
                             </div>
@@ -108,7 +112,10 @@ export default function Home() {
                 </div>
 
                 {/* Background decoration */}
-                <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-gradient-to-r from-primary/10 to-secondary/10 rounded-full blur-3xl -z-10" />
+                <div
+                    className="absolute top-1/2 left-1/2 w-[800px] h-[800px] bg-gradient-to-r from-primary/10 to-secondary/10 rounded-full blur-3xl -z-10"
+                    style={{ transform: "translate3d(-50%, -50%, 0)" }}
+                />
             </section>
 
             {/* Features Section */}

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+export const DEMO_GIF_URL = "https://vhs.charm.sh/vhs-12NaAvXqgDiV647TA2C356.gif";`