perf: reduce homepage render blocking work

docusaurus.config.ts

@@ -13,13 +13,39 @@ export default {
   trailingSlash: true,
   tagline: "GraphQL platform engineered for scale",
   headTags: [
+    {
+      tagName: "link",
+      attributes: {
+        rel: "preconnect",
+        href: "https://fonts.googleapis.com",
+      },
+    },
+    {
+      tagName: "link",
+      attributes: {
+        rel: "preconnect",
+        href: "https://fonts.gstatic.com",
+        crossorigin: "anonymous",
+      },
+    },
+    {
+      tagName: "link",
+      attributes: {
+        rel: "preload",
+        as: "style",
+        href: "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=Space+Mono&display=swap",
+        onload: "this.onload=null;this.rel='stylesheet'",
+      },
+    },
     {
       tagName: "script",
       attributes: {
         id: "chatbotscript",
         "data-accountid": "CZPG9aVdtk59Tjz4SMTu8w==",
         "data-websiteid": "75VGI0NlBqessD4BQn2pFg==",
         src: "https://app.robofy.ai/bot/js/common.js?v=" + new Date().getTime(),
+        async: "true",
+        defer: "true",
       },
     },
     {

src/components/home/Banner.tsx

@@ -2,7 +2,6 @@ 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 {pageLinks} from "@site/src/constants/routes"
@@ -59,7 +58,13 @@ const Banner = (): JSX.Element => {
           </div>
         </div>
       </Section>
-      <HeroImage className="object-contain h-full sm:h-full w-full mt-8 max-w-7xl" />
+      <img
+        src="/images/home/hero.svg"
+        alt="Tailcall GraphQL platform workflow"
+        className="object-contain h-full sm:h-full w-full mt-8 max-w-7xl"
+        width={1400}
+        height={672}
+      />
     </main>
   )
 }

src/components/home/LazyHomeSection.tsx

@@ -0,0 +1,44 @@
+import React, {useEffect, useRef, useState} from "react"
+
+interface LazyHomeSectionProps {
+  children: React.ReactNode
+  minHeight?: number
+}
+
+const LazyHomeSection: React.FC<LazyHomeSectionProps> = ({children, minHeight = 320}) => {
+  const containerRef = useRef<HTMLDivElement>(null)
+  const [isVisible, setIsVisible] = useState(false)
+
+  useEffect(() => {
+    const container = containerRef.current
+    if (!container || isVisible) {
+      return
+    }
+
+    if (!("IntersectionObserver" in window)) {
+      setIsVisible(true)
+      return
+    }
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setIsVisible(true)
+          observer.disconnect()
+        }
+      },
+      {rootMargin: "600px 0px"}
+    )
+
+    observer.observe(container)
+    return () => observer.disconnect()
+  }, [isVisible])
+
+  return (
+    <div ref={containerRef} style={isVisible ? undefined : {minHeight}}>
+      {isVisible ? children : null}
+    </div>
+  )
+}
+
+export default LazyHomeSection

src/components/home/index.tsx

@@ -8,17 +8,30 @@ import Configuration from "./Configuration"
 import Testimonials from "./Testimonials"
 import Announcement from "../shared/Announcement"
 import IntroductionVideo from "./IntroductionVideo"
+import LazyHomeSection from "./LazyHomeSection"
 const HomePage = (): JSX.Element => {
   return (
     <div className="">
       <Banner />
-      <Configuration />
-      <IntroductionVideo />
-      <Testimonials />
-      <Benefits />
-      <Graph />
+      <LazyHomeSection minHeight={560}>
+        <Configuration />
+      </LazyHomeSection>
+      <LazyHomeSection minHeight={360}>
+        <IntroductionVideo />
+      </LazyHomeSection>
+      <LazyHomeSection minHeight={520}>
+        <Testimonials />
+      </LazyHomeSection>
+      <LazyHomeSection minHeight={520}>
+        <Benefits />
+      </LazyHomeSection>
+      <LazyHomeSection minHeight={680}>
+        <Graph />
+      </LazyHomeSection>
       {/* <Playground /> */}
-      <Discover />
+      <LazyHomeSection minHeight={208}>
+        <Discover />
+      </LazyHomeSection>
     </div>
   )
 }

src/css/custom.css

@@ -1,5 +1,3 @@
-@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;