perf(game): add priority and blur to images

app/_game/components/GameLayout.tsx

@@ -36,6 +36,7 @@ export function GameLayout({
               className="h-[24px] w-[24px]"
               width={24}
               height={24}
+              priority
             />
             <span className="hidden sm:block">isthat.ai</span>
           </div>
@@ -53,6 +54,7 @@ export function GameLayout({
                   alt="zolplay logo"
                   width={24}
                   height={24}
+                  priority
                 />
                 <span className="hidden sm:block">Zolplay</span>
               </a>

app/_game/components/ResultDisplay.tsx

@@ -52,6 +52,7 @@ export function ResultDisplay({
             width={24}
             alt="time"
             className="h-[18px] w-[18px] sm:h-[24px] sm:w-[24px]"
+            priority
           />
           <div>{dayjs.duration(userScore.time, 'seconds').format('mm:ss')}</div>
           <Image
@@ -60,6 +61,7 @@ export function ResultDisplay({
             width={24}
             alt="score"
             className="h-[18px] w-[18px] sm:h-[24px] sm:w-[24px]"
+            priority
           />
           <div>
             {userScore.score}/{userScore.total}
@@ -108,6 +110,7 @@ export function ResultDisplay({
               width={18}
               alt="tier info"
               className="ml-[4px] inline h-[14px] w-[14px] sm:h-[18px] sm:w-[18px]"
+              priority
             />
           </a>
           <div className="text-[8px] text-[#A9A9A9] sm:text-[13px]">

app/_game/components/ShareDialog.tsx

@@ -98,6 +98,7 @@ export function ShareDialog({
               alt="close"
               width={24}
               height={24}
+              priority
             />
           </button>
         </div>

app/_game/scenes/Loading.tsx

@@ -51,6 +51,7 @@ export function Loading() {
             className="h-[88px] w-[88px] sm:h-[168px] sm:w-[168px]"
             width={168}
             height={168}
+            priority
           />
           <div className="text-[12px] leading-[normal] sm:text-[24px]">
             isthat.ai

app/_game/scenes/Play.tsx

@@ -114,6 +114,7 @@ export function Play() {
           className="h-[16px] w-[16px] sm:h-[24px] sm:w-[24px]"
           width={24}
           height={24}
+          priority
         />
         <div className="text-[12px] sm:text-[16px]">
           {dayjs.duration(remainingSeconds, 'seconds').format('mm:ss')}
@@ -130,6 +131,7 @@ export function Play() {
           alt="left arrow"
           width={64}
           height={64}
+          priority
         />
         <div className="text-[12px] text-[#EC4899] sm:text-[20px]">NOT AI</div>
       </div>
@@ -144,6 +146,7 @@ export function Play() {
           alt="right arrow"
           width={64}
           height={64}
+          priority
         />
         <div className="text-right text-[12px] text-[#5EEAD4] sm:text-[20px]">
           AI

app/_game/scenes/Result.tsx

@@ -34,6 +34,7 @@ function ActionButton({
         className="h-[20px] w-[20px] sm:h-[24px] sm:w-[24px]"
         width={24}
         height={24}
+        priority
       />
       <div>{children}</div>
     </button>

app/_game/scenes/WarmUp.tsx

@@ -2,6 +2,11 @@ import { AnimatePresence, motion } from 'framer-motion'
 import Image from 'next/image'
 import { useState } from 'react'
 
+import step2MobileImage from '~/public/images/ftue/m-step-2.png'
+import step3MobileImage from '~/public/images/ftue/m-step-3.png'
+import step1Image from '~/public/images/ftue/step-1.png'
+import step2Image from '~/public/images/ftue/step-2.png'
+import step3Image from '~/public/images/ftue/step-2.png'
 import { useScene } from '~/stores/Scene.store'
 
 import { GameLayout } from '../components/GameLayout'
@@ -23,6 +28,7 @@ function Handler({
           width={64}
           height={64}
           onClick={() => onClick(step - 1)}
+          priority
         />
       ) : (
         <div className="w-8 sm:w-16" />
@@ -34,6 +40,7 @@ function Handler({
           alt="prev"
           width={104}
           height={24}
+          priority
         />
       </div>
       <Image
@@ -43,6 +50,7 @@ function Handler({
         width={64}
         height={64}
         onClick={() => onClick(step + 1)}
+        priority
       />
     </div>
   )
@@ -59,7 +67,13 @@ const images = [
     key={0}
     className="relative aspect-[235/205] h-[calc(205/341*100%)] min-h-[205px]"
   >
-    <Image src="/images/ftue/step-1.svg" alt="step-1" fill />
+    <Image
+      src={step1Image}
+      alt="step-1"
+      fill
+      style={{ imageRendering: 'pixelated' }}
+      placeholder="blur"
+    />
   </div>,
   <div
     key={1}
@@ -68,15 +82,21 @@ const images = [
     <div className="hidden h-full justify-center sm:flex">
       <div className="relative aspect-[385/353] h-full max-w-[50%]">
         <div className="absolute left-10 top-[calc(150/353*100%)] aspect-[120/102] h-[calc(102/353*100%)]">
-          <Image src="/images/ftue/not-ai.svg" alt="not-ai" fill />
+          <Image src="/images/ftue/not-ai.svg" alt="not-ai" fill priority />
         </div>
       </div>
       <div className="relative aspect-[385/353] h-full max-w-[50%] bg-[rgba(204,251,241,0.4)]">
         <div className="absolute right-10 top-[calc(148/353*100%)] aspect-[64/103] h-[calc(103/353*100%)]">
-          <Image src="/images/ftue/is-ai.svg" alt="is-ai" fill />
+          <Image src="/images/ftue/is-ai.svg" alt="is-ai" fill priority />
         </div>
         <div className="absolute right-[calc(148/385*100%)] top-[calc(75/353*100%)] aspect-[1052/752] h-[calc(248.33/353*100%)]">
-          <Image src="/images/ftue/step-2.png" alt="step-2" fill />
+          <Image
+            src={step2Image}
+            alt="step-2"
+            fill
+            style={{ imageRendering: 'pixelated' }}
+            placeholder="blur"
+          />
         </div>
       </div>
     </div>
@@ -86,20 +106,24 @@ const images = [
       alt="not-ai"
       width={72}
       height={56}
+      priority
     />
     <Image
       src="/images/ftue/m-is-ai.svg"
       className="absolute bottom-[11px] right-0 block sm:hidden"
       alt="is-ai"
       width={32}
       height={56}
+      priority
     />
     <Image
-      src="/images/ftue/m-step-2.png"
+      src={step2MobileImage}
       className="absolute right-0 top-[calc(80.5/324*100%)] block w-[calc(201/257*100%)] sm:hidden"
       alt="m-step-2"
       width={201}
       height={141}
+      style={{ imageRendering: 'pixelated' }}
+      placeholder="blur"
     />
   </div>,
   <div
@@ -108,17 +132,19 @@ const images = [
   >
     <Image
       className="block sm:hidden"
-      src="/images/ftue/m-step-3.png"
+      src={step3MobileImage}
       alt="step-3"
       fill
-      style={{ objectFit: 'contain' }}
+      style={{ objectFit: 'contain', imageRendering: 'pixelated' }}
+      placeholder="blur"
     />
     <Image
       className="hidden sm:block"
-      src="/images/ftue/step-3.png"
+      src={step3Image}
       alt="step-3"
       fill
-      style={{ objectFit: 'contain' }}
+      style={{ objectFit: 'contain', imageRendering: 'pixelated' }}
+      placeholder="blur"
     />
   </div>,
 ]

app/layout.tsx

@@ -98,6 +98,8 @@ export default function RootLayout({
           <link rel="preload" as="image" href="/cursors/loading.svg" />
           <link rel="preload" as="image" href="/cursors/grab.svg" />
           <link rel="preload" as="image" href="/cursors/grabbing.svg" />
+          <link rel="preload" as="image" href="/images/loading/computer.svg" />
+          <link rel="preload" as="image" href="/images/menu/screen.svg" />
         </head>
         <Suspense>
           <PostHogPageview />