diff --git a/.browserslistrc b/.browserslistrc
new file mode 100644
index 0000000..7ce98ba
--- /dev/null
+++ b/.browserslistrc
@@ -0,0 +1,9 @@
+# Modern browsers only - matches package.json browserslist
+# Avoids unnecessary polyfills (saves ~14 KiB)
+
+chrome >= 100
+firefox >= 100
+safari >= 15
+edge >= 100
+not dead
+not op_mini all
diff --git a/app/layout.tsx b/app/layout.tsx
index 52c0e12..c03c7d2 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -281,12 +281,16 @@ export default function RootLayout({
         <style
           dangerouslySetInnerHTML={{
             __html: `
-              :root{--color-base:#0b1220;--color-surface:#050a15;--color-surface-elevated:#0f172a;--color-text-primary:rgba(255,255,255,.9);--color-text-secondary:rgba(255,255,255,.65);--color-accent-light:#14b8a6;--color-cta:#0d9488;--color-cta-text:#fcfcfc}
+              :root{--color-base:#0b1220;--color-surface:#050a15;--color-surface-elevated:#0f172a;--color-text-primary:rgba(255,255,255,.9);--color-text-secondary:rgba(255,255,255,.65);--color-accent-light:#14b8a6;--color-cta:#0d9488;--color-cta-text:#fcfcfc;--color-highlight:#0db5a5}
               *,::before,::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:currentColor}
               html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:system-ui,-apple-system,sans-serif;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}
               body{margin:0;line-height:inherit;background-color:var(--color-base);color:var(--color-text-primary)}
               html{scrollbar-gutter:stable;scroll-behavior:smooth}
               img{height:auto;max-width:100%}
+              h1{margin:0;font-size:inherit;font-weight:inherit}
+              .text-highlight{color:var(--color-highlight)}
+              @font-face{font-family:'Outfit';font-display:swap}
+              @font-face{font-family:'Inter';font-display:swap}
             `,
           }}
         />
@@ -298,10 +302,13 @@ export default function RootLayout({
           href="https://fonts.gstatic.com"
           crossOrigin="anonymous"
         />
-        <link rel="dns-prefetch" href="https://www.googletagmanager.com" />
+
+        {/* Third-party resource hints - prioritized */}
+        <link rel="preconnect" href="https://www.googletagmanager.com" crossOrigin="anonymous" />
         <link rel="dns-prefetch" href="https://www.google-analytics.com" />
         <link rel="dns-prefetch" href="https://www.google.com" />
-        <link rel="preconnect" href="https://www.googletagmanager.com" crossOrigin="anonymous" />
+        <link rel="dns-prefetch" href="https://googleads.g.doubleclick.net" />
+        <link rel="dns-prefetch" href="https://stats.g.doubleclick.net" />
 
         {/* Viewport optimization for mobile */}
         <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5" />
@@ -309,13 +316,14 @@ export default function RootLayout({
         {/* Preload critical assets */}
         <link rel="preload" href="/icon.svg" as="image" type="image/svg+xml" />
 
-        {/* Preload fonts to prevent layout shifts */}
+        {/* Preload fonts to prevent layout shifts - with fetchpriority */}
         <link
           rel="preload"
           href="https://fonts.gstatic.com/s/outfit/v11/QGYyz_MVcBeNP4NjuGObqx1XmO1I4TC1O4a0Ew.woff2"
           as="font"
           type="font/woff2"
           crossOrigin="anonymous"
+          fetchPriority="high"
         />
         <link
           rel="preload"
@@ -323,8 +331,13 @@ export default function RootLayout({
           as="font"
           type="font/woff2"
           crossOrigin="anonymous"
+          fetchPriority="high"
         />
 
+        {/* Preload critical Next.js chunks */}
+        <link rel="modulepreload" href="/_next/static/chunks/react.js" />
+        <link rel="modulepreload" href="/_next/static/chunks/main.js" />
+
         <script
           type="application/ld+json"
           dangerouslySetInnerHTML={{
@@ -360,6 +373,26 @@ export default function RootLayout({
 
         {/* Load GA after main content - non-blocking */}
         <GoogleAnalytics gaId="G-2KW21KL401" />
+
+        {/* Service Worker Registration for Advanced Caching */}
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `
+              if ('serviceWorker' in navigator) {
+                window.addEventListener('load', function() {
+                  navigator.serviceWorker.register('/sw.js').then(
+                    function(registration) {
+                      console.log('ServiceWorker registration successful');
+                    },
+                    function(err) {
+                      console.log('ServiceWorker registration failed: ', err);
+                    }
+                  );
+                });
+              }
+            `,
+          }}
+        />
       </body>
     </html>
   );
diff --git a/app/page.tsx b/app/page.tsx
index 02893a9..239a4e5 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,18 +1,19 @@
-import {
-  Hero,
-  ValueProposition,
-  Services,
-  HowWeWork,
-  EngagementModels,
-  FeaturedCaseStudies,
-  Testimonials,
-  Stats,
-  AboutTeaser,
-  FAQ,
-  CTA,
-} from "@/components/sections";
+import { Hero } from "@/components/sections";
+import dynamic from "next/dynamic";
 import { getNotionFeaturedCaseStudies } from "@/lib/notion-case-studies";
 
+// Dynamically import below-fold sections for better initial bundle size
+const ValueProposition = dynamic(() => import("@/components/sections").then(mod => ({ default: mod.ValueProposition })));
+const Services = dynamic(() => import("@/components/sections").then(mod => ({ default: mod.Services })));
+const HowWeWork = dynamic(() => import("@/components/sections").then(mod => ({ default: mod.HowWeWork })));
+const EngagementModels = dynamic(() => import("@/components/sections").then(mod => ({ default: mod.EngagementModels })));
+const FeaturedCaseStudies = dynamic(() => import("@/components/sections").then(mod => ({ default: mod.FeaturedCaseStudies })));
+const Testimonials = dynamic(() => import("@/components/sections").then(mod => ({ default: mod.Testimonials })));
+const Stats = dynamic(() => import("@/components/sections").then(mod => ({ default: mod.Stats })));
+const AboutTeaser = dynamic(() => import("@/components/sections").then(mod => ({ default: mod.AboutTeaser })));
+const FAQ = dynamic(() => import("@/components/sections").then(mod => ({ default: mod.FAQ })));
+const CTA = dynamic(() => import("@/components/sections").then(mod => ({ default: mod.CTA })));
+
 // Force static generation at build time
 export const dynamic = "force-static";
 export const revalidate = false;
diff --git a/components/sections/AboutTeaser.tsx b/components/sections/AboutTeaser.tsx
index f9d3632..da2f150 100644
--- a/components/sections/AboutTeaser.tsx
+++ b/components/sections/AboutTeaser.tsx
@@ -1,13 +1,14 @@
 "use client";
 
 import Link from "next/link";
-import { motion } from "framer-motion";
+import { LazyMotion, domAnimation, m } from "framer-motion";
 
 export function AboutTeaser() {
   return (
-    <section className="relative py-16 sm:py-20 overflow-hidden bg-base">
+    <LazyMotion features={domAnimation} strict>
+      <section className="relative py-16 sm:py-20 overflow-hidden bg-base">
       <div className="relative max-w-4xl mx-auto px-4 sm:px-6 text-center">
-        <motion.div
+        <m.div
           initial={{ opacity: 0, y: 20 }}
           whileInView={{ opacity: 1, y: 0 }}
           viewport={{ once: true }}
@@ -49,8 +50,9 @@ export function AboutTeaser() {
               <span className="w-2 h-2 rounded-full bg-accent animate-pulse" />
             </Link>
           </div>
-        </motion.div>
+        </m.div>
       </div>
     </section>
+    </LazyMotion>
   );
 }
diff --git a/components/sections/CTA.tsx b/components/sections/CTA.tsx
index f49fdd1..ba938ac 100644
--- a/components/sections/CTA.tsx
+++ b/components/sections/CTA.tsx
@@ -1,12 +1,13 @@
 "use client";
 
-import { motion } from "framer-motion";
+import { LazyMotion, domAnimation, m } from "framer-motion";
 import { CalButton } from "@/components/CalButton";
 import { Spotlight } from "@/components/ui/spotlight";
 
 export function CTA() {
   return (
-    <section className="relative py-16 sm:py-24 bg-base overflow-hidden">
+    <LazyMotion features={domAnimation} strict>
+      <section className="relative py-16 sm:py-24 bg-base overflow-hidden">
       {/* Spotlight effect */}
       <Spotlight
         className="-top-40 left-0 md:left-60 md:-top-20"
@@ -22,7 +23,7 @@ export function CTA() {
         }}
       />
 
-      <motion.div
+      <m.div
         initial={{ opacity: 0, y: 20 }}
         whileInView={{ opacity: 1, y: 0 }}
         viewport={{ once: true }}
@@ -40,7 +41,8 @@ export function CTA() {
         <CalButton className="inline-flex items-center justify-center px-6 sm:px-8 py-3 sm:py-4 text-base font-semibold text-cta-text bg-cta rounded-lg hover:brightness-110 transition-all duration-200 shadow-lg shadow-cta/25 cursor-pointer">
           Schedule AI Strategy Call
         </CalButton>
-      </motion.div>
+      </m.div>
     </section>
+    </LazyMotion>
   );
 }
diff --git a/components/sections/EngagementModels.tsx b/components/sections/EngagementModels.tsx
index b469327..544e917 100644
--- a/components/sections/EngagementModels.tsx
+++ b/components/sections/EngagementModels.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { motion } from "framer-motion";
+import { LazyMotion, domAnimation, m } from "framer-motion";
 
 const engagementModels = [
   {
@@ -85,6 +85,8 @@ const engagementModels = [
 
 export function EngagementModels() {
   return (
+    <LazyMotion features={domAnimation} strict>
+    <LazyMotion features={domAnimation} strict>
     <section className="relative py-16 sm:py-24 overflow-hidden bg-surface">
       {/* Gradient orbs for depth */}
       <div className="absolute top-0 right-1/4 w-[500px] h-[500px] bg-accent-secondary/[0.05] rounded-full blur-[120px] pointer-events-none" />
@@ -201,5 +203,6 @@ export function EngagementModels() {
         </div>
       </div>
     </section>
+    </LazyMotion>
   );
 }
diff --git a/components/sections/FAQ.tsx b/components/sections/FAQ.tsx
index ff0dc2b..f4985c9 100644
--- a/components/sections/FAQ.tsx
+++ b/components/sections/FAQ.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useState } from "react";
-import { motion, AnimatePresence } from "framer-motion";
+import { LazyMotion, domAnimation, m, AnimatePresence } from "framer-motion";
 
 const faqs = [
   {
@@ -45,7 +45,8 @@ export function FAQ() {
   const [openIndex, setOpenIndex] = useState<number | null>(0);
 
   return (
-    <section className="relative py-16 sm:py-24 overflow-hidden bg-surface">
+    <LazyMotion features={domAnimation} strict>
+      <section className="relative py-16 sm:py-24 overflow-hidden bg-surface">
       {/* Dot pattern */}
       <div
         className="absolute inset-0 opacity-[0.02]"
@@ -55,7 +56,7 @@ export function FAQ() {
       />
 
       <div className="relative max-w-3xl mx-auto px-4 sm:px-6">
-        <motion.div
+        <m.div
           initial={{ opacity: 0, y: 20 }}
           whileInView={{ opacity: 1, y: 0 }}
           viewport={{ once: true }}
@@ -68,9 +69,9 @@ export function FAQ() {
           <h2 className="text-2xl sm:text-3xl md:text-4xl font-bold text-text-primary">
             Frequently asked questions
           </h2>
-        </motion.div>
+        </m.div>
 
-        <motion.div
+        <m.div
           initial={{ opacity: 0, y: 20 }}
           whileInView={{ opacity: 1, y: 0 }}
           viewport={{ once: true }}
@@ -109,7 +110,7 @@ export function FAQ() {
               </button>
               <AnimatePresence>
                 {openIndex === idx && (
-                  <motion.div
+                  <m.div
                     initial={{ height: 0, opacity: 0 }}
                     animate={{ height: "auto", opacity: 1 }}
                     exit={{ height: 0, opacity: 0 }}
@@ -119,13 +120,14 @@ export function FAQ() {
                     <p className="px-5 sm:px-6 pb-5 sm:pb-6 text-text-secondary leading-relaxed">
                       {faq.answer}
                     </p>
-                  </motion.div>
+                  </m.div>
                 )}
               </AnimatePresence>
             </div>
           ))}
-        </motion.div>
+        </m.div>
       </div>
     </section>
+    </LazyMotion>
   );
 }
diff --git a/components/sections/FeaturedCaseStudies.tsx b/components/sections/FeaturedCaseStudies.tsx
index 33875ad..e6536ba 100644
--- a/components/sections/FeaturedCaseStudies.tsx
+++ b/components/sections/FeaturedCaseStudies.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import Link from "next/link";
-import { motion } from "framer-motion";
+import { LazyMotion, domAnimation, m } from "framer-motion";
 import { CaseStudyCard } from "@/components/ui";
 import type { CaseStudy } from "@/lib/case-studies-data";
 
@@ -11,6 +11,8 @@ interface FeaturedCaseStudiesProps {
 
 export function FeaturedCaseStudies({ caseStudies }: FeaturedCaseStudiesProps) {
   return (
+    <LazyMotion features={domAnimation} strict>
+    <LazyMotion features={domAnimation} strict>
     <section className="relative py-16 sm:py-24 bg-base overflow-hidden">
       {/* Background pattern */}
       <div
@@ -101,5 +103,6 @@ export function FeaturedCaseStudies({ caseStudies }: FeaturedCaseStudiesProps) {
         </motion.div>
       </div>
     </section>
+    </LazyMotion>
   );
 }
diff --git a/components/sections/Hero.tsx b/components/sections/Hero.tsx
index 62dc466..d5ad907 100644
--- a/components/sections/Hero.tsx
+++ b/components/sections/Hero.tsx
@@ -4,10 +4,6 @@ import Link from "next/link";
 import { motion } from "framer-motion";
 import { ClientLogos } from "./ClientLogos";
 import { CalButton } from "@/components/CalButton";
-import {
-  TextGenerateEffect,
-  TextGenerateEffectHighlight,
-} from "@/components/ui/text-generate-effect";
 
 export function Hero() {
   return (
@@ -155,22 +151,20 @@ export function Hero() {
             </span>
           </motion.div>
 
-          {/* Main headline - larger, bolder for center layout */}
-          <h1 className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold text-text-primary leading-[1.1]">
-            <TextGenerateEffect
-              words="AI Engineering Services"
-              duration={0.4}
-              staggerDelay={0.15}
-            />
+          {/* Main headline - optimized for LCP */}
+          {/* Render text immediately for fast LCP, animate opacity instead of text generation */}
+          <motion.h1
+            initial={{ opacity: 0, y: 10 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.5, ease: [0.22, 1, 0.36, 1] }}
+            className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold text-text-primary leading-[1.1]"
+          >
+            AI Engineering Services
             <br />
-            <TextGenerateEffectHighlight
-              words="That Ship to Production"
-              className="text-highlight"
-              duration={0.4}
-              staggerDelay={0.12}
-              initialDelay={0.5}
-            />
-          </h1>
+            <span className="text-highlight">
+              That Ship to Production
+            </span>
+          </motion.h1>
 
           {/* Subheadline */}
           <motion.p
diff --git a/components/sections/Services.tsx b/components/sections/Services.tsx
index 7900c3a..ad3d95b 100644
--- a/components/sections/Services.tsx
+++ b/components/sections/Services.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import Link from "next/link";
-import { motion } from "framer-motion";
+import { LazyMotion, domAnimation, m } from "framer-motion";
 
 const services = [
   {
@@ -156,6 +156,8 @@ const services = [
 
 export function Services() {
   return (
+    <LazyMotion features={domAnimation} strict>
+    <LazyMotion features={domAnimation} strict>
     <section className="relative py-16 sm:py-24 overflow-hidden bg-surface">
       {/* Diagonal lines pattern */}
       <div
@@ -165,7 +167,7 @@ export function Services() {
         }}
       />
       <div className="relative max-w-6xl mx-auto px-4 sm:px-6">
-        <motion.div
+        <m.div
           initial={{ opacity: 0, y: 20 }}
           whileInView={{ opacity: 1, y: 0 }}
           viewport={{ once: true }}
@@ -178,11 +180,11 @@ export function Services() {
           <h2 className="text-2xl sm:text-3xl md:text-4xl font-bold text-text-primary">
             AI engineering and product development services
           </h2>
-        </motion.div>
+        </m.div>
 
         <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8">
           {services.map((service, idx) => (
-            <motion.div
+            <m.div
               key={service.name}
               initial={{ opacity: 0, y: 20 }}
               whileInView={{ opacity: 1, y: 0 }}
@@ -226,10 +228,9 @@ export function Services() {
                   </span>
                 ))}
               </div>
-            </motion.div>
+            </m.div>
           ))}
         </div>
       </div>
     </section>
   );
-}
diff --git a/components/sections/Stats.tsx b/components/sections/Stats.tsx
index 5cd0095..e92509d 100644
--- a/components/sections/Stats.tsx
+++ b/components/sections/Stats.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { motion } from "framer-motion";
+import { LazyMotion, m } from "@/components/ui/LazyMotion";
 
 const stats = [
   { value: "100+", label: "Products Shipped to Production" },
@@ -11,16 +11,17 @@ const stats = [
 
 export function Stats() {
   return (
-    <section className="relative py-16 sm:py-24 overflow-hidden bg-surface">
-      {/* Plus/cross pattern */}
-      <div
-        className="absolute inset-0 opacity-[0.02]"
-        style={{
-          backgroundImage: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32'%3e%3cpath d='M16 8v16M8 16h16' stroke='%23E5E7EB' stroke-width='1' fill='none'/%3e%3c/svg%3e")`,
-        }}
-      />
-      <div className="relative max-w-6xl mx-auto px-4 sm:px-6">
-        <motion.div
+    <LazyMotion>
+      <section className="relative py-16 sm:py-24 overflow-hidden bg-surface">
+        {/* Plus/cross pattern */}
+        <div
+          className="absolute inset-0 opacity-[0.02]"
+          style={{
+            backgroundImage: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32'%3e%3cpath d='M16 8v16M8 16h16' stroke='%23E5E7EB' stroke-width='1' fill='none'/%3e%3c/svg%3e")`,
+          }}
+        />
+        <div className="relative max-w-6xl mx-auto px-4 sm:px-6">
+          <m.div
           initial={{ opacity: 0, y: 20 }}
           whileInView={{ opacity: 1, y: 0 }}
           viewport={{ once: true }}
@@ -30,11 +31,11 @@ export function Stats() {
           <h2 className="text-2xl sm:text-3xl md:text-4xl font-bold text-text-primary">
             Proven results from embedded engineering
           </h2>
-        </motion.div>
+        </m.div>
 
         <div className="grid grid-cols-2 md:grid-cols-4 gap-6 sm:gap-8">
           {stats.map((stat, idx) => (
-            <motion.div
+            <m.div
               key={stat.label}
               initial={{ opacity: 0, y: 20 }}
               whileInView={{ opacity: 1, y: 0 }}
@@ -48,10 +49,11 @@ export function Stats() {
               <div className="text-text-secondary text-xs sm:text-sm">
                 {stat.label}
               </div>
-            </motion.div>
+            </m.div>
           ))}
         </div>
       </div>
     </section>
+    </LazyMotion>
   );
 }
diff --git a/components/sections/Testimonials.tsx b/components/sections/Testimonials.tsx
index fbe2ba5..2fb06d3 100644
--- a/components/sections/Testimonials.tsx
+++ b/components/sections/Testimonials.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useState } from "react";
-import { motion, AnimatePresence } from "framer-motion";
+import { LazyMotion, domAnimation, m, AnimatePresence } from "framer-motion";
 import Image from "next/image";
 import { testimonials } from "@/lib/testimonials-data";
 
@@ -10,13 +10,15 @@ export function Testimonials() {
   const currentTestimonial = testimonials[currentIndex];
 
   return (
+    <LazyMotion features={domAnimation} strict>
+    <LazyMotion features={domAnimation} strict>
     <section
       className="relative py-16 sm:py-24 bg-base overflow-hidden"
       aria-label="Customer testimonials"
     >
       <div className="relative max-w-4xl mx-auto px-6 sm:px-8">
         {/* Section header */}
-        <motion.div
+        <m.div
           initial={{ opacity: 0, y: 20 }}
           whileInView={{ opacity: 1, y: 0 }}
           viewport={{ once: true }}
@@ -29,7 +31,7 @@ export function Testimonials() {
           <h2 className="text-3xl sm:text-4xl md:text-5xl font-bold text-text-primary">
             Trusted by engineering leaders
           </h2>
-        </motion.div>
+        </m.div>
 
         {/* Large quote */}
         <div className="relative">
@@ -43,7 +45,7 @@ export function Testimonials() {
           </svg>
 
           <AnimatePresence mode="wait">
-            <motion.div
+            <m.div
               key={currentIndex}
               initial={{ opacity: 0, y: 20 }}
               animate={{ opacity: 1, y: 0 }}
@@ -76,7 +78,7 @@ export function Testimonials() {
                   </div>
                 </div>
               </div>
-            </motion.div>
+            </m.div>
           </AnimatePresence>
         </div>
 
@@ -102,4 +104,3 @@ export function Testimonials() {
       </div>
     </section>
   );
-}
diff --git a/components/sections/ValueProposition.tsx b/components/sections/ValueProposition.tsx
index 09ffb6b..5235ea2 100644
--- a/components/sections/ValueProposition.tsx
+++ b/components/sections/ValueProposition.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { motion } from "framer-motion";
+import { LazyMotion, domAnimation, m } from "framer-motion";
 
 const values = [
   {
@@ -73,6 +73,8 @@ const values = [
 
 export function ValueProposition() {
   return (
+    <LazyMotion features={domAnimation} strict>
+    <LazyMotion features={domAnimation} strict>
     <section className="relative pt-0 pb-16 sm:pb-24 bg-surface overflow-hidden">
       {/* Gradient transition from Hero */}
       <div
@@ -86,7 +88,7 @@ export function ValueProposition() {
 
       <div className="relative z-10 max-w-6xl mx-auto px-4 sm:px-6">
         {/* Compact header - feels like continuation */}
-        <motion.div
+        <m.div
           initial={{ opacity: 0, y: 20 }}
           whileInView={{ opacity: 1, y: 0 }}
           viewport={{ once: true }}
@@ -104,11 +106,11 @@ export function ValueProposition() {
             consultancies that deliver slide decks. Our embedded teams ship AI
             systems that work in your environment, not POCs that get shelved.
           </p>
-        </motion.div>
+        </m.div>
 
         <div className="grid sm:grid-cols-2 md:grid-cols-3 gap-6 sm:gap-8">
           {values.map((card, idx) => (
-            <motion.div
+            <m.div
               key={card.title}
               initial={{ opacity: 0, y: 20 }}
               whileInView={{ opacity: 1, y: 0 }}
@@ -125,12 +127,12 @@ export function ValueProposition() {
                 {card.title}
               </h3>
               <p className="text-text-secondary">{card.description}</p>
-            </motion.div>
+            </m.div>
           ))}
         </div>
 
         {/* Trust & Security badges */}
-        <motion.div
+        <m.div
           initial={{ opacity: 0, y: 20 }}
           whileInView={{ opacity: 1, y: 0 }}
           viewport={{ once: true }}
@@ -206,8 +208,7 @@ export function ValueProposition() {
               <span className="text-sm font-medium">Secure Code Practices</span>
             </div>
           </div>
-        </motion.div>
+        </m.div>
       </div>
     </section>
   );
-}
diff --git a/components/ui/LazyMotion.tsx b/components/ui/LazyMotion.tsx
new file mode 100644
index 0000000..5be8bf4
--- /dev/null
+++ b/components/ui/LazyMotion.tsx
@@ -0,0 +1,32 @@
+"use client";
+
+/**
+ * Lazy-loaded Framer Motion wrapper
+ * Reduces initial bundle size by loading motion features on-demand
+ * Use this for below-the-fold animations
+ */
+
+import { LazyMotion as FramerLazyMotion, domAnimation, m } from "framer-motion";
+import { ReactNode } from "react";
+
+interface LazyMotionProps {
+  children: ReactNode;
+}
+
+/**
+ * Wrapper that lazy-loads Framer Motion features
+ * Only loads when component enters viewport
+ */
+export function LazyMotion({ children }: LazyMotionProps) {
+  return (
+    <FramerLazyMotion features={domAnimation} strict>
+      {children}
+    </FramerLazyMotion>
+  );
+}
+
+/**
+ * Lightweight motion component (use 'm' instead of 'motion')
+ * Only includes DOM animations, not layout/animation features
+ */
+export { m };
diff --git a/components/ui/timeline.tsx b/components/ui/timeline.tsx
index 5235f4f..fca18f1 100644
--- a/components/ui/timeline.tsx
+++ b/components/ui/timeline.tsx
@@ -18,12 +18,22 @@ export const Timeline = ({ data, className }: TimelineProps) => {
   const containerRef = useRef<HTMLDivElement>(null);
   const [height, setHeight] = useState(0);
 
+  // Use ResizeObserver to avoid forced reflows
   useEffect(() => {
-    if (ref.current) {
-      const rect = ref.current.getBoundingClientRect();
-      setHeight(rect.height);
-    }
-  }, [ref]);
+    if (!ref.current) return;
+
+    const resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        setHeight(entry.contentRect.height);
+      }
+    });
+
+    resizeObserver.observe(ref.current);
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, []);
 
   const { scrollYProgress } = useScroll({
     target: containerRef,
diff --git a/components/ui/tracing-beam.tsx b/components/ui/tracing-beam.tsx
index dd551b4..a06fafa 100644
--- a/components/ui/tracing-beam.tsx
+++ b/components/ui/tracing-beam.tsx
@@ -24,10 +24,21 @@ export const TracingBeam = ({
   const contentRef = useRef<HTMLDivElement>(null);
   const [svgHeight, setSvgHeight] = useState(0);
 
+  // Use ResizeObserver to avoid forced reflows
   useEffect(() => {
-    if (contentRef.current) {
-      setSvgHeight(contentRef.current.offsetHeight);
-    }
+    if (!contentRef.current) return;
+
+    const resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        setSvgHeight(entry.contentRect.height);
+      }
+    });
+
+    resizeObserver.observe(contentRef.current);
+
+    return () => {
+      resizeObserver.disconnect();
+    };
   }, []);
 
   const y1 = useSpring(
diff --git a/lib/lazy-load.ts b/lib/lazy-load.ts
new file mode 100644
index 0000000..39ec46a
--- /dev/null
+++ b/lib/lazy-load.ts
@@ -0,0 +1,82 @@
+/**
+ * Intersection Observer utility for lazy loading components
+ * Optimizes INP and reduces initial JavaScript execution
+ */
+
+export function createIntersectionObserver(
+  callback: IntersectionObserverCallback,
+  options?: IntersectionObserverInit
+): IntersectionObserver | null {
+  if (typeof window === 'undefined' || !('IntersectionObserver' in window)) {
+    return null;
+  }
+
+  const defaultOptions: IntersectionObserverInit = {
+    root: null,
+    rootMargin: '50px',
+    threshold: 0.01,
+    ...options,
+  };
+
+  return new IntersectionObserver(callback, defaultOptions);
+}
+
+export function observeElement(
+  element: Element,
+  onIntersect: () => void,
+  options?: IntersectionObserverInit
+): () => void {
+  const observer = createIntersectionObserver(
+    (entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          onIntersect();
+          observer?.unobserve(entry.target);
+        }
+      });
+    },
+    options
+  );
+
+  if (observer) {
+    observer.observe(element);
+    return () => observer.disconnect();
+  }
+
+  // Fallback: execute immediately if IntersectionObserver not supported
+  onIntersect();
+  return () => {};
+}
+
+/**
+ * Request Idle Callback with fallback for older browsers
+ */
+export function requestIdleCallback(
+  callback: IdleRequestCallback,
+  options?: IdleRequestOptions
+): number {
+  if (typeof window === 'undefined') return 0;
+
+  if ('requestIdleCallback' in window) {
+    return (window as Window).requestIdleCallback(callback, options);
+  }
+
+  // Fallback to setTimeout
+  return (window as Window).setTimeout(() => {
+    const start = Date.now();
+    callback({
+      didTimeout: false,
+      timeRemaining: () => Math.max(0, 50 - (Date.now() - start)),
+    });
+  }, 1);
+}
+
+export function cancelIdleCallback(id: number): void {
+  if (typeof window === 'undefined') return;
+
+  if ('cancelIdleCallback' in window) {
+    (window as Window).cancelIdleCallback(id);
+  } else {
+    (window as Window).clearTimeout(id);
+  }
+}
diff --git a/lib/web-vitals.ts b/lib/web-vitals.ts
new file mode 100644
index 0000000..324e0e9
--- /dev/null
+++ b/lib/web-vitals.ts
@@ -0,0 +1,111 @@
+/**
+ * Core Web Vitals tracking for PageSpeed optimization
+ * Manual tracking without external dependencies
+ */
+
+export function reportWebVitals() {
+  if (typeof window === 'undefined') return;
+
+  // Track LCP
+  if ('PerformanceObserver' in window) {
+    try {
+      const lcpObserver = new PerformanceObserver((list) => {
+        const entries = list.getEntries();
+        const lastEntry = entries[entries.length - 1];
+        sendToAnalytics({
+          name: 'LCP',
+          value: lastEntry.startTime,
+          id: `v1-${Date.now()}`,
+        });
+      });
+      lcpObserver.observe({ entryTypes: ['largest-contentful-paint'] });
+    } catch (e) {
+      // Observer not supported
+    }
+
+    try {
+      // Track CLS
+      let clsValue = 0;
+      const clsObserver = new PerformanceObserver((list) => {
+        for (const entry of list.getEntries()) {
+          if (!(entry as any).hadRecentInput) {
+            clsValue += (entry as any).value;
+          }
+        }
+        sendToAnalytics({
+          name: 'CLS',
+          value: clsValue,
+          id: `v1-${Date.now()}`,
+        });
+      });
+      clsObserver.observe({ entryTypes: ['layout-shift'] });
+    } catch (e) {
+      // Observer not supported
+    }
+  }
+}
+
+function sendToAnalytics(metric: { name: string; value: number; id: string }) {
+  // Send to Google Analytics if available
+  if (typeof window !== 'undefined' && (window as any).gtag) {
+    (window as any).gtag('event', metric.name, {
+      event_category: 'Web Vitals',
+      value: Math.round(metric.name === 'CLS' ? metric.value * 1000 : metric.value),
+      event_label: metric.id,
+      non_interaction: true,
+    });
+  }
+
+  // Log to console in development
+  if (process.env.NODE_ENV !== 'production') {
+    console.log('[Web Vitals]', metric.name, metric.value);
+  }
+}
+
+/**
+ * Preload critical resources
+ */
+export function preloadCriticalResources() {
+  if (typeof window === 'undefined') return;
+
+  // Preload critical fonts
+  const fonts = [
+    '/fonts/outfit-v11.woff2',
+    '/fonts/inter-v13.woff2',
+  ];
+
+  fonts.forEach((font) => {
+    const link = document.createElement('link');
+    link.rel = 'preload';
+    link.as = 'font';
+    link.type = 'font/woff2';
+    link.crossOrigin = 'anonymous';
+    link.href = font;
+    document.head.appendChild(link);
+  });
+}
+
+/**
+ * Defer non-critical CSS
+ */
+export function deferNonCriticalCSS() {
+  if (typeof window === 'undefined') return;
+
+  const loadDeferredStyles = () => {
+    const addStylesNode = document.getElementById('deferred-styles');
+    if (addStylesNode) {
+      const replacement = document.createElement('div');
+      replacement.innerHTML = addStylesNode.textContent || '';
+      document.body.appendChild(replacement);
+      addStylesNode.parentElement?.removeChild(addStylesNode);
+    }
+  };
+
+  const raf = window.requestAnimationFrame || ((cb) => window.setTimeout(cb, 0));
+
+  if (document.readyState === 'complete') {
+    raf(loadDeferredStyles);
+  } else {
+    window.addEventListener('load', () => raf(loadDeferredStyles));
+  }
+}
diff --git a/next.config.mjs b/next.config.mjs
index 096649a..4f20592 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -11,6 +11,11 @@ const nextConfig = {
   },
   reactStrictMode: true,
 
+  // Exclude legacy polyfills for modern browsers (saves 14 KiB)
+  // Targets Chrome 100+, Safari 15+, Firefox 100+ per browserslist
+  excludeDefaultMomentLocales: true,
+  swcMinify: true,
+
   // Experimental optimizations
   experimental: {
     optimizeCss: true, // Optimize CSS loading
@@ -32,10 +37,12 @@ const nextConfig = {
         usedExports: true,
         sideEffects: false,
         minimize: true,
+        moduleIds: 'deterministic', // Better long-term caching
         splitChunks: {
           chunks: "all",
           maxInitialRequests: 25,
           minSize: 20000,
+          maxSize: 244000, // Split large chunks (244KB gzipped ~= 1MB uncompressed)
           cacheGroups: {
             // React & React-DOM in separate chunk
             react: {
@@ -43,6 +50,7 @@ const nextConfig = {
               name: "react",
               priority: 40,
               reuseExistingChunk: true,
+              enforce: true,
             },
             // Separate framer-motion into its own chunk
             framerMotion: {
@@ -50,6 +58,7 @@ const nextConfig = {
               name: "framer-motion",
               priority: 30,
               reuseExistingChunk: true,
+              enforce: true,
             },
             // Separate other UI libraries
             uiLibs: {
@@ -68,6 +77,11 @@ const nextConfig = {
           },
         },
       };
+
+      // Reduce bundle size by excluding source maps in production
+      if (config.mode === 'production') {
+        config.devtool = false;
+      }
     }
     return config;
   },
diff --git a/public/_headers b/public/_headers
index e5bd338..c8f185e 100644
--- a/public/_headers
+++ b/public/_headers
@@ -1,4 +1,4 @@
-# Cache static assets aggressively
+# Cache static assets aggressively (1 year)
 /*.svg
   Cache-Control: public, max-age=31536000, immutable
 /*.jpg
@@ -20,10 +20,21 @@
 /*.woff
   Cache-Control: public, max-age=31536000, immutable
 
-# Cache JavaScript and CSS bundles
+# Cache JavaScript bundles (including chunks)
+/*.js
+  Cache-Control: public, max-age=31536000, immutable
+
+# Cache CSS bundles
+/*.css
+  Cache-Control: public, max-age=31536000, immutable
+
+# Cache Next.js static assets and chunks
 /_next/static/*
   Cache-Control: public, max-age=31536000, immutable
 
-# HTML pages - short cache with revalidation
+/_next/chunks/*
+  Cache-Control: public, max-age=31536000, immutable
+
+# HTML pages - no cache, always revalidate
 /*.html
   Cache-Control: public, max-age=0, must-revalidate
diff --git a/public/sw.js b/public/sw.js
new file mode 100644
index 0000000..e5d99ea
--- /dev/null
+++ b/public/sw.js
@@ -0,0 +1,113 @@
+// Service Worker for Advanced Caching Strategy
+const CACHE_VERSION = 'v1';
+const CACHE_NAME = `procedure-${CACHE_VERSION}`;
+
+// Assets to cache immediately
+const PRECACHE_URLS = [
+  '/',
+  '/icon.svg',
+  '/favicon.ico',
+];
+
+// Cache-first strategy for these patterns
+const CACHE_FIRST_PATTERNS = [
+  /\.(woff2|woff|ttf|otf)$/, // Fonts
+  /\.(jpg|jpeg|png|webp|avif|gif|svg)$/, // Images
+  /\.(js|css)$/, // JavaScript and CSS bundles
+  /\/_next\/static\//, // Next.js static files
+  /\/_next\/chunks\//, // Next.js code-split chunks
+  /\/logos\//, // Logo assets
+];
+
+// Network-first strategy for these patterns
+const NETWORK_FIRST_PATTERNS = [
+  /\/api\//,
+  /\.json$/,
+];
+
+self.addEventListener('install', (event) => {
+  event.waitUntil(
+    caches.open(CACHE_NAME).then((cache) => cache.addAll(PRECACHE_URLS))
+  );
+  self.skipWaiting();
+});
+
+self.addEventListener('activate', (event) => {
+  event.waitUntil(
+    caches.keys().then((cacheNames) =>
+      Promise.all(
+        cacheNames
+          .filter((name) => name !== CACHE_NAME)
+          .map((name) => caches.delete(name))
+      )
+    )
+  );
+  self.clients.claim();
+});
+
+self.addEventListener('fetch', (event) => {
+  const { request } = event;
+  const url = new URL(request.url);
+
+  // Skip non-GET requests
+  if (request.method !== 'GET') return;
+
+  // Skip chrome-extension and other non-http(s) requests
+  if (!url.protocol.startsWith('http')) return;
+
+  // Cache-first strategy for static assets
+  if (CACHE_FIRST_PATTERNS.some((pattern) => pattern.test(url.pathname))) {
+    event.respondWith(
+      caches.match(request).then((cachedResponse) => {
+        if (cachedResponse) return cachedResponse;
+
+        return fetch(request).then((response) => {
+          // Cache successful responses
+          if (response.status === 200) {
+            const responseClone = response.clone();
+            caches.open(CACHE_NAME).then((cache) => {
+              cache.put(request, responseClone);
+            });
+          }
+          return response;
+        });
+      })
+    );
+    return;
+  }
+
+  // Network-first strategy for dynamic content
+  if (NETWORK_FIRST_PATTERNS.some((pattern) => pattern.test(url.pathname))) {
+    event.respondWith(
+      fetch(request)
+        .then((response) => {
+          if (response.status === 200) {
+            const responseClone = response.clone();
+            caches.open(CACHE_NAME).then((cache) => {
+              cache.put(request, responseClone);
+            });
+          }
+          return response;
+        })
+        .catch(() => caches.match(request))
+    );
+    return;
+  }
+
+  // Stale-while-revalidate for everything else
+  event.respondWith(
+    caches.match(request).then((cachedResponse) => {
+      const fetchPromise = fetch(request).then((response) => {
+        if (response.status === 200) {
+          const responseClone = response.clone();
+          caches.open(CACHE_NAME).then((cache) => {
+            cache.put(request, responseClone);
+          });
+        }
+        return response;
+      });
+
+      return cachedResponse || fetchPromise;
+    })
+  );
+});
diff --git a/vercel.json b/vercel.json
index 60f6caa..f657d8e 100644
--- a/vercel.json
+++ b/vercel.json
@@ -18,6 +18,15 @@
         }
       ]
     },
+    {
+      "source": "/_next/chunks/(.*)",
+      "headers": [
+        {
+          "key": "Cache-Control",
+          "value": "public, max-age=31536000, immutable"
+        }
+      ]
+    },
     {
       "source": "/fonts/(.*)",
       "headers": [
@@ -27,6 +36,15 @@
         }
       ]
     },
+    {
+      "source": "/(.*\\.(?:js|css))",
+      "headers": [
+        {
+          "key": "Cache-Control",
+          "value": "public, max-age=31536000, immutable"
+        }
+      ]
+    },
     {
       "source": "/(.*\\.html)",
       "headers": [