diff --git a/docusaurus.config.ts b/docusaurus.config.ts
index da14145d82..46f65b0741 100644
--- a/docusaurus.config.ts
+++ b/docusaurus.config.ts
@@ -14,14 +14,22 @@ export default {
   tagline: "GraphQL platform engineered for scale",
   headTags: [
     {
-      tagName: "script",
+      tagName: "link",
       attributes: {
-        id: "chatbotscript",
-        "data-accountid": "CZPG9aVdtk59Tjz4SMTu8w==",
-        "data-websiteid": "75VGI0NlBqessD4BQn2pFg==",
-        src: "https://app.robofy.ai/bot/js/common.js?v=" + new Date().getTime(),
+        rel: "preload",
+        as: "font",
+        type: "font/woff2",
+        href: "/fonts/space-grotesk-latin.woff2",
+        crossorigin: "anonymous",
       },
     },
+    {
+      tagName: "script",
+      attributes: {},
+      innerHTML: `
+!function(){function n(){if(document.getElementById("chatbotscript"))return;var t=document.createElement("script");t.id="chatbotscript",t.async=!0,t.defer=!0,t.dataset.accountid="CZPG9aVdtk59Tjz4SMTu8w==",t.dataset.websiteid="75VGI0NlBqessD4BQn2pFg==",t.src="https://app.robofy.ai/bot/js/common.js",document.head.appendChild(t)}function t(){window.setTimeout(n,1e4)}["pointerdown","keydown","touchstart"].forEach(function(t){window.addEventListener(t,n,{once:!0,passive:!0,capture:!0})}),"loading"===document.readyState?window.addEventListener("load",t,{once:!0}):t()}();
+`,
+    },
     {
       tagName: "script",
       attributes: {
@@ -181,6 +189,7 @@ export default {
         onInlineAuthors: "throw",
       },
     ],
+    ["./plugins/homepage-performance-plugin.ts", {}],
     [
       "@docusaurus/plugin-content-docs",
       {
diff --git a/plugins/homepage-performance-plugin.ts b/plugins/homepage-performance-plugin.ts
new file mode 100644
index 0000000000..377a80761d
--- /dev/null
+++ b/plugins/homepage-performance-plugin.ts
@@ -0,0 +1,69 @@
+import type {Plugin} from "@docusaurus/types"
+import fs from "fs/promises"
+import path from "path"
+
+// Keep this in sync with the above-the-fold homepage styles in src/css/custom.css
+// and the Tailwind classes used by the navbar, hero, and hero CTAs. The full
+// stylesheet is loaded after first interaction/scroll; this is what keeps the
+// homepage readable before that file arrives.
+const criticalHomepageCss = `
+@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:400 700;font-display:swap;src:url("/fonts/space-grotesk-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:"Space Mono";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/space-mono-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}:root{--ifm-font-family-base:"Space Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;--ifm-color-brand:#fdea2e;--ifm-color-brand-dark-100:#121315;--ifm-color-brand-dark-500:#121315;--ifm-color-brand-light-100:#fff;--ifm-navbar-height:4.5rem;--header-height:4.5rem}*{box-sizing:border-box}html{background:#fff;color:#121315;font-family:var(--ifm-font-family-base);line-height:1.5;-webkit-font-smoothing:antialiased;text-size-adjust:100%}body{margin:0;overflow-x:hidden;word-wrap:break-word}a{color:inherit;text-decoration:none}img,svg{max-width:100%}button{font:inherit}.skipToContent_fXgn,.navbar-sidebar__backdrop,.dropdown__menu,html[data-theme=light] .navbar__logo img[class*=themedComponent--dark],html[data-theme=dark] .navbar__logo img[class*=themedComponent--light],.hidden,.lg\\:flex.search-icon-navbar{display:none}.navbar{align-items:center;background:#fff;box-shadow:#e7e7e7 0 0 0 1px;display:flex;height:var(--ifm-navbar-height);padding:0 1rem;position:sticky;top:0;z-index:200}.navbar__inner{align-items:center;display:flex;margin:0 auto;position:relative;width:100%}.navbar__items{align-items:center;display:flex;justify-content:flex-end;margin-left:auto}.navbar__items--right{margin-left:0}.navbar__brand{align-items:center;display:flex;margin-right:auto}.navbar__logo{align-items:center;display:flex;height:2.25rem}.navbar__logo img{display:block;height:2.25rem;max-width:11rem}.navbar__toggle{align-items:center;background:transparent;border:0;color:#121315;display:flex;padding:.25rem}.navbar__item{display:none}.main-wrapper{min-height:calc(100vh - var(--ifm-navbar-height))}.grid{display:grid}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.relative{position:relative}.absolute{position:absolute}.inset-0{inset:0}.w-full{width:100%}.h-full{height:100%}.h-12{height:3rem}.max-w-xs{max-width:20rem}.max-w-md{max-width:28rem}.max-w-7xl{max-width:80rem}.mx-auto{margin-left:auto;margin-right:auto}.mt-8{margin-top:2rem}.mt-SPACE_06{margin-top:24px}.mb-0{margin-bottom:0}.px-8{padding-left:2rem;padding-right:2rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.\\!pb-0{padding-bottom:0!important}.px-SPACE_02{padding-left:8px;padding-right:8px}.px-SPACE_06{padding-left:24px;padding-right:24px}.py-SPACE_03{padding-top:12px;padding-bottom:12px}.gap-x-SPACE_03{column-gap:12px}.space-x-SPACE_04>:not([hidden])~:not([hidden]){margin-left:16px}.rounded-md{border-radius:.375rem}.rounded-lg{border-radius:.5rem}.border{border-width:1px}.border-2{border-width:2px}.border,.border-2{border-style:solid}.border-tailCall-border-dark-100{border-color:#121315}.bg-tailCall-yellow{background:#fdea2e}.bg-tailCall-dark-500{background:#121315}.bg-white{background:#fff}.text-tailCall-light-100{color:#fff}.text-tailCall-dark-500{color:#121315}.font-bold{font-weight:700}.font-normal{font-weight:400}.cursor-pointer{cursor:pointer}.hero-banner-title{color:#121315;margin:0}.hero-banner-sub-title{color:#545556}.text-title-large{font-size:32px;font-weight:700;letter-spacing:-1px;line-height:41.6px}.text-content-small{font-size:16px;font-weight:400;letter-spacing:-.02em;line-height:24px}main.grid{justify-content:center}main section{width:100%}main a.group{align-items:center;border-radius:.5rem;display:flex;font-size:16px;font-weight:700;justify-content:center;line-height:24px;min-width:0;overflow:hidden;padding:12px 24px;position:relative;text-align:center}main a.group span{position:relative;z-index:20}.w-full.group{width:100%}main a.group .absolute{border-radius:.5rem;z-index:0}picture{display:block}.hero-visual{aspect-ratio:1400/672;max-width:80rem;width:100%}main picture img{aspect-ratio:1400/672;display:block;height:auto;margin-left:auto;margin-right:auto;object-fit:contain;width:100%}@media (min-width:640px){.hidden.sm\\:flex,.sm\\:flex{display:flex}.sm\\:hidden{display:none}.sm\\:items-center{align-items:center}.sm\\:text-center{text-align:center}.sm\\:m-auto{margin:auto}.sm\\:mt-SPACE_04{margin-top:16px}.sm\\:mt-SPACE_10{margin-top:40px}.sm\\:max-w-2xl{max-width:42rem}.sm\\:max-w-5xl{max-width:64rem}.sm\\:rounded-2xl{border-radius:1rem}.sm\\:rounded-xl{border-radius:.75rem}.sm\\:h-16{height:4rem}.sm\\:px-SPACE_08{padding-left:32px;padding-right:32px}.sm\\:py-SPACE_04{padding-top:16px;padding-bottom:16px}.sm\\:space-x-SPACE_06>:not([hidden])~:not([hidden]){margin-left:24px}.sm\\:text-title-small{font-size:20px;font-weight:700;line-height:26px}.sm\\:text-content-medium{font-size:20px;line-height:32px}.sm\\:text-display-small{font-size:56px;font-weight:700;letter-spacing:-2px;line-height:67.2px}.sm\\:h-full{height:100%}.w-\\[228px\\]{width:228px}}@media (min-width:768px){.md\\:justify-center{justify-content:center}.md\\:px-24{padding-left:6rem;padding-right:6rem}}@media (min-width:997px){:root{--ifm-navbar-height:6.5rem;--header-height:6.5rem}.navbar{height:6.5rem}.navbar__items{justify-content:center;margin-left:0}.navbar__brand{position:absolute;left:0}.navbar__item{display:flex}.navbar__toggle{display:none}.navbar__link{font-size:1.25rem;font-weight:700;margin-right:2.5rem;padding:0 .5rem}.navbar__items--right{position:absolute;right:14%;top:50%;transform:translateY(-50%)}.lg\\:px-36{padding-left:9rem;padding-right:9rem}.lg\\:py-20{padding-top:5rem;padding-bottom:5rem}.lg\\:px-SPACE_10{padding-left:40px;padding-right:40px}.lg\\:py-SPACE_05{padding-top:20px;padding-bottom:20px}.lg\\:text-content-large{font-size:24px;line-height:36px}.lg\\:text-display-large{font-size:96px;font-weight:700;letter-spacing:-3px;line-height:105.6px}.lg\\:block{display:block}.lg\\:hidden{display:none}}
+`.trim()
+
+function stylesheetLoader(stylesheetHref: string): string {
+  return `<script data-homepage-css-loader>
+!function(){var e=${JSON.stringify(stylesheetHref)},t=!1;function n(){if(t)return;t=!0;var n=document.createElement("link");n.rel="stylesheet",n.href=e,document.head.appendChild(n)}function r(){window.setTimeout(n,1e4)}["pointerdown","keydown","touchstart","wheel","scroll"].forEach(function(e){window.addEventListener(e,n,{once:!0,passive:!0,capture:!0})}),"complete"===document.readyState?r():window.addEventListener("load",r,{once:!0})}();
+</script>`
+}
+
+function scriptLoader(scriptUrls: string[]): string {
+  return `<script data-homepage-script-loader>
+!function(){var e=${JSON.stringify(scriptUrls)},n=!1,t=null;function r(){return t||(t=e.reduce(function(e,n){return e.then(function(){return new Promise(function(e){var t=document.createElement("script");t.src=n,t.async=!1,t.defer=!0,t.onload=e,t.onerror=e,document.body.appendChild(t)})})},Promise.resolve()).then(function(){n=!0})),t}function o(){window.setTimeout(r,5e3)}["pointerdown","keydown","touchstart","wheel","scroll"].forEach(function(e){window.addEventListener(e,r,{once:!0,passive:!0,capture:!0})}),document.addEventListener("click",function(e){if(n)return;var t=e.target&&e.target.closest&&e.target.closest("button,[role=button]");t&&(e.preventDefault(),e.stopImmediatePropagation(),r().then(function(){setTimeout(function(){t.click()},1e3)}))},!0),"complete"===document.readyState?o():window.addEventListener("load",o,{once:!0})}();
+</script>`
+}
+
+function optimizeHomepageHtml(html: string): string {
+  html = html.replace(/<script data-rh="true">function insertBanner\(\)[\s\S]*?<\/script>/, "")
+
+  const scriptUrls: string[] = []
+  html = html.replace(
+    /<script\b(?=[^>]*\bsrc=(["'])([^"']*\/assets\/js\/(?:runtime~main|main)\.[^"']+\.js)\1)[^>]*>\s*<\/script>/g,
+    (_match, _quote, scriptUrl) => {
+      scriptUrls.push(scriptUrl)
+      return ""
+    },
+  )
+
+  if (scriptUrls.length === 0) {
+    throw new Error("homepage-performance-plugin: expected Docusaurus runtime/main scripts in homepage HTML")
+  }
+
+  const stylesheetMatch = html.match(
+    /<link\b(?=[^>]*\brel=(["'])[^"']*\bstylesheet\b[^"']*\1)(?=[^>]*\bhref=(["'])([^"']*\/assets\/css\/styles\.[^"']+\.css)\2)[^>]*\/?>/,
+  )
+
+  if (!stylesheetMatch) {
+    throw new Error("homepage-performance-plugin: expected Docusaurus stylesheet in homepage HTML")
+  }
+
+  const stylesheetHref = stylesheetMatch[3]
+  html = html.replace(
+    stylesheetMatch[0],
+    `<style data-homepage-critical>${criticalHomepageCss}</style><noscript><link rel="stylesheet" href="${stylesheetHref}"></noscript>`,
+  )
+
+  return html.replace("</body>", `${stylesheetLoader(stylesheetHref)}${scriptLoader(scriptUrls)}</body>`)
+}
+
+async function homepagePerformancePlugin(): Promise<Plugin<void>> {
+  return {
+    name: "homepage-performance-plugin",
+    async postBuild({outDir}) {
+      const homepagePath = path.join(outDir, "index.html")
+      const html = await fs.readFile(homepagePath, "utf8")
+      await fs.writeFile(homepagePath, optimizeHomepageHtml(html))
+    },
+  }
+}
+
+module.exports = homepagePerformancePlugin
diff --git a/src/components/home/Banner.tsx b/src/components/home/Banner.tsx
index 50c3ea6817..ef49c3242f 100644
--- a/src/components/home/Banner.tsx
+++ b/src/components/home/Banner.tsx
@@ -2,11 +2,9 @@ import React from "react"
 import Heading from "@theme/Heading"
 
 import LinkButton from "../shared/LinkButton"
-import HeroImage from "@site/static/images/home/hero.svg"
 import {analyticsHandler} from "@site/src/utils"
-import {Theme, codeSandboxUrl} from "@site/src/constants"
+import {Theme} from "@site/src/constants"
 import {pageLinks} from "@site/src/constants/routes"
-import Link from "@docusaurus/Link"
 import Section from "../shared/Section"
 
 const Banner = (): JSX.Element => {
@@ -59,7 +57,19 @@ const Banner = (): JSX.Element => {
           </div>
         </div>
       </Section>
-      <HeroImage className="object-contain h-full sm:h-full w-full mt-8 max-w-7xl" />
+      <picture className="hero-visual mt-8 max-w-7xl w-full">
+        <source media="(max-width: 639px)" srcSet="/images/home/hero-mobile.webp" type="image/webp" />
+        <img
+          src="/images/home/hero.svg"
+          width={1400}
+          height={672}
+          alt="Tailcall GraphQL platform workflow"
+          className="object-contain h-auto sm:h-full w-full"
+          loading="eager"
+          decoding="async"
+          fetchPriority="high"
+        />
+      </picture>
     </main>
   )
 }
diff --git a/src/components/home/BenefitsCard.tsx b/src/components/home/BenefitsCard.tsx
index e330d0ddcc..ca4ca623ca 100644
--- a/src/components/home/BenefitsCard.tsx
+++ b/src/components/home/BenefitsCard.tsx
@@ -18,9 +18,16 @@ const BenefitsCard = (): JSX.Element => {
             )}
             key={item.id}
             href={item.redirection_url}
+            aria-label={item.title}
           >
             <div className="flex-shrink-0 mb-4 md:mb-0 md:mr-6">
-              <img src={item.image} alt="Image Describing Why Tailcall" className="w-16 h-16 object-contain" />
+              <img
+                src={item.image}
+                alt="Image Describing Why Tailcall"
+                className="w-16 h-16 object-contain"
+                loading="lazy"
+                decoding="async"
+              />
             </div>
             <div className="flex-grow">
               <p className="text-title-small sm:text-title-large text-white mb-2 flex items-center justify-between">
diff --git a/src/components/home/ChooseTailcall.tsx b/src/components/home/ChooseTailcall.tsx
index 8446fd151f..c72dcc1f2a 100644
--- a/src/components/home/ChooseTailcall.tsx
+++ b/src/components/home/ChooseTailcall.tsx
@@ -16,7 +16,13 @@ const ChooseTailcall = (): JSX.Element => {
             key={item.id}
           >
             <div className="h-16 w-16 sm:w-full sm:h-full">
-              <img src={item.image} alt="Image Describing Why Tailcall" className="max-w-[72px] sm:max-w-[110px]" />
+              <img
+                src={item.image}
+                alt="Image Describing Why Tailcall"
+                className="max-w-[72px] sm:max-w-[110px]"
+                loading="lazy"
+                decoding="async"
+              />
             </div>
 
             <div>
@@ -33,7 +39,7 @@ const ChooseTailcall = (): JSX.Element => {
             className="flex w-fit p-6 border-2 border-solid border-tailCall-border-dark-300 rounded-xl md:items-center md:justify-center cursor-pointer hover:no-underline text-tailCall-light-300 hover:text-tailCall-light-300 hover:border-[#FDEA2E] benefits-drop-shadow"
             key={item.id}
           >
-            <img src={item.image} alt={`${item.title} Image`} height={24} width={24} />
+            <img src={item.image} alt={`${item.title} Image`} height={24} width={24} loading="lazy" decoding="async" />
             <span className="text-content-small lg:text-title-tiny ml-2">{item.title}</span>
           </Link>
         ))}
diff --git a/src/components/home/Configuration.tsx b/src/components/home/Configuration.tsx
index 69bc9cd3fd..56ca5ad430 100644
--- a/src/components/home/Configuration.tsx
+++ b/src/components/home/Configuration.tsx
@@ -1,10 +1,10 @@
 import React from "react"
 import Heading from "@theme/Heading"
-import CodeBlock from "@theme/CodeBlock"
-import Tabs from "@theme/Tabs"
-import TabItem from "@theme/TabItem"
 import Link from "@docusaurus/Link"
 import Section from "../shared/Section"
+import LazyHomeSection from "./LazyHomeSection"
+
+const loadConfigurationCode = () => import("./ConfigurationCode")
 
 const Configuration = (): JSX.Element => {
   return (
@@ -19,59 +19,20 @@ const Configuration = (): JSX.Element => {
         <div>
           <h5>More</h5>
           <p className="text-content-small sm:text-content-medium mb-SPACE_11">
-            To dive deeper into Tailcall checkout our <Link href="/docs">docs</Link> for detailed tutorials. Ideal for
-            devs at any level, it's packed with advanced tips, powerful operators and best practices.
+            To dive deeper into Tailcall checkout our{" "}
+            <Link href="/docs" className="font-bold text-tailCall-dark-500 underline underline-offset-4">
+              docs
+            </Link>{" "}
+            for detailed tutorials. Ideal for devs at any level, it's packed with advanced tips, powerful operators and
+            best practices.
           </p>
         </div>
       </div>
       <div>
-        <CodeBlock language="bash">npm i -g @tailcallhq/tailcall</CodeBlock>
-        {CodeTabItem({code: GRAPHQL_CONFIG, language: "graphql"})}
+        <LazyHomeSection load={loadConfigurationCode} minHeight={560} rootMargin="0px" threshold={0.65} />
       </div>
     </Section>
   )
 }
 
-const CodeTabItem = ({code, language}: {code: string; language: "json" | "yaml" | "graphql"}) => (
-  <TabItem value={language} label={language}>
-    <CodeBlock
-      language={language}
-      showLineNumbers={true}
-      className="overflow-y-auto h-96 md:min-w-[45rem] min-w-[100%]"
-    >
-      {code}
-    </CodeBlock>
-    <CodeBlock language="bash">tailcall start ./app.{language}</CodeBlock>
-  </TabItem>
-)
-
 export default Configuration
-
-const GRAPHQL_CONFIG = `schema
-  @server(port: 8000) {
-  query: Query
-}
-
-type Query {
-  users: [User] @http(url: "http://jsonplaceholder.typicode.com/users")
-  posts: [Post] @http(url: "http://jsonplaceholder.typicode.com/posts")
-}
-
-type User {
-  id: Int!
-  name: String!
-  username: String!
-  email: String!
-}
-
-
-type Post {
-  id: Int!
-  title: String!
-  body: String!
-  userId: Int!
-
-  # Expand a post with user information
-  user: User @http(url: "http://jsonplaceholder.typicode.com/users/{{.value.userId}}")
-}
-`
diff --git a/src/components/home/ConfigurationCode.tsx b/src/components/home/ConfigurationCode.tsx
new file mode 100644
index 0000000000..dc6bfb39e4
--- /dev/null
+++ b/src/components/home/ConfigurationCode.tsx
@@ -0,0 +1,55 @@
+import React from "react"
+import CodeBlock from "@theme/CodeBlock"
+
+const ConfigurationCode = (): JSX.Element => {
+  return (
+    <>
+      <CodeBlock language="bash">npm i -g @tailcallhq/tailcall</CodeBlock>
+      <CodeTabItem code={GRAPHQL_CONFIG} language="graphql" />
+    </>
+  )
+}
+
+const CodeTabItem = ({code, language}: {code: string; language: "json" | "yaml" | "graphql"}) => (
+  <>
+    <CodeBlock
+      language={language}
+      showLineNumbers={true}
+      className="overflow-y-auto h-96 md:min-w-[45rem] min-w-[100%]"
+    >
+      {code}
+    </CodeBlock>
+    <CodeBlock language="bash">tailcall start ./app.{language}</CodeBlock>
+  </>
+)
+
+const GRAPHQL_CONFIG = `schema
+  @server(port: 8000) {
+  query: Query
+}
+
+type Query {
+  users: [User] @http(url: "http://jsonplaceholder.typicode.com/users")
+  posts: [Post] @http(url: "http://jsonplaceholder.typicode.com/posts")
+}
+
+type User {
+  id: Int!
+  name: String!
+  username: String!
+  email: String!
+}
+
+
+type Post {
+  id: Int!
+  title: String!
+  body: String!
+  userId: Int!
+
+  # Expand a post with user information
+  user: User @http(url: "http://jsonplaceholder.typicode.com/users/{{.value.userId}}")
+}
+`
+
+export default ConfigurationCode
diff --git a/src/components/home/IntroductionVideo/index.tsx b/src/components/home/IntroductionVideo/index.tsx
index 70e2a429ba..69dff7e585 100644
--- a/src/components/home/IntroductionVideo/index.tsx
+++ b/src/components/home/IntroductionVideo/index.tsx
@@ -1,28 +1,18 @@
-import React, {useRef} from "react"
-import {useCookieConsent} from "@site/src/utils/hooks/useCookieConsent"
+import React from "react"
 import "./style.css"
 
-const IntroductionVideo: React.FC = () => {
-  const videoId = "1011521201"
-  const videoRef = useRef<HTMLDivElement>(null)
-  const {getCookieConsent} = useCookieConsent()
-  const cookieConsent = getCookieConsent()
-
-  const handleVimeoAnalytics = () => {
-    return Boolean(cookieConsent?.accepted) ? "" : "&dnt=1"
-  }
+const videoId = "1011521201"
+const videoHash = "d3576926f4"
+const vimeoWatchUrl = `https://vimeo.com/${videoId}/${videoHash}`
 
+const IntroductionVideo: React.FC = () => {
   return (
-    <div className="video-wrapper" ref={videoRef}>
+    <div className="video-wrapper">
       <div className="video-container">
-        <iframe
-          src={`https://player.vimeo.com/video/${videoId}?autoplay=0&badge=0&autopause=0&player_id=0&app_id=58479${handleVimeoAnalytics()}`}
-          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-          allowFullScreen
-          className="absolute top-0 left-0 w-full h-full"
-          title="Tailcall Introduction Video"
-          loading="lazy"
-        />
+        <a className="video-facade" href={vimeoWatchUrl} rel="noopener noreferrer" target="_blank">
+          <span className="video-play-icon" aria-hidden="true" />
+          <span className="sr-only">Open Tailcall introduction video on Vimeo</span>
+        </a>
       </div>
     </div>
   )
diff --git a/src/components/home/IntroductionVideo/style.css b/src/components/home/IntroductionVideo/style.css
index 2160fa2a28..20337c8fe0 100644
--- a/src/components/home/IntroductionVideo/style.css
+++ b/src/components/home/IntroductionVideo/style.css
@@ -29,8 +29,81 @@
   border-radius: 0.375rem;
   z-index: 10;
   box-shadow: 0px 4px 32px 0px #ffe933;
-  background-image: url("/static/images/video-thumbnail.webp");
-  background-size: 100%;
+  background-image: url("/images/video-thumbnail.webp");
+  background-size: cover;
+  background-position: center;
+}
+
+.video-facade {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  border: 0;
+  cursor: pointer;
+  background: linear-gradient(180deg, rgba(18, 19, 21, 0.08), rgba(18, 19, 21, 0.22));
+  color: #121315;
+  text-decoration: none;
+}
+
+.video-facade:hover {
+  color: #121315;
+  text-decoration: none;
+}
+
+.video-facade:focus-visible {
+  outline: 3px solid #121315;
+  outline-offset: -8px;
+}
+
+.video-play-icon {
+  width: 4rem;
+  height: 4rem;
+  border-radius: 999px;
+  background: #fdea2e;
+  box-shadow: 0 14px 38px rgba(18, 19, 21, 0.24);
+  position: relative;
+}
+
+.video-play-icon::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 52%;
+  transform: translate(-42%, -50%);
+  width: 0;
+  height: 0;
+  border-top: 0.75rem solid transparent;
+  border-bottom: 0.75rem solid transparent;
+  border-left: 1.1rem solid #121315;
+}
+
+.video-external-hint {
+  border-radius: 999px;
+  background: rgba(253, 234, 46, 0.92);
+  color: #121315;
+  font-size: 0.875rem;
+  font-weight: 700;
+  line-height: 1;
+  padding: 0.55rem 0.8rem;
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
 }
 
 .video-background {
diff --git a/src/components/home/LazyHomeSection.tsx b/src/components/home/LazyHomeSection.tsx
new file mode 100644
index 0000000000..f0db5841fe
--- /dev/null
+++ b/src/components/home/LazyHomeSection.tsx
@@ -0,0 +1,73 @@
+import React, {useEffect, useRef, useState} from "react"
+
+type HomeSectionModule = {
+  default: React.ComponentType
+}
+
+type LazyHomeSectionProps = {
+  load: () => Promise<HomeSectionModule>
+  minHeight: number
+  rootMargin?: string
+  threshold?: number
+}
+
+const LazyHomeSection = ({
+  load,
+  minHeight,
+  rootMargin = "900px 0px",
+  threshold = 0,
+}: LazyHomeSectionProps): JSX.Element => {
+  const containerRef = useRef<HTMLDivElement>(null)
+  const [SectionComponent, setSectionComponent] = useState<React.ComponentType | null>(null)
+
+  useEffect(() => {
+    const container = containerRef.current
+    let cancelled = false
+
+    const loadSection = () => {
+      load().then((module) => {
+        if (!cancelled) {
+          setSectionComponent(() => module.default)
+        }
+      })
+    }
+
+    if (!container || SectionComponent) {
+      return () => {
+        cancelled = true
+      }
+    }
+
+    if (!("IntersectionObserver" in window)) {
+      loadSection()
+      return () => {
+        cancelled = true
+      }
+    }
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting && entry.intersectionRatio >= threshold) {
+          observer.disconnect()
+          loadSection()
+        }
+      },
+      {rootMargin, threshold},
+    )
+
+    observer.observe(container)
+
+    return () => {
+      cancelled = true
+      observer.disconnect()
+    }
+  }, [load, rootMargin, SectionComponent, threshold])
+
+  return (
+    <div ref={containerRef} className="homepage-deferred-section" style={SectionComponent ? undefined : {minHeight}}>
+      {SectionComponent ? <SectionComponent /> : null}
+    </div>
+  )
+}
+
+export default LazyHomeSection
diff --git a/src/components/home/TrustedByMarquee.tsx b/src/components/home/TrustedByMarquee.tsx
index c7b21b60fe..01934540b1 100644
--- a/src/components/home/TrustedByMarquee.tsx
+++ b/src/components/home/TrustedByMarquee.tsx
@@ -35,10 +35,10 @@ const TrustedByMarquee: React.FC<TrustedByMarqueeProps> = ({
     <div key={partner.name} className="h-20">
       {partner.link ? (
         <a href={partner.link} target="_blank" rel="noopener noreferrer">
-          <img src={partner.logo} alt={partner.name} className="max-w-[152px]" />
+          <img src={partner.logo} alt={partner.name} className="max-w-[152px]" loading="lazy" decoding="async" />
         </a>
       ) : (
-        <img src={partner.logo} alt={partner.name} className="max-w-[152px]" />
+        <img src={partner.logo} alt={partner.name} className="max-w-[152px]" loading="lazy" decoding="async" />
       )}
     </div>
   )
diff --git a/src/components/home/index.tsx b/src/components/home/index.tsx
index 0a8a67dbcd..e38a5f1a8a 100644
--- a/src/components/home/index.tsx
+++ b/src/components/home/index.tsx
@@ -1,24 +1,26 @@
 import React from "react"
 
 import Banner from "./Banner"
-import Graph from "./Graph"
-import Benefits from "./Benefits"
-import Discover from "../shared/Discover"
 import Configuration from "./Configuration"
-import Testimonials from "./Testimonials"
-import Announcement from "../shared/Announcement"
 import IntroductionVideo from "./IntroductionVideo"
+import LazyHomeSection from "./LazyHomeSection"
+
+const loadTestimonials = () => import("./Testimonials")
+const loadBenefits = () => import("./Benefits")
+const loadGraph = () => import("./Graph")
+const loadDiscover = () => import("../shared/Discover")
+
 const HomePage = (): JSX.Element => {
   return (
     <div className="">
       <Banner />
       <Configuration />
       <IntroductionVideo />
-      <Testimonials />
-      <Benefits />
-      <Graph />
+      <LazyHomeSection load={loadTestimonials} minHeight={640} />
+      <LazyHomeSection load={loadBenefits} minHeight={760} />
+      <LazyHomeSection load={loadGraph} minHeight={840} />
       {/* <Playground /> */}
-      <Discover />
+      <LazyHomeSection load={loadDiscover} minHeight={240} />
     </div>
   )
 }
diff --git a/src/components/shared/CookieConsentModal/CookieConsentModal.tsx b/src/components/shared/CookieConsentModal/CookieConsentModal.tsx
index 5a257225b4..6ef7b96323 100644
--- a/src/components/shared/CookieConsentModal/CookieConsentModal.tsx
+++ b/src/components/shared/CookieConsentModal/CookieConsentModal.tsx
@@ -89,11 +89,11 @@ const CookieConsentModal: React.FC<CookieConsentModalProps> = ({open, onAccept,
           {/* Modal Container */}
           <div
             className={clsx(
-              "flex flex-col xl:flex-row xl:justify-between relative py-6 px-8 gap-4 sm:gap-12 xl:gap-0 font-space-mono bg-black rounded-xl",
+              "flex flex-col xl:flex-row xl:justify-between relative py-4 px-4 sm:py-6 sm:px-8 gap-3 sm:gap-6 xl:gap-0 font-space-mono bg-black rounded-xl",
               styles.cookieConsentModal,
             )}
           >
-            <div className="flex flex-col gap-4 text-tailCall-light-300">
+            <div className="flex flex-col gap-3 sm:gap-4 text-tailCall-light-300">
               <div className="flex flex-col gap-2">
                 <span className="text-content-small font-bold xl:text-title-small">We Value Your Privacy</span>
                 <span className="text-content-tiny xl:text-content-small">
@@ -129,33 +129,41 @@ const CookieConsentModal: React.FC<CookieConsentModalProps> = ({open, onAccept,
             <div className="flex items-end">
               <div
                 className={clsx(
-                  "flex flex-col sm:flex-row flex-1 gap-6 h-fit sm:justify-end",
+                  "flex flex-col sm:flex-row flex-1 h-fit sm:justify-end",
+                  "gap-3 sm:gap-6",
                   styles.consentOptionsContainer,
                 )}
               >
                 {consentOptions.map((btn: ConsentOption, index: number) => {
                   return (
-                    <span
+                    <button
+                      type="button"
                       key={index}
                       className={clsx(
-                        "sm:whitespace-nowrap py-1 px-3 text-title-tiny bg-tailCall-dark-400 border border-solid border-tailCall-dark-300 cursor-pointer text-center",
+                        "appearance-none sm:whitespace-nowrap py-1 px-3 text-content-tiny sm:text-title-tiny bg-tailCall-dark-400 border border-solid border-tailCall-dark-300 cursor-pointer text-center",
                         styles.consentOption,
                       )}
                       onClick={btn.onClick}
                     >
                       {btn.text}
-                    </span>
+                    </button>
                   )
                 })}
               </div>
             </div>
-            <img
+            <button
+              type="button"
               className={clsx("absolute cursor-pointer", styles.closeBtn)}
-              src={require("@site/static/images/cookie-consent/close-btn.png").default}
-              height={16}
-              width={25}
+              aria-label="Close cookie preferences"
               onClick={handleClose}
-            />
+            >
+              <img
+                src={require("@site/static/images/cookie-consent/close-btn.png").default}
+                alt=""
+                height={16}
+                width={25}
+              />
+            </button>
           </div>
         </>
       ) : null}
diff --git a/src/components/shared/CookieConsentModal/styles.module.css b/src/components/shared/CookieConsentModal/styles.module.css
index 16394c30a3..918ab26577 100644
--- a/src/components/shared/CookieConsentModal/styles.module.css
+++ b/src/components/shared/CookieConsentModal/styles.module.css
@@ -24,16 +24,45 @@
 .closeBtn {
   top: 8px;
   right: 30px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+}
+
+.closeBtn:focus-visible {
+  outline: 2px solid #fdea2e;
+  outline-offset: 4px;
+  border-radius: 4px;
 }
 
 @media (max-width: 1000px) {
   .cookieConsentModal {
-    bottom: 20px;
-    left: 16px;
-    right: 16px;
+    bottom: 12px;
+    left: 12px;
+    right: 12px;
   }
 
   .closeBtn {
     right: 15px;
   }
 }
+
+@media (max-width: 640px) {
+  .cookieConsentModal {
+    bottom: 8px;
+    left: 8px;
+    right: 8px;
+    z-index: calc(var(--ifm-z-index-fixed) - 1);
+    max-height: 45dvh;
+    overflow-y: auto;
+  }
+
+  .consentOptionsContainer {
+    gap: 0.75rem;
+  }
+
+  .closeBtn {
+    top: 6px;
+    right: 12px;
+  }
+}
diff --git a/src/components/shared/Footer.tsx b/src/components/shared/Footer.tsx
index cc833aa4dd..ef7273741a 100644
--- a/src/components/shared/Footer.tsx
+++ b/src/components/shared/Footer.tsx
@@ -44,7 +44,7 @@ const Footer = (): JSX.Element => {
         </p>
         <div className="space-x-SPACE_04">
           {socials.map((social) => (
-            <Link href={social.href} className="cursor-pointer" key={social.id}>
+            <Link href={social.href} className="cursor-pointer" key={social.id} aria-label={social.name}>
               <social.image className="h-6 w-6" />
             </Link>
           ))}
diff --git a/src/components/shared/GlobalLayout.tsx b/src/components/shared/GlobalLayout.tsx
index e94fdf12ae..0bd518d26d 100644
--- a/src/components/shared/GlobalLayout.tsx
+++ b/src/components/shared/GlobalLayout.tsx
@@ -19,9 +19,10 @@ const GlobalLayout: React.FC = () => {
     if (typeof window !== "undefined" && window.location.pathname.includes(pageLinks.privacyPolicy)) return
 
     if (!cookieConsent) {
-      openCookieConsentModal()
+      const timer = window.setTimeout(openCookieConsentModal, 5000)
+      return () => window.clearTimeout(timer)
     }
-  }, [cookieConsent])
+  }, [cookieConsent, openCookieConsentModal])
 
   return (
     <>
diff --git a/src/constants/index.tsx b/src/constants/index.tsx
index 42bde5b7b7..342e47f3a7 100644
--- a/src/constants/index.tsx
+++ b/src/constants/index.tsx
@@ -18,40 +18,40 @@ export const algoliaConstants = {
 }
 
 export const companies: PartnerImage[] = [
-  {name: "Dream11", logo: require("@site/static/icons/companies/dream11.png").default},
-  {name: "AfterShip", logo: require("@site/static/icons/companies/aftership.png").default},
-  {name: "Optum", logo: require("@site/static/icons/companies/optum.png").default},
-  {name: "Sinch", logo: require("@site/static/icons/companies/sinch.png").default},
+  {name: "Dream11", logo: "/icons/companies/dream11.png"},
+  {name: "AfterShip", logo: "/icons/companies/aftership.png"},
+  {name: "Optum", logo: "/icons/companies/optum.png"},
+  {name: "Sinch", logo: "/icons/companies/sinch.png"},
 ]
 
 export const partnerImages: PartnerImage[] = [
   {
     name: "Digital Ocean",
-    logo: require("@site/static/icons/companies/digital-ocean.png").default,
+    logo: "/icons/companies/digital-ocean.png",
   },
   {
     name: "Vercel",
-    logo: require("@site/static/icons/companies/vercel.png").default,
+    logo: "/icons/companies/vercel.png",
   },
   {
     name: "Fastly",
-    logo: require("@site/static/icons/companies/fastly.png").default,
+    logo: "/icons/companies/fastly.png",
   },
   {
     name: "Cloud Flare",
-    logo: require("@site/static/icons/companies/cloudflare.png").default,
+    logo: "/icons/companies/cloudflare.png",
   },
   {
     name: "AWS",
-    logo: require("@site/static/icons/companies/aws.png").default,
+    logo: "/icons/companies/aws.png",
   },
   {
     name: "Google Cloud",
-    logo: require("@site/static/icons/companies/google-cloud.png").default,
+    logo: "/icons/companies/google-cloud.png",
   },
   {
     name: "Fly",
-    logo: require("@site/static/icons/companies/fly-io.png").default,
+    logo: "/icons/companies/fly-io.png",
   },
 ]
 
@@ -65,7 +65,7 @@ const Highlight = ({text}: {text: string}) => (
 
 export const features: Feature[] = [
   {
-    logo: require("@site/static/images/home/orchestration.png").default,
+    logo: "/images/home/orchestration.png",
     title: "Orchestration",
     content: (
       <>
@@ -77,19 +77,19 @@ export const features: Feature[] = [
     alt: "Orchestration",
   },
   {
-    logo: require("@site/static/images/home/governance.png").default,
+    logo: "/images/home/governance.png",
     title: "Governance",
     content: (
       <>
-        With Tailcall, your focus shifts to the 'what'—such as entities, their relationships, access control, security,
-        authentication, caching, and more—rather than the 'how'. This shift is enabled by the Tailcall DSL, embodying a
+        With Tailcall, your focus shifts to the 'what', such as entities, their relationships, access control, security,
+        authentication, caching, and more, rather than the 'how'. This shift is enabled by the Tailcall DSL, embodying a
         true <Highlight text="declarative approach" /> to managing APIs.
       </>
     ),
     alt: "Governance",
   },
   {
-    logo: require("@site/static/images/home/efficiency.png").default,
+    logo: "/images/home/efficiency.png",
     title: "Efficiency",
     content: (
       <>
@@ -115,7 +115,7 @@ export const features: Feature[] = [
   //   ),
   // },
   {
-    logo: require("@site/static/images/home/extendability.png").default,
+    logo: "/images/home/extendability.png",
     title: "Extendability",
     content: (
       <>
@@ -225,19 +225,19 @@ export const chooseTailcall: ChooseTailcall[] = [
     id: 1,
     title: "Top developer experience",
     description: "Design your APIs, with syntax highlighting and lint checks within your favourite IDE.",
-    image: require("@site/static/images/home/dev-experience.png").default,
+    image: "/images/home/dev-experience.png",
   },
   {
     id: 2,
     title: "Performance",
     description: "Get performance that’s higher than your hand optimized implementation",
-    image: require("@site/static/images/home/performance.png").default,
+    image: "/images/home/performance.png",
   },
   {
     id: 3,
     title: "Scale Fearlessly",
     description: "Leverage built-in best practices that guarantee robustness at any scale.",
-    image: require("@site/static/images/home/scale.png").default,
+    image: "/images/home/scale.png",
   },
 ]
 
@@ -245,49 +245,49 @@ export const tailcallFeatures: TailcallFeatures[] = [
   {
     id: 1,
     title: "Powerful Batching Primitive",
-    image: require("@site/static/images/choose-tailcall/rocket.png").default,
+    image: "/images/choose-tailcall/rocket.png",
     redirection_url: "/docs/graphql-n-plus-one-problem-solved-tailcall/#using-batch-apis",
   },
   {
     id: 2,
     title: "Extensions with plugins and JS support",
-    image: require("@site/static/images/choose-tailcall/grid.png").default,
+    image: "/images/choose-tailcall/grid.png",
     redirection_url: "/docs/graphql-javascript-customization/",
   },
   {
     id: 3,
     title: "Field based Authentication & Authorisation",
-    image: require("@site/static/images/choose-tailcall/shield-tick.png").default,
+    image: "/images/choose-tailcall/shield-tick.png",
     redirection_url: "/docs/field-level-access-control-graphql-authentication/",
   },
   {
     id: 4,
     title: "Protocol agnostic",
-    image: require("@site/static/images/choose-tailcall/check-done.png").default,
+    image: "/images/choose-tailcall/check-done.png",
     redirection_url: "/docs/graphql-grpc-tailcall/",
   },
   {
     id: 5,
     title: "Performance",
-    image: require("@site/static/images/choose-tailcall/line-chart-up.png").default,
+    image: "/images/choose-tailcall/line-chart-up.png",
     redirection_url: "https://github.com/tailcallhq/graphql-benchmarks",
   },
   {
     id: 6,
     title: "Security",
-    image: require("@site/static/images/choose-tailcall/lock.png").default,
+    image: "/images/choose-tailcall/lock.png",
     redirection_url: "/docs/field-level-access-control-graphql-authentication/",
   },
   {
     id: 7,
     title: "Edge Compatible",
-    image: require("@site/static/images/choose-tailcall/puzzle-piece.png").default,
+    image: "/images/choose-tailcall/puzzle-piece.png",
     redirection_url: "/docs/deploy-graphql-github-actions/",
   },
   {
     id: 8,
     title: "Compile time checks",
-    image: require("@site/static/images/choose-tailcall/clock-stopwatch.png").default,
+    image: "/images/choose-tailcall/clock-stopwatch.png",
     redirection_url: "/docs/tailcall-graphql-cli/#check",
   },
 ]
@@ -298,7 +298,7 @@ export const benefits: Benefits[] = [
     title: "Secure",
     description:
       "Tailcall has been validated against a comprehensive database of GraphQL vulnerabilities. Rest easy knowing your GraphQL backends are secure.",
-    image: require("@site/static/images/home/secure-icon.png").default,
+    image: "/images/home/secure-icon.png",
     redirection_url: "/docs/field-level-access-control-graphql-authentication/",
   },
   {
@@ -306,7 +306,7 @@ export const benefits: Benefits[] = [
     title: "High-Performance",
     description:
       "Tailcall performs ahead-of-time optimizations based on analysis of the schema and data dependencies. Deploy GraphQL without compromises.",
-    image: require("@site/static/images/home/performance.png").default,
+    image: "/images/home/performance.png",
     redirection_url: "https://github.com/tailcallhq/graphql-benchmarks",
   },
   {
@@ -314,7 +314,7 @@ export const benefits: Benefits[] = [
     title: "Statically Verified",
     description:
       "Tailcall statically verifies that GraphQL schemas match resolvers and warns about N + 1 issues. Deploy new APIs with confidence.",
-    image: require("@site/static/images/home/statically-verified-icon.png").default,
+    image: "/images/home/statically-verified-icon.png",
     redirection_url: "/docs/graphql-n-plus-one-problem-solved-tailcall/",
   },
   {
@@ -322,7 +322,7 @@ export const benefits: Benefits[] = [
     title: "Simple",
     description:
       "Tailcall configuration generator can integrate thousands of APIs in a matter of minutes. Configure with ease and deploy with confidence.",
-    image: require("@site/static/images/home/simple-icon.png").default,
+    image: "/images/home/simple-icon.png",
     redirection_url: "/docs/tailcall-dsl-graphql-custom-directives/",
   },
   {
@@ -330,7 +330,7 @@ export const benefits: Benefits[] = [
     title: "Customizable",
     description:
       "Write custom Javascript to customize any aspect of your GraphQL backend. Leverage this escape hatch to satisfy any requirement.",
-    image: require("@site/static/images/home/customizable-icon.png").default,
+    image: "/images/home/customizable-icon.png",
     redirection_url: "/docs/graphql-javascript-customization/",
   },
   {
@@ -338,7 +338,7 @@ export const benefits: Benefits[] = [
     title: "Plug & Play",
     description:
       "Engineered to stay out of your way, shipping as a single executable with no dependencies or requirements. Get started quickly and easily.",
-    image: require("@site/static/images/home/plug-play-icon.png").default,
+    image: "/images/home/plug-play-icon.png",
     redirection_url: "/docs/",
   },
   {
@@ -346,7 +346,7 @@ export const benefits: Benefits[] = [
     title: "Open Source",
     description:
       "Tailcall is developed and released under the Apache 2 open source license, the gold standard for OSS. Embrace a vendor-neutral solution.",
-    image: require("@site/static/images/home/open-source-icon.png").default,
+    image: "/images/home/open-source-icon.png",
     redirection_url: "https://github.com/tailcallhq/tailcall",
   },
 ]
@@ -544,7 +544,7 @@ export const testimonials: CustomerFeedback[] = [
   },
   {
     id: 2,
-    citation: `By eliminating the need to manage GraphQL for frontend teams, you can focus on your core responsibilities—optimizing microservices and streamlining backend operations. The clear separation of concerns enhances collaboration, while Tailcall's static verification ensures you can expose APIs with confidence and reliability.`,
+    citation: `By eliminating the need to manage GraphQL for frontend teams, you can focus on your core responsibilities: optimizing microservices and streamlining backend operations. The clear separation of concerns enhances collaboration, while Tailcall's static verification ensures you can expose APIs with confidence and reliability.`,
     designation: `Sr. Backend Engineer - Big Co. Inc.`,
     name: "John Doe",
     department: "Backend",
diff --git a/src/css/custom.css b/src/css/custom.css
index 0e37d054a7..238e8bdea2 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -1,9 +1,27 @@
-@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=Space+Mono&display=swap");
-
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
+@font-face {
+  font-family: "Space Grotesk";
+  font-style: normal;
+  font-weight: 400 700;
+  font-display: swap;
+  src: url("/fonts/space-grotesk-latin.woff2") format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
+    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+@font-face {
+  font-family: "Space Mono";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("/fonts/space-mono-latin.woff2") format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
+    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
 @layer utilities {
   .border-b-solid {
     border-bottom-style: solid;
@@ -34,7 +52,7 @@
 
 :root {
   /* Font and Dimension Tokens */
-  --ifm-font-family-base: "Space Grotesk", sans-serif;
+  --ifm-font-family-base: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
   --header-height: 6.5rem;
   --ifm-navbar-height: 6.5rem;
   --ifm-navbar-height-sm: 4.5rem;
@@ -72,7 +90,7 @@
   --ifm-color-brand-light-opacity-15: rgba(255, 255, 255, 0.15);
 
   /* Code Settings */
-  --ifm-font-family-monospace: "Space Mono";
+  --ifm-font-family-monospace: "Space Mono", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
   --ifm-code-background: rgb(246, 247, 248);
   --ifm-code-border-radius: var(--ifm-global-radius);
   --ifm-code-font-size: 0.9eem;
@@ -88,6 +106,15 @@ code {
   vertical-align: baseline;
 }
 
+.hero-visual {
+  display: block;
+  aspect-ratio: 1400 / 672;
+}
+
+.hero-visual img {
+  aspect-ratio: 1400 / 672;
+}
+
 input[type="radio"] {
   -webkit-appearance: none;
   appearance: none;
@@ -722,7 +749,12 @@ span.token.tag.script.language-javascript {
 }
 
 .customer-container {
-  background: url("../../static/images/home/bg-map.png") no-repeat;
+  background: url("../../static/images/home/bg-map.webp") no-repeat;
+}
+
+.homepage-deferred-section {
+  content-visibility: auto;
+  contain-intrinsic-size: auto 720px;
 }
 
 .customer-feedback-card {
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 8f3356206b..2d3bebe4b6 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -5,7 +5,6 @@ import {useLocation} from "@docusaurus/router"
 
 import HomePage from "../components/home"
 import {PageDescription, PageTitle} from "../constants/titles"
-import Announcement from "../components/shared/Announcement"
 
 const Home = (): JSX.Element => {
   const isDevelopment = process.env.NODE_ENV === "development"
@@ -15,17 +14,42 @@ const Home = (): JSX.Element => {
     ReactGA.send({hitType: "pageview", page: location.pathname, title: "Home Page"})
   }, [])
 
+  useEffect(() => {
+    if (isDevelopment) return
+
+    const loadPixel = () => {
+      const pixel = new Image()
+      pixel.referrerPolicy = "no-referrer-when-downgrade"
+      pixel.src = "https://static.scarf.sh/a.png?x-pxid=45ec365f-ab8a-4848-a6a9-bd4ffecfe72e"
+    }
+
+    const schedulePixel = () => {
+      const requestIdleCallback = (
+        window as Window & {
+          requestIdleCallback?: (callback: () => void, options?: {timeout: number}) => number
+        }
+      ).requestIdleCallback
+
+      if (requestIdleCallback) {
+        requestIdleCallback(loadPixel, {timeout: 3000})
+      } else {
+        setTimeout(loadPixel, 0)
+      }
+    }
+
+    if (document.readyState === "complete") {
+      schedulePixel()
+      return undefined
+    }
+
+    window.addEventListener("load", schedulePixel, {once: true})
+
+    return () => window.removeEventListener("load", schedulePixel)
+  }, [isDevelopment])
+
   return (
     <Layout title={PageTitle.HOME} description={PageDescription.HOME}>
       <HomePage />
-      {!isDevelopment && (
-        <img
-          style={{height: 0, width: 0}}
-          referrerPolicy="no-referrer-when-downgrade"
-          src="https://static.scarf.sh/a.png?x-pxid=45ec365f-ab8a-4848-a6a9-bd4ffecfe72e"
-          alt="pixel"
-        />
-      )}
     </Layout>
   )
 }
diff --git a/src/theme/NavbarItem/DropdownNavbarItem/index.tsx b/src/theme/NavbarItem/DropdownNavbarItem/index.tsx
index b45d63cc3b..498c83787e 100644
--- a/src/theme/NavbarItem/DropdownNavbarItem/index.tsx
+++ b/src/theme/NavbarItem/DropdownNavbarItem/index.tsx
@@ -29,6 +29,12 @@ function DropdownNavbarItemDesktop({items, position, className, onClick, ...prop
   const containsActive = containsActiveItems(items, localPathname)
   const dropdownRef = useRef<HTMLDivElement>(null)
   const [showDropdown, setShowDropdown] = useState(false)
+  const hasLinkTarget = Boolean(props.to || props.href)
+  const triggerClassName = clsx(
+    "navbar__link",
+    className,
+    !hasLinkTarget && styles.dropdownNavbarItemDesktopTrigger,
+  )
 
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent | TouchEvent | FocusEvent) => {
@@ -58,26 +64,33 @@ function DropdownNavbarItemDesktop({items, position, className, onClick, ...prop
         "navbar__link--active": containsActive,
       })}
     >
-      <NavbarNavLink
-        aria-haspopup="true"
-        aria-expanded={showDropdown}
-        role="button"
-        // # hash permits to make the <a> tag focusable in case no link target
-        // See https://github.com/facebook/docusaurus/pull/6003
-        // There's probably a better solution though...
-        href={props.to ? undefined : "#"}
-        className={clsx("navbar__link", className)}
-        {...props}
-        onClick={props.to ? undefined : (e) => e.preventDefault()}
-        onKeyDown={(e) => {
-          if (e.key === "Enter") {
-            e.preventDefault()
-            setShowDropdown(!showDropdown)
-          }
-        }}
-      >
-        {props.children ?? props.label}
-      </NavbarNavLink>
+      {hasLinkTarget ? (
+        <NavbarNavLink
+          aria-haspopup="true"
+          aria-expanded={showDropdown}
+          role="button"
+          className={triggerClassName}
+          {...props}
+          onKeyDown={(e) => {
+            if (e.key === "Enter") {
+              e.preventDefault()
+              setShowDropdown(!showDropdown)
+            }
+          }}
+        >
+          {props.children ?? props.label}
+        </NavbarNavLink>
+      ) : (
+        <button
+          type="button"
+          aria-haspopup="true"
+          aria-expanded={showDropdown}
+          className={triggerClassName}
+          onClick={() => setShowDropdown((visible) => !visible)}
+        >
+          {props.children ?? props.label}
+        </button>
+      )}
       <ul className="dropdown__menu">
         {items.map((childItemProps, i) => (
           <NavbarItem isDropdownItem activeClassName="dropdown__link--active" {...childItemProps} key={i} />
diff --git a/src/theme/NavbarItem/DropdownNavbarItem/styles.module.css b/src/theme/NavbarItem/DropdownNavbarItem/styles.module.css
index 10ee92f520..8ed69daff2 100644
--- a/src/theme/NavbarItem/DropdownNavbarItem/styles.module.css
+++ b/src/theme/NavbarItem/DropdownNavbarItem/styles.module.css
@@ -1,3 +1,11 @@
 .dropdownNavbarItemMobile {
   cursor: pointer;
 }
+
+.dropdownNavbarItemDesktopTrigger {
+  border: 0;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  font: inherit;
+}
diff --git a/static/fonts/space-grotesk-latin.woff2 b/static/fonts/space-grotesk-latin.woff2
new file mode 100644
index 0000000000..0f3474ee8a
Binary files /dev/null and b/static/fonts/space-grotesk-latin.woff2 differ
diff --git a/static/fonts/space-mono-latin.woff2 b/static/fonts/space-mono-latin.woff2
new file mode 100644
index 0000000000..2752f605c1
Binary files /dev/null and b/static/fonts/space-mono-latin.woff2 differ
diff --git a/static/images/home/bg-map.webp b/static/images/home/bg-map.webp
new file mode 100644
index 0000000000..dd1b232674
Binary files /dev/null and b/static/images/home/bg-map.webp differ
diff --git a/static/images/home/hero-mobile.webp b/static/images/home/hero-mobile.webp
new file mode 100644
index 0000000000..aec3cb75e4
Binary files /dev/null and b/static/images/home/hero-mobile.webp differ