From 6abcb3b230371becbffa05053f4e759e93d88b37 Mon Sep 17 00:00:00 2001
From: treasure <treasure@treasuredeMacBook-Air.local>
Date: Thu, 14 May 2026 06:16:39 +0800
Subject: [PATCH 1/2] perf: defer homepage third-party embeds

---
 docusaurus.config.ts                          |  9 ----
 .../home/IntroductionVideo/index.tsx          | 30 +++++++++----
 .../home/IntroductionVideo/style.css          | 42 +++++++++++++++++++
 src/components/shared/GlobalLayout.tsx        | 26 ++++++++++++
 4 files changed, 89 insertions(+), 18 deletions(-)

diff --git a/docusaurus.config.ts b/docusaurus.config.ts
index da14145d8..49fd05f40 100644
--- a/docusaurus.config.ts
+++ b/docusaurus.config.ts
@@ -13,15 +13,6 @@ export default {
   trailingSlash: true,
   tagline: "GraphQL platform engineered for scale",
   headTags: [
-    {
-      tagName: "script",
-      attributes: {
-        id: "chatbotscript",
-        "data-accountid": "CZPG9aVdtk59Tjz4SMTu8w==",
-        "data-websiteid": "75VGI0NlBqessD4BQn2pFg==",
-        src: "https://app.robofy.ai/bot/js/common.js?v=" + new Date().getTime(),
-      },
-    },
     {
       tagName: "script",
       attributes: {
diff --git a/src/components/home/IntroductionVideo/index.tsx b/src/components/home/IntroductionVideo/index.tsx
index 70e2a429b..1b30fab05 100644
--- a/src/components/home/IntroductionVideo/index.tsx
+++ b/src/components/home/IntroductionVideo/index.tsx
@@ -1,10 +1,11 @@
-import React, {useRef} from "react"
+import React, {useRef, useState} from "react"
 import {useCookieConsent} from "@site/src/utils/hooks/useCookieConsent"
 import "./style.css"
 
 const IntroductionVideo: React.FC = () => {
   const videoId = "1011521201"
   const videoRef = useRef<HTMLDivElement>(null)
+  const [isPlaying, setIsPlaying] = useState(false)
   const {getCookieConsent} = useCookieConsent()
   const cookieConsent = getCookieConsent()
 
@@ -15,14 +16,25 @@ const IntroductionVideo: React.FC = () => {
   return (
     <div className="video-wrapper" ref={videoRef}>
       <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"
-        />
+        {isPlaying ? (
+          <iframe
+            src={`https://player.vimeo.com/video/${videoId}?autoplay=1&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"
+          />
+        ) : (
+          <button
+            className="video-placeholder"
+            type="button"
+            aria-label="Play Tailcall introduction video"
+            onClick={() => setIsPlaying(true)}
+          >
+            <span className="video-play-button" aria-hidden="true" />
+          </button>
+        )}
       </div>
     </div>
   )
diff --git a/src/components/home/IntroductionVideo/style.css b/src/components/home/IntroductionVideo/style.css
index 2160fa2a2..6a04e2f94 100644
--- a/src/components/home/IntroductionVideo/style.css
+++ b/src/components/home/IntroductionVideo/style.css
@@ -33,6 +33,48 @@
   background-size: 100%;
 }
 
+.video-placeholder {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  border: 0;
+  cursor: pointer;
+  background: transparent;
+}
+
+.video-play-button {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  display: flex;
+  width: 4rem;
+  height: 4rem;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9999px;
+  background: rgba(0, 0, 0, 0.72);
+  transform: translate(-50%, -50%);
+  transition:
+    transform 160ms ease,
+    background-color 160ms ease;
+}
+
+.video-play-button::before {
+  content: "";
+  display: block;
+  margin-left: 0.25rem;
+  border-top: 0.75rem solid transparent;
+  border-bottom: 0.75rem solid transparent;
+  border-left: 1.125rem solid #fff;
+}
+
+.video-placeholder:hover .video-play-button,
+.video-placeholder:focus-visible .video-play-button {
+  background: rgba(0, 0, 0, 0.86);
+  transform: translate(-50%, -50%) scale(1.06);
+}
+
 .video-background {
   position: absolute;
   top: 0;
diff --git a/src/components/shared/GlobalLayout.tsx b/src/components/shared/GlobalLayout.tsx
index e94fdf12a..92da8b808 100644
--- a/src/components/shared/GlobalLayout.tsx
+++ b/src/components/shared/GlobalLayout.tsx
@@ -23,6 +23,32 @@ const GlobalLayout: React.FC = () => {
     }
   }, [cookieConsent])
 
+  useEffect(() => {
+    if (typeof window === "undefined" || document.getElementById("chatbotscript")) return
+
+    const loadChatbot = () => {
+      const script = document.createElement("script")
+
+      script.id = "chatbotscript"
+      script.dataset.accountid = "CZPG9aVdtk59Tjz4SMTu8w=="
+      script.dataset.websiteid = "75VGI0NlBqessD4BQn2pFg=="
+      script.src = "https://app.robofy.ai/bot/js/common.js"
+      script.async = true
+
+      document.body.appendChild(script)
+    }
+
+    const idleWindow = window as Window & {
+      requestIdleCallback?: (callback: () => void) => number
+    }
+
+    if (idleWindow.requestIdleCallback) {
+      idleWindow.requestIdleCallback(loadChatbot)
+    } else {
+      window.setTimeout(loadChatbot, 1500)
+    }
+  }, [])
+
   return (
     <>
       <CookieConsentModal

From 2d1a7c9aa9e5022b06f27281db1b49ded241a4d8 Mon Sep 17 00:00:00 2001
From: Treasure520520 <203431274+Treasure520520@users.noreply.github.com>
Date: Thu, 14 May 2026 15:38:56 +0800
Subject: [PATCH 2/2] perf: gate chatbot script behind cookie consent

---
 src/components/shared/GlobalLayout.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/shared/GlobalLayout.tsx b/src/components/shared/GlobalLayout.tsx
index 92da8b808..649d065c8 100644
--- a/src/components/shared/GlobalLayout.tsx
+++ b/src/components/shared/GlobalLayout.tsx
@@ -24,7 +24,7 @@ const GlobalLayout: React.FC = () => {
   }, [cookieConsent])
 
   useEffect(() => {
-    if (typeof window === "undefined" || document.getElementById("chatbotscript")) return
+    if (typeof window === "undefined" || !cookieConsent?.accepted || document.getElementById("chatbotscript")) return
 
     const loadChatbot = () => {
       const script = document.createElement("script")
@@ -47,7 +47,7 @@ const GlobalLayout: React.FC = () => {
     } else {
       window.setTimeout(loadChatbot, 1500)
     }
-  }, [])
+  }, [cookieConsent?.accepted])
 
   return (
     <>