Preloading assets

Lavanic · Lavanic · commit 90f3b65219a3 · 2026-03-22T01:58:29.000-05:00
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
@@ -6,8 +6,14 @@ const { title } = Astro.props;
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width" />
+    <meta name="theme-color" content="#29303C" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <title>{title}</title>
+    <!-- Preload logo assets so the fallback appears immediately and gears
+         start decoding before the page finishes rendering everything else -->
+    <link rel="preload" as="image" href="/images/logo_fallback.png" />
+    <link rel="preload" as="image" href="/images/gears.webp" />
+    <link rel="preload" as="image" href="/images/static.png" />
   </head>
   <body>
     <slot />
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -36,8 +36,8 @@ const paddedStamps = Array(copies).fill(stamps).flat();
           <!-- paddedStamps is the base set (repeated until ≥30 entries so it
                overflows the bar). Rendered twice total so the -50% trick loops
                seamlessly — at -50% you're exactly back to where you started. -->
-          {paddedStamps.map(src => <img src={src} alt="" />)}
-          {paddedStamps.map(src => <img src={src} alt="" />)}
+          {paddedStamps.map(src => <img src={src} alt="" loading="lazy" decoding="async" />)}
+          {paddedStamps.map(src => <img src={src} alt="" loading="lazy" decoding="async" />)}
         </div>
       </div>
     </div>
