diff --git a/_headers b/_headers
index ad684eb7db5bb..43d211527f7e4 100644
--- a/_headers
+++ b/_headers
@@ -1,17 +1,35 @@
-# Cache static resources for 10 months
+# Default: no cache for HTML files (allow fresh content)
+/*.html
+  Cache-Control: public, max-age=3600, must-revalidate
+
+# Cache immutable assets (with content hash) for 1 year
+/framework-*.js
+/app-*.js
 /*.js
 /*.css
+  Cache-Control: public, max-age=31536000, immutable
+
+# Cache images and fonts for 1 year
 /*.woff2
 /*.webp
 /*.jpeg
 /*.webp
 /*.gif
 /*.svg
-  Cache-Control: public, max-age=25920000
+/images/*
+/fonts/*
+  Cache-Control: public, max-age=31536000, immutable
 
-# Cache HTML files for 10 months
-/*.html
-  Cache-Control: public, max-age=25920000
+# Cache static files
+/static/*
+  Cache-Control: public, max-age=31536000, immutable
+
+# Security headers
+/*
+  X-Frame-Options: SAMEORIGIN
+  X-Content-Type-Options: nosniff
+  X-XSS-Protection: 1; mode=block
+  Referrer-Policy: strict-origin-when-cross-origin
 
 
 
diff --git a/src/components/Pricing/PlanCard/index.js b/src/components/Pricing/PlanCard/index.js
index 67561fc021196..99f00058250aa 100644
--- a/src/components/Pricing/PlanCard/index.js
+++ b/src/components/Pricing/PlanCard/index.js
@@ -18,7 +18,6 @@ const PlanCard = ({ planData, isYearly, currency }) => {
 
   const formatPrice = (price) => {
     const formattedPrice = formatAndConvertPrice(price, currency);
-    // Remove the currency symbol by extracting only the numeric part
     return parseFloat(formattedPrice.replace(/[^0-9.]/g, ""));
   };
   const getCurrencySymbol = (currency) => {
@@ -30,7 +29,6 @@ const PlanCard = ({ planData, isYearly, currency }) => {
       <Container>
         <Row $Hcenter className="plan-card-row">
           {planData.map((x) => (
-            // <Col $xl={4} $lg={2} $md={1} $sm={1} key={x.tier}>
             <Col key={x.tier} className="plan-card-col">
               <div className={`${x.featured ? "featured" : ""} pricing-table`}>
 
@@ -64,7 +62,6 @@ const PlanCard = ({ planData, isYearly, currency }) => {
 
 
                 <Button
-                  // disabled={x.tier === "Team Operator"}
                   $primary
                   className={
                     x.button[0] === "Coming Soon"
@@ -81,7 +78,6 @@ const PlanCard = ({ planData, isYearly, currency }) => {
                 <div className="pricing-features">
                   {x.summary &&
                     x.summary.map((t, index) => {
-                      // Check if this is the first add-on feature
                       const isFirstAddOn = t.categoryOrder === "add-on" &&
                         (index === 0 || x.summary[index - 1].categoryOrder !== "add-on");
 
@@ -115,4 +111,4 @@ const PlanCard = ({ planData, isYearly, currency }) => {
   );
 };
 
-export default PlanCard;
+export default React.memo(PlanCard);
diff --git a/src/components/Pricing/PricingAddons/index.js b/src/components/Pricing/PricingAddons/index.js
index 329b970dea31f..d9f962cea0d30 100644
--- a/src/components/Pricing/PricingAddons/index.js
+++ b/src/components/Pricing/PricingAddons/index.js
@@ -1,5 +1,4 @@
-/* eslint-disable indent */
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useCallback, useMemo } from "react";
 import {
   Container,
   Card,
@@ -41,9 +40,8 @@ import {
 } from "./styles";
 import { formatAndConvertPrice, formatSliderPrice } from "../../../utils/currencies";
 
-export const PricingAddons = ({ isYearly = false, setIsYearly, currency, enterprisePlan }) => {
+export const PricingAddons = React.memo(({ isYearly = false, setIsYearly, currency, enterprisePlan }) => {
   const [selectedAddon, setSelectedAddon] = useState(null);
-  // const [quantity, setQuantity] = useState(1);
   const quantity = 1;
   const [selectedSubAddOns, setSelectedSubAddOns] = useState({});
   const [totalPrice, setTotalPrice] = useState(0);
@@ -62,7 +60,6 @@ export const PricingAddons = ({ isYearly = false, setIsYearly, currency, enterpr
   return learners.toLocaleString("en-US");
 };
 
-  // Helper function to render icons based on type
   const renderIcon = (iconType) => {
     switch (iconType) {
       case "academy":
@@ -128,27 +125,26 @@ export const PricingAddons = ({ isYearly = false, setIsYearly, currency, enterpr
     }
   }, [selectedAddon, quantity, quantityIndex, selectedSubAddOns, isYearly, enterpriseUsers, enterprisePlan]);
 
-  const handleAddonChange = (addonId) => {
+  const handleAddonChange = useCallback((addonId) => {
     const addon = addOns.find((a) => a.id === addonId);
     setSelectedAddon(addon || null);
     setQuantityIndex(0);
 
-    // Always select "academy-theory" if academy is chosen
     if (addon?.id === "academy") {
       setSelectedSubAddOns({ "academy-theory": true });
     } else {
       setSelectedSubAddOns({});
     }
-  };
+  }, [addOns]);
 
-  const handleSubAddOnToggle = (subAddOnId, isChecked) => {
+  const handleSubAddOnToggle = useCallback((subAddOnId, isChecked) => {
     setSelectedSubAddOns(prev => ({
       ...prev,
       [subAddOnId]: isChecked
     }));
-  };
+  }, []);
 
-  const getPlanLinkForAcademy = () => {
+  const getPlanLinkForAcademy = useCallback(() => {
     if (!selectedAddon || selectedAddon.id !== "academy") {
       return { link: "#", name: "Subscribe" };
     }
@@ -180,9 +176,9 @@ export const PricingAddons = ({ isYearly = false, setIsYearly, currency, enterpr
     }
 
     return { link: "#", name: "Subscribe" };
-  };
+  }, [selectedAddon, quantityIndex, isYearly]);
 
-  const getPlanLinkForOtherAddons = () => {
+  const getPlanLinkForOtherAddons = useCallback(() => {
     if (!selectedAddon || selectedAddon.id === "academy") {
       return { link: "#", name: "Subscribe" };
     }
@@ -191,7 +187,7 @@ export const PricingAddons = ({ isYearly = false, setIsYearly, currency, enterpr
       link: "#",
       name: "Subscribe"
     };
-  };
+  }, [selectedAddon]);
 
   return (
     <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
@@ -337,7 +333,6 @@ export const PricingAddons = ({ isYearly = false, setIsYearly, currency, enterpr
                           min={0}
                           valueLabelDisplay="auto"
                           valueLabelFormat={(value) => {
-                            // Determine which sub-addon to show pricing for
                             let targetSubAddon = null;
                             if (selectedSubAddOns["academy-practical"]) {
                               targetSubAddon = selectedAddon?.subAddOns?.find(sub => sub.id === "academy-practical");
@@ -356,7 +351,6 @@ export const PricingAddons = ({ isYearly = false, setIsYearly, currency, enterpr
                             return "";
                           }}
                           max={(() => {
-                            // Determine which sub-addon to use for max value
                             let targetSubAddon = null;
                             if (selectedSubAddOns["academy-practical"]) {
                               targetSubAddon = selectedAddon?.subAddOns?.find(sub => sub.id === "academy-practical");
@@ -576,4 +570,4 @@ export const PricingAddons = ({ isYearly = false, setIsYearly, currency, enterpr
       </CssBaseline>
     </SistentThemeProvider>
   );
-};
+});
diff --git a/src/html.js b/src/html.js
index 12e4c194c7770..80e0240b16c8e 100644
--- a/src/html.js
+++ b/src/html.js
@@ -12,7 +12,6 @@ export default function HTML(props) {
           content="width=device-width, initial-scale=1, shrink-to-fit=no"
         />
         { }
-        <link rel="preconnect" href="https://fonts.gstatic.com/" crossOrigin="anonymous" />
         <link
           rel="preload"
           as="style"
diff --git a/src/reusecore/Blockquote/Blockquote-image/index.js b/src/reusecore/Blockquote/Blockquote-image/index.js
index c52504eebf133..efdefde494eef 100644
--- a/src/reusecore/Blockquote/Blockquote-image/index.js
+++ b/src/reusecore/Blockquote/Blockquote-image/index.js
@@ -10,7 +10,7 @@ const Customers = (props) => {
         <section className="bq-section">
           <div className="type-one-wrapper type-one-wrapper-boxed">
             <div className="bq-quote type-one-quote">
-              <div className="type-one-quote-userpic"><img src={props.image}></img></div>
+              <div className="type-one-quote-userpic"><img src={props.image} alt={props.person} loading="lazy"></img></div>
               <div className="type-one-quote-qmark">
                 &#10077;
               </div>
@@ -41,7 +41,7 @@ const Customers = (props) => {
                   </div>
                 </div>
 
-                <div className="type-two-quote-userpic"><img  src={props.image} alt=""></img></div>
+                <div className="type-two-quote-userpic"><img src={props.image} alt={props.person} loading="lazy"></img></div>
 
                 <div className="type-two-quote-base">
                   <blockquote className="type-two-quote-text">
@@ -71,7 +71,7 @@ const Customers = (props) => {
                     {props.quote}
                   </blockquote>
                   <div className="type-three-quote-meta">
-                    <div className="type-three-quote-userpic"><img src={props.image}></img></div>
+                    <div className="type-three-quote-userpic"><img src={props.image} alt={props.person} loading="lazy"></img></div>
                     <div className="type-three-quote-meta-info">
                       <div className="type-three-quote-author"><cite>{props.person ? props.person : ""}</cite></div>
                       <div className="type-three-quote-source"><span>{props.title ? props.title : ""}</span></div>
@@ -87,4 +87,4 @@ const Customers = (props) => {
   );
 };
 
-export default Customers;
+export default React.memo(Customers);
diff --git a/src/sections/Pricing/comparison.js b/src/sections/Pricing/comparison.js
index 5455f00f77f57..7c439a0f18cd4 100644
--- a/src/sections/Pricing/comparison.js
+++ b/src/sections/Pricing/comparison.js
@@ -2,7 +2,6 @@ import React from "react";
 import styled from "styled-components";
 import details  from "./generateDetails";
 import { Container } from "../../reusecore/Layout";
-// import FeatureDetails from "./collapsible-details";
 import FeatureDetails from "../../components/Pricing/PlanCard/collapsible-details";
 
 
@@ -244,4 +243,4 @@ const Comparison = () => {
   );
 };
 
-export default Comparison;
+export default React.memo(Comparison);
diff --git a/src/sections/Pricing/index.js b/src/sections/Pricing/index.js
index dd28ea12e7317..348feccdf900a 100644
--- a/src/sections/Pricing/index.js
+++ b/src/sections/Pricing/index.js
@@ -1,12 +1,10 @@
-import React, { useState } from "react";
+import React, { useState, Suspense, lazy, useCallback, useMemo, useEffect } from "react";
 import PricingWrapper from "./pricing.style";
-import Comparison from "./comparison";
 import FAQ from "../General/Faq";
 import Reviews from "./review-slider";
 import options from "./generatePlans";
 import PlanCard from "../../components/Pricing/PlanCard";
 import OpenSourceBanner from "./openSource";
-import { PricingAddons } from "../../components/Pricing/PricingAddons";
 import { Box, FormControl, InputLabel, MenuItem, Select, Typography } from "@sistent/sistent";
 import { Currencies } from "../../utils/currencies";
 import {
@@ -14,6 +12,12 @@ import {
   getToggleButtonStyle,
 } from "../../components/Pricing/PricingAddons/styles.js";
 
+const LazyComparison = lazy(() => import("./comparison"));
+const LazyReviews = lazy(() => import("./review-slider"));
+const LazyOpenSourceBanner = lazy(() => import("./openSource"));
+const LazyFAQ = lazy(() => import("../General/Faq"));
+const LazyPricingAddons = lazy(() => import("../../components/Pricing/PricingAddons").then(module => ({ default: module.PricingAddons })));
+
 const customToggleButtonStyles = {
   container: {
     ...toggleButtonStyles.container,
@@ -41,41 +45,47 @@ const getCustomToggleButtonStyle = (isActive, baseStyle) => ({
   },
 });
 
-export const CurrencySelect = ({ currency, setCurrency }) => {
+export const CurrencySelect = React.memo(({ currency, setCurrency }) => {
+  const handleCurrencyChange = useCallback((e) => {
+    setCurrency(e.target.value);
+  }, [setCurrency]);
+
+  const formControlSx = useMemo(() => ({
+    minWidth: 150,
+    "& .MuiInputLabel-root": {
+      color: "white",
+      "&.Mui-focused": { color: "#00B39F" },
+    },
+    "& .MuiOutlinedInput-root": {
+      color: "white",
+      "& .MuiSelect-icon": { color: "white" },
+      "& .MuiOutlinedInput-notchedOutline": { borderColor: "white" },
+      "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
+        borderColor: "#00B39F",
+      },
+    },
+    "&:hover": {
+      "& .MuiInputLabel-root": { color: "#00B39F" },
+      "& .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline": {
+        borderColor: "#00B39F",
+        borderWidth: "2px",
+      },
+    },
+  }), []);
+
+  const currencyEntries = useMemo(() => Object.entries(Currencies), []);
+
   return (
     <FormControl
       variant="outlined"
       size="small"
-      sx={{
-        minWidth: 150,
-        "& .MuiInputLabel-root": {
-          color: "white",
-          "&.Mui-focused": { color: "#00B39F" },
-        },
-        "& .MuiOutlinedInput-root": {
-          color: "white",
-          "& .MuiSelect-icon": { color: "white" },
-          "& .MuiOutlinedInput-notchedOutline": { borderColor: "white" },
-          "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
-            borderColor: "#00B39F",
-          },
-        },
-        "&:hover": {
-          "& .MuiInputLabel-root": { color: "#00B39F" },
-          "& .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline": {
-            borderColor: "#00B39F",
-            borderWidth: "2px",
-          },
-        },
-      }}
+      sx={formControlSx}
     >
       <InputLabel id="currency-selector-label">Currency</InputLabel>
       <Select
         labelId="currency-selector-label"
         value={currency}
-        onChange={(e) => {
-          setCurrency(e.target.value);
-        }}
+        onChange={handleCurrencyChange}
         label="Currency"
         renderValue={(value) => (
           <Box sx={{ display: "flex", alignItems: "center", gap: 1, color: "#fff" }}>
@@ -84,7 +94,7 @@ export const CurrencySelect = ({ currency, setCurrency }) => {
           </Box>
         )}
       >
-        {Object.entries(Currencies).map(([code, { symbol, name }]) => (
+        {currencyEntries.map(([code, { symbol, name }]) => (
           <MenuItem key={code} value={code}>
             <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
               <Typography variant="body1">{symbol}</Typography>
@@ -95,12 +105,29 @@ export const CurrencySelect = ({ currency, setCurrency }) => {
       </Select>
     </FormControl>
   );
-};
+});
 
 const Pricing = () => {
-  // const [monthly, setMonthly] = useState(false);
   const [isYearly, setIsYearly] = useState(false);
   const [currency, setCurrency] = useState("USD");
+  const [renderHeavyComponents, setRenderHeavyComponents] = useState(false);
+
+  const handleYearlyToggle = useCallback((yearly) => {
+    setIsYearly(yearly);
+  }, []);
+
+  const handleCurrencyChange = useCallback((newCurrency) => {
+    setCurrency(newCurrency);
+  }, []);
+
+  const enterprisePlan = useMemo(() => options.filter(opt => opt.tier == "Enterprise")[0], []);
+
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      setRenderHeavyComponents(true);
+    }, 100);
+    return () => clearTimeout(timeout);
+  }, []);
 
   return (
     <PricingWrapper>
@@ -108,17 +135,17 @@ const Pricing = () => {
         <h1 className="header-heading">Plans For Every Team Size</h1>
 
         <div className="header-controls" style={{ display: "flex", "gap": "1rem", alignItems: "center", "justifyContent": "flex-end", width: "85%" }} >
-          <CurrencySelect currency={currency} setCurrency={setCurrency} />
+          <CurrencySelect currency={currency} setCurrency={handleCurrencyChange} />
 
           <Box sx={customToggleButtonStyles.container}>
             <Box
-              onClick={() => setIsYearly(false)}
+              onClick={() => handleYearlyToggle(false)}
               sx={getCustomToggleButtonStyle(!isYearly, customToggleButtonStyles.base)}
             >
               Monthly
             </Box>
             <Box
-              onClick={() => setIsYearly(true)}
+              onClick={() => handleYearlyToggle(true)}
               sx={getCustomToggleButtonStyle(isYearly, customToggleButtonStyles.base)}
             >
               Yearly
@@ -131,17 +158,35 @@ const Pricing = () => {
       <div className="wrapper">
         <PlanCard planData={options} isYearly={isYearly} currency={currency} />
       </div>
-      <div style={{ marginTop: "7rem", marginBottom: "3rem" }}>
-        <PricingAddons isYearly={isYearly} setIsYearly={setIsYearly} currency={currency} enterprisePlan={options.filter(opt => opt.tier == "Enterprise")[0]} />
-      </div>
-      <Comparison />
-      <Reviews />
-      <OpenSourceBanner />
-      <FAQ category={["Pricing", "Billing"]} />
+      
+      {/* Lazy load PricingAddons to reduce TBT - defer until after paint */}
+      {renderHeavyComponents && (
+        <Suspense fallback={<div style={{ height: "500px", marginTop: "7rem", marginBottom: "3rem" }} />}>
+          <div style={{ marginTop: "7rem", marginBottom: "3rem" }}>
+            <LazyPricingAddons isYearly={isYearly} setIsYearly={handleYearlyToggle} currency={currency} enterprisePlan={enterprisePlan} />
+          </div>
+        </Suspense>
+      )}
+      
+      {/* Lazy load below-fold components - defer until after paint */}
+      {renderHeavyComponents && (
+        <>
+          <Suspense fallback={<div style={{ height: "300px" }} />}>
+            <LazyComparison />
+          </Suspense>
+          <Suspense fallback={<div style={{ height: "400px" }} />}>
+            <LazyReviews />
+          </Suspense>
+          <Suspense fallback={<div style={{ height: "150px" }} />}>
+            <LazyOpenSourceBanner />
+          </Suspense>
+          <Suspense fallback={<div style={{ height: "300px" }} />}>
+            <LazyFAQ category={["Pricing", "Billing"]} />
+          </Suspense>
+        </>
+      )}
     </PricingWrapper>
   );
-
 };
 
-
 export default Pricing;
diff --git a/src/sections/Pricing/openSource.js b/src/sections/Pricing/openSource.js
index dfe7370aac27e..5b070a85ddad0 100644
--- a/src/sections/Pricing/openSource.js
+++ b/src/sections/Pricing/openSource.js
@@ -48,4 +48,4 @@ const OpenSourceBannerWrapper = styled.div`
     }
   }
 `;
-export default OpenSourceBanner;
+export default React.memo(OpenSourceBanner);
diff --git a/src/sections/Pricing/review-slider.js b/src/sections/Pricing/review-slider.js
index 9eaa1ff3c2d52..1e0c879c14b42 100644
--- a/src/sections/Pricing/review-slider.js
+++ b/src/sections/Pricing/review-slider.js
@@ -1,5 +1,5 @@
 
-import React, { useRef, useState, useLayoutEffect } from "react";
+import React, { useRef, useState, useLayoutEffect, useMemo, useCallback } from "react";
 import styled from "styled-components";
 import Customers from "../../reusecore/Blockquote/Blockquote-image";
 import Slider from "react-slick";
@@ -28,7 +28,7 @@ const settings = {
   slidesToScroll: 1,
   autoplay: true,
   autoplaySpeed: 2000,
-
+  lazyLoad: "progressive", 
   responsive: [
     {
       breakpoint: 1300,
@@ -92,55 +92,63 @@ const Reviews = () => {
   const [isClient, setIsClient] = useState(false);
   const [slidesToShowState, setSlidesToShowState] = useState(null);
   const sliderRef = useRef(null);
+  const resizeTimeoutRef = useRef(null);
 
-  const mergedSettings = {
+  const computeSlides = useCallback(() => {
+    const w = typeof window !== "undefined" ? (window.innerWidth || document.documentElement.clientWidth) : 1200;
+    if (w <= 800) return 1;
+    if (w <= 1024) return 2;
+    return 3;
+  }, []);
+
+  const mergedSettings = useMemo(() => ({
     ...settings,
     slidesToShow: slidesToShowState || 1,
     slidesToScroll: 1,
     responsive: []
-  };
+  }), [slidesToShowState]);
 
-  const computeSlides = () => {
-    const w = typeof window !== "undefined" ? (window.innerWidth || document.documentElement.clientWidth) : 1200;
-    if (w <= 800) return 1;
-    if (w <= 1024) return 2;
-    return 3;
-  };
+  const onResizeDebounced = useCallback(() => {
+    if (resizeTimeoutRef.current) {
+      clearTimeout(resizeTimeoutRef.current);
+    }
+    resizeTimeoutRef.current = setTimeout(() => {
+      const slides = computeSlides();
+      setSlidesToShowState((prev) => {
+        if (prev !== slides) return slides;
+        return prev;
+      });
+      if (sliderRef.current && sliderRef.current.innerSlider && typeof sliderRef.current.innerSlider.onWindowResized === "function") {
+        if (typeof requestIdleCallback !== "undefined") {
+          requestIdleCallback(() => {
+            if (sliderRef.current?.innerSlider?.onWindowResized) {
+              sliderRef.current.innerSlider.onWindowResized();
+            }
+          });
+        } else {
+          sliderRef.current.innerSlider.onWindowResized();
+        }
+      }
+    }, 200);
+  }, [computeSlides]);
 
   useLayoutEffect(() => {
-
     setIsClient(true);
     setSlidesToShowState(computeSlides());
 
-    let resizeTimeout = null;
-    const onResizeDebounced = () => {
-      clearTimeout(resizeTimeout);
-      resizeTimeout = setTimeout(() => {
-        const slides = computeSlides();
-        setSlidesToShowState((prev) => {
-          if (prev !== slides) return slides;
-          return prev;
-        });
-        if (sliderRef.current && sliderRef.current.innerSlider && typeof sliderRef.current.innerSlider.onWindowResized === "function") {
-          sliderRef.current.innerSlider.onWindowResized();
-        }
-      }, 100);
-    };
-
     const onLoad = () => onResizeDebounced();
 
-    window.addEventListener("resize", onResizeDebounced);
+    window.addEventListener("resize", onResizeDebounced, { passive: true });
     window.addEventListener("load", onLoad);
-    const imgs = document.querySelectorAll(".slider img");
-    imgs.forEach((img) => img.addEventListener("load", onLoad));
 
     return () => {
       window.removeEventListener("resize", onResizeDebounced);
       window.removeEventListener("load", onLoad);
-      imgs.forEach((img) => img.removeEventListener("load", onLoad));
-      clearTimeout(resizeTimeout);
+      if (resizeTimeoutRef.current) {
+        clearTimeout(resizeTimeoutRef.current);
+      }
     };
-  }, []);
+  }, [computeSlides, onResizeDebounced]);
 
   if (!isClient || slidesToShowState === null) return null;
 
@@ -288,4 +296,4 @@ const Reviews = () => {
   );
 };
 
-export default Reviews;
+export default React.memo(Reviews);