perf: wave A — cache headers, three.js chunk, client directive downgrades

astro.config.mjs

@@ -41,6 +41,7 @@ export default defineConfig({
           manualChunks: {
             monaco: ['monaco-editor', '@monaco-editor/react'],
             sqljs: ['sql.js'],
+            three: ['three', '@react-three/fiber', '@react-three/drei'],
           },
         },
       },

public/_headers

@@ -10,6 +10,10 @@
 /_astro/*
   Cache-Control: public, max-age=31536000, immutable
 
+# Self-hosted fonts
+/fonts/*
+  Cache-Control: public, max-age=31536000, immutable
+
 # Crystal SVGs are stable per mineral id
 /crystals/*
   Cache-Control: public, max-age=604800, must-revalidate
@@ -18,9 +22,9 @@
 /models/*
   Cache-Control: public, max-age=604800, must-revalidate
 
-# Database is regenerated on each build — short cache, must-revalidate
+# Database is regenerated on each build — short cache plus SWR so revisits don't block
 /minerals.db
-  Cache-Control: public, max-age=3600, must-revalidate
+  Cache-Control: public, max-age=3600, stale-while-revalidate=86400, must-revalidate
 
 # sql.js wasm
 /sql.js/*

src/pages/index.astro

@@ -137,7 +137,7 @@ const iconPaths: Record<string, string> = {
           <div class="aspect-square max-w-md mx-auto">
             <div class="absolute inset-0 rounded-2xl bg-gradient-to-br from-crystal-100/50 to-slate-100/50 -rotate-6"></div>
             <div class="relative rounded-2xl border border-slate-200/50 bg-white/80 backdrop-blur-sm shadow-xl overflow-hidden" style="aspect-ratio: 1;">
-              <HeroCrystal3D client:load mineralName="Diamond" rotationSpeed={0.3} className="w-full h-full" />
+              <HeroCrystal3D client:idle mineralName="Diamond" rotationSpeed={0.3} className="w-full h-full" />
             </div>
           </div>
           <div class="absolute right-2 -bottom-3 sm:-right-2 sm:-bottom-4 bg-white rounded-lg shadow-lg border border-slate-200 px-3 py-1.5 sm:px-4 sm:py-2 max-w-[calc(100%-1rem)]">

src/pages/quiz/index.astro

@@ -131,7 +131,7 @@ const quizSchema = {
         </ul>
       </section>
 
-      <QuizPage client:load learnEntries={entries} />
+      <QuizPage client:idle learnEntries={entries} />
 
     </div>
   </div>

src/pages/tools/advanced.astro

@@ -36,7 +36,7 @@ const tools = [
         </p>
       </header>
 
-      <AdvancedTools client:load />
+      <AdvancedTools client:visible />
 
       <details class="group mt-12 rounded-lg border border-slate-200 bg-slate-50 px-4 py-3 open:bg-white">
         <summary class="cursor-pointer select-none text-sm font-medium text-crystal-700 hover:text-crystal-900 marker:text-slate-400">

src/pages/tools/conversions.astro

@@ -36,7 +36,7 @@ const tools = [
         </p>
       </header>
 
-      <ConversionTools client:load />
+      <ConversionTools client:visible />
 
       <details class="group mt-12 rounded-lg border border-slate-200 bg-slate-50 px-4 py-3 open:bg-white">
         <summary class="cursor-pointer select-none text-sm font-medium text-crystal-700 hover:text-crystal-900 marker:text-slate-400">

src/pages/tools/identification.astro

@@ -34,7 +34,7 @@ const tools = [
         </p>
       </header>
 
-      <IdentificationTools client:load />
+      <IdentificationTools client:visible />
 
       <details class="group mt-12 rounded-lg border border-slate-200 bg-slate-50 px-4 py-3 open:bg-white">
         <summary class="cursor-pointer select-none text-sm font-medium text-crystal-700 hover:text-crystal-900 marker:text-slate-400">

src/pages/tools/index.astro

@@ -39,7 +39,7 @@ const tools = [
         </p>
       </header>
 
-      <ToolsHub client:load />
+      <ToolsHub client:visible />
 
       <details class="group mt-12 rounded-lg border border-slate-200 bg-slate-50 px-4 py-3 open:bg-white">
         <summary class="cursor-pointer select-none text-sm font-medium text-crystal-700 hover:text-crystal-900 marker:text-slate-400">

src/pages/tools/lab.astro

@@ -36,7 +36,7 @@ const tools = [
         </p>
       </header>
 
-      <LabTools client:load />
+      <LabTools client:visible />
 
       <details class="group mt-12 rounded-lg border border-slate-200 bg-slate-50 px-4 py-3 open:bg-white">
         <summary class="cursor-pointer select-none text-sm font-medium text-crystal-700 hover:text-crystal-900 marker:text-slate-400">

src/pages/tools/measurement.astro

@@ -39,7 +39,7 @@ const tools = [
         </p>
       </header>
 
-      <MeasurementTools client:load />
+      <MeasurementTools client:visible />
 
       <details class="group mt-12 rounded-lg border border-slate-200 bg-slate-50 px-4 py-3 open:bg-white">
         <summary class="cursor-pointer select-none text-sm font-medium text-crystal-700 hover:text-crystal-900 marker:text-slate-400">

src/pages/tools/optical.astro

@@ -38,7 +38,7 @@ const tools = [
         </p>
       </header>
 
-      <OpticalTools client:load />
+      <OpticalTools client:visible />
 
       <details class="group mt-12 rounded-lg border border-slate-200 bg-slate-50 px-4 py-3 open:bg-white">
         <summary class="cursor-pointer select-none text-sm font-medium text-crystal-700 hover:text-crystal-900 marker:text-slate-400">