perf(website): fix CLS 0.382 -> target <0.1 (#384)

Root causes fixed:
- Stats counter: removed JS animation that reset values to 0 then
  animated up, causing major layout shift. Now renders static values.
- Hero placeholder: added min-height: 600px container around
  client:only React component to reserve space before hydration.
- Logo images: added explicit width/height to navbar (73x40) and
  footer (58x32) logos to prevent layout shift on load.
- Font swap: added font-size-adjust to body (0.5) and headings (0.45)
  to minimize shift when custom fonts replace system fonts.

Co-authored-by: Ajit Pratap Singh <ajitpratapsingh@Ajits-Mac-mini-2655.local>
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

Author: 3 people

website/src/components/Footer.astro

@@ -34,7 +34,7 @@ const columns = [
     <a href="/" class="block mb-8">
       <picture>
         <source srcset="/images/logo.webp" type="image/webp">
-        <img src="/images/logo.png" alt="GoSQLX" class="h-8" />
+        <img src="/images/logo.png" alt="GoSQLX" class="h-8" width="58" height="32" />
       </picture>
     </a>
     <div class="grid grid-cols-1 md:grid-cols-3 gap-8">

website/src/components/Navbar.astro

@@ -14,7 +14,7 @@ const navLinks = [
     <a href="/" class="flex items-center gap-2">
       <picture>
         <source srcset="/images/logo.webp" type="image/webp">
-        <img src="/images/logo.png" alt="GoSQLX" class="h-10" />
+        <img src="/images/logo.png" alt="GoSQLX" class="h-10" width="73" height="40" />
       </picture>
     </a>
 

website/src/components/StatsBar.astro

@@ -1,18 +1,18 @@
 ---
 const stats = [
-  { value: "1.25M+", label: "ops/sec", color: "text-orange-400", target: 1.25 },
-  { value: "<1μs", label: "latency", color: "text-blue-400", target: 1 },
-  { value: "85%", label: "SQL-99", color: "text-green-400", target: 85 },
-  { value: "6", label: "Dialects", color: "text-purple-400", target: 6 },
+  { value: "1.25M+", label: "ops/sec", color: "text-orange-400" },
+  { value: "<1\u00B5s", label: "latency", color: "text-blue-400" },
+  { value: "85%", label: "SQL-99", color: "text-green-400" },
+  { value: "6", label: "Dialects", color: "text-purple-400" },
 ];
 ---
 
 <section class="py-16 border-y border-slate-800">
   <div class="container mx-auto px-4">
     <div class="flex flex-wrap justify-center gap-12 md:gap-20">
       {stats.map((stat) => (
-        <div class="text-center stat-item" data-target={stat.target} data-display={stat.value}>
-          <div class={`text-4xl font-extrabold ${stat.color} stat-value`} style="font-variant-numeric: tabular-nums; min-width: 5ch;">
+        <div class="text-center">
+          <div class={`text-4xl font-extrabold ${stat.color}`} style="font-variant-numeric: tabular-nums; min-width: 5ch; line-height: 1.2;">
             {stat.value}
           </div>
           <div class="text-sm text-slate-400 mt-1">{stat.label}</div>
@@ -21,61 +21,3 @@ const stats = [
     </div>
   </div>
 </section>
-
-<script>
-  function animateStats() {
-    const items = document.querySelectorAll('.stat-item');
-
-    const observer = new IntersectionObserver(
-      (entries) => {
-        entries.forEach((entry) => {
-          if (entry.isIntersecting) {
-            const el = entry.target as HTMLElement;
-            const valueEl = el.querySelector('.stat-value') as HTMLElement;
-            const display = el.dataset.display || '';
-            const target = parseFloat(el.dataset.target || '0');
-
-            // Start from 0 and count up
-            let start = 0;
-            const duration = 1200;
-            const startTime = performance.now();
-
-            function tick(now: number) {
-              const elapsed = now - startTime;
-              const progress = Math.min(elapsed / duration, 1);
-              // Ease out cubic
-              const eased = 1 - Math.pow(1 - progress, 3);
-              const current = start + (target - start) * eased;
-
-              if (progress < 1) {
-                // Show intermediate number
-                if (display.includes('M')) {
-                  valueEl.textContent = current.toFixed(2) + 'M+';
-                } else if (display.includes('%')) {
-                  valueEl.textContent = Math.round(current) + '%';
-                } else if (display.includes('μ')) {
-                  valueEl.textContent = '<' + Math.max(1, Math.round(current)) + 'μs';
-                } else {
-                  valueEl.textContent = String(Math.round(current));
-                }
-                requestAnimationFrame(tick);
-              } else {
-                valueEl.textContent = display;
-              }
-            }
-
-            requestAnimationFrame(tick);
-            observer.unobserve(el);
-          }
-        });
-      },
-      { threshold: 0.3 }
-    );
-
-    items.forEach((item) => observer.observe(item));
-  }
-
-  // Run on load and on Astro page transitions
-  animateStats();
-  document.addEventListener('astro:page-load', animateStats);
-</script>

website/src/pages/index.astro

@@ -9,7 +9,9 @@ import SocialProof from '../components/SocialProof.astro';
 ---
 <BaseLayout title="GoSQLX - High-Performance SQL Parser for Go" description="Production-ready, zero-copy SQL parsing SDK for Go with multi-dialect support">
   <main>
-    <HeroPlayground client:only="react" />
+    <div style="min-height: 600px;">
+      <HeroPlayground client:only="react" />
+    </div>
     <!-- Angled divider -->
     <div class="relative h-16 -mt-1">
       <svg class="absolute bottom-0 w-full h-16" viewBox="0 0 1440 64" preserveAspectRatio="none">

website/src/styles/global.css

@@ -5,10 +5,12 @@
 body {
   @apply bg-slate-900 text-slate-50;
   font-family: 'Instrument Sans', system-ui, sans-serif;
+  font-size-adjust: 0.5;
 }
 
 h1, h2, h3, h4, h5, h6 {
   font-family: 'IBM Plex Mono', monospace;
+  font-size-adjust: 0.45;
 }
 
 button:focus-visible,